/* Site vitrine BVE. Sobre : fond blanc, en-tête clair avec le vrai logo,
   anthracite et orange comme seules couleurs, Montserrat pour les titres
   et Karla pour le texte, comme sur le rapport. Six pages qui partagent
   cet unique fichier. */

@font-face{font-family:"Montserrat";font-weight:600;src:url(polices/Montserrat-SemiBold.woff2) format("woff2"),url(polices/Montserrat-SemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:700;src:url(polices/Montserrat-Bold.woff2) format("woff2"),url(polices/Montserrat-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:800;src:url(polices/Montserrat-ExtraBold.woff2) format("woff2"),url(polices/Montserrat-ExtraBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Karla";font-weight:400;src:url(polices/Karla-Regular.woff2) format("woff2"),url(polices/Karla-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Karla";font-weight:400;font-style:italic;src:url(polices/Karla-Italic.woff2) format("woff2"),url(polices/Karla-Italic.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Karla";font-weight:700;src:url(polices/Karla-Bold.woff2) format("woff2"),url(polices/Karla-Bold.ttf) format("truetype");font-display:swap}

:root{
  --anthra:#1E2E38; --anthra2:#16232B; --orange:#E36A22; --orange-d:#C4571A; --orange-p:#FDF1E8;
  /* Deux oranges réservés au texte. Le --orange de marque ne fait que 3,31:1 sur
     blanc : il reste pour les aplats, filets, icônes et décors, qui n'ont besoin
     que de 3:1. Dès qu'un mot doit être lu, c'est un de ces deux-là, assez
     sombres pour tenir le 4,5:1 du WCAG AA tout en restant le même orange.
     --orange-btn sert de fond aux boutons (texte blanc dessus, 4,81:1),
     --orange-txt sert d'encre (5,34:1 sur blanc, 4,93:1 sur le gris --fond). */
  --orange-btn:#BA5418; --orange-txt:#AE4F16;
  --fond:#F4F6F7; --blanc:#fff; --bord:#DCE4E8; --bord2:#EAEFF1;
  --texte:#22323C; --doux:#5F6F7A; --pale:#94A1AA;
  --neuf:#2E8B6B; --bon:#3E7CB1; --surv:#D9932B; --reno:#C4462F; --na:#8A97A0;
  /* même logique pour le vert : --neuf pour les traits, --neuf-t pour les mots */
  --neuf-t:#28785C;
  --r:16px; --ombre:0 12px 34px rgba(30,46,56,.10); --ombre2:0 22px 50px rgba(30,46,56,.16);
  --titre:"Montserrat",system-ui,sans-serif; --corps:"Karla",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--texte);font:17px/1.6 var(--corps)}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titre);line-height:1.15;margin:0;color:var(--anthra)}
h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;letter-spacing:-.6px}
h2{font-size:clamp(27px,3.4vw,38px);font-weight:800;letter-spacing:-.4px}
h3{font-size:19px;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.inner{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
section.gris{background:var(--fond)}
section.sombre{background:var(--anthra);color:#fff;position:relative;overflow:hidden}
.sombre h2,.sombre h3{color:#fff}
/* la trame de plan du rapport, discrète, sur les fonds anthracite */
.sombre::before,.bande::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px}
.sombre>.inner,.bande>.inner{position:relative}
.sur{font-family:var(--titre);font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--orange-txt);margin-bottom:14px}
.tete{max-width:700px;margin-bottom:46px}
.tete p{font-size:18.5px;color:var(--doux);margin-top:14px}
.tete.centre{margin-left:auto;margin-right:auto;text-align:center}
.sombre .tete p{color:#B9C6CF}
.doux{color:var(--doux)}
.lien{color:var(--orange-txt);font-weight:700;text-decoration:none;font-family:var(--titre);font-size:15px}
.lien:hover{text-decoration:underline}
.lien::after{content:" ›"}
.pastille{display:inline-flex;align-items:center;gap:8px;background:var(--orange-p);color:var(--orange-txt);border-radius:20px;padding:6px 12px;font:700 12px var(--titre);letter-spacing:1px;text-transform:uppercase}
.pastille i{width:7px;height:7px;border-radius:50%;background:var(--orange)}

/* ---------------------------------------------------------------- boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;border-radius:10px;
  font:700 15.5px var(--titre);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:.18s;text-align:center;position:relative}
.btn.o{background:var(--orange-btn);color:#fff;box-shadow:0 8px 20px rgba(227,106,34,.28)}
.btn.o:hover{background:var(--orange-txt);transform:translateY(-1px);box-shadow:0 12px 26px rgba(227,106,34,.34)}
.btn.a{background:var(--anthra);color:#fff}
.btn.a:hover{background:var(--anthra2);transform:translateY(-1px)}
.btn.c{background:#fff;color:var(--anthra);border-color:var(--bord)}
.btn.c:hover{border-color:var(--anthra);transform:translateY(-1px)}
.btn.v{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.v:hover{background:rgba(255,255,255,.08)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn .fl{transition:transform .18s}
.btn:hover .fl{transform:translateX(3px)}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* Lien d'évitement : hors écran tant qu'il n'a pas le focus, ramené en haut
   à gauche dès que le clavier l'atteint. Le z-index le place au-dessus de
   l'en-tête collant, qui monte déjà à 50. */
.evitement{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.evitement:focus{position:fixed;left:12px;top:12px;z-index:70;width:auto;height:auto;overflow:visible;
  background:#fff;color:var(--anthra);padding:12px 18px;border-radius:10px;font:700 15px var(--titre);
  text-decoration:none;box-shadow:var(--ombre2);outline:3px solid var(--anthra);outline-offset:2px}

/* --------------------------------------------------------------- en-tête */
.progres{position:fixed;top:0;left:0;height:3px;width:0;background:var(--orange);z-index:60;transition:width .1s linear}
.haut{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--bord2)}
.haut .inner{display:flex;align-items:center;gap:26px;height:76px}
.logo img{height:46px;width:auto}
.haut nav{display:flex;gap:4px;margin-left:auto}
.haut nav a{color:var(--texte);text-decoration:none;font:600 14.5px var(--titre);padding:9px 12px;border-radius:8px;position:relative}
.haut nav a:hover{background:var(--fond)}
.haut nav a[aria-current]{color:var(--orange-txt)}
.haut nav a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--orange);border-radius:2px}
.haut .tel{color:var(--anthra);text-decoration:none;font:700 15px var(--titre);display:flex;align-items:center;gap:8px;white-space:nowrap}
.haut .tel svg{width:17px;height:17px;fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round}
.haut .btn{padding:11px 18px;font-size:14px;box-shadow:none}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:24px;height:2.5px;background:var(--anthra);margin:5px 0;border-radius:2px}

/* ------------------------------------------------------------------ hero */
.hero{padding:80px 0 70px;background:linear-gradient(180deg,#fff 0%,var(--fond) 100%);overflow:hidden}
.hero .inner{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .sous{font-size:19px;color:var(--doux);margin:22px 0 30px;max-width:520px}
.hero .dispo{margin-top:22px;font-size:14px;color:var(--doux);display:flex;align-items:center;gap:8px}
.hero .dispo i{width:9px;height:9px;border-radius:50%;background:var(--neuf);box-shadow:0 0 0 0 rgba(46,139,107,.5);animation:pouls 2s infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(46,139,107,.45)}70%{box-shadow:0 0 0 9px rgba(46,139,107,0)}100%{box-shadow:0 0 0 0 rgba(46,139,107,0)}}
.hero .gauche>*{animation:entree .7s cubic-bezier(.2,.7,.2,1) both}
.hero .gauche>*:nth-child(2){animation-delay:.08s}.hero .gauche>*:nth-child(3){animation-delay:.16s}.hero .gauche>*:nth-child(4){animation-delay:.24s}.hero .gauche>*:nth-child(5){animation-delay:.32s}
.hero .cadre{animation:entree .9s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes entree{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cadre{border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre2);position:relative;background:var(--anthra)}
.cadre img{width:100%;height:100%;object-fit:cover}
.cadre.h4{aspect-ratio:4/3}
.cadre .etiquette{position:absolute;left:18px;bottom:18px;background:rgba(30,46,56,.88);backdrop-filter:blur(6px);
  padding:10px 14px;border-radius:9px;font:700 13px var(--titre);color:#fff;border-left:3px solid var(--orange)}
.garanties{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--bord)}
.garanties span{display:flex;align-items:center;gap:8px;font:700 13px var(--titre);color:var(--anthra)}
.garanties svg{width:18px;height:18px;fill:none;stroke:var(--neuf);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- chiffres */
.chiffres{border-top:1px solid var(--bord2);border-bottom:1px solid var(--bord2);background:#fff}
.chiffres .inner{display:grid;grid-template-columns:repeat(3,1fr)}
.chiffre{padding:28px 24px;display:flex;gap:18px;align-items:center;border-right:1px solid var(--bord2)}
.chiffre:last-child{border:0}
.chiffre b{font:800 42px/1 var(--titre);color:var(--anthra);white-space:nowrap;font-variant-numeric:tabular-nums}
.chiffre b small{font-size:20px;color:var(--orange);margin-left:2px}
.chiffre span{font-size:14.5px;color:var(--doux);line-height:1.4}

/* -------------------------------------------------------------- ruban 25 */
.ruban{overflow:hidden;background:var(--anthra);color:#fff;padding:14px 0;border-top:3px solid var(--orange)}
.ruban .piste{display:flex;width:max-content;animation:defile 70s linear infinite}
.ruban:hover .piste{animation-play-state:paused}
.ruban span{font:700 13px var(--titre);letter-spacing:1.4px;text-transform:uppercase;padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px;color:#DCE4E8}
.ruban span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
@keyframes defile{to{transform:translateX(-50%)}}

/* --------------------------------------------------------------- comparateur */
.compare{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre2);aspect-ratio:3/2;background:var(--anthra);user-select:none;--x:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .apres{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.compare .apres::before{content:"";position:absolute;inset:0;background:rgba(30,46,56,.18)}
.compare svg{position:absolute;inset:0;width:100%;height:100%}
.compare .annot circle,.compare .annot ellipse{fill:none;stroke:var(--orange);stroke-width:3;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.compare .annot line{stroke:var(--orange);stroke-width:2}
.compare .annot rect{fill:rgba(30,46,56,.92)}
.compare .annot text{fill:#fff;font:700 24px var(--titre)}
.compare .poignee{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);transform:translateX(-1px);pointer-events:none}
.compare .poignee i{position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.compare .poignee svg{position:static;width:22px;height:22px;fill:none;stroke:var(--anthra);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
/* Le curseur natif est invisible : c'est la poignée dessinée qui porte la
   marque du focus clavier, sinon rien ne signale où il se trouve. Les deux
   règles sont sous :has() : si un navigateur ne le comprend pas, il les ignore
   toutes les deux et garde au moins l'anneau natif. */
.compare:has(input:focus-visible) input{outline:none}
.compare:has(input:focus-visible) .poignee i{box-shadow:0 0 0 3px var(--anthra),0 0 0 7px #fff,0 6px 18px rgba(0,0,0,.35)}
.compare .tag{position:absolute;top:16px;padding:8px 12px;border-radius:8px;font:700 12px var(--titre);letter-spacing:1.2px;text-transform:uppercase;color:#fff;background:rgba(30,46,56,.85);backdrop-filter:blur(4px);pointer-events:none}
/* l'étiquette de droite porte du texte 12 px : elle prend l'orange des fonds
   de bouton, seul assez sombre pour que le blanc dessus reste lisible */
.compare .tag.g{left:16px}.compare .tag.d{right:16px;background:var(--orange-btn)}
.compare-txt{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

/* --------------------------------------------------------------- citations */
.citation{font:600 clamp(22px,2.6vw,30px)/1.35 var(--titre);color:var(--anthra);padding-left:22px;border-left:4px solid var(--orange);max-width:820px;letter-spacing:-.2px}
.citation + p{margin-top:16px;font-size:18px;color:var(--doux);max-width:720px}
.sombre .citation{color:#fff}

/* --------------------------------------------------------------- vérités */
.verites{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.verite{background:#fff;border:1px solid var(--bord2);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.verite:hover{transform:translateY(-4px);box-shadow:var(--ombre2)}
.verite img{aspect-ratio:4/3;object-fit:cover;width:100%}
.verite .txt{padding:24px 24px 26px}
.verite h3{font-size:18.5px;line-height:1.35;margin-bottom:12px}
.verite p{font-size:15.5px;color:var(--doux)}

/* ---------------------------------------------------------------- coûts */
.couts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cout{background:#fff;border:1px solid var(--bord2);border-radius:var(--r);padding:26px 22px;box-shadow:var(--ombre);position:relative;overflow:hidden}
.cout::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.cout b{display:block;font:800 26px/1.1 var(--titre);color:var(--anthra);margin-bottom:8px}
.cout h3{font-size:15px;margin-bottom:8px}
.cout p{font-size:14px;color:var(--doux)}
.cout small{display:block;margin-top:12px;font-size:12px;color:var(--doux)}
.cout.accent{background:var(--anthra);border-color:var(--anthra)}
.cout.accent::after{background:var(--orange)}
.cout.accent b,.cout.accent h3{color:#fff}.cout.accent p{color:#B9C6CF}.cout.accent small{color:var(--pale)}
.sources{font-size:12.5px;color:var(--doux);margin-top:18px}
.sources a{color:var(--doux)}

/* ----------------------------------------------------------------- cas */
.cas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cas article{background:#fff;border:1px solid var(--bord2);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre)}
.cas img{aspect-ratio:4/3;object-fit:cover;width:100%}
.cas .txt{padding:18px 20px 20px}
.cas .poste{font:700 11.5px var(--titre);letter-spacing:1.4px;text-transform:uppercase;color:var(--orange-txt);margin-bottom:6px}
.cas h3{font-size:15.5px;line-height:1.35;margin-bottom:8px}
.cas p{font-size:14px;color:var(--doux)}
.cas .bas{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--bord2)}
.cas .bas b{font:800 18px var(--titre);color:var(--anthra)}
.urg{font:700 11px var(--titre);letter-spacing:1px;text-transform:uppercase;padding:5px 9px;border-radius:20px;color:#fff}
/* Le blanc ne tient ni sur le jaune ni sur le gris : ces deux pastilles
   passent en anthracite, et le bleu de la seule pastille « à 5 ans » est
   assombri. Les variables d'état ne bougent pas : elles servent aussi de
   points de couleur dans le rapport, où le 3:1 non textuel suffit. */
.urg.imm{background:var(--reno)}
.urg.an1{background:var(--surv);color:var(--anthra)}
.urg.a5{background:#3B76A9}
.urg.ent{background:var(--na);color:var(--anthra)}

/* --------------------------------------------------------------- tuiles */
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tuile{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--anthra);color:#fff;text-decoration:none;box-shadow:var(--ombre)}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tuile:hover img{transform:scale(1.05)}
.tuile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,46,56,0) 40%,rgba(30,46,56,.9) 100%)}
.tuile .t{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;transform:translateY(6px);transition:transform .3s}
.tuile:hover .t{transform:none}
.tuile h3{color:#fff;font-size:19px;margin-bottom:3px}
.tuile p{font-size:13.5px;color:#C9D3D9}
.tuile .num{position:absolute;top:14px;left:14px;z-index:1;font:800 12px var(--titre);letter-spacing:1px;background:rgba(255,255,255,.92);color:var(--anthra);padding:5px 9px;border-radius:7px}

/* --------------------------------------------------------------- familles */
.famille{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--bord2)}
.famille:first-of-type{border:0;padding-top:0}
.famille:nth-child(even) .cadre{order:2}
.famille .lettre{font:800 13px var(--titre);letter-spacing:2px;color:var(--orange-txt);text-transform:uppercase;margin-bottom:8px}
.famille h3{font-size:24px;margin-bottom:12px}
.famille p{color:var(--doux);margin-bottom:16px}
.postes{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.postes li{font-size:15px;padding:6px 0 6px 22px;position:relative;border-bottom:1px solid var(--bord2)}
.postes li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:10px;border-radius:50%;background:var(--orange-p);border:2px solid var(--orange)}
.sommaire{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px}
.sommaire a{text-decoration:none;font:600 14px var(--titre);color:var(--doux);padding:8px 12px;border-left:2px solid var(--bord);transition:.15s}
.sommaire a:hover,.sommaire a.actif{color:var(--orange-txt);border-color:var(--orange)}
.avec-sommaire{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start}

/* ---------------------------------------------------------------- étapes */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.etapes::before{content:"";position:absolute;left:8%;right:8%;top:48px;height:2px;background:var(--bord)}
.etape{background:#fff;border:1px solid var(--bord2);border-radius:var(--r);padding:26px 24px;position:relative;box-shadow:var(--ombre);transition:transform .25s}
.etape:hover{transform:translateY(-4px)}
.etape i{display:flex;width:44px;height:44px;border-radius:50%;background:var(--anthra);color:#fff;font:800 17px var(--titre);
  align-items:center;justify-content:center;font-style:normal;margin-bottom:16px;box-shadow:0 0 0 6px #fff}
.etape h3{font-size:17.5px;margin-bottom:8px}
.etape p{font-size:15px;color:var(--doux)}
.etape small{display:block;margin-top:12px;font:700 12px var(--titre);letter-spacing:1.2px;text-transform:uppercase;color:var(--orange-txt)}

/* ---------------------------------------------------------------- tableau */
.tableau{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre);font-size:15.5px}
.tableau th,.tableau td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bord2)}
.tableau th{background:var(--anthra);color:#fff;font:700 12.5px var(--titre);letter-spacing:1.4px;text-transform:uppercase}
.tableau tr:last-child td{border:0}
.tableau td:first-child{font-weight:700;font-family:var(--titre);font-size:15px;color:var(--anthra);width:26%}
.tableau .oui{color:var(--neuf-t);font-weight:700}
.tableau .non{color:var(--doux)}
.tableau td:last-child{background:var(--orange-p)}
.defile{overflow-x:auto}

/* -------------------------------------------------------------- limites */
.limites{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.limite{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--bord2);border-radius:12px;padding:16px 18px;font-size:15.5px}
.limite svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:var(--pale);stroke-width:2.4;stroke-linecap:round;margin-top:2px}
.limite.oui svg{stroke:var(--neuf)}

/* ---------------------------------------------------------------- viewer */
.viewer{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start}
.viewer .grande{background:var(--fond);border-radius:var(--r);padding:26px;display:flex;justify-content:center;border:1px solid var(--bord2)}
.viewer .grande button{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:4px}
.viewer .grande img{max-height:760px;width:auto;box-shadow:0 18px 44px rgba(30,46,56,.22);cursor:zoom-in;border:1px solid var(--bord);transition:transform .25s}
.viewer .grande img:hover{transform:scale(1.01)}
.viewer .legende{position:sticky;top:96px}
.viewer .legende .sur{margin-bottom:8px}
.viewer .legende h2{font-size:21px;margin-bottom:12px}
.viewer .legende p{color:var(--doux);font-size:15.5px}
.viewer .nav{display:flex;gap:8px;margin:20px 0}
.viewer .nav button{flex:1;padding:12px;border:1px solid var(--bord);background:#fff;border-radius:9px;font:700 14px var(--titre);cursor:pointer;color:var(--anthra)}
.viewer .nav button:hover{border-color:var(--anthra)}
.miniatures{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.miniatures button{padding:0;border:2px solid transparent;border-radius:6px;background:none;cursor:pointer;overflow:hidden}
.miniatures button[aria-pressed="true"]{border-color:var(--orange)}
.miniatures img{width:100%;aspect-ratio:210/297;object-fit:cover;border:1px solid var(--bord)}
.lightbox{position:fixed;inset:0;z-index:100;width:100%;height:100%;max-width:100%;max-height:100%;border:0;background:rgba(15,26,33,.94);padding:30px;cursor:zoom-out}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox::backdrop{background:rgba(15,26,33,.7)}
.lightbox img{max-height:100%;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox .fermer{position:absolute;top:18px;right:22px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lightbox .fermer:hover{background:rgba(255,255,255,.3)}
.etats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.etat{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;background:#fff;border:1px solid var(--bord2);font-size:14.5px}
.etat i{flex:0 0 14px;height:14px;border-radius:50%;margin-top:4px}
.etat b{display:block;font:700 14px var(--titre);color:var(--anthra)}
.etat span{color:var(--doux);font-size:13.5px}

/* ------------------------------------------------------------- simulateur */
.simu{display:grid;grid-template-columns:1fr 1fr;gap:26px;background:#fff;border-radius:20px;padding:34px;border:1px solid var(--bord2);box-shadow:var(--ombre)}
.simu label{display:block;font:700 12.5px var(--titre);letter-spacing:1.2px;text-transform:uppercase;color:var(--doux);margin:0 0 8px}
.simu .champ{margin-bottom:22px}
.simu .ligne{display:flex;align-items:center;gap:12px}
.simu input[type=number]{width:160px;padding:12px 14px;border:1px solid var(--bord);border-radius:10px;font:700 20px var(--titre);color:var(--anthra);background:var(--fond)}
.simu input[type=range]{flex:1;accent-color:var(--orange)}
.simu .unite{font:700 15px var(--titre);color:var(--doux)}
.simu .coche{display:flex;align-items:center;gap:10px;font:400 15px var(--corps);color:var(--texte);text-transform:none;letter-spacing:0;cursor:pointer}
.simu .coche input{width:20px;height:20px;accent-color:var(--orange)}
.bascule{display:inline-flex;background:var(--fond);border:1px solid var(--bord);border-radius:10px;padding:4px;margin-bottom:22px}
.bascule button{border:0;background:transparent;padding:9px 18px;border-radius:7px;font:700 14px var(--titre);color:var(--doux);cursor:pointer}
.bascule button[aria-pressed="true"]{background:var(--anthra);color:#fff}
.resultat{background:var(--anthra);color:#fff;border-radius:16px;padding:30px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.resultat::before{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px}
.resultat>*{position:relative}
.resultat .k{font:700 12px var(--titre);letter-spacing:2px;text-transform:uppercase;color:#B9C6CF}
.resultat .pct{font:800 clamp(48px,6vw,68px)/1 var(--titre);color:var(--orange);margin:8px 0 2px;font-variant-numeric:tabular-nums}
.resultat .pct small{font-size:.42em;color:#fff;margin-left:4px}
.resultat .phrase{font-size:16px;color:#DCE4E8;margin-top:10px}
.resultat .tarif{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.resultat .tarif b{font:800 28px var(--titre);white-space:nowrap}
.resultat .compare-note{margin-top:14px;font-size:14px;color:#B9C6CF;background:rgba(255,255,255,.06);padding:12px 14px;border-radius:10px;border-left:3px solid var(--orange)}
.resultat .compare-note b{color:#fff}

/* ----------------------------------------------------------------- tarifs */
.offres{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.offre{background:#fff;border:1px solid var(--bord2);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre)}
.offre .haut-o{padding:22px 26px;border-bottom:1px solid var(--bord2);display:flex;align-items:center;gap:16px}
.offre .haut-o img{width:64px;height:64px;object-fit:cover;border-radius:12px}
.offre .haut-o h3{font-size:20px}
.offre .haut-o p{font-size:14px;color:var(--doux)}
.offre .rang{display:flex;justify-content:space-between;align-items:center;padding:16px 26px;border-bottom:1px solid var(--bord2);transition:background .15s}
.offre .rang:hover{background:var(--fond)}
.offre .rang:last-child{border:0}
.offre .rang b{font:600 16px var(--corps);color:var(--texte)}
.offre .prix{font:800 24px var(--titre);color:var(--orange)}
.offre .rang.opt .prix{font-size:18px;color:var(--anthra)}
.offre .corps-o{padding:22px 26px}
.offre .corps-o p{font-size:15.5px;color:var(--doux);margin-bottom:14px}
.offre .grand-prix{font:800 30px var(--titre);color:var(--anthra);margin-bottom:6px}
.offre .grand-prix small{font:600 14px var(--titre);color:var(--doux)}
.inclus{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:28px}
.inclus div{display:flex;gap:10px;align-items:flex-start;font-size:15px;padding:14px 16px;background:#fff;border:1px solid var(--bord2);border-radius:10px}
.inclus svg{flex:0 0 20px;width:20px;height:20px;fill:none;stroke:var(--neuf);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.note{font-size:14px;color:var(--doux);margin-top:16px}
/* le ticket : ce que comprend le prix, ligne à ligne */
.ticket{background:#fff;border:1px solid var(--bord2);border-radius:var(--r);padding:28px 30px;box-shadow:var(--ombre);max-width:520px}
.ticket .t-tete{font:700 12px var(--titre);letter-spacing:2px;text-transform:uppercase;color:var(--orange-txt);margin-bottom:16px;display:flex;justify-content:space-between}
.ticket .l{display:flex;align-items:baseline;gap:10px;padding:8px 0;font-size:15.5px}
.ticket .l::before{content:"";order:2;flex:1;border-bottom:2px dotted var(--bord)}
.ticket .l span:first-child{order:1}.ticket .l span:last-child{order:3;font:700 15px var(--titre);color:var(--anthra);white-space:nowrap}
.ticket .l span.ok{color:var(--neuf-t)}
.ticket .total{margin-top:12px;padding-top:14px;border-top:2px solid var(--anthra);display:flex;justify-content:space-between;align-items:baseline}
.ticket .total b{font:800 26px var(--titre);color:var(--anthra)}
.ticket .total span{font:700 13px var(--titre);letter-spacing:1.5px;text-transform:uppercase}
.ticket .tva{font-size:12px;color:var(--doux);margin-top:10px}

/* ------------------------------------------------------------------- faq */
.faq-groupe{margin-bottom:40px}
.faq-groupe h3{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--orange-txt);margin-bottom:6px}
.faq details{border-bottom:1px solid var(--bord2)}
.faq summary{cursor:pointer;padding:20px 0;font:700 17px var(--titre);color:var(--anthra);list-style:none;display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";flex:0 0 30px;height:30px;border-radius:50%;background:var(--orange-p);color:var(--orange-txt);
  display:flex;align-items:center;justify-content:center;font:800 18px var(--titre);transition:transform .2s}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq details p{padding:0 0 20px 44px;color:var(--doux);font-size:16px;max-width:760px}
.faq details p + p{margin-top:-8px}

/* ----------------------------------------------------------------- avis */
.avis-tete{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.note-g{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--bord);border-radius:12px;padding:10px 16px}
.note-g b{font:800 26px var(--titre)}
.etoiles{display:inline-flex;gap:2px}
.etoiles svg{width:18px;height:18px;fill:#F5B301}
.etoiles svg.vide{fill:#DCE4E8}
.avis-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.avis{background:#fff;border:1px solid var(--bord2);border-radius:var(--r);padding:22px;box-shadow:var(--ombre)}
.avis .qui{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.avis .qui img,.avis .qui i{width:42px;height:42px;border-radius:50%;background:var(--orange-btn);color:#fff;display:flex;align-items:center;
  justify-content:center;font:800 16px var(--titre);font-style:normal;object-fit:cover}
.avis .qui b{display:block;font:700 15px var(--titre)}
.avis .qui small{color:var(--doux);font-size:13px}
.avis p{font-size:15px}
.avis-vide{background:#fff;border:1px dashed var(--bord);border-radius:var(--r);padding:34px;text-align:center}
.avis-vide p{color:var(--doux);margin:6px 0 18px}

/* --------------------------------------------------------------- contact */
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
.form{background:#fff;border:1px solid var(--bord2);border-radius:20px;padding:34px;box-shadow:var(--ombre)}
.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;font:700 12px var(--titre);letter-spacing:1.2px;text-transform:uppercase;color:var(--doux);margin:0 0 7px}
.form label small{font-weight:400;text-transform:none;letter-spacing:0}
.form .ch{margin-bottom:18px}
/* Le groupe de champs est un <fieldset> : bordure, retrait et marge que le
   navigateur lui donne sont effacés, pour que le rendu reste celui du
   <div class="ch"> d'avant. min-width:0 lui rend le droit de rétrécir. */
.ch{border:0;padding:0;margin:0;min-width:0}
.ch legend{padding:0}
.form input,.form textarea,.form select{width:100%;padding:13px 14px;border:1px solid var(--bord);border-radius:10px;font:16px var(--corps);color:var(--texte);background:var(--fond)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.form textarea{min-height:110px;resize:vertical}
.choix{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choix label{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1.5px solid var(--bord);border-radius:12px;cursor:pointer;
  font:400 14px var(--corps);text-transform:none;letter-spacing:0;color:var(--texte);margin:0;transition:border-color .15s;background:#fff}
.choix label:has(input:checked){border-color:var(--orange);background:var(--orange-p)}
.choix input{width:auto;margin-top:3px;accent-color:var(--orange)}
.choix b{display:block;font:700 14px var(--titre);color:var(--anthra)}
.choix small{color:var(--doux);font-size:13px}
.form .btn{width:100%;margin-top:6px}
.form .rgpd{font-size:12.5px;color:var(--doux);margin-top:12px;text-align:center}
.coord{display:grid;gap:16px}
.coord .bloc{background:var(--anthra);color:#fff;border-radius:var(--r);padding:26px}
.coord .bloc h2,.coord .bloc h3{color:#fff;margin-bottom:12px}
.coord a{color:#fff;text-decoration:none;font:700 19px var(--titre);display:flex;align-items:center;gap:12px;margin:8px 0}
.coord a svg{width:22px;height:22px;fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.coord .bloc p{color:#B9C6CF;font-size:15px;margin-top:8px}
.coord .zone{background:#fff;border:1px solid var(--bord2);border-radius:var(--r);padding:22px 26px}
.coord .zone h2,.coord .zone h3{margin-bottom:8px}
.coord .zone p{font-size:15px;color:var(--doux)}
.coord .zone ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.coord .zone li{font:700 12.5px var(--titre);background:var(--fond);border-radius:20px;padding:6px 11px;color:var(--anthra)}

/* ------------------------------------------------------------- bande CTA */
.bande{background:var(--anthra);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.bande .inner{display:grid;grid-template-columns:1.3fr auto;gap:30px;align-items:center}
.bande h2{color:#fff;margin-bottom:10px}
.bande p{color:#B9C6CF;font-size:17px}

/* ----------------------------------------------------------- page texte */
.texte-page{max-width:760px}
.texte-page h2{font-size:24px;margin:36px 0 12px}
.texte-page p{margin-bottom:14px;color:var(--texte)}

/* ------------------------------------------------------------------ pied */
footer{background:var(--anthra2);color:#B9C6CF;padding:56px 0 100px;font-size:14px}
footer .inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
footer h3{font:700 12px var(--titre);letter-spacing:1.8px;text-transform:uppercase;color:#fff;margin:0 0 12px}
footer a{color:#DCE4E8;text-decoration:none}
footer a:hover{color:var(--orange)}
footer li{padding:3px 0}
.logo-pied{display:inline-block;background:#fff;border-radius:12px;padding:8px 14px;margin-bottom:14px}
.logo-pied img{height:44px;width:auto}
footer .bas{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:12.5px;color:#7F909A}

/* -------------------------------------------- mobile, apparitions, divers */
.barre-mobile{display:none}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.08s}.reveal:nth-child(3){transition-delay:.16s}.reveal:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero .gauche>*,.hero .cadre{animation:none}.hero .dispo i{animation:none}.ruban .piste{animation:none}}

@media (max-width:980px){
  .hero .inner,.viewer,.contact,.simu,.offres,.famille,.limites,.bande .inner,.compare-txt,.avec-sommaire{grid-template-columns:1fr}
  .famille:nth-child(even) .cadre{order:0}
  .sommaire{display:none}
  .etapes,.couts,.cas{grid-template-columns:1fr 1fr}
  .etapes::before{display:none}
  .verites,.tuiles{grid-template-columns:1fr 1fr}
  .viewer .legende{position:static}
  footer .inner{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  section{padding:60px 0}
  .haut nav,.haut .tel,.haut .btn{display:none}
  .burger{display:block}
  .haut.ouvert nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;padding:10px 16px 18px;gap:2px;border-bottom:1px solid var(--bord2);box-shadow:var(--ombre)}
  .haut.ouvert nav a{padding:13px 12px;font-size:16px;border-bottom:1px solid var(--bord2)}
  .hero{padding:44px 0 50px}
  .chiffres .inner{grid-template-columns:1fr}
  .chiffre{border-right:0;border-bottom:1px solid var(--bord2);padding:18px 24px}
  .chiffre:last-child{border:0}
  .verites,.tuiles,.etapes,.couts,.cas{grid-template-columns:1fr}
  .tuile{aspect-ratio:16/10}
  .postes{grid-template-columns:1fr}
  .simu,.form{padding:22px}
  .form .duo,.choix{grid-template-columns:1fr}
  .compare{aspect-ratio:4/3}
  footer .inner{grid-template-columns:1fr}
  .barre-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--bord2)}
  .barre-mobile .btn{flex:1;padding:13px 10px;font-size:14px}
}

/* =========================================================== mouvement
   Une couche d'effets sobres : révélation mot à mot des titres, halo qui
   suit la souris sur les fonds anthracite, parallaxe léger des photos,
   inclinaison des cartes au survol, reflet sur les boutons. Tout s'éteint
   quand le visiteur a demandé moins d'animations. */

/* lueurs de marque dans l'en-tête de l'accueil */
.hero{position:relative}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.hero::before{width:520px;height:520px;right:-140px;top:-160px;background:rgba(227,106,34,.16);animation:derive 14s ease-in-out infinite alternate}
.hero::after{width:420px;height:420px;left:-180px;bottom:-200px;background:rgba(30,46,56,.10);animation:derive 18s ease-in-out infinite alternate-reverse}
.hero .inner{position:relative;z-index:1}
@keyframes derive{from{transform:translate(0,0)}to{transform:translate(-40px,30px)}}

/* titres révélés mot à mot */
.mots{display:inline-block}
.mots .m{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(4px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.mots.in .m{opacity:1;transform:none;filter:none}

/* halo orange qui suit la souris sur les surfaces sombres */
.sombre,.bande,.resultat,.coord .bloc{--mx:50%;--my:50%}
.sombre::after,.bande::after,.resultat::after,.coord .bloc::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(227,106,34,.14),transparent 60%);opacity:0;transition:opacity .4s}
.sombre:hover::after,.bande:hover::after,.resultat:hover::after,.coord .bloc:hover::after{opacity:1}
.coord .bloc{position:relative;overflow:hidden}

/* parallaxe léger : la photo se décale un peu moins vite que la page */
.para img{will-change:transform;transform:translateY(var(--p,0px)) scale(1.08)}

/* inclinaison des cartes au survol */
.tilt{transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .25s}
.tilt.actif{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-4px);box-shadow:var(--ombre2)}

/* reflet qui balaie le bouton principal */
.btn.o{overflow:hidden}
.btn.o::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn.o:hover::after{left:130%}

/* ruban : bords fondus */
.ruban{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* apparition avec un léger flou */
.reveal{filter:blur(6px);transition:opacity .6s ease,transform .6s ease,filter .6s ease}
.reveal.in{filter:none}

/* indice de défilement sous le hero */
.indice{display:flex;justify-content:center;padding:0 0 18px;color:var(--pale)}
.indice svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:rebond 1.8s ease-in-out infinite}
@keyframes rebond{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.indice svg{animation:none}
  .mots .m{opacity:1;transform:none;filter:none;transition:none}
  .para img{transform:none}
  .tilt.actif{transform:none}
  .btn.o::after{display:none}
  .reveal{filter:none}
}
@media (hover:none){.tilt.actif{transform:none}}