/* ================================================================
   Landing native desktop — adaptations >= 821 px de la base commune
   définie dans styles.css (source de contenu unique, mobile-first).
   ================================================================ */

@media (min-width:821px) {
  body {
    min-width:0;
    height:auto !important;
    overflow-x:hidden;
    background:#fffdfa;
  }

  .mobile-site {
    display:block;
    color:var(--encre);
    background:#fffdfa;
  }

  .mobile-site main [id] { scroll-margin-top:96px; }

  /* Le header passe en pleine largeur ; la navigation horizontale n'arrive
     qu'à partir de 1200 px (en dessous, les 8 entrées ne tiennent pas :
     le menu burger du mobile reste en service sur 821-1199). */
  .mobile-header {
    max-width:none;
    left:0;
    transform:none;
    padding:10px 28px;
  }
  .mobile-nav {
    left:auto;
    right:16px;
    width:min(380px, calc(100vw - 32px));
  }

  /* Hero */
  .mobile-hero {
    position:relative;
    min-height:720px;
    padding:88px max(28px, calc((100vw - 1240px) / 2));
    display:flex;
    align-items:center;
    overflow:hidden;
    background:url("assets/img/hero-desktop-20260720.webp") center/cover no-repeat;
  }

  .mobile-hero__veil {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(36,16,14,.78) 0%,rgba(36,16,14,.53) 44%,rgba(36,16,14,.25) 100%);
  }

  .mobile-hero__content {
    position:relative;
    z-index:1;
    width:100%;
    max-width:1240px;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr);
    grid-template-rows:auto auto auto auto auto;
    column-gap:72px;
    align-items:center;
    color:#fff;
  }

  .mobile-eyebrow { grid-column:1; }
  .mobile-hero h1 {
    grid-column:1;
    max-width:640px;
    font:500 clamp(52px,4.7vw,76px)/1.02 var(--serif);
    letter-spacing:-.035em;
  }
  .mobile-hero__content > p { grid-column:1; max-width:610px; font-size:18px; }
  .mobile-actions { grid-column:1; flex-direction:row; align-items:center; }
  .mobile-actions .mobile-button { min-width:220px; }
  .mobile-hero .mobile-proof { grid-column:1; font-size:12px; }
  .mobile-apercu {
    grid-column:2;
    grid-row:1 / 7;
    width:100%;
    margin:0;
    padding:20px;
    border-radius:28px;
  }
  .mobile-apercu__grid { gap:13px; }
  .mobile-apercu__grid article { min-height:108px; padding:18px; }
  .mobile-apercu__grid strong { font-size:30px; }
  .mobile-apercu__grid .k { font-size:12px; }

  /* Sections communes */
  .mobile-section {
    width:100%;
    padding:112px max(28px, calc((100vw - 1160px) / 2));
  }
  .mobile-section h2,
  .mobile-final h2 {
    max-width:820px;
    font:500 clamp(42px,4vw,62px)/1.08 var(--serif);
  }
  .mobile-section > p { max-width:790px; font-size:18px; }

  .mobile-intro { text-align:center; }
  .mobile-intro h2,
  .mobile-intro > p { margin-left:auto; margin-right:auto; }
  .mobile-benefices { grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; text-align:left; }
  .mobile-benefices article { min-height:170px; flex-direction:column; align-items:flex-start; padding:28px; }

  /* Modules */
  .mobile-modules { background:#f8efe4; }
  .mobile-modules > h2,
  .mobile-modules > p { margin-left:auto; margin-right:auto; text-align:center; }
  .mobile-modules > .mobile-kicker { text-align:center; }
  .mobile-modules__liste {
    grid-template-columns:repeat(3,1fr);
    align-items:start;
    gap:16px;
    margin-top:48px;
  }
  .mm { border-radius:22px; }
  .mm__toggle { min-height:86px; padding:16px 20px; }
  .mm__toggle .mobile-icone { width:54px; height:54px; }

  /* Assistant */
  .mobile-ai {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:88px;
    color:#fff;
    background:linear-gradient(120deg,#5b171e,#7b1e22);
  }
  .mobile-ai__visual { margin:0; padding:30px; }
  .mobile-ai__bubble,
  .mobile-ai__answer { padding:20px 22px; font-size:16px; }
  .mobile-ai h2 { color:#fff; }
  .mobile-ai > div:last-child > p { font-size:17px; }
  .mobile-list li { font-size:15px; }

  /* Offre */
  .mobile-offer {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:24px 32px;
    background:#faf3e8;
  }
  .mobile-offer > .mobile-kicker,
  .mobile-offer > h2,
  .mobile-offer > .mobile-offer__subtitle,
  .mobile-offer > .mobile-offer__dates {
    grid-column:1 / -1;
    justify-self:center;
    text-align:center;
  }
  .mobile-offer__pitch,
  .mobile-offer__card { margin-top:20px; padding:34px; }
  .mobile-primeurs {
    grid-column:1 / -1;
    margin-top:12px;
    padding:34px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:50px;
    align-items:center;
  }
  .mobile-primeurs h3,
  .mobile-primeurs__nom,
  .mobile-primeurs__prix,
  .mobile-primeurs__note { grid-column:1; }
  .mobile-primeurs .mobile-list { grid-column:2; grid-row:1 / 6; margin:0; }

  /* À propos */
  .mobile-apropos {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
    column-gap:80px;
    align-items:start;
  }
  .mobile-apropos > .mobile-kicker,
  .mobile-apropos > h2,
  .mobile-apropos > .mobile-fondateurs,
  .mobile-apropos > p { grid-column:1; }
  .mobile-fondateurs img { width:88px; height:88px; }
  .mobile-citation {
    grid-column:2;
    grid-row:1 / 10;
    align-self:stretch;
    min-height:570px;
    margin:0;
    padding:72px 52px;
    display:flex;
    align-items:flex-end;
    border-radius:30px;
    background:linear-gradient(rgba(40,12,14,.38),rgba(40,12,14,.68)),url("assets/img/vignes_2.webp") center/cover;
  }
  .mobile-citation blockquote { font-size:34px; }

  /* CTA final et footer */
  .mobile-final {
    padding:108px max(28px, calc((100vw - 900px) / 2));
    background:linear-gradient(rgba(65,19,22,.82),rgba(65,19,22,.93)),url("assets/img/vignes_2.webp") center/cover;
  }
  .mobile-final h2 { margin:auto; }
  .mobile-final .mobile-button { width:auto; min-width:310px; }

  .mobile-footer {
    padding:54px max(28px, calc((100vw - 1160px) / 2));
    display:grid;
    grid-template-columns:180px 1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:18px 42px;
    text-align:left;
  }
  .mobile-footer img { grid-row:1 / 3; }
  .mobile-footer div { justify-content:flex-start; margin:0; }
  .mobile-footer__social { justify-content:flex-end !important; }
  .mobile-footer__mail { margin:0; }
  .mobile-footer p { margin:0; text-align:right; }

  /* La modale conserve son interface desktop. */
  .modal { padding:24px; align-items:center; }
  .modal__boite {
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    width:min(1120px,96vw);
    max-height:92vh;
    border-radius:28px;
  }
  .modal__aside { padding:52px 46px; }
  .modal__titre { padding-right:0; font-size:34px; }
  .modal__soustitre { margin-bottom:30px; font-size:16px; }
  .modal__avantages { display:grid; }
  .modal__note { padding-top:18px; font-size:13px; }
  .modal__form-wrap { padding:48px 42px; }
  .modal__form-titre { font-size:28px; }
  .modal__form-aide { margin-bottom:26px; font-size:14px; }
  .modal__grid { grid-template-columns:1fr 1fr; gap:18px; }
  .modal__pied { align-items:center; flex-direction:row; }
  .modal__submit { width:auto; min-height:0; }
  .modal__lock { text-align:left; }
}

@media (min-width:821px) and (max-width:1080px) {
  .mobile-hero__content { grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); column-gap:36px; }
  .mobile-hero h1 { font-size:48px; }
  .mobile-actions { flex-direction:column; align-items:stretch; }
  .mobile-apropos { grid-template-columns:1fr 1fr; column-gap:42px; }
}

/* Navigation horizontale : uniquement quand les 8 entrées tiennent. */
@media (min-width:1200px) {
  .mobile-header {
    position:sticky;
    top:0;
    height:88px;
    padding:10px max(28px, calc((100vw - 1240px) / 2));
    gap:28px;
    border-bottom:1px solid rgba(123,30,34,.1);
  }

  .mobile-brand { width:170px; height:68px; flex:0 0 auto; }
  .mobile-brand img { width:158px; max-height:66px; }
  .mobile-menu-btn { display:none; }

  .mobile-nav {
    position:static;
    width:auto;
    padding:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .mobile-nav a,
  .mobile-nav button {
    padding:11px 12px;
    border:0;
    border-radius:999px;
    background:none;
    color:var(--bordeaux);
    font:600 13px/1.2 var(--sans);
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
  }

  .mobile-nav a:hover,
  .mobile-nav button:not(.mobile-nav-cta):hover {
    background:rgba(123,30,34,.06);
  }

  .mobile-nav .mobile-nav-login {
    margin-left:8px;
    border:1px solid rgba(123,30,34,.22);
  }

  .mobile-nav .mobile-nav-cta {
    margin:0 0 0 4px;
    padding:13px 20px;
    color:#fff;
    background:var(--bordeaux);
  }
}

/* ================================================================
   Lot 5 — fidélité visuelle aux exports Figma, sans image de texte.
   Ces règles volontairement tardives remplacent la première passe
   desktop tout en conservant le HTML sémantique et les interactions.
   ================================================================ */
@media (min-width:821px) {
  .mobile-hero{
    min-height:760px;
    padding-top:70px;
    padding-bottom:70px;
    background-position:center 43%;
  }
  .mobile-hero__veil{
    background:linear-gradient(90deg,rgba(255,250,244,.18),rgba(255,250,244,.06) 55%,rgba(73,31,25,.1));
  }
  .mobile-hero__content{
    max-width:1320px;
    grid-template-columns:minmax(460px,.88fr) minmax(470px,1.12fr);
    grid-template-rows:1fr;
    gap:54px;
    color:var(--encre);
  }
  .hero-copy{
    grid-column:1;
    padding:52px 48px 46px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:4px 52px 4px 4px;
    background:rgba(255,252,247,.93);
    box-shadow:0 28px 70px rgba(65,30,25,.16);
    backdrop-filter:blur(7px);
  }
  .mobile-hero h1{
    max-width:560px;
    color:var(--bordeaux);
    font-size:clamp(48px,4.15vw,66px);
    line-height:1.02;
  }
  .hero-copy > p{ max-width:550px; color:#5c5854; font-size:17px; line-height:1.62; }
  .mobile-hero .mobile-proof{ color:#716b65; }
  .mobile-hero .mobile-button--light{ color:var(--bordeaux); border-color:rgba(123,30,34,.28); background:#fff; backdrop-filter:none; }
  .mobile-apercu{
    grid-column:2;
    grid-row:1;
    padding:25px;
    border-radius:5px 5px 52px 5px;
    background:rgba(255,255,255,.94);
    box-shadow:0 30px 75px rgba(49,25,21,.19);
  }
  .mobile-apercu__barre{ margin-bottom:18px; }
  .mobile-apercu__grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .mobile-apercu__grid article{ min-height:118px; border-radius:4px; background:#fffdf9; border-color:rgba(123,30,34,.13); }
  .mobile-apercu__grid .large{ grid-column:1 / -1; }

  .mobile-intro{ padding-top:118px; padding-bottom:100px; }
  .mobile-intro h2{ max-width:900px; color:var(--bordeaux); }
  .mobile-benefices{ gap:24px; max-width:1180px; margin:58px auto 0; }
  .mobile-benefices article{
    min-height:150px;
    flex-direction:row;
    align-items:center;
    gap:22px;
    padding:24px 25px;
    border:1.5px solid var(--or);
    border-radius:3px 28px 3px 3px;
    box-shadow:none;
  }
  .mobile-benefices .mobile-icone{ width:76px; height:76px; background:var(--bordeaux); }
  .mobile-benefices .mobile-icone svg{ width:38px; height:38px; }
  .mobile-benefices h3{ color:var(--bordeaux); font:500 25px/1.15 var(--serif); }
  .mobile-benefices p{ font-size:14px; }

  .mobile-modules{ padding-left:max(32px,calc((100vw - 1360px)/2)); padding-right:max(32px,calc((100vw - 1360px)/2)); background:#fffdfa; }
  .mobile-modules__liste{ grid-template-columns:repeat(3,1fr); gap:16px; max-width:1360px; margin-left:auto; margin-right:auto; }
  .mm{ position:relative; overflow:visible; border:1.5px solid rgba(123,30,34,.3); border-radius:3px 30px 3px 3px; box-shadow:none; }
  .mm__toggle{ min-height:180px; flex-direction:column; justify-content:center; gap:20px; padding:24px 12px; text-align:center; }
  .mm__toggle .mobile-icone{ width:82px; height:82px; background:#f5e8d6; }
  .mm__toggle .mobile-icone svg{ width:40px; height:40px; }
  .mm__nom{ flex:0; color:var(--bordeaux); font:500 18px/1.2 var(--serif); }
  .mm__toggle::after{ position:absolute; right:13px; bottom:15px; }
  .mm__panneau{ position:absolute; z-index:12; top:calc(100% + 8px); left:0; width:max(100%,220px); padding:18px; border:1px solid rgba(123,30,34,.16); border-radius:12px; background:#fff; box-shadow:0 18px 40px rgba(65,22,24,.16); }

  .mobile-ai{
    min-height:720px;
    grid-template-columns:minmax(0,.9fr) minmax(460px,1.1fr);
    gap:64px;
    background:linear-gradient(90deg,rgba(30,63,39,.17),rgba(19,51,32,.35)),url("assets/img/pourquoi-fond.webp") center/cover;
  }
  .mobile-ai__visual{
    min-height:440px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:8px solid rgba(255,255,255,.55);
    border-radius:3px 42px 3px 3px;
    background:rgba(255,253,249,.94);
    box-shadow:0 28px 65px rgba(18,45,27,.25);
  }
  .mobile-ai__entete{ color:var(--bordeaux); }
  .mobile-ai__bubble{ border:1px solid rgba(123,30,34,.12); box-shadow:0 10px 24px rgba(65,22,24,.08); }
  .mobile-ai__answer{ color:#fff; background:var(--bordeaux); border-color:var(--bordeaux); }
  .mobile-ai > div:last-child{
    padding:54px 48px;
    border-radius:42px 3px 3px 3px;
    color:var(--encre);
    background:rgba(255,248,237,.9);
    backdrop-filter:blur(7px);
  }
  .mobile-ai h2{ color:var(--bordeaux); }
  .mobile-ai > div:last-child > p{ color:#5d5853; }
  .mobile-ai .mobile-list{ color:var(--encre); }

  .mobile-offer{ padding-top:118px; padding-bottom:118px; gap:28px 38px; background:#fffdfc; }
  .mobile-offer__pitch{ border-radius:0; box-shadow:none; }
  .mobile-offer__card{ border-radius:0; border:1px solid rgba(123,30,34,.12); box-shadow:0 4px 4px rgba(0,0,0,.14); }
  .mobile-primeurs{ border-radius:0; }

  .mobile-apropos{
    min-height:760px;
    padding-top:90px;
    padding-bottom:90px;
    grid-template-columns:minmax(500px,.95fr) minmax(400px,1.05fr);
    align-items:center;
    background:linear-gradient(90deg,rgba(40,17,16,.18),rgba(40,17,16,.4)),url("assets/img/vignes_2.webp") center/cover;
  }
  .mobile-apropos__carte{
    grid-column:1;
    padding:48px;
    border-radius:3px 42px 3px 3px;
    background:rgba(255,249,238,.94);
    box-shadow:0 28px 70px rgba(35,15,14,.2);
  }
  .mobile-apropos__carte h2{ font-size:clamp(39px,3.4vw,54px); }
  .mobile-apropos__carte > p{ font-size:14px; line-height:1.55; }
  .mobile-citation{
    grid-column:2;
    grid-row:1;
    min-height:0;
    margin:0;
    padding:70px;
    align-self:center;
    background:none;
  }
  .mobile-citation blockquote{ padding-left:25px; color:#fff; font-size:clamp(34px,3.2vw,48px); text-shadow:0 3px 24px rgba(0,0,0,.25); }

  .mobile-faq{ padding-top:112px; padding-bottom:112px; }
  .mobile-faq__grid{ grid-template-columns:1fr 1fr; gap:16px 22px; max-width:1120px; margin:50px auto 0; }
  .mobile-faq details{ border-radius:3px 18px 3px 3px; }
  .mobile-faq summary{ min-height:76px; display:flex; align-items:center; padding:22px 62px 22px 24px; font-size:16px; }

  .mobile-news{ padding-top:110px; padding-bottom:110px; }
  .mobile-news__grid{ grid-template-columns:repeat(3,1fr); gap:22px; max-width:1180px; margin:50px auto 0; }
  .mobile-news__card{ min-height:390px; border-radius:3px 34px 3px 3px; padding:34px; }
  .mobile-news__card h3{ font-size:31px; }

  .mobile-final{ padding-top:78px; padding-bottom:78px; }
}

@media (min-width:1200px){
  .mobile-modules__liste{ grid-template-columns:repeat(9,1fr); gap:11px; }
  .mm__toggle{ min-height:250px; padding:28px 8px; }
  .mm__toggle .mobile-icone{ width:74px; height:74px; }
  .mm__nom{ font-size:16px; }
  .mobile-nav button[data-cookies],
  .mobile-nav a[href="#mobile-assistant"]{ display:none; }
}

@media (min-width:821px) and (max-width:1080px){
  .mobile-hero{ height:auto; min-height:0; }
  .mobile-hero__content{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .hero-copy{ grid-column:1; padding:40px; }
  .mobile-apercu{ grid-column:1; grid-row:auto; }
  .mobile-apropos{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .mobile-apropos__carte{ grid-column:1; }
  .mobile-citation{ grid-column:1; grid-row:auto; padding:46px; }
}