/* ============================================================
   SOCLE
   Chargé par toutes les pages : jetons, typographie, en-tête,
   ligne de voyage, sections, pied, menu latéral, retour en haut,
   panneau latéral et passe mobile.
   ============================================================ */

/* ---------- Polices auto-hébergées ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}

:root{
  --ivoire:#EFE8DB; --ivoire-2:#E9E0CF;
  --vert:#21301F; --kaki:#586246; --or:#B89453;
  --sable:#D8C8AE; --kraft:#CDB893; --sepia:#A17A4A;
  --ligne:rgba(33,48,31,.18); --ligne-f:rgba(33,48,31,.10);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --gouttiere:clamp(20px,5vw,72px);
  --max:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--ivoire);color:var(--vert);font-family:var(--serif);font-size:20px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

.wrap{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere)}

/* ---------- Typographie ---------- */
.eyebrow{display:block;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.30em;text-transform:uppercase;color:var(--kaki)}
h1,h2,h3{font-weight:400;line-height:1.06;letter-spacing:-.01em}
.h-xl{font-size:clamp(52px,8vw,104px)}
.h-lg{font-size:clamp(34px,4.4vw,56px);line-height:1.12}
.h-md{font-size:clamp(26px,2.6vw,34px);line-height:1.2}
.voice{font-style:italic;font-weight:400;color:var(--kaki)}
/* retourne une gravure pour orienter le mouvement vers la droite */
.miroir{transform:scaleX(-1)}
.lede{font-size:clamp(20px,1.5vw,24px);line-height:1.62;color:rgba(33,48,31,.86)}
.prose{font-size:21px;line-height:1.78;max-width:33em}
.prose p+p{margin-top:1.15em}
.small{font-family:var(--sans);font-size:12.5px;line-height:1.6;letter-spacing:.02em;color:var(--kaki)}

/* ---------- En-tête ---------- */
header{position:sticky;top:0;z-index:50;background:var(--ivoire);border-bottom:1px solid transparent;transition:border-color .3s}
header.solid{border-bottom-color:var(--ligne)}
.bar{max-width:var(--max);margin:0 auto;padding:20px var(--gouttiere);display:flex;align-items:center;gap:clamp(20px,4vw,56px)}
.marque{width:clamp(138px,13.6vw,192px);color:var(--vert);flex:0 0 auto}
.marque svg{width:100%;height:auto;display:block}
nav.principale{display:flex;gap:clamp(16px,2.4vw,34px);margin-left:auto;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.20em;text-transform:uppercase;white-space:nowrap}
nav.principale a{position:relative;padding-bottom:3px;color:var(--vert)}
nav.principale a[aria-current]{color:var(--sepia)}
nav.principale a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--or);transition:right .35s}
nav.principale a:hover::after{right:0}
.btn{display:inline-block;white-space:nowrap;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.20em;text-transform:uppercase;padding:14px 22px;border:1px solid var(--vert);background:var(--vert);color:var(--ivoire);transition:background .3s,color .3s}
.btn:hover{background:transparent;color:var(--vert)}
.btn.creux{background:transparent;color:var(--vert)}
.btn.creux:hover{background:var(--vert);color:var(--ivoire)}
.btn.clair{border-color:var(--ivoire);background:var(--ivoire);color:var(--vert)}
.btn.clair:hover{background:transparent;color:var(--ivoire)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--ligne);padding:11px 12px;cursor:pointer}
.burger span{display:block;width:19px;height:1.4px;background:var(--vert);margin:4px 0}

/* ---------- Ligne de voyage ---------- */
#voyage{position:absolute;top:0;left:0;width:100%;z-index:1;pointer-events:none}
#voyage path{fill:none;stroke:var(--sepia);stroke-width:1.6;stroke-dasharray:2 10;stroke-linecap:round;opacity:.55}
#vehicule{position:absolute;z-index:1;pointer-events:none;width:84px;opacity:.9;will-change:transform;transition:opacity .5s}
@media(max-width:700px){#vehicule{width:52px}}
@media(prefers-reduced-motion:reduce){#vehicule{transition:none}#voyage{opacity:.4}}

/* ---------- Hero de page ----------
   Partagé par index.html et escales.html.
   Reprise fidèle du hero de production (faitesescale.fr) :
   colonnes .88 / 1.12, titre en 300, baseline en italique,
   visuel 8% plus large que sa colonne, décalé de 4% vers la gauche.
   Une seule source pour les deux pages : pas de divergence possible. */
.accueil-hero{padding:clamp(30px,4vw,60px) 0 clamp(48px,6vw,84px)}
.accueil-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(24px,3.5vw,56px);align-items:center}
.accueil-hero h1{font-weight:300;font-size:clamp(40px,6vw,84px);line-height:1.06;
  letter-spacing:.005em;max-width:13em}
.accueil-hero .signe{display:block;width:46px;height:1px;background:var(--or);
  margin-bottom:clamp(22px,2.6vw,34px)}
.accueil-hero .lede{font-style:italic;font-size:clamp(17px,1.5vw,21px);line-height:1.6;
  color:var(--kaki);margin-top:26px;max-width:34em}
.accueil-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:44px}
.accueil-hero .visuel{position:relative}
.accueil-hero .visuel img{width:108%;max-width:none;margin-left:-4%}
@media(max-width:980px){
  .accueil-grid{grid-template-columns:1fr;gap:26px}
  .accueil-grid .visuel{order:-1}
  .accueil-hero .visuel img{width:100%;margin-left:0}
  .accueil-actions{margin-top:32px}
}

/* ---------- Sections ---------- */
section{position:relative;padding:clamp(72px,9vw,132px) 0}
.opaque{background:var(--ivoire)}
.sur-kraft{background:var(--kraft)}
.sur-ivoire2{background:var(--ivoire-2)}
.filet{border-top:1px solid var(--ligne)}

/* ---------- Pied ---------- */
footer{background:var(--vert);color:var(--ivoire);padding:clamp(58px,7vw,88px) 0 34px}
footer .marque{color:var(--ivoire);width:clamp(196px,21vw,286px)}
.pied-haut{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap}
.pied-liens{display:flex;flex-direction:column;gap:11px;font-family:var(--sans);font-size:12.5px;letter-spacing:.06em}
.pied-liens a{color:rgba(239,232,219,.82)}
.pied-liens a:hover{color:var(--ivoire)}
.pied-bas{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid rgba(239,232,219,.18);font-family:var(--sans);font-size:11.5px;letter-spacing:.05em;color:rgba(239,232,219,.6)}

/* ---------- Révélation au scroll ---------- */
.rv{opacity:0;transform:translateY(19px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.rv.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- Inspecteur de champs (maquette seulement) ---------- */
[data-champ]{position:relative}

/* ============================================================
   PANNEAU CARNET – ouverture latérale depuis la commande
   ============================================================ */
.voile{position:fixed;inset:0;z-index:94;background:rgba(33,48,31,.42);opacity:0;visibility:hidden;transition:opacity .32s,visibility .32s}
.voile.ouvert{opacity:1;visibility:visible}

.panneau{position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(65vw,96vw);background:var(--ivoire);
  border-left:1px solid var(--vert);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.panneau.ouvert{transform:none}
@media(prefers-reduced-motion:reduce){.panneau,.voile{transition:none}}

.panneau-tete{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px clamp(20px,3vw,44px);border-bottom:1px solid var(--ligne);background:var(--ivoire)}
.panneau-tete .quoi{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--kaki)}
.panneau-tete .qui{font-size:clamp(21px,2vw,27px);line-height:1.1;margin-top:3px}
.fermer{flex:0 0 auto;background:none;border:1px solid var(--ligne);padding:11px 16px;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--vert);transition:background .3s}
.fermer:hover{background:var(--vert);color:var(--ivoire)}

.panneau-corps{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;container-type:inline-size;container-name:panneau}
/* le contenu du Carnet est repris tel quel : on neutralise seulement ce qui
   n'a de sens que sur une page pleine largeur */
.panneau-corps section{padding:clamp(34px,4vw,52px) 0}
.panneau-corps .wrap{max-width:none;padding:0 clamp(20px,3vw,44px)}
.panneau-corps .hero{padding-top:clamp(28px,3vw,40px)}
/* visuel d'ouverture du carnet en panneau, tiré du catalogue des Escales */
.carnet-visuel{padding-top:clamp(24px,3vw,38px);padding-bottom:0}
.carnet-visuel img{width:min(100%,420px);margin:0 auto}
.panneau-corps .hero-grid,.panneau-corps .duo,.panneau-corps .duo-inv{grid-template-columns:1fr;gap:26px}
/* au-delà de 860 px de panneau, la largeur redevient exploitable en deux colonnes */
@container panneau (min-width:860px){
  .panneau-corps .duo{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(28px,4vw,56px)}
  .panneau-corps .duo-inv{grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);gap:clamp(28px,4vw,56px)}
  .panneau-corps .galerie{--col:3}
}
.panneau-corps .h-xl{font-size:clamp(40px,5vw,58px)}
.panneau-corps .galerie{--col:2;--ecart:16px}
.panneau-corps .prose{max-width:34em}
.panneau-corps .compo li{grid-template-columns:minmax(88px,.28fr) 1fr}

.panneau-pied{flex:0 0 auto;padding:16px clamp(20px,3vw,44px);border-top:1px solid var(--ligne);
  display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ivoire)}
.panneau-pied p{font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;color:var(--kaki)}

/* le corps est figé en position pour que la page ne se recompose pas derrière */
body.panneau-ouvert{overflow:hidden;position:fixed;left:0;right:0;width:100%}

@media(max-width:760px){
  .panneau{width:100%;border-left:none}
  .panneau-corps .galerie{--col:1}
  .panneau-pied{flex-direction:column;align-items:stretch;gap:10px;padding:14px clamp(20px,3vw,44px) 16px}
  .panneau-pied p{order:2;text-align:center}
  .panneau-pied .btn{order:1;text-align:center}
}



/* ---------- Conditions de vente dans le panneau ---------- */
.cgv{padding:clamp(28px,3.4vw,44px) clamp(20px,3vw,44px) clamp(50px,6vw,80px);max-width:44em}
.cgv .chapeau{font-size:19px;line-height:1.65;color:var(--kaki);border-left:1px solid var(--sepia);padding-left:20px}
.cgv h3{font-size:clamp(21px,2vw,26px);line-height:1.2;margin-top:clamp(30px,3.4vw,42px);padding-top:18px;border-top:1px solid var(--ligne)}
.cgv h3 .num{color:var(--or);margin-right:12px}
.cgv p{font-size:17.5px;line-height:1.72;margin-top:14px;color:rgba(33,48,31,.88)}
.cgv ul{margin-top:14px;padding-left:0;list-style:none}
.cgv li{font-size:17.5px;line-height:1.65;margin-top:10px;padding-left:20px;position:relative;color:rgba(33,48,31,.88)}
.cgv li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--or)}
.cgv .avert{margin-top:clamp(34px,4vw,50px);border:1px solid var(--sepia);padding:20px 22px;
  font-family:var(--sans);font-size:12.5px;line-height:1.7;color:var(--sepia)}
.cgv .maj{margin-top:26px;font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;color:var(--kaki)}

.lien-cgv{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--vert);border-bottom:1px dotted var(--kaki)}
.lien-cgv:hover{border-bottom-style:solid}
.champ input::placeholder{color:rgba(88,98,70,.42)}

/* ============================================================
   PASSE MOBILE
   Cibles tactiles à 44 px, corps de texte relevé, encoches iOS.
   ============================================================ */
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
*{-webkit-tap-highlight-color:rgba(88,98,70,.14)}
/* un display: de classe ne doit jamais l'emporter sur l'attribut hidden */
[hidden]{display:none !important}

@media(max-width:760px){
  /* compteurs : 38 px était sous le seuil confortable au pouce */
  .pas button{width:46px;height:46px;font-size:18px}
  .pas span{min-width:34px;font-size:15px}

  /* liens et boutons secondaires : on élargit la zone sans changer le dessin */
  .lien-allerg{padding:15px 18px;width:100%;justify-content:space-between}
  .retour{padding:14px 0 14px}
  .lien-cgv{padding:6px 0}
  .fermer{padding:15px 18px}
  .marque{padding:8px 0}
  .pied-liens{gap:0}
  .pied-liens a{padding:11px 0}
  .accord input{width:22px;height:22px}
  .accord{padding:16px}

  /* lisibilité : rien sous 11 px */
  .choix .jauge{font-size:10.5px}
  .volet-tete .p{font-size:11px}
  .depart-meta dt,.aparte dt,.champ label,.eyebrow{font-size:11px}
  .small,.bouchee p,.aide{font-size:13px}
  .compo .quoi,.allerg h3{font-size:11px}

  /* encoche et barre du bas : le pied ne doit pas passer dessous */
  .choix-in{padding-bottom:env(safe-area-inset-bottom,0px)}
  body:has(.choix.on) footer{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .tunnel-corps .dedans{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}

  /* le tunnel : les boutons prennent la largeur, plus de ligne à deux boutons serrés */
  .actions-etape{flex-direction:column;align-items:stretch;gap:14px}
  .actions-etape .btn{text-align:center;padding:17px 22px}
  .actions-etape .retour{text-align:center}
  .recap-ligne{grid-template-columns:1fr auto;row-gap:12px}
  .recap-ligne .prix{grid-column:2;text-align:right}
  .recap-ligne .pas{grid-column:1;justify-self:start}
  .numero .val{font-size:clamp(34px,11vw,48px)}
}

@media(max-width:400px){
  .wrap{padding:0 18px}
  .depart-meta{grid-template-columns:1fr 1fr}
  .tunnel-corps .dedans{padding-left:18px;padding-right:18px}
  .panneau-corps .wrap,.cgv{padding-left:18px;padding-right:18px}
}


/* ============================================================
   COULEUR DE DESTINATION
   Reprise des fourreaux : elle ne porte que le nom et le numéro.
   Partout ailleurs le site reste en ivoire et vert profond.
   ============================================================ */
.volet[style*="--couleur"] h2{color:var(--couleur)}
.volet[style*="--couleur"] .volet-tete .n{color:var(--couleur)}
.escale[style*="--couleur"] h2{color:var(--couleur)}
.escale[style*="--couleur"] .escale-num .chiffre{color:var(--couleur)}
.volet[data-etat="complet"] h2{color:rgba(33,48,31,.5)}
.escale.complet h2{color:rgba(33,48,31,.5)}
.escale.complet .escale-num .chiffre{color:rgba(33,48,31,.35)}
/* le trait sous le nom, comme le filet du fourreau */
.volet .accroche::before{content:'';display:block;width:34px;height:1px;background:var(--couleur,var(--or));margin:0 0 12px}
.escale .titre-edito::before{content:'';display:block;width:38px;height:1px;background:var(--couleur,var(--or));margin:14px 0 14px}

/* ---------- Responsive du socle ---------- */
@media(max-width:1200px){
  .bar{gap:20px}
  nav.principale{gap:15px;font-size:10.5px;letter-spacing:.13em}
  .bar .btn{padding:13px 15px;font-size:10.5px;letter-spacing:.13em}
  .marque{width:clamp(122px,12vw,156px)}
}
@media(max-width:1000px){
  .hero-grid,.duo,.duo-inv{grid-template-columns:1fr}
  .duo{gap:34px}
}
/* Le menu complet a besoin de ~900px : mesuré, pas supposé.
   En dessous, il poussait le bouton hors de l'écran (tout iPad en portrait). */
@media(max-width:940px){
  nav.principale,.bar .btn{display:none}
  .burger{display:flex}
}
@media(max-width:760px){
  body{font-size:18.5px}
  .prose{font-size:19px}
  /* un libellé long ne doit pas pousser la page : il se coupe */
  .btn{white-space:normal;text-align:center;max-width:100%}
}

/* ============================================================
   MENU LATÉRAL – repris à l'identique du site en production
   Oreille fixe à gauche, panneau coulissant, liste numérotée.
   ============================================================ */
.tab-menu{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:40;background:var(--ivoire);
  border:1px solid var(--ligne);border-left:none;padding:20px 13px;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:14px;transition:background .3s}
.tab-menu:hover{background:var(--ivoire-2)}
.tab-menu .lignes span{display:block;width:20px;height:1.4px;background:var(--vert);margin:5px 0}
.tab-menu .txt{writing-mode:vertical-rl;font-family:var(--sans);font-size:11px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--vert)}
@media(max-width:960px){.tab-menu{display:none}}

.menu-voile{position:fixed;inset:0;background:rgba(33,48,31,.28);z-index:55;opacity:0;pointer-events:none;transition:opacity .4s}
.menu-voile.on{opacity:1;pointer-events:auto}
.sidebar-groupe{margin:26px 0 0;padding:18px clamp(24px,4vw,40px) 8px;border-top:1px solid var(--ligne);
  font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--kaki)}
.sidebar{position:fixed;top:0;bottom:0;left:0;width:min(430px,90vw);background:var(--ivoire);
  border-right:1px solid var(--ligne);z-index:60;transform:translateX(-103%);transition:transform .45s ease;
  display:flex;flex-direction:column;padding:26px 0 30px}
.sidebar.open{transform:none}
.sidebar-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 30px 22px;border-bottom:1px solid var(--ligne)}
.sidebar-head .marque{width:220px;color:var(--vert)}
.sidebar-head .marque svg{width:100%;height:auto;display:block}
.sidebar-close{background:none;border:none;cursor:pointer;color:var(--vert);padding:6px;line-height:0}
.sidebar-close svg{width:22px;height:22px}
.sidebar-list{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.sidebar-list a{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:8px;padding:16px 30px;
  border-bottom:1px solid var(--ligne);font-size:21px;transition:background .25s}
.sidebar-list a:hover{background:var(--ivoire-2)}
.sidebar-list a.actif{background:var(--ivoire-2)}
/* les autres pages du site, en fin de liste */
.sidebar-list a.ailleurs{color:var(--kaki)}
.sidebar-list a.ailleurs:first-of-type{margin-top:0}
.sidebar-list a.ailleurs .n{color:var(--or)}
.sidebar-list a .n{font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:var(--kaki)}
.sidebar-foot{padding:24px 30px 0;font-style:italic;color:var(--sepia);font-size:16.5px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.sidebar,.menu-voile{transition:none}}
body.menu-ouvert{overflow:hidden}

/* ---------- retour en haut, valeurs de production ---------- */
.haut{position:fixed;right:26px;bottom:26px;z-index:45;width:64px;height:64px;border-radius:50%;
  background:var(--ivoire);border:1px solid var(--ligne);color:var(--vert);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .4s,transform .4s,background .3s}
.haut.on{opacity:1;transform:none;pointer-events:auto}
.haut:hover{background:var(--ivoire-2)}
.haut svg{width:14px;height:14px}
.haut .mot{font-style:italic;font-family:var(--serif);font-size:13px;line-height:1;color:var(--vert)}
@media(max-width:700px){.haut{width:52px;height:52px;right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.haut{transition:none}}


/* ---------- alerte de départ ---------- */
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.alerte{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;
  border:1px solid var(--ligne);background:var(--ivoire);padding:clamp(26px,3.4vw,46px)}
.sur-kraft .alerte{border-color:rgba(33,48,31,.22)}
.alerte h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin-top:14px}
.alerte .dit{font-size:17.5px;line-height:1.65;color:var(--kaki);margin-top:14px;max-width:32em}
.alerte-choix{display:flex;gap:10px}
.voie{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--ligne);padding:10px 14px;cursor:pointer;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;color:var(--kaki);transition:border-color .3s,color .3s}
.voie input{width:14px;height:14px;accent-color:var(--vert);margin:0;flex:none}
.voie:has(input:checked){border-color:var(--vert);color:var(--vert)}
.alerte-saisie{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.alerte-saisie input{flex:1 1 220px;min-width:0;font-family:var(--serif);font-size:19px;color:var(--vert);
  background:transparent;border:none;border-bottom:1px solid var(--ligne);padding:11px 2px;outline:none;
  border-radius:0;transition:border-color .3s}
.alerte-saisie input:focus{border-bottom-color:var(--vert)}
.alerte-saisie input[aria-invalid="true"]{border-bottom-color:var(--sepia)}
.alerte-saisie .btn{flex:0 0 auto}
.alerte .erreur{font-family:var(--sans);font-size:11.5px;color:var(--sepia);margin-top:10px}
.alerte-note{font-family:var(--sans);font-size:11.5px;color:var(--kaki);margin-top:16px}
.alerte-ok{display:none}
.alerte-ok.visible{display:block}
.alerte-ok .quoi{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--or)}
@media(max-width:860px){.alerte{grid-template-columns:1fr}}

/* La promesse du modèle : elle doit se lire avant les boutons, sans crier. */
.promesse{margin-top:clamp(22px,2.4vw,30px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--ligne);font-family:var(--serif);
  font-size:clamp(19px,1.8vw,25px);line-height:1.4;color:var(--vert);max-width:22em}
.promesse em{font-style:italic;color:var(--kaki)}

/* ---------- bandeau de préouverture ----------
   Temporaire : à retirer de index.html et cette-semaine.html le jour
   du premier vrai départ, avec le bloc .avant-ouverture du tunnel. */
.bandeau-preouverture{background:var(--vert);color:var(--ivoire);padding:14px 0}
.bandeau-preouverture p{font-family:var(--sans);font-size:12.5px;line-height:1.6;
  color:rgba(239,232,219,.88);max-width:62em}
.bandeau-preouverture b{color:var(--ivoire);font-weight:500}

/* ---------- formulaire de contact, dans le panneau ---------- */
.contact{padding:clamp(24px,3vw,40px) clamp(20px,3vw,48px) 70px}
.contact .lede{max-width:34em}
.ct-grille{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;
  margin-top:clamp(26px,3vw,38px)}
.ct-champ.large,.ct-vide{grid-column:1/-1}
.ct-vide{display:none}
.ct-champ{display:flex;flex-direction:column;gap:8px}
.ct-champ label{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kaki)}
.ct-champ input,.ct-champ select,.ct-champ textarea{
  font-family:var(--serif);font-size:17px;color:var(--vert);background:var(--ivoire);
  border:1px solid var(--ligne);padding:12px 14px;width:100%;border-radius:0;
  transition:border-color .3s}
.ct-champ textarea{resize:vertical;min-height:130px;line-height:1.55}
.ct-champ input:focus,.ct-champ select:focus,.ct-champ textarea:focus{
  outline:none;border-color:var(--kaki)}
.ct-champ [aria-invalid="true"]{border-color:var(--sepia)}
.ct-champ .aide{font-family:var(--sans);font-size:11px;color:var(--kaki)}
.ct-erreur{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--sepia)}

.ct-accord{display:flex;gap:12px;align-items:flex-start;margin-top:clamp(24px,3vw,32px);
  padding-top:22px;border-top:1px solid var(--ligne);cursor:pointer}
.ct-accord input{margin-top:3px;width:17px;height:17px;accent-color:var(--vert);flex:0 0 auto}
.ct-accord span{font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--kaki)}

.ct-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:28px}
.ct-etat{font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--kaki);max-width:26em}
.ct-etat.souci{color:var(--sepia)}
.ct-direct{margin-top:32px;padding-top:22px;border-top:1px solid var(--ligne);
  font-family:var(--serif);font-size:17px;color:var(--kaki)}
.ct-direct a{color:var(--vert);text-decoration:none;border-bottom:1px solid var(--ligne)}
.ct-direct a:hover{border-color:var(--vert)}

.ct-merci{padding:clamp(30px,4vw,48px) 0}
.ct-merci .quoi{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kaki)}
.ct-merci h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3vw,40px);
  line-height:1.2;color:var(--vert);margin-top:16px}
.ct-merci p{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--kaki);
  margin-top:16px;max-width:30em}

@media(max-width:720px){ .ct-grille{grid-template-columns:1fr} }

/* ---------- dépôt d'un avis ---------- */
.avis-form{max-width:34em}
.avis-form .champ{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.avis-form label{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kaki)}
.avis-form input,.avis-form select,.avis-form textarea{font-family:var(--serif);font-size:17px;
  color:var(--vert);background:var(--ivoire-2);border:1px solid var(--ligne);padding:13px 15px;width:100%}
.avis-form textarea{resize:vertical;line-height:1.6}
.avis-form input:focus,.avis-form select:focus,.avis-form textarea:focus{outline:none;border-color:var(--vert)}
.avis-form [aria-invalid="true"]{border-color:var(--sepia)}
.avis-form .aide{font-family:var(--sans);font-size:11px;line-height:1.55;color:var(--kaki)}
.avis-form .err{font-family:var(--sans);font-size:11.5px;color:var(--sepia)}
.avis-form .accord{margin-top:26px}
.avis-form .accord label{display:flex;gap:11px;align-items:flex-start;font-family:var(--sans);
  font-size:12.5px;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--kaki);cursor:pointer}
.avis-form .accord input{width:auto;flex:0 0 auto;margin-top:2px}
.avis-form .etat{font-family:var(--sans);font-size:12px;color:var(--sepia);margin-top:20px;min-height:1em}
.avis-form .btn{margin-top:14px}
/* Piège à robots : hors écran, jamais lu par un humain. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.avis-merci .btn{display:inline-block}