/* =========================================================
   Mon Chai — styles de la landing (base native mobile-first).
   Palette et typographies de la charte ; les adaptations >= 821 px
   vivent dans native-desktop.css.
   ========================================================= */

:root{
  --creme:      #FCF8F3;   /* fond header */
  --or:         #DFB780;   /* doré : boutons, ornement */
  --bordeaux:   #7B1E22;   /* texte du bouton clair */
  --bordeaux-f: #6F1D2D;   /* chiffres, jauges, filets de bouton */
  --encre:      #211B18;   /* titre */
  --gris:       #6E625C;   /* texte courant */
  --carte:      #FFFDFC;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:#FFFDFC;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* =========================================================
   POP-UP inscription bêta-test
   ========================================================= */
.modal{
  position:fixed; inset:0;
  z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }

.modal__fond{
  position:absolute; inset:0;
  background:rgba(33,27,24,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  animation:modal-fond .25s ease both;
}
@keyframes modal-fond{ from{opacity:0} to{opacity:1} }

.modal__boite{
  position:relative;
  display:grid;
  grid-template-columns:38% 62%;
  width:min(1140px, 96vw);
  max-height:94vh;
  overflow:auto;
  background:#fff;
  border-radius:26px;
  box-shadow:0 40px 90px rgba(33,27,24,.35);
  animation:modal-boite .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes modal-boite{
  from{ opacity:0; transform:translateY(24px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* ---- Colonne gauche (beige) ---- */
.modal__aside{
  background:#FAF6EE;
  padding:48px 40px;
  display:flex; flex-direction:column;
}
.modal__titre{
  font-family:var(--sans);
  font-size:34px; line-height:1.12; font-weight:700;
  color:var(--bordeaux); margin-bottom:18px;
}
.modal__titre span{ color:var(--or); }
.modal__soustitre{
  font-family:var(--sans); font-size:16px; line-height:1.55;
  color:var(--bordeaux); opacity:.9; margin-bottom:30px;
}
.modal__avantages{ list-style:none; display:flex; flex-direction:column; gap:20px; }
.modal__avantages li{ display:flex; gap:14px; align-items:flex-start; }
.modal__avantages strong{ display:block; font-size:16px; color:var(--encre); margin-bottom:3px; }
.modal__avantages div{ font-size:14px; line-height:1.45; color:var(--gris); }
.modal__check{
  flex:0 0 auto; position:relative;
  width:34px; height:34px; border-radius:50%;
  background:var(--bordeaux);
}
.modal__check::after{
  content:""; position:absolute; left:11px; top:9px;
  width:8px; height:14px;
  border:solid #fff; border-width:0 2.6px 2.6px 0;
  transform:rotate(42deg);
}
.modal__note{
  margin-top:auto; padding-top:26px;
  font-size:13px; line-height:1.5; color:var(--gris);
}

/* ---- Colonne droite (formulaire) ---- */
.modal__form-wrap{ padding:44px 44px 40px; }
.modal__form-titre{
  font-family:var(--sans); font-size:28px; font-weight:700;
  color:var(--bordeaux); margin-bottom:8px;
}
.modal__form-aide{ font-size:14px; color:var(--gris); margin-bottom:26px; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.modal__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.champ{ display:flex; flex-direction:column; gap:7px; }
.champ--full{ grid-column:1 / -1; }
.champ label{ font-size:14px; font-weight:600; color:var(--encre); }
.champ label b{ color:var(--bordeaux); font-weight:700; }
.champ small{ font-size:11.5px; color:var(--gris); }

.champ input,
.champ select,
.champ textarea{
  width:100%; padding:13px 15px;
  font-family:var(--sans); font-size:15px; color:var(--encre);
  border:1.5px solid rgba(111,29,45,.22); border-radius:12px; background:#fff;
  transition:border-color .2s ease;
}
.champ textarea{ resize:vertical; min-height:88px; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus{ outline:none; border-color:var(--bordeaux); }
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"]{ border-color:#c0392b; }

.modal__consent{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:22px; font-size:12.5px; line-height:1.5; color:var(--gris); cursor:pointer;
}
.modal__consent input{ margin-top:2px; flex:0 0 auto; accent-color:var(--bordeaux); }
.modal__consent a{ color:var(--bordeaux); font-weight:600; }

.modal__message{ font-size:14px; line-height:1.4; margin:14px 0 0; }
.modal__message.ok{ color:#2e7d32; }
.modal__message.err{ color:#c0392b; }

.modal__pied{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:22px; flex-wrap:wrap;
}
.modal__lock{ font-size:13px; color:var(--gris); }
.modal__submit{
  padding:15px 26px; border:0; border-radius:999px;
  background:var(--bordeaux); color:#fff;
  font-family:var(--sans); font-size:16px; font-weight:700; cursor:pointer;
  transition:background-color .2s ease, opacity .2s ease;
}
.modal__submit:hover{ background:#671519; }
.modal__submit:disabled{ opacity:.6; cursor:default; }

/* message de confirmation */
.modal__succes{ text-align:center; padding:40px 10px; }
.modal__succes[hidden]{ display:none; }
.modal__succes-check{
  width:66px; height:66px; margin:0 auto 22px; border-radius:50%;
  background:var(--bordeaux); position:relative;
}
.modal__succes-check::after{
  content:""; position:absolute; left:24px; top:19px;
  width:14px; height:26px; border:solid #fff; border-width:0 3.4px 3.4px 0;
  transform:rotate(42deg);
}
.modal__succes p{ font-size:18px; line-height:1.55; color:var(--bordeaux); }
.modal__noscript{ margin-top:16px; font-size:14px; color:var(--gris); }
.modal__noscript a{ color:var(--bordeaux); }

.modal__fermer{
  position:absolute; top:14px; right:18px; z-index:2;
  width:42px; height:42px; border:0; border-radius:50%;
  background:rgba(33,27,24,.06); color:var(--bordeaux);
  font-size:28px; line-height:1; cursor:pointer;
  transition:background-color .2s ease;
}
.modal__fermer:hover{ background:rgba(33,27,24,.12); }

[data-beta]{ cursor:pointer; }

/* =========================================================
   POP-UP des documents légaux
   ========================================================= */
.legal-modal{
  position:fixed; inset:0; z-index:305;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.legal-modal[hidden]{ display:none; }
.legal-modal__fond{
  position:absolute; inset:0;
  background:rgba(33,27,24,.66);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  animation:modal-fond .2s ease both;
}
.legal-modal__boite{
  position:relative; width:min(1040px,96vw); height:min(880px,92vh);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(223,183,128,.52); border-radius:26px;
  background:#fffdfb; box-shadow:0 42px 100px rgba(33,27,24,.42);
  animation:modal-boite .28s cubic-bezier(.2,.9,.3,1) both;
}
.legal-modal__entete{
  flex:0 0 auto; min-height:96px; padding:14px 18px 14px 24px;
  display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:18px;
  border-bottom:1px solid rgba(223,183,128,.5);
  background:linear-gradient(115deg,#fffaf4 0%,#f8ecdc 100%);
}
.legal-modal__entete > img{
  width:82px; height:55px; object-fit:contain; object-position:left center;
}
.legal-modal__titres span{
  display:block; margin-bottom:3px; color:var(--or);
  font:700 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
}
.legal-modal__titres h2{
  margin:0; color:var(--bordeaux);
  font:500 clamp(23px,2.2vw,31px)/1.1 var(--serif);
}
.legal-modal__actions{ display:flex; align-items:center; gap:12px; }
.legal-modal__actions > a{
  min-height:42px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(123,30,34,.3); border-radius:999px;
  color:var(--bordeaux); background:rgba(255,255,255,.68);
  font:700 12px/1 var(--sans); text-decoration:none;
}
.legal-modal__actions > a:hover{ background:#fff; border-color:var(--bordeaux); }
.legal-modal__fermer{
  width:44px; height:44px; display:grid; place-items:center;
  border:0; border-radius:50%; color:#fff; background:var(--bordeaux);
  font:300 29px/1 var(--sans); cursor:pointer;
}
.legal-modal__fermer:hover{ background:#671519; }
.legal-modal__actions > a:focus-visible,
.legal-modal__fermer:focus-visible{ outline:3px solid var(--or); outline-offset:3px; }
.legal-modal iframe{
  flex:1 1 auto; width:100%; min-height:0; border:0; background:#fffdfb;
}

@media (max-width:600px){
  .legal-modal{ padding:0; }
  .legal-modal__boite{ width:100%; height:100svh; max-height:none; border:0; border-radius:0; }
  .legal-modal__entete{ min-height:76px; padding:10px 12px; grid-template-columns:58px 1fr auto; gap:10px; }
  .legal-modal__entete > img{ width:56px; height:42px; }
  .legal-modal__titres span{ font-size:8.5px; }
  .legal-modal__titres h2{ font-size:18px; }
  .legal-modal__actions{ gap:7px; }
  .legal-modal__actions > a{ min-height:38px; padding:0 11px; font-size:10px; }
  .legal-modal__fermer{ width:40px; height:40px; font-size:26px; }
}

/* Base native commune à toutes les tailles ; les améliorations desktop sont
   regroupées dans native-desktop.css. */
@media (min-width:0px){
  body{ min-width:0; height:auto !important; overflow-x:hidden; }
  .mobile-site{ display:block; color:var(--encre); background:#fffdfa; }
  /* les ancres de section s'arrêtent sous le header fixe (72px) */
  .mobile-site main [id]{ scroll-margin-top:84px; }

  .mobile-header{
    position:fixed; top:0; left:50%; z-index:100;
    width:100%; max-width:500px;
    transform:translateX(-50%);
    height:72px; padding:10px 18px;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(252,248,243,.96); border-bottom:1px solid rgba(123,30,34,.09);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  .mobile-brand{ display:flex; align-items:center; width:116px; height:52px; overflow:visible; }
  .mobile-brand img{ display:block; width:108px; height:auto; max-height:52px; object-fit:contain; transform:none; }
  .mobile-menu-btn{
    width:44px; height:44px; padding:11px 9px; border:0; border-radius:50%;
    background:var(--bordeaux); display:flex; flex-direction:column; justify-content:center; gap:5px;
    font:inherit;
  }
  .mobile-menu-btn > span:not(.sr-only){ width:22px; height:2px; margin:auto; border-radius:2px; background:#fff; transition:.25s ease; }
  .mobile-menu-btn[aria-expanded="true"] > span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mobile-menu-btn[aria-expanded="true"] > span:nth-child(2){ opacity:0; }
  .mobile-menu-btn[aria-expanded="true"] > span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mobile-nav{
    position:absolute; left:12px; right:12px; top:66px; padding:12px;
    display:flex; flex-direction:column; gap:2px;
    background:#fff; border:1px solid rgba(123,30,34,.12); border-radius:18px;
    box-shadow:0 20px 45px rgba(33,27,24,.16);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s ease;
  }
  .mobile-nav.est-ouvert{ opacity:1; visibility:visible; transform:none; }
  .mobile-nav a, .mobile-nav button{ padding:13px 15px; border:0; border-radius:12px; background:none; text-align:left; text-decoration:none; color:var(--bordeaux); font:600 15px/1.2 var(--sans); }
  .mobile-nav .mobile-nav-cta{ margin-top:5px; color:#fff; text-align:center; background:var(--bordeaux); }

  .mobile-hero{
    position:relative; min-height:calc(100svh - 72px); padding:clamp(96px,16vh,150px) 22px 42px;
    display:flex; align-items:flex-end; overflow:hidden;
    background:url("assets/img/hero-mobile-20260720.webp") 61% center/cover no-repeat;
  }
  .mobile-hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(31,16,12,.42) 0%,rgba(42,18,17,.34) 38%,rgba(42,18,17,.88) 100%); }
  .mobile-hero__content{ position:relative; z-index:1; max-width:560px; color:#fff; }
  .mobile-eyebrow, .mobile-kicker{ display:block; margin-bottom:13px; color:var(--or); font:700 12px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
  .mobile-hero h1{ max-width:520px; font:500 clamp(38px,10.5vw,58px)/1.02 var(--serif); letter-spacing:-.035em; }
  .mobile-hero__content > p{ max-width:520px; margin-top:20px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.88); }
  .mobile-actions{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:28px; }
  .mobile-button{
    min-height:52px; padding:15px 20px; border:1px solid transparent; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    font:700 15px/1.25 var(--sans); text-align:center; text-decoration:none; cursor:pointer;
  }
  .mobile-button--gold{ color:#fff; background:var(--or); box-shadow:0 12px 28px rgba(0,0,0,.18); }
  .mobile-button--light{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); backdrop-filter:blur(8px); }
  .mobile-hero .mobile-proof{ display:flex; flex-wrap:wrap; gap:5px 9px; margin-top:16px; font-size:11px; color:rgba(255,255,255,.72); }
  .mobile-proof span{ color:var(--or); }

  /* Aperçu produit : mini tableau de bord en verre dépoli, comme la maquette */
  .mobile-apercu{
    margin-top:30px; padding:14px;
    background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9);
    border-radius:20px; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
    box-shadow:0 20px 56px rgba(0,0,0,.13);
  }
  .mobile-apercu__barre{ display:flex; align-items:center; gap:6px; margin-bottom:11px; }
  .mobile-apercu__barre i{ width:9px; height:9px; border-radius:50%; }
  .mobile-apercu__barre i:nth-child(1){ background:#E8C58A; }
  .mobile-apercu__barre i:nth-child(2){ background:#DDE4C2; }
  .mobile-apercu__barre i:nth-child(3){ background:rgba(111,29,45,.25); }
  .mobile-apercu__barre span{ margin-left:auto; color:var(--gris); font:700 10.5px/1 var(--sans); }
  .mobile-apercu__grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .mobile-apercu__grid article{
    padding:11px 13px; background:#fff;
    border:1px solid rgba(33,27,24,.12); border-radius:14px;
  }
  .mobile-apercu__grid .large{ grid-column:1 / -1; }
  .mobile-apercu__grid .k{ display:block; color:var(--gris); font-size:11px; line-height:1.35; }
  .mobile-apercu__grid strong{ display:block; margin:2px 0; color:var(--bordeaux-f); font-size:21px; line-height:1.1; font-weight:700; }
  .mobile-apercu .jauge{ display:block; height:6px; margin-top:8px; border-radius:3px; background:rgba(111,29,45,.1); overflow:hidden; }
  .mobile-apercu .jauge span{ display:block; height:100%; border-radius:3px; background:var(--bordeaux-f); }

  .mobile-section{ padding:76px 22px; }
  .mobile-section h2, .mobile-final h2{ font:500 clamp(34px,9vw,48px)/1.08 var(--serif); letter-spacing:-.025em; color:var(--bordeaux); }
  .mobile-section > p{ margin-top:17px; color:var(--gris); font-size:16px; line-height:1.65; }
  .mobile-intro{ background:#fffdfa; }

  /* Icône : pastille crème + pictogramme trait bordeaux (esprit maquette) */
  .mobile-icone{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:50%;
    background:#F4E7D5; color:var(--bordeaux);
  }
  .mobile-icone svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

  /* Bénéfices : Centraliser / Suivre / Gagner du temps */
  .mobile-benefices{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:34px; }
  .mobile-benefices article{
    display:flex; gap:16px; align-items:center;
    padding:20px; background:#fff;
    border:1px solid rgba(223,183,128,.42); border-radius:20px;
    box-shadow:0 12px 30px rgba(75,35,31,.05);
  }
  .mobile-benefices .mobile-icone{ background:var(--bordeaux-f); color:#F4E7D5; }
  .mobile-benefices h3{ color:var(--encre); font:700 16px/1.2 var(--sans); }
  .mobile-benefices p{ margin-top:5px; color:var(--gris); font-size:14px; line-height:1.45; }

  /* Modules : 9 accordéons, taxonomie de la maquette */
  .mobile-modules__liste{ margin-top:30px; display:grid; gap:9px; }
  .mm{
    background:#fff; border:1px solid rgba(223,183,128,.42); border-radius:18px;
    box-shadow:0 10px 26px rgba(75,35,31,.045);
    overflow:hidden;
  }
  .mm__toggle{
    width:100%; display:flex; align-items:center; gap:14px;
    padding:12px 16px; border:0; background:none; cursor:pointer;
    text-align:left;
    -webkit-tap-highlight-color:transparent;
  }
  .mm__toggle .mobile-icone{ width:46px; height:46px; }
  .mm__toggle .mobile-icone svg{ width:24px; height:24px; }
  .mm__nom{ flex:1; color:var(--bordeaux); font:700 16px/1.25 var(--sans); }
  /* chevron : trait bordeaux qui pivote à l'ouverture */
  .mm__toggle::after{
    content:""; flex:0 0 auto; width:9px; height:9px; margin-right:4px;
    border-right:2.2px solid var(--or); border-bottom:2.2px solid var(--or);
    transform:rotate(45deg) translateY(-2px);
    transition:transform .25s ease;
  }
  .mm__toggle[aria-expanded="true"]::after{ transform:rotate(225deg) translateY(-2px); }
  .mm__toggle:focus-visible{ outline:3px solid var(--bordeaux); outline-offset:-3px; border-radius:18px; }
  .mm__panneau{ padding:0 16px 16px 76px; }
  .mm__panneau[hidden]{ display:none; }
  .mm__panneau ul{ list-style:none; display:grid; gap:7px; }
  .mm__panneau li{ position:relative; padding-left:17px; color:var(--gris); font-size:14px; line-height:1.4; }
  .mm__panneau li::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--or); }

  .mobile-ai{ padding-top:72px; color:#fff; background:var(--bordeaux); }
  .mobile-ai h2{ color:#fff; }
  .mobile-ai > div:last-child > p{ margin-top:18px; color:rgba(255,255,255,.72); line-height:1.65; }
  .mobile-ai__visual{ position:relative; margin-bottom:52px; padding:20px 17px; border:1px solid rgba(255,255,255,.14); border-radius:28px; background:radial-gradient(circle at 90% 0%,rgba(223,183,128,.24),transparent 45%),#681c24; box-shadow:0 24px 55px rgba(31,8,11,.28); }
  .mobile-ai__entete{ display:flex; align-items:center; gap:9px; margin-bottom:20px; color:#fff; font:700 13px/1 var(--sans); }
  .mobile-ai__entete span{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--or); color:#fff; font-size:11px; }
  .mobile-ai__bubble, .mobile-ai__answer{ max-width:88%; padding:16px 18px; border-radius:17px; font-size:14px; line-height:1.45; }
  .mobile-ai__bubble{ margin-left:auto; color:var(--bordeaux); background:#fff; border-bottom-right-radius:5px; }
  .mobile-ai__answer{ margin-top:14px; color:#fff; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.13); border-bottom-left-radius:5px; }
  .mobile-list{ margin-top:27px; list-style:none; display:flex; flex-direction:column; gap:14px; }
  .mobile-list li{ position:relative; padding-left:29px; font-size:14px; line-height:1.5; }
  .mobile-list li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%; color:var(--bordeaux); background:var(--or); text-align:center; font:bold 12px/20px var(--sans); }

  .mobile-offer{ background:#faf3e8; }
  .mobile-offer__dates{ margin-top:14px !important; color:var(--bordeaux) !important; font:500 15px/1.3 var(--serif) !important; }

  /* Bandeau doré « Testez, contribuez, avancez avec nous » + 3 étapes */
  .mobile-offer__pitch{ margin-top:26px; padding:24px 20px; border-radius:24px; background:var(--or); color:#fff; box-shadow:0 18px 46px rgba(148,102,42,.22); }
  .mobile-offer__pitch h3{ font:700 22px/1.15 var(--sans); }
  .mobile-offer__pitch > p{ margin-top:10px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.94); }
  .mobile-offer__pitch ol{ list-style:none; counter-reset:etape; display:grid; gap:9px; margin-top:18px; }
  .mobile-offer__pitch li{
    counter-increment:etape;
    position:relative; padding:13px 15px 13px 52px;
    background:#fff; border-radius:12px;
    color:var(--gris); font-size:13px; line-height:1.4;
  }
  .mobile-offer__pitch li::before{
    content:counter(etape);
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    width:26px; height:26px; border-radius:50%;
    background:var(--bordeaux); color:#fff;
    font:700 13px/26px var(--sans); text-align:center;
  }
  .mobile-offer__pitch li strong{ display:block; margin-bottom:2px; color:var(--encre); font-size:14px; }

  .mobile-offer__card{ margin-top:18px; padding:28px 22px; border-radius:24px; background:#fff; box-shadow:0 18px 55px rgba(72,27,30,.09); }
  .mobile-offer__price{ position:relative; padding-bottom:20px; border-bottom:1px solid rgba(123,30,34,.1); }
  .mobile-offer__price strong{ display:block; color:var(--bordeaux); font:500 58px/1 var(--serif); }
  .mobile-offer__badge{ position:absolute; right:0; top:4px; padding:5px 11px; border-radius:999px; background:#F4E7D5; color:var(--bordeaux); font:700 11px/1 var(--sans); }
  .mobile-offer__mention{ display:block; margin-top:9px; color:var(--gris); font-size:12.5px; font-weight:600; }
  .mobile-offer__inclus{ margin-top:20px; color:var(--encre); font:700 14px/1.3 var(--sans); }
  .mobile-offer .mobile-list{ margin-top:15px; color:var(--encre); }
  .mobile-offer .mobile-button{ width:100%; margin-top:28px; }
  .mobile-offer small{ display:block; margin-top:13px; color:var(--gris); text-align:center; line-height:1.45; }

  /* Et après le 1er octobre ? — offre Primeurs */
  .mobile-primeurs{ margin-top:34px; padding:26px 22px; border:1.5px solid rgba(223,183,128,.55); border-radius:24px; background:#fffdfa; }
  .mobile-primeurs h3{ color:var(--bordeaux); font:500 21px/1.2 var(--serif); }
  .mobile-primeurs__nom{ position:relative; display:inline-block; margin-top:18px; padding-bottom:8px; color:var(--bordeaux); font:500 24px/1.1 var(--serif); }
  .mobile-primeurs__nom::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; border-radius:2px; background:var(--or); }
  .mobile-primeurs__prix{ margin-top:12px; color:var(--bordeaux-f); font:700 34px/1 var(--sans); }
  .mobile-primeurs__note{ margin-top:6px; color:var(--gris); font-size:13px; }
  .mobile-primeurs .mobile-list{ margin-top:18px; color:var(--encre); }

  /* À propos : fondateurs + citation */
  .mobile-apropos{ background:#fffdfa; }
  .mobile-apropos > p{ margin-top:17px; color:var(--gris); font-size:15px; line-height:1.65; }
  .mobile-fondateurs{ display:flex; gap:14px; margin-top:26px; }
  .mobile-fondateurs img{ width:74px; height:74px; border-radius:50%; border:2.5px solid var(--or); object-fit:cover; }
  .mobile-france{ color:var(--bordeaux) !important; font-size:13.5px !important; font-weight:600; }
  .mobile-france strong{ color:inherit; font-weight:700; }
  .mobile-signature{ margin-top:22px !important; color:var(--bordeaux) !important; font:500 19px/1.3 var(--serif) !important; }
  .mobile-signature span{ display:block; margin-top:4px; color:var(--gris); font:400 13px/1.3 var(--sans); }
  .mobile-citation{ margin:30px -22px -76px; padding:64px 30px 70px; background:linear-gradient(rgba(40,12,14,.55),rgba(40,12,14,.72)),url("assets/img/vignes-mobile.jpg") center/cover; }
  .mobile-citation blockquote{ position:relative; padding-left:18px; border-left:3px solid var(--or); color:#fff; font:500 italic clamp(22px,6vw,30px)/1.35 var(--serif); }

  .mobile-final{ padding:76px 22px; text-align:center; color:#fff; background:linear-gradient(rgba(65,19,22,.86),rgba(65,19,22,.93)),url("assets/img/vignes-mobile.jpg") center/cover; }
  .mobile-final h2{ color:#fff; }
  .mobile-final .mobile-button{ width:100%; margin-top:28px; }
  .mobile-final > a{ display:inline-block; margin-top:18px; color:rgba(255,255,255,.8); font-size:14px; }
  .mobile-footer{ padding:40px 22px 34px; text-align:center; background:#321012; }
  .mobile-footer img{ width:145px; height:84px; object-fit:contain; filter:brightness(0) invert(1); opacity:.9; }
  .mobile-footer div{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 20px; margin-top:12px; }
  .mobile-footer a, .mobile-footer button{ padding:0; border:0; color:rgba(255,255,255,.72); background:none; font:13px var(--sans); }
  .mobile-footer__social{ gap:12px !important; }
  .mobile-footer__social a{
    display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(255,255,255,.5); color:#fff;
  }
  .mobile-footer__social svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
  .mobile-footer__social svg path, .mobile-footer__social .social-dot{ fill:currentColor; stroke:none; }
  .mobile-footer__mail{ display:inline-block; margin-top:18px; color:#fff !important; font:600 14px var(--sans) !important; }
  .mobile-footer p{ margin-top:22px; color:rgba(255,255,255,.42); font-size:11px; }

  .modal{ padding:10px; align-items:flex-end; }
  .modal__boite{ grid-template-columns:1fr; width:100%; max-height:calc(100svh - 20px); border-radius:22px 22px 14px 14px; }
  .modal__aside{ padding:30px 24px 26px; }
  .modal__titre{ padding-right:35px; font-size:28px; }
  .modal__soustitre{ margin-bottom:18px; font-size:14px; }
  .modal__avantages{ display:none; }
  .modal__note{ padding-top:0; font-size:12px; }
  .modal__form-wrap{ padding:28px 20px 32px; }
  .modal__form-titre{ font-size:23px; }
  .modal__form-aide{ margin-bottom:20px; font-size:13px; line-height:1.45; }
  .modal__grid{ grid-template-columns:1fr; }
  .modal__grid{ gap:15px; }
  .champ input, .champ select, .champ textarea{ min-height:48px; font-size:16px; }
  .modal__pied{ align-items:stretch; flex-direction:column-reverse; }
  .modal__submit{ width:100%; min-height:52px; }
  .modal__lock{ text-align:center; }
}

@media (max-width:360px){
  .mobile-header{ height:64px; padding:7px 14px; }
  .mobile-brand{ width:102px; height:48px; }
  .mobile-brand img{ width:96px; max-height:48px; }
  .mobile-menu-btn{ width:40px; height:40px; }
  .mobile-nav{ top:59px; }
}

@media (min-width:600px) and (max-width:820px){
  .mobile-header{ padding-left:32px; padding-right:32px; }
  .mobile-hero, .mobile-section, .mobile-final{ padding-left:48px; padding-right:48px; }
  .mobile-actions{ flex-direction:row; }
  .mobile-actions .mobile-button{ flex:1; }
  .mobile-benefices{ grid-template-columns:repeat(3,1fr); }
  .mobile-benefices article{ flex-direction:column; align-items:flex-start; gap:14px; }
  .mobile-modules__liste{ grid-template-columns:1fr 1fr; align-items:start; }
  .mobile-apercu__grid{ grid-template-columns:1fr 1fr 2fr; }
  .mobile-apercu__grid .large{ grid-column:3; }
  .mobile-ai{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:42px; }
  .mobile-ai__visual{ margin-bottom:0; }
  .mobile-citation{ margin-left:-48px; margin-right:-48px; }
}


/* ligne de réassurance « France » dans la pop-up */
.modal__france{ margin-top:12px; font-size:13px; font-weight:600; color:var(--bordeaux); }
/* petit drapeau tricolore inline (l'emoji 🇫🇷 s'affiche « FR » sous Windows) */
.drapeau-fr{ width:19px; height:13px; margin-right:5px; vertical-align:-1.5px; border-radius:2px; }

/* Lot 5 — compléments natifs issus de la direction artistique Figma. */
.hero-copy > p{ max-width:520px; margin-top:20px; color:rgba(255,255,255,.88); font-size:16px; line-height:1.6; }
.hero-ornament{ display:block; width:86px; height:12px; margin-top:20px; border-top:2px solid var(--or); position:relative; }
.hero-ornament::after{ content:""; position:absolute; left:36px; top:-6px; width:10px; height:10px; border:2px solid var(--or); background:transparent; transform:rotate(45deg); }

.mobile-apropos__carte > p{ margin-top:17px; color:var(--gris); font-size:15px; line-height:1.65; }

.mobile-faq{ background:#fbf4e9; }
.mobile-faq > h2,
.mobile-news > h2{ text-align:center; }
.mobile-faq > .mobile-kicker,
.mobile-news > .mobile-kicker{ text-align:center; }
.mobile-faq__grid{ display:grid; gap:12px; margin-top:34px; }
.mobile-faq details{ border:1px solid rgba(123,30,34,.14); border-radius:16px; background:#fff; overflow:hidden; }
.mobile-faq summary{ position:relative; padding:20px 52px 20px 20px; color:var(--bordeaux); font:700 15px/1.35 var(--sans); cursor:pointer; list-style:none; }
.mobile-faq summary::-webkit-details-marker{ display:none; }
.mobile-faq summary::after{ content:"+"; position:absolute; right:18px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%; color:#fff; background:var(--bordeaux); text-align:center; font:400 20px/25px var(--sans); }
.mobile-faq details[open] summary::after{ content:"−"; }
.mobile-faq details p{ padding:0 20px 20px; color:var(--gris); font-size:14px; line-height:1.6; }

.mobile-news{ background:#fffdfa; }
.mobile-news__grid{ display:grid; gap:16px; margin-top:34px; }
.mobile-news__card{ min-height:260px; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:22px; overflow:hidden; color:#fff; box-shadow:0 18px 45px rgba(65,22,24,.12); }
.mobile-news__card--beta{ background:linear-gradient(155deg,rgba(91,23,30,.1),rgba(91,23,30,.94)),url("assets/img/vignes-mobile.jpg") center/cover; }
.mobile-news__card--coffee{ background:linear-gradient(155deg,rgba(102,72,38,.12),rgba(69,28,27,.93)),url("assets/img/hero-mobile.jpg") center/cover; }
.mobile-news__card--salon{ background:linear-gradient(155deg,rgba(91,23,30,.08),rgba(91,23,30,.94)),url("assets/img/vignes_2.webp") center/cover; }
.mobile-news__card span{ color:var(--or); font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.mobile-news__card h3{ max-width:390px; margin-top:10px; font:500 25px/1.15 var(--serif); }
.mobile-news__card p{ margin-top:10px; color:rgba(255,255,255,.8); font-size:13px; }
.mobile-news__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.mobile-news__actions a{ padding:13px 20px; border:1px solid rgba(123,30,34,.25); border-radius:999px; color:var(--bordeaux); font:700 13px/1 var(--sans); text-decoration:none; }
.mobile-news__instagram-link{
  min-height:150px; padding:24px; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:18px; border:1px solid rgba(123,30,34,.16); border-radius:18px;
  color:var(--bordeaux); background:linear-gradient(135deg,#fff 0%,#fff8f1 100%);
  box-shadow:0 10px 28px rgba(65,22,24,.08); text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.mobile-news__instagram-link:hover{ border-color:rgba(123,30,34,.38); box-shadow:0 14px 34px rgba(65,22,24,.12); transform:translateY(-2px); }
.mobile-news__instagram-link:focus-visible{ outline:3px solid var(--bordeaux); outline-offset:3px; }
.mobile-news__instagram-icon{ width:54px; height:54px; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(135deg,#7c35c8,#ed4e76 55%,#f3a33d); }
.mobile-news__instagram-link svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; }
.mobile-news__instagram-link .social-dot{ fill:currentColor; stroke:none; }
.mobile-news__instagram-link strong,.mobile-news__instagram-link small{ display:block; }
.mobile-news__instagram-link strong{ font:600 20px/1.2 var(--serif); }
.mobile-news__instagram-link small{ margin-top:6px; color:var(--gris); font:12px/1.4 var(--sans); }
.mobile-news__instagram-handle{ font:700 13px/1 var(--sans); white-space:nowrap; }
.mobile-news__social svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; }
.mobile-news__social svg path,.mobile-news__social .social-dot{ fill:currentColor; stroke:none; }
.mobile-news__social a{ display:grid; place-items:center; color:#fff; text-decoration:none; }
.mobile-news__social a:focus-visible{ outline:3px solid var(--bordeaux); outline-offset:3px; }

/* Les photos d'actualités gardent leurs proportions et leur sujet principal. */
.mobile-news__secondaires .mobile-news__card > img{
  display:block; min-width:0; object-fit:cover;
}
.mobile-news__card--coffee > img{ object-position:56% center; }
.mobile-news__card--salon > img{ object-position:68% center; }

/* Publications Instagram : contenu Meta chargé uniquement après consentement. */
.instagram-embed-shell{
  min-width:0; overflow:hidden; border:1px solid rgba(123,30,34,.16); border-radius:18px;
  background:linear-gradient(145deg,#fff 0%,#fff8f1 100%); box-shadow:0 10px 28px rgba(65,22,24,.08);
}
.instagram-placeholder{
  min-height:220px; padding:24px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:var(--gris); text-align:center;
}
.instagram-placeholder__icon{
  width:58px; height:58px; margin-bottom:18px; display:grid; place-items:center; border-radius:17px;
  color:#fff; background:linear-gradient(135deg,#7c35c8,#ed4e76 55%,#f3a33d);
}
.instagram-placeholder__icon svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; }
.instagram-placeholder__icon .social-dot{ fill:currentColor; stroke:none; }
.instagram-placeholder strong{ color:var(--bordeaux); font:600 23px/1.2 var(--serif); }
.instagram-placeholder p{ max-width:290px; margin:10px 0 20px; font:13px/1.5 var(--sans); }
.instagram-placeholder button,
.instagram-placeholder a{
  min-height:42px; padding:10px 18px; border-radius:999px; font:700 13px/1.2 var(--sans);
  cursor:pointer; text-decoration:none;
}
.instagram-placeholder button{ border:1.5px solid var(--bordeaux); color:#fff; background:var(--bordeaux); }
.instagram-placeholder a{ margin-top:7px; color:var(--bordeaux); }
.instagram-placeholder button:focus-visible,
.instagram-placeholder a:focus-visible{ outline:3px solid var(--or); outline-offset:3px; }
.instagram-embed-shell--charge{ overflow:visible; border:0; background:transparent; box-shadow:none; }
.instagram-embed-shell .instagram-media{ width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; }
.instagram-embed-shell iframe{ max-width:100% !important; margin:0 auto !important; }

/* Les posts complets occupent une ligne dédiée : aucun recadrage ni réduction artificielle. */
.instagram-feed{
  width:min(1120px,calc(100% - 36px)); margin:70px auto 0; padding-top:48px;
  border-top:1px solid rgba(223,183,128,.55);
}
.instagram-feed__heading{ margin-bottom:30px; text-align:center; }
.instagram-feed__heading > span{
  color:var(--or); font:700 11px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
}
.instagram-feed__heading h3{
  margin:9px 0 0; color:var(--bordeaux); font:500 38px/1.12 var(--serif);
}
.instagram-feed__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; align-items:start;
}
.instagram-feed .instagram-embed-shell{ width:100%; min-height:420px; }
.instagram-feed .instagram-placeholder{ min-height:420px; }
.instagram-feed .instagram-embed-shell--charge{ min-height:0; }

@media (max-width:700px){
  .instagram-feed{ width:100%; margin-top:42px; padding-top:34px; }
  .instagram-feed__heading{ margin-bottom:22px; }
  .instagram-feed__heading h3{ font-size:29px; }
  .instagram-feed__grid{ grid-template-columns:1fr; gap:18px; }
  .instagram-feed .instagram-embed-shell{ max-width:540px; margin:0 auto; }
}