/* ─────────────────────────────────────────────────────────────────────────────
   sections.css — les fondations des sections, après l'ouverture.

   Un seul gabarit (.sx), décliné : fond papier, colonnes inversées, bande
   sombre. Mêmes jetons que index.html (ivoire, encre, orange ; Instrument Sans
   et JetBrains Mono). À charger APRÈS le <style> de index.html et après
   maquettes.css : quelques règles complètent celles de la page (.reassure,
   .codeinv, .tog, .nav).

   Composants : .sx (+ __in __head __body __txt __vis, --rev --paper) · .band
   · .gp · .lo · .mock · .ticks · .reassure · .go · .duo · .codeinv · .bar ·
   .sheet (+ .nav__menu) · .tog--s · .incl · .rv
   Structure HTML attendue : voir sections/demo.html et sections/_chrome.html.

   Deux seuils, et seulement deux :
     900px  — les colonnes s'empilent, les listes .lo passent en accordéon ;
     980px  — menu téléphone (.nav__menu, .sheet) et barre collée (.bar).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Jetons ──────────────────────────────────────────────────────────────── */
:root{
  --acc-t:#B04A00;   /* orange pour du TEXTE : 4,7:1 sur ivoire, 5,5:1 sur blanc  */
  --g-t:#0D7642;     /* vert pour du texte  : 4,9:1 sur ivoire                     */
  --v-t:#5B3FD9;     /* violet pour du texte : 5,7:1 sur ivoire                    */
  --nuit:#14110F;    /* fond de la bande sombre                                    */
  --sx-y:clamp(72px,9vw,128px);   /* respiration verticale d'une section          */
  --sx-max:1640px;
  --sx-gap:clamp(24px,4vw,72px);
  --r-ecran:clamp(18px,2vw,30px);
  --ombre-ecran:0 50px 100px -50px rgba(43,24,16,.6);
}
/* Couleurs de pilier : --c pour les aplats et filets, --c-t pour le texte. */
.c-o{--c:#F97708;--c-t:var(--acc-t)}
.c-v{--c:#7C5CFF;--c-t:var(--v-t)}
.c-g{--c:#16B364;--c-t:var(--g-t)}

/* Focus clavier lisible partout dans les sections (orange foncé : 4,7:1). */
:where(.sx,.band,.sheet,.bar,.nav) :where(a,button,input,summary,[role="slider"]):focus-visible{outline:2px solid var(--acc-t);outline-offset:3px}
:where(.band,.bar--sombre) :where(a,button,input,summary,[role="slider"]):focus-visible{outline-color:#FFB36B}
/* Une section ciblée par une ancre reçoit le focus (pour le clavier) sans cadre. */
.sx[tabindex="-1"]:focus,.band[tabindex="-1"]:focus,section[tabindex="-1"]:focus{outline:none}

/* ── Section ─────────────────────────────────────────────────────────────── */
/* .sx est pleine largeur (son fond aussi) ; le contenu tient dans .sx__in.
   Une section ivoire n'a pas de marge basse : la suivante apporte la sienne. */
.sx{position:relative;padding:var(--sx-y) var(--pad) 0;overflow-x:clip;color:var(--ink)}
.sx__in{max-width:var(--sx-max);margin:0 auto}
/* Fond papier, pleine largeur, avec sa propre respiration en bas. */
.sx--paper{background:var(--paper);margin-top:var(--sx-y);padding-bottom:var(--sx-y)}
.sx--paper+.sx--paper,.sx--paper+.band,.band+.sx--paper{margin-top:0}

/* En-tête : pastille et titre à gauche, chapeau à droite. */
.sx__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,80px);align-items:end}
.sx__head>*{min-width:0}
.sx__k{display:block;margin:0 0 18px;font:600 13px/1.3 var(--m);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.sx__head h2{font-size:clamp(36px,4.6vw,72px);font-weight:500;line-height:1.02;letter-spacing:-.05em;max-width:16ch;text-wrap:balance}
.sx__head h2 em{font-style:normal;color:var(--acc-d)}
.sx__ch{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--soft);max-width:46ch;text-wrap:pretty}
/* Variante centrée (sommaire). */
.sx__head--c{grid-template-columns:minmax(0,1fr);justify-items:center;gap:0;max-width:860px;margin-inline:auto;text-align:center}
.sx__head--c h2{max-width:18ch}
.sx__head--c .sx__ch{margin-top:16px;max-width:52ch;font-size:clamp(18px,1.4vw,22px)}
/* Variante empilée, à poser dans une colonne (Choisir, Retoucher). */
.sx__head--col{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.sx__head--col h2{font-size:clamp(34px,3.6vw,60px)}

/* Corps : grille de 12 colonnes. Texte sur 1→5, visuel sur 6→12.
   .sx--rev : visuel sur 1→7, texte sur 8→12 (l'ordre du HTML reste texte, visuel). */
.sx__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sx-gap);row-gap:32px;margin-top:40px;align-items:start}
.sx__in>.sx__body:first-child{margin-top:0}
.sx__body--c{align-items:center}
.sx__txt{grid-column:1/6;min-width:0}
.sx__vis{grid-column:6/-1;min-width:0}
.sx--rev .sx__vis{grid-column:1/8;grid-row:1}
.sx--rev .sx__txt{grid-column:8/-1;grid-row:1}
.sx__txt>.go{margin-top:28px}
.sx__txt>.sx__head+*{margin-top:28px}

@media(max-width:900px){
  .sx__head{grid-template-columns:minmax(0,1fr);gap:14px}
  .sx__head h2,.sx__head--col h2{font-size:clamp(30px,8vw,40px)}
  .sx__head--c{justify-items:start;text-align:left}
  .sx__head--c .sx__ch{margin-top:12px}
  .sx__body{grid-template-columns:minmax(0,1fr);row-gap:28px;margin-top:28px}
  .sx__txt,.sx__vis,.sx--rev .sx__txt,.sx--rev .sx__vis{grid-column:1/-1;grid-row:auto}
}

/* ── Bande sombre : le gabarit .sx en version nuit (côté invités) ─────────── */
.band{position:relative;margin-top:clamp(72px,8vw,128px);padding:clamp(80px,9vw,140px) var(--pad);background:var(--nuit);color:var(--ivory);overflow-x:clip}
.band .sx__head h2{color:var(--ivory)}
.band .sx__head h2 em{color:#FFB36B}
.band .sx__ch,.band .sx__k{color:rgba(240,237,228,.72)}
.band .cta2{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:var(--ivory)}
.band .cta2:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:var(--ivory)}
.band__pied{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:40px;text-align:center}
.band__pied .ctas{align-self:center;justify-content:center;margin-top:0}
.band__p{font-size:17px;line-height:1.5;color:rgba(240,237,228,.72);max-width:52ch}
@media(max-width:900px){.band{padding:72px var(--pad)}}

/* ── Pastille de pilier ──────────────────────────────────────────────────── */
.gp{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:7px 16px;border-radius:100px;font:600 15px/1.2 var(--s);letter-spacing:-.01em;color:#fff;
  background:var(--c-t,var(--acc-t));background:color-mix(in oklch,var(--c,var(--acc)) 78%,black)}

/* ── Puces cochées ───────────────────────────────────────────────────────── */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:32px;font-size:17px;line-height:1.4;color:var(--ink)}
.ticks li::before{content:'';position:absolute;left:0;top:calc((1.4em - 20px) / 2);width:20px;height:20px;border-radius:50%;
  background:var(--c,var(--acc)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ticks--l{gap:8px}.ticks--l li{font-size:clamp(17px,1.25vw,20px)}
.band .ticks li{color:var(--ivory)}

/* ── Ligne rassurante ────────────────────────────────────────────────────────
   index.html pose déjà .reassure (une ligne mono) et la masque sous 700px : ce
   masquage ne vaut que pour l'ouverture. Ici : la version liste, à points. */
.reassure{font:600 12px/1.5 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
ul.reassure{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:6px}
ul.reassure li{display:inline-flex;align-items:center}
ul.reassure li+li::before{content:'';flex:none;width:6px;height:6px;margin:0 14px;border-radius:50%;background:var(--c,var(--acc))}
.reassure--c{justify-content:center;text-align:center;margin-left:auto;margin-right:auto}
.band .reassure{color:rgba(240,237,228,.72)}
@media(max-width:700px){
  .reassure:not(.h3__txt .reassure){display:block}
  ul.reassure:not(.h3__txt .reassure){display:flex}
  /* Sur téléphone, les garanties passent en grille 2×2 de puces. */
  ul.reassure--puces:not(.h3__txt .reassure){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:left}
  ul.reassure--puces li{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.55);letter-spacing:.08em;line-height:1.35}
  ul.reassure--puces li::before,ul.reassure--puces li+li::before{content:'';flex:none;width:6px;height:6px;margin:.42em 0 0;border-radius:50%;background:var(--c,var(--acc))}
  .band ul.reassure--puces li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
}

/* ── Lien d'action « Voir les tarifs → » ─────────────────────────────────── */
.go{position:relative;display:inline-flex;align-items:center;gap:8px;padding-bottom:2px;border-bottom:2px solid var(--acc);font-size:16px;font-weight:600;line-height:1.3;color:var(--ink);transition:color .2s}
.go::after{content:'';position:absolute;inset:-11px -6px -9px}   /* zone de toucher de 44px */
.go i{font-style:normal;display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.go:hover{color:var(--acc-t)}
.go:hover i{transform:translateX(4px)}
.band .go{color:var(--ivory)}
.band .go:hover{color:#FFB36B}

/* ── Liste à onglets .lo ─────────────────────────────────────────────────────
   Sur ordinateur, des onglets : l'élément ouvert change le visuel d'à côté.
   Sous 900px, un accordéon : sections.js déplace le visuel sous l'élément
   ouvert. Un seul élément ouvert, jamais d'avance automatique. Sans
   JavaScript, tous les panneaux restent ouverts (.lo sans .lo--js). */
.lo{--lo-px:20px;--lo-n:30px;--lo-gap:14px;display:flex;flex-direction:column}
.lo__it{position:relative;border-top:1px solid var(--line)}
.lo__it:last-child{border-bottom:1px solid var(--line)}
.lo__h{margin:0;font:inherit;letter-spacing:inherit}
.lo__b{-webkit-appearance:none;appearance:none;display:flex;align-items:center;gap:var(--lo-gap);width:100%;min-height:64px;margin:0;padding:12px var(--lo-px);border:0;border-radius:inherit;background:none;color:var(--ink);font:600 20px/1.25 var(--s);letter-spacing:-.02em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lo__n{flex:none;min-width:var(--lo-n);font:600 13px/1 var(--m);letter-spacing:.04em;color:var(--c-t,var(--acc-t))}
.lo__t{flex:1;min-width:0;transition:color .2s}
.lo__b::after{content:'';flex:none;width:9px;height:9px;margin:0 4px 5px 10px;border:solid var(--soft);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s}
.lo__b:hover .lo__t{color:var(--c-t,var(--acc-t))}
.lo__p{padding:0 var(--lo-px) 22px calc(var(--lo-px) + var(--lo-n) + var(--lo-gap));font-size:17px;line-height:1.5;color:var(--soft)}
.lo__p>*+*{margin-top:12px}
.lo__rep{font:600 12px/1.6 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--c-t,var(--acc-t))}
.lo__nu{position:relative;padding-left:30px;font-size:17px;color:var(--ink)}
.lo__nu::before{content:'';position:absolute;left:0;top:.72em;width:18px;height:2px;border-radius:2px;background:var(--c,var(--acc))}
.lo__note{font-size:15px;color:var(--soft)}
/* L'élément ouvert devient une carte, avec la barre du pilier à gauche. */
.lo__it.on,.lo:not(.lo--js)>.lo__it{margin:6px 0;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 24px 50px -40px rgba(43,24,16,.35)}
.lo__it.on::before,.lo:not(.lo--js)>.lo__it::before{content:'';position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--c,var(--acc))}
.lo__it.on:first-child{margin-top:0}
.lo__it.on+.lo__it{border-top-color:transparent}
.lo__it.on .lo__b{min-height:0;padding-top:22px;padding-bottom:12px;cursor:default}
.lo__it.on .lo__b:hover .lo__t{color:inherit}
.lo__it.on .lo__b::after{transform:rotate(-135deg);margin-bottom:-4px}
.lo:not(.lo--js) .lo__b::after{display:none}
.lo__it.on>.lo__p{animation:lo-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes lo-in{from{opacity:0;transform:translateY(6px)}}
/* Le visuel, quand sections.js l'a glissé sous l'élément ouvert (téléphone). */
.lo>.lo__vis{margin:12px 0 18px}
@media(max-width:900px){
  .lo{--lo-px:16px;--lo-n:26px;--lo-gap:12px}
  .lo__b{min-height:60px;font-size:18px}
  .lo__p{padding-left:var(--lo-px);font-size:16px}
  .lo__nu{font-size:16px}
}
/* Version sombre (bande invités). */
.band .lo__it{border-color:rgba(255,255,255,.12)}
.band .lo__b{color:var(--ivory)}
.band .lo__b::after{border-color:rgba(240,237,228,.6)}
.band .lo__n,.band .lo__rep,.band .lo__b:hover .lo__t{color:var(--c,#16B364)}
.band .lo__p{color:rgba(240,237,228,.72)}
.band .lo__nu{color:var(--ivory)}
.band .lo__note{color:rgba(240,237,228,.62)}
.band .lo__it.on,.band .lo:not(.lo--js)>.lo__it{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
.band .lo__it.on+.lo__it{border-top-color:transparent}

/* ── Cadre de maquette .mock ─────────────────────────────────────────────────
   .mock (le cadre) > [.mock__bar] (barre de navigateur, facultative)
                    > .mock__vp (la zone : rapport --r, conteneur « mock »)
                      > .mock__c (calques, l'actif porte .on)
   Rapport : --r (ordinateur), --r-m (sous 900px), en CSS ou en data-r / data-r-m
   sur .mock ou sur un calque (sections.js applique celui du calque actif ;
   data-r-m="auto" laisse le calque actif donner la hauteur). */
.mock{position:relative;display:flex;flex-direction:column;border-radius:var(--r-ecran);overflow:hidden;background:#fff;box-shadow:var(--ombre-ecran),0 0 0 1px rgba(43,24,16,.06);isolation:isolate}
.mock__bar{flex:none;display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.mock__bar>i{flex:none;width:10px;height:10px;border-radius:50%;background:#E0D9CC}
.mock__bar>span{min-width:0;margin-left:10px;padding:5px 12px;border:1px solid var(--line);border-radius:100px;background:#fff;font:500 12px/1.2 var(--m);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock__vp{position:relative;width:100%;aspect-ratio:var(--r,16/11);container:mock/size;overflow:hidden}
.mock__c{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.mock__c.on,html:not(.js) .mock__c:first-child{opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s}
.mock--auto .mock__vp{aspect-ratio:auto;container-type:inline-size}
.mock--auto .mock__c.on{position:relative}
.mock--nu{border-radius:0;background:none;box-shadow:none;overflow:visible}
.mock__rj{position:absolute;right:12px;bottom:12px;z-index:6;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 13px/1 var(--m);letter-spacing:.04em;color:var(--ink);cursor:pointer}
.mock__rj:hover{background:#fff;border-color:#FFD2A8}
.mock__rj i{font-style:normal}
@media(pointer:coarse){.mock__rj{min-height:44px}}
@media(max-width:900px){.mock__vp{aspect-ratio:var(--r-m,var(--r,16/11))}}
.band .mock{background:#1C1612;box-shadow:0 50px 100px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07)}
.band .mock__bar{background:#221B16;border-color:rgba(255,255,255,.08)}

/* ── Sommaire à deux colonnes .duo ───────────────────────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:stretch;max-width:1180px;margin:40px auto 0}
.duo__c{--c:#F97708;--c-t:var(--acc-t);display:flex;flex-direction:column;gap:18px;min-width:0;padding:clamp(26px,2.4vw,38px);border:1px solid var(--line);border-radius:28px;background:#fff}
.duo__c--cpl{--c:#0F7D46;--c-t:var(--g-t)}
.duo__lab{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:7px 13px 7px 11px;border:1px solid var(--line);border-radius:100px;font:600 12.5px/1.2 var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.duo__lab::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--c)}
.duo__c h3{font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.duo__l{list-style:none;margin:0;padding:0}
.duo__l li{border-top:1px solid var(--line)}
.duo__l li:last-child{border-bottom:1px solid var(--line)}
.duo__l a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:8px 0;font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--ink);transition:color .2s}
.duo__l a i{flex:none;font-style:normal;color:var(--c);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.duo__l a:hover{color:var(--c-t)}
.duo__l a:hover i{transform:translateX(4px)}
.duo__bas{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:6px}
.duo__px{font-size:20px;font-weight:600;letter-spacing:-.02em}
.duo__m{margin-bottom:14px;font-size:15px;color:var(--soft)}
.duo__rail{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 0}
.duo__rail>span{flex:1;width:2px;min-height:60px;border-radius:2px;background:linear-gradient(180deg,rgba(249,119,8,0),#F97708)}
.duo__rail>span:last-child{background:linear-gradient(180deg,#0F7D46,rgba(15,125,70,0))}
.duo__rail svg{display:block;width:28px;height:28px;color:var(--ink)}
@media(max-width:900px){
  .duo{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:28px}
  .duo__rail{flex-direction:row;padding:2px 0}
  .duo__rail>span{width:auto;height:2px;min-height:0;background:linear-gradient(90deg,rgba(249,119,8,0),#F97708)}
  .duo__rail>span:last-child{background:linear-gradient(90deg,#0F7D46,rgba(15,125,70,0))}
  .duo__l a{min-height:48px;font-size:16.5px}
  .duo__bas{align-items:stretch}
  .duo__bas .cta1,.duo__bas .cta2{justify-content:center}
  /* Le public mémorisé passe en premier (body.aud-cpl, posé par sections.js). */
  body.aud-cpl .duo__c--cpl{order:-2}
  body.aud-cpl .duo__rail{order:-1}
}

/* ── Code invité .codeinv ────────────────────────────────────────────────────
   index.html pose .codeinv__lien (le lien qui déplie, dans l'ouverture) et
   .codeinv__form (champ + bouton). Ici : titre, aide, version posée (--bloc,
   bande invités et menu) et version sombre. */
.codeinv__t{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.codeinv__form button i{font-style:normal}
.codeinv__aide{margin-top:8px;font-size:14px;line-height:1.45;color:var(--soft)}
.codeinv__aide[hidden]{display:none}
.codeinv__form input[aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.14)}
.codeinv--bloc .codeinv__form{margin-top:12px;align-items:stretch}
.codeinv--bloc .codeinv__form input{width:140px;height:52px;padding:0 10px;border-radius:14px;font:600 22px/1 var(--m);letter-spacing:.3em;text-align:center}
.codeinv--bloc .codeinv__form input::placeholder{font:600 22px/1 var(--m);letter-spacing:.3em;color:rgba(26,21,16,.32)}
.codeinv--bloc .codeinv__form button{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 22px;border-radius:14px;font-size:16px}
.codeinv--c{display:flex;flex-direction:column;align-items:center;text-align:center}
.codeinv--c .codeinv__form{justify-content:center}
.band .codeinv__t{color:var(--ivory)}
.band .codeinv__form input{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--ivory)}
.band .codeinv__form input::placeholder{color:rgba(240,237,228,.42)}
.band .codeinv__form button{background:#fff;color:var(--ink)}
.band .codeinv__form button:hover{background:#FFE7D1;color:var(--ink)}
.band .codeinv__aide{color:rgba(240,237,228,.72)}
@media(max-width:700px){
  .codeinv--bloc .codeinv__form{width:100%}
  .codeinv--bloc .codeinv__form input{flex:0 0 120px;width:120px}
  .codeinv--bloc .codeinv__form button{flex:1 1 auto;justify-content:center;padding:0 14px}
}

/* ── Barre d'action collée (980px et moins) ──────────────────────────────── */
.bar{display:none}
@media(max-width:980px){
  .bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(250,248,243,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);
    transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s,background-color .3s,border-color .3s}
  html.js .bar:not(.on),body.menu-open .bar,body:has(.mdl.on) .bar{transform:translateY(110%);visibility:hidden;
    transition:transform .3s ease,visibility 0s linear .3s,background-color .3s,border-color .3s}
  body:has(>.bar){padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
.bar__b{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 10px;border-radius:14px;font:600 15px/1.2 var(--s);letter-spacing:-.01em;text-align:center;transition:background-color .2s,border-color .2s}
/* Texte encre sur l'orange : 6,6:1 (le blanc n'y fait que 2,7:1). */
.bar__b--pro{background:var(--acc);color:var(--ink)}
.bar__b--pro:hover{background:#FF8A26;color:var(--ink)}
.bar__b--cpl{border:1px solid var(--line);background:#fff;color:var(--ink)}
.bar__b--cpl:hover{border-color:#FFD2A8;color:var(--ink)}
.bar--sombre{background:rgba(20,17,15,.94);border-top-color:rgba(255,255,255,.1)}
.bar--sombre .bar__b--cpl{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--ivory)}

/* ── Menu : section en cours, retour au moindre geste vers le haut ────────── */
.nav__l a{color:var(--soft);transition:color .2s}
.nav__l a:hover{color:var(--ink)}
.nav__l a.on{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:6px}
@media(min-width:981px) and (max-width:1180px){.nav__l{gap:22px;font-size:16px}.nav__r{gap:16px;font-size:16px}}
/* Pendant l'ouverture, on remonte : le menu revient, « Passer » s'efface. */
body.in-hero.nav-peek .nav{transform:none;opacity:1;pointer-events:auto}
body.in-hero.nav-peek .h3__skip{opacity:0;visibility:hidden;pointer-events:none}
/* Téléphone, après l'ouverture : caché en descendant, de retour en remontant. */
/* 21/10 : menu caché en descendant sur TOUS les écrans, il revient dès qu'on remonte. */
body.nav-hide:not(.menu-open) .nav:not(:focus-within){transform:translateY(-140%);opacity:0;pointer-events:none}

/* Bouton « Menu » (téléphone) : la pilule ne garde que logo, FR/EN et lui. */
.nav__menu{display:none}
.nav__ham{display:inline-flex;flex-direction:column;gap:3px}
.nav__ham i{display:block;width:16px;height:2px;border-radius:2px;background:currentColor}
@media(max-width:980px){
  .nav__in:has(.nav__menu) .nav__login,.nav__in:has(.nav__menu) .nav__r .b{display:none}
  .nav__menu{display:inline-flex;align-items:center;gap:9px;min-width:44px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--ink);color:#fff;font:600 15px/1 var(--s);letter-spacing:-.01em;cursor:pointer}
}

/* ── Menu plein écran (téléphone) ────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;gap:22px;overflow-y:auto;overscroll-behavior:contain;padding:max(10px,env(safe-area-inset-top)) var(--pad) calc(24px + env(safe-area-inset-bottom));background:var(--ivory);color:var(--ink);opacity:0;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease}
.sheet[hidden]{display:none}
.sheet.on{opacity:1;transform:none}
.sheet__top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.sheet__x{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:100px;background:#fff;color:var(--ink);font:600 15px/1 var(--s);cursor:pointer}
.sheet__x i{font-style:normal;font-size:13px}
.sheet .codeinv{padding:16px;border:1px solid var(--line);border-radius:20px;background:#fff}
.sheet__l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sheet__l a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 2px;border-bottom:1px solid var(--line);font-size:22px;font-weight:500;letter-spacing:-.025em;color:var(--ink)}
.sheet__l a i{flex:none;font-style:normal;font-size:20px;color:var(--acc-t)}
.sheet__l a.on{color:var(--acc-t)}
.sheet__2{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.sheet__2 a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:17px;font-weight:500;color:var(--soft)}
.sheet__2 a i{font-style:normal}
.sheet .ctas{width:100%;align-self:stretch;margin-top:auto}
.sheet .cta1,.sheet .cta2{flex:1 1 100%;justify-content:center}
html:has(body.menu-open),body.menu-open{overflow:hidden}
@media(min-width:981px){.sheet{display:none!important}}

/* ── Bascules des tarifs ─────────────────────────────────────────────────── */
.togs{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:30px}
.togs .tog{margin-top:0}
.togs .tog--s{margin-left:auto}
.tog button:focus-visible{outline:2px solid var(--acc-t);outline-offset:2px}
.tog--s{margin-top:0;padding:4px;border-radius:14px}
.tog--s button{min-height:40px;padding:0 16px;border-radius:10px;font-size:15px}
.tog button em{font-style:normal;font-weight:500;opacity:.75}
@media(max-width:700px){
  .togs{flex-direction:column;align-items:stretch}
  .togs .tog--s{margin-left:0}
  .togs .tog,.tog--s{display:flex;width:100%}
  .togs .tog button{flex:1 1 0;min-height:44px;padding:0 10px;font-size:15px}
}

/* ── « Dans toutes les offres » ──────────────────────────────────────────── */
.incl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:24px}
.incl__k{flex:none;font:600 12px/1.4 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.incl__l{flex:1 1 560px;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.incl__l li{position:relative;padding-left:24px;font-size:16px;font-weight:500;line-height:1.35;color:var(--ink)}
.incl__l li::before{content:'';position:absolute;left:0;top:calc((1.35em - 16px) / 2);width:16px;height:16px;border-radius:50%;
  background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.incl__p{flex:1 0 100%;font-size:15px;color:var(--soft)}
@media(max-width:700px){
  .incl__l{flex-basis:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
  .incl__l li{font-size:15px}
}

/* ── Apparitions, une seule fois ─────────────────────────────────────────────
   Masquées seulement quand JavaScript tourne (html.js) : sans lui, tout se lit. */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,.84,.24,1),transform .8s cubic-bezier(.16,.84,.24,1)}
.rv.in,html:not(.js) .rv{opacity:1;transform:none}
.rv--d1{transition-delay:.08s}.rv--d2{transition-delay:.16s}.rv--d3{transition-delay:.24s}

/* ── Divers ──────────────────────────────────────────────────────────────── */
/* Un lien survolé ne doit pas virer à l'orange sur un bouton orange. */
.cta1:hover{color:#fff}
.cta2:hover{color:var(--ink)}
.band .cta2:hover,.final .cta2:hover{color:var(--ivory)}

/* ── « Réduire les animations » : états finaux, sans mouvement ─────────────── */
@media(prefers-reduced-motion:reduce){
  .rv,.rv.in{opacity:1;transform:none;transition:none}
  .mock__c,.mock__c.on,.lo__t,.lo__b::after,.go,.go i,.duo__l a,.duo__l a i,.sheet,.bar,.nav__l a{transition:none!important}
  .lo__it.on>.lo__p{animation:none}
  .go:hover i,.duo__l a:hover i{transform:none}
  .marq__t{animation:none}
}