/* =============================================================
   UN SEUL PAIEMENT — design system partagé par les 3 pages
   Bleu institutionnel · vert réservé au verdict · fond blanc cassé
   ============================================================= */

:root{
  --ink:#05233B; --body:#3F5568; --mute:#78899C;
  --navy:#013D6A; --navy-d:#012A4C; --navy-l:#01568F;
  --blue:#01509E; --blue-d:#013F8C; --blue-l:#1E86D6; --blue-soft:#E7F1F9;
  --green:#248165; --green-d:#1B6B52; --green-soft:#E6F2ED;
  --amber:#B54708; --amber-soft:#FEF3E6;
  --bg:#F5F9FC; --card:#FFFFFF; --line:#E1E9F1; --line-s:#EDF2F7;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --sh:0 1px 2px rgba(5,35,59,.04), 0 12px 32px -16px rgba(5,35,59,.14);
  --sh-lg:0 2px 4px rgba(5,35,59,.04), 0 28px 64px -24px rgba(5,35,59,.24);
  --ff-h:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --ff-b:'Inter',system-ui,-apple-system,sans-serif;
  --max:1140px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{font-family:var(--ff-b);background:var(--bg);color:var(--body);line-height:1.65;
  font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-h);color:var(--ink);line-height:1.14;letter-spacing:-.022em;font-weight:700}
strong,b{color:var(--ink);font-weight:600}
:focus-visible{outline:2.5px solid var(--blue-l);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.narrow{max-width:780px;margin-left:auto;margin-right:auto}
.mut{color:var(--mute)}
.sec{padding:88px 0}
@media(max-width:760px){.sec{padding:60px 0}}
.sec-alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-navy{background:var(--navy);color:#B4CBE0}
.sec-navy h2,.sec-navy h3,.sec-navy h4{color:#fff}
.sec-navy strong,.sec-navy b{color:#fff}

/* ---------- Titres de section ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-d);background:var(--blue-soft);
  border:1px solid rgba(1,80,158,.16);padding:6px 12px;border-radius:999px;margin-bottom:20px}
.sec-navy .eyebrow{color:#8FC0E8;background:rgba(30,134,214,.13);border-color:rgba(30,134,214,.26)}
.sec-head{max-width:720px;margin-bottom:46px}
.sec-head h2{font-size:clamp(27px,3.9vw,42px);margin-bottom:15px}
.sec-head p{font-size:18px}
.sec-head.ctr{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ff-b);
  font-weight:600;font-size:16px;line-height:1;padding:15px 24px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;transition:background .16s,transform .16s,box-shadow .16s;
  text-align:center}
.btn-p{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(5,35,59,.08),0 10px 24px -12px rgba(1,80,158,.65)}
.btn-p:hover{background:var(--blue-d)}
.btn-o{background:var(--card);color:var(--navy);border-color:var(--line);box-shadow:var(--sh)}
.btn-o:hover{border-color:#C5D6E6}
.btn-w{background:#fff;color:var(--navy)}
.btn-full{display:flex;width:100%;margin-top:18px}
.btn svg{flex:none}

/* ---------- Navigation ---------- */
/* Le fond est opaque dès le départ : le logo est bleu marine et la photo du
   héros passe sous la barre pendant le défilement. Une barre transparente
   rendait le mot-symbole illisible sur l'image. Le .solid n'ajoute donc que
   le filet et l'ombre. */
#nav{position:sticky;top:0;z-index:60;background:rgba(245,249,252,.92);
  backdrop-filter:saturate(180%) blur(14px);
  transition:box-shadow .24s,border-color .24s;border-bottom:1px solid transparent}
#nav.solid{border-bottom-color:var(--line);box-shadow:0 1px 20px -8px rgba(5,35,59,.14)}
#nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px}
.brandmark{display:inline-flex;align-items:center;gap:11px}
.brandmark svg{flex:none}
.brandmark .wm{font-family:var(--ff-h);font-weight:700;font-size:17px;color:var(--navy);
  letter-spacing:-.025em;line-height:1.02}
.brandmark .wm i{display:block;font-style:normal;font-weight:500;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-top:2px}
.brandmark .logo-img{height:36px;width:auto}
@media(max-width:560px){.brandmark .logo-img{height:29px}}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-note{font-size:13.5px;font-weight:500;color:var(--mute)}
@media(max-width:700px){.nav-note{display:none}}
#nav .btn{padding:11px 18px;font-size:14.5px}

/* =============================================================
   HÉROS — photo pleine largeur en fond, texte à gauche, quiz à droite
   ============================================================= */
.hero{position:relative;padding:56px 0 78px;background:var(--navy)}
/* Le contenu est explicitement au-dessus du calque photo. On n'utilise pas de
   z-index négatif : le will-change:transform de la parallaxe promeut l'image en
   couche composite, et elle repassait alors par-dessus le texte. */
.hero > .wrap{position:relative;z-index:1}

/* Le calque photo couvre tout le héros. L'image déborde de 15 % en haut et en
   bas : c'est cette marge que consomme la parallaxe. Sans elle, le déplacement
   découvrait le haut du cadre et laissait une bande vide. */
#heroBg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy)}
/* Les photos sont volontairement sombres et désaturées ; on les remonte un peu,
   sinon l'overlay les efface complètement. */
#heroBg img{position:absolute;left:0;top:-15%;width:100%;height:130%;
  object-fit:cover;object-position:35% 42%;will-change:transform;
  filter:brightness(1.2) saturate(1.06)}
/* Deux couches : un dégradé horizontal qui protège la colonne de texte, puis un
   voile vertical qui rattache le héros au blanc cassé de la section suivante.
   Dosé pour que le texte passe le contraste AA sans noyer la photo. */
#heroBg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(1,42,76,.90) 0%, rgba(1,42,76,.74) 32%, rgba(1,42,76,.40) 60%, rgba(1,42,76,.22) 100%),
    linear-gradient(180deg, rgba(1,42,76,.42) 0%, rgba(1,42,76,0) 30%, rgba(1,42,76,.28) 100%)}

/* Sur mobile le héros dépasse 1700 px de haut et le texte se retrouve n'importe
   où sur la photo. Le dégradé horizontal ne protège plus rien : on passe à un
   voile presque uniforme, qui garde la photo lisible sans jouer au hasard avec
   le contraste du texte. */
@media(max-width:1020px){
  #heroBg::after{background:linear-gradient(180deg,
    rgba(1,42,76,.80) 0%, rgba(1,42,76,.86) 40%, rgba(1,42,76,.90) 100%)}
  #heroBg img{object-position:50% 30%}
}

.hero-grid{display:grid;grid-template-columns:1fr 470px;gap:52px;align-items:start}

/* Sous 1020 px la colonne de gauche s'efface comme conteneur (display:contents)
   pour que ses enfants entrent dans le flex du héros. Ça permet de remonter le
   quiz juste sous l'accroche : sur mobile le formulaire se retrouvait sinon à
   plus de 1100 px du haut. */
@media(max-width:1020px){
  .hero-grid{display:flex;flex-direction:column;gap:26px;align-items:stretch}
  .hero-col{display:contents}
  .hero-col .eyebrow{order:1}
  .hero-col h1{order:2}
  .hero-col .lede{order:3}
  #quiz{order:4}
  .hero-col .hero-pts{order:5}
  .hero-col .hero-note{order:6}
}

.hero .eyebrow{color:#9FCBF0;background:rgba(30,134,214,.18);border-color:rgba(159,203,240,.3)}
.hero h1{font-size:clamp(33px,5vw,54px);margin:18px 0 20px;color:#fff;
  text-shadow:0 2px 24px rgba(1,30,54,.45)}
.hero h1 em{font-style:normal;color:#7FD3A8}
.hero .lede{font-size:clamp(17px,2vw,19.5px);max-width:560px;color:#D3E3F2}
.hero-pts{list-style:none;display:grid;gap:12px;margin-top:26px;max-width:540px}
.hero-pts li{position:relative;padding-left:30px;font-size:16px;color:#E4EEF8}
.hero-pts li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:5px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.hero-pts li::after{content:"";position:absolute;left:5.5px;top:11px;width:7px;height:3.5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* Précision de positionnement, sous les puces */
.hero-note{display:flex;align-items:flex-start;gap:11px;margin-top:28px;max-width:520px;
  padding:14px 17px;border-radius:var(--r-sm);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.hero-note svg{flex:none;width:19px;height:19px;margin-top:2px;fill:none;stroke:#7FD3A8;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-note span{font-size:14.5px;color:#CFE1F1;line-height:1.5}
.hero-note b{color:#fff;font-weight:600}

/* =============================================================
   LE QUIZ
   ============================================================= */
#quiz{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);overflow:hidden;position:sticky;top:92px}
@media(max-width:1020px){#quiz{position:static}}
.q-head{padding:22px 24px 18px;border-bottom:1px solid var(--line-s);background:#FAFCFE}
.q-head .kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12.5px;font-weight:600;color:var(--mute);letter-spacing:.02em;margin-bottom:12px}
.q-head .kicker #qpct{color:var(--blue-d);font-variant-numeric:tabular-nums}
.q-head h2{font-size:19px;margin-bottom:5px;letter-spacing:-.02em}
.q-head p{font-size:14px;color:var(--mute);line-height:1.5}
.pbar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:16px}
.pbar i{display:block;height:100%;width:8%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--blue-l));transition:width .38s cubic-bezier(.3,.8,.3,1)}

#quizBody{position:relative;padding:24px}
.qs{display:none}
.qs.on{display:block;animation:qin .34s cubic-bezier(.22,.8,.3,1) both}
.qs.on.rev{animation-name:qinr}
@keyframes qin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes qinr{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.q{font-family:var(--ff-h);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.022em;
  line-height:1.24;margin-bottom:7px}
.q-sub{font-size:14px;color:var(--mute);margin-bottom:18px;line-height:1.5}

.opts{display:grid;gap:9px}
.opts.two{grid-template-columns:1fr 1fr}
@media(max-width:400px){.opts.two{grid-template-columns:1fr}}
.opt{position:relative;text-align:left;font-family:var(--ff-b);font-size:15px;font-weight:500;
  color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:14px 40px 14px 15px;cursor:pointer;transition:border-color .14s,background .14s,transform .14s;
  line-height:1.35}
.opt small{display:block;font-size:12.5px;font-weight:400;color:var(--mute);margin-top:3px}
.opt:hover{border-color:var(--blue-l);background:#FAFCFE}
.opt.sel{border-color:var(--blue);background:var(--blue-soft)}
.chk{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:20px;height:20px;
  border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.14s}
.chk svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;
  stroke-linejoin:round;opacity:0;transition:opacity .14s}
.opt.sel .chk{background:var(--blue);border-color:var(--blue)}
.opt.sel .chk svg{opacity:1}

/* Champs */
.fields{display:grid;gap:11px}
.fields .row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:400px){.fields .row{grid-template-columns:1fr}}
.fields input,.fields select{width:100%;font-family:var(--ff-b);font-size:16px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 15px;
  transition:border-color .14s,box-shadow .14s}
.fields input::placeholder{color:#9AAABC}
.fields input:focus,.fields select:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3.5px var(--blue-soft)}
.fields input.err,.fields select.err{border-color:var(--amber);box-shadow:0 0 0 3.5px var(--amber-soft)}
.fields select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237C8CA0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.qf-l{font-size:13px;font-weight:600;color:var(--ink);margin-top:4px}
.qf-money{position:relative}
.qf-money span{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--mute);
  font-size:16px;font-weight:500;pointer-events:none}
.qf-money input{padding-left:30px;font-variant-numeric:tabular-nums}
.qf-h{font-size:12.5px;color:var(--mute);line-height:1.5;margin-top:-3px}

.qnav{display:flex;align-items:center;gap:11px;margin-top:18px}
.qback{flex:none;width:44px;height:44px;border-radius:var(--r-sm);background:var(--card);
  border:1.5px solid var(--line);cursor:pointer;display:grid;place-items:center;transition:.14s}
.qback:hover{border-color:#C5D6E6;background:var(--line-s)}
.qback svg{width:15px;height:15px;fill:none;stroke:var(--body);stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.qhint{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--mute);
  line-height:1.3}
.qhint svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--green-d);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.legal{font-size:12px;color:var(--mute);line-height:1.55;margin-top:15px}

/* Résultat */
.light{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;border-radius:999px;margin-bottom:16px}
.light i{width:9px;height:9px;border-radius:50%;flex:none}
.v-ok{background:var(--green-soft);color:var(--green-d)}
.v-ok i{background:var(--green);box-shadow:0 0 0 3.5px rgba(36,129,101,.16)}
.v-warn{background:var(--amber-soft);color:var(--amber)}
.v-warn i{background:#D07A12;box-shadow:0 0 0 3.5px rgba(232,130,12,.16)}
.v-bad{background:#F4F6F9;color:var(--body)}
.v-bad i{background:var(--mute);box-shadow:0 0 0 3.5px rgba(124,140,160,.16)}
.res-num{font-family:var(--ff-b);font-weight:700;font-size:clamp(38px,7vw,52px);color:var(--green-d);
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.res-num small{display:block;font-size:13.5px;font-weight:500;color:var(--mute);letter-spacing:0;
  line-height:1.45;margin-top:9px;max-width:330px}
.v-bad ~ .res-num,.qs.res .v-bad+.res-num{color:var(--navy)}
.v-box{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#FAFCFE}
.v-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 15px;
  border-bottom:1px solid var(--line-s);font-size:14px}
.v-line:last-child{border-bottom:0}
.v-line b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.qs.res ul{list-style:none;display:grid;gap:10px;margin-top:18px}
.qs.res ul li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:var(--body)}
.qs.res ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:2px;
  background:var(--blue-l)}

/* =============================================================
   BANDE DE CHIFFRES
   ============================================================= */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:760px){.stats{grid-template-columns:1fr;gap:14px}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--sh)}
.sec-navy .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none}
.stat .n{font-family:var(--ff-b);font-weight:700;font-size:clamp(32px,4.6vw,42px);color:var(--navy);
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;display:block}
.sec-navy .stat .n{color:#fff}
.stat .l{font-size:14.5px;color:var(--mute);margin-top:11px;line-height:1.5;display:block}
.sec-navy .stat .l{color:#9AB6D0}

/* =============================================================
   AVANT / APRÈS
   ============================================================= */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center}
@media(max-width:860px){.ba{grid-template-columns:1fr;gap:18px}}
.ba-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh)}
.ba-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:860px){.ba-card img{aspect-ratio:16/10}}
.ba-card .cap{padding:20px 22px}
.ba-card .tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 10px;border-radius:5px;margin-bottom:11px}
.ba-card.before .tag{background:var(--amber-soft);color:var(--amber)}
.ba-card.after .tag{background:var(--green-soft);color:var(--green-d)}
.ba-card h3{font-size:19px;margin-bottom:7px}
.ba-card p{font-size:14.5px;line-height:1.55}
.ba-arrow{width:52px;height:52px;border-radius:50%;background:var(--navy);display:grid;place-items:center;
  flex:none;box-shadow:var(--sh)}
.ba-arrow svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
@media(max-width:860px){.ba-arrow{transform:rotate(90deg);margin:0 auto}}

/* =============================================================
   SPLIT-SCROLL — comment ça marche
   ============================================================= */
/* La section est épinglée : .ss est haute (une hauteur d'écran par étape, plus
   une), .ss-pin colle en haut et ne bouge plus pendant que le scroll fait
   avancer les étapes une à une. Sous 940 px on abandonne l'épinglage et tout
   redevient une simple liste, parce que 100vh épinglé sur un téléphone est
   pénible et casse le défilement. */
.ss{position:relative}
.ss-pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:30px}
/* Le titre entre dans la zone épinglée, sinon il disparaît dès que
   l'épinglage commence et on perd le contexte pendant les quatre étapes. */
.ss-head{margin-bottom:0;max-width:760px}
.ss-head h2{font-size:clamp(25px,3.2vw,34px);margin-bottom:11px}
.ss-head p{font-size:16.5px}
.ss-head .eyebrow{margin-bottom:14px}
.ss-inner{width:100%;
  display:grid;grid-template-columns:44px 1fr 1fr;gap:34px;align-items:center}

/* Le rail de progression */
.ss-rail{display:flex;flex-direction:column;gap:12px;align-items:center}
.ss-rail .rl{position:relative;width:34px;height:34px;border-radius:11px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);color:var(--mute);
  font-family:var(--ff-b);font-weight:700;font-size:13px;display:grid;place-items:center;
  transition:background .3s,border-color .3s,color .3s,transform .3s}
.ss-rail .rl b{font-weight:700}
.ss-rail .rl.done{background:var(--blue-soft);border-color:rgba(1,80,158,.3);color:var(--blue-d)}
.ss-rail .rl.on{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.1);
  box-shadow:0 8px 18px -8px rgba(1,80,158,.7)}

/* La pile d'étapes s'ACCUMULE : chaque cran de scroll fait monter une étape de
   plus, et les précédentes restent. Les quatre occupent leur place définitive
   dès le départ (elles sont simplement invisibles), sinon la liste sauterait à
   chaque apparition. */
.ss-stack{display:grid;gap:12px;align-content:center}
.st{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--sh);
  opacity:0;transform:translateY(26px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,.8,.3,1),
             border-color .3s,box-shadow .3s}
.st.on{opacity:1;transform:none}
/* L'étape en cours reste signalée une fois que les suivantes sont montées */
.st.cur{border-color:rgba(1,80,158,.38);box-shadow:0 0 0 3px var(--blue-soft),var(--sh)}
.st .no{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;
  border-radius:8px;background:var(--line-s);color:var(--mute);font-family:var(--ff-b);
  font-weight:700;font-size:12.5px;margin-bottom:11px;transition:background .3s,color .3s}
.st.cur .no{background:var(--blue);color:#fff}
.st h3{font-size:18px;margin-bottom:0}
/* Seule l'étape en cours garde son texte. Les étapes déjà montées se replient
   sur leur titre : sinon les quatre cartes dépassent la hauteur d'écran et
   l'épinglage se met à déborder. */
.st p{font-size:14.5px;line-height:1.6;max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .5s cubic-bezier(.22,.8,.3,1),opacity .32s ease,margin-top .5s ease}
.st.cur p{max-height:230px;opacity:1;margin-top:7px}

/* Écrans peu hauts : on resserre pour que les quatre cartes tiennent */
@media(min-width:941px) and (max-height:820px){
  .ss-pin{gap:20px}
  .ss-head p{display:none}
  .ss-head h2{font-size:26px}
  .st{padding:15px 18px}
  .st h3{font-size:16.5px;margin-bottom:4px}
  .st p{font-size:13.5px;line-height:1.5}
  .st .no{width:23px;height:23px;margin-bottom:8px;font-size:11.5px}
}

/* Le visuel */
.ss-vis{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);
  aspect-ratio:4/5;max-height:74vh;background:var(--line-s);justify-self:end;width:100%}
.ss-vis .panel{position:absolute;inset:0;opacity:0;transform:scale(1.06);
  transition:opacity .6s ease,transform .9s cubic-bezier(.22,.8,.3,1)}
.ss-vis .panel.on{opacity:1;transform:scale(1)}
/* Les photos sont cadrées large, sujet au centre-gauche : sans object-position
   le recadrage en portrait coupe le visage. */
.ss-vis .panel img{width:100%;height:100%;object-fit:cover;object-position:38% 36%}

@media(max-width:1100px){.ss-inner{grid-template-columns:40px 1fr 1fr;gap:24px}}

/* Repli sans épinglage */
@media(max-width:940px){
  .ss{height:auto!important}
  .ss-pin{position:static;height:auto;display:block;overflow:visible}
  .ss-inner{display:grid;grid-template-columns:1fr;gap:26px;padding:0}
  .ss-rail{flex-direction:row;justify-content:flex-start;flex-wrap:wrap;order:1}
  .ss-vis{order:2;aspect-ratio:16/10;max-height:none;justify-self:stretch}
  .ss-stack{order:3;display:grid;gap:14px;align-content:start}
  /* Sans épinglage, les quatre étapes sont simplement listées, texte compris */
  .st{opacity:1;transform:none;padding:22px 24px}
  .st .no{background:var(--blue);color:#fff}
  .st h3{margin-bottom:7px}
  .st p,.st.cur p{max-height:none;opacity:1;overflow:visible;margin-top:0}
  .st.cur{box-shadow:var(--sh)}
}

/* =============================================================
   CARTES GÉNÉRIQUES
   ============================================================= */
.cards{display:grid;gap:20px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.c2,.c3{grid-template-columns:1fr}}
.box{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;box-shadow:var(--sh);overflow:hidden}
.box::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(30,134,214,.09),transparent 62%)}
.box:hover::before{opacity:1}
.sec-navy .box{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);box-shadow:none;
  color:#B4CBE0}
.box .ic{width:42px;height:42px;border-radius:11px;background:var(--blue-soft);display:grid;
  place-items:center;margin-bottom:17px}
.sec-navy .box .ic{background:rgba(30,134,214,.16)}
.box .ic svg{width:21px;height:21px;fill:none;stroke:var(--blue-d);stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.sec-navy .box .ic svg{stroke:#74B0E6}
.box h3{font-size:19px;margin-bottom:9px}
.box p{font-size:15.5px;line-height:1.6}
.box p+p{margin-top:12px}

/* Listes ✓ / ✗ */
ul.tick,ul.cross{list-style:none;display:grid;gap:11px;margin-top:15px}
ul.tick li,ul.cross li{position:relative;padding-left:29px;font-size:15.5px;line-height:1.55}
ul.tick li::before,ul.cross li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;
  border-radius:5px}
ul.tick li::before{background:var(--green-soft);border:1px solid rgba(36,129,101,.3)}
ul.tick li::after{content:"";position:absolute;left:5.5px;top:10px;width:7px;height:3.5px;
  border-left:2px solid var(--green-d);border-bottom:2px solid var(--green-d);transform:rotate(-45deg)}
ul.cross li::before{background:var(--amber-soft);border:1px solid rgba(181,71,8,.28)}
ul.cross li::after{content:"";position:absolute;left:8px;top:9px;width:2px;height:10px;
  background:var(--amber);border-radius:1px;box-shadow:0 0 0 0 transparent;transform:rotate(45deg)}
ul.cross li span.x{display:none}
ul.plain{list-style:none;display:grid;gap:10px;margin-top:14px}
ul.plain li{position:relative;padding-left:19px;font-size:15.5px;line-height:1.55}
ul.plain li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:2px;
  background:var(--blue-l)}

/* =============================================================
   TABLEAU COMPARATIF
   ============================================================= */
.cmp{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);font-size:15px}
.cmp th,.cmp td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line-s);vertical-align:top}
.cmp thead th{background:#FAFCFE;font-family:var(--ff-h);font-weight:600;color:var(--ink);font-size:14px}
.cmp tbody th{font-weight:600;color:var(--ink);font-size:14.5px;width:26%}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp .hl{background:var(--blue-soft)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-x .cmp{min-width:640px}

/* =============================================================
   BANDE PHOTO
   ============================================================= */
.band{position:relative;min-height:400px;display:grid;align-items:center;overflow:hidden;
  background:var(--navy)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.44}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(1,42,76,.92) 0%,rgba(1,42,76,.66) 48%,rgba(1,42,76,.34) 100%)}
.band .wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:64px}
.band h2{color:#fff;font-size:clamp(25px,3.6vw,38px);max-width:640px;margin-bottom:16px}
.band p{color:#B7CFE6;font-size:17.5px;max-width:580px}
.band .btn{margin-top:28px}

/* =============================================================
   FAQ
   ============================================================= */
.faq{display:grid;gap:11px;max-width:820px;margin:0 auto}
.faq-i{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s,box-shadow .2s}
.faq-i.on{border-color:rgba(1,80,158,.3);box-shadow:var(--sh)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--ff-h);font-weight:600;font-size:16.5px;color:var(--ink);text-align:left;
  background:none;border:0;padding:19px 22px;cursor:pointer;line-height:1.35}
.faq-q::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--mute);
  border-bottom:2px solid var(--mute);transform:rotate(45deg) translateY(-3px);transition:transform .24s}
.faq-i.on .faq-q::after{transform:rotate(-135deg) translateY(-3px);border-color:var(--blue)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.3,.8,.3,1)}
.faq-a p{padding:0 22px 20px;font-size:15.5px;line-height:1.65}
.faq-a p+p{padding-top:0;margin-top:-6px;padding-bottom:20px}

/* =============================================================
   CTA FINAL
   ============================================================= */
.cta{text-align:center}
.cta h2{font-size:clamp(27px,4vw,40px);margin-bottom:16px}
.cta p{font-size:18px;max-width:600px;margin:0 auto}
.cta .btn{margin-top:30px}

/* =============================================================
   PIED DE PAGE
   ============================================================= */
.ft{background:var(--navy-d);color:#8AA6C0;padding:60px 0 44px;font-size:14px;line-height:1.7}
.ft .brandmark .logo-img{height:34px}
.ft .brandmark .wm{color:#fff}
.ft .brandmark .wm i{color:#7290AC}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;margin-bottom:38px}
@media(max-width:820px){.ft-grid{grid-template-columns:1fr;gap:28px}}
.ft h4{color:#fff;font-size:14px;margin-bottom:13px;letter-spacing:0}
.ft p+p{margin-top:12px}
.ft a{color:#B4CBE0;text-decoration:underline;text-underline-offset:3px}
.ft-legal{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;font-size:12.5px;color:#6A87A4;
  line-height:1.65}
.ft-legal p+p{margin-top:10px}

/* =============================================================
   RÉVÉLATIONS AU SCROLL
   ============================================================= */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.3,1)}
[data-rv].in{opacity:1;transform:none}
[data-rv="1"]{transition-delay:.07s}
[data-rv="2"]{transition-delay:.14s}
[data-rv="3"]{transition-delay:.21s}
[data-rv="4"]{transition-delay:.28s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  #heroBg img{transform:none!important}
}

/* Libellé d'un groupe de choix sur un écran qui en porte plusieurs */
.qf-gl{margin:2px 0 9px;font-size:13px;font-weight:600;color:var(--ink)}
.qs .opts+.qf-gl{margin-top:20px}
.qs .opts.err{outline:2px solid var(--amber);outline-offset:5px;border-radius:var(--r-sm)}
.fields textarea{width:100%;font-family:var(--ff-b);font-size:16px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;resize:vertical;
  line-height:1.5;transition:border-color .14s,box-shadow .14s}
.fields textarea::placeholder{color:#9AAABC}
.fields textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3.5px var(--blue-soft)}
/* Liste de suggestions Google Places, alignée sur la marque */
.pac-container{border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-lg);
  margin-top:5px;font-family:var(--ff-b);z-index:9999}
.pac-item{padding:9px 13px;font-size:14px;color:var(--body);border-top:1px solid var(--line-s);cursor:pointer}
.pac-item:first-child{border-top:0}
.pac-item:hover,.pac-item-selected{background:var(--blue-soft)}
.pac-item-query{font-size:14.5px;color:var(--ink)}
.pac-icon{display:none}
.pac-logo:after{opacity:.5}