/* ==========================================================================
   RBF V8 — « SIGNATURE AUTOMOBILE »
   DIRECTIVE DESIGN : publicité automobile premium grand public.
   Le site respire : fond clair majoritaire, sombre réservé aux moments forts.
   Ratio cible homepage : 55 % blanc/ice · 25 % navy · 10 % cyan · 10 % orange/jaune.

   CE FICHIER REMPLACE v4, v5, v6 (refactor, pas empilement) :
   il contient le core (jetons, typo, grilles) ET les composants (header, hero,
   offre, sections, moteur de conversion, footer). rbf-v3.css reste chargé
   uniquement comme base de normalisation, rbf-v8-pages.css porte les pages
   internes et les pages légales.

   Interdits respectés : pas de fond noir plein, pas de glassmorphism systématique,
   pas de grille technique décorative, pas de pill partout, pas d'or « luxe »,
   radius maîtrisé (10/16/24), ombres naturelles, glow réservé au néon et à l'ADAS.
   ========================================================================== */

/* ==========================================================================
   1. JETONS
   ========================================================================== */
:root{
  /* palette dictée */
  --navy:#071C2C;
  --deep:#0B2638;
  --cyan:#00D8FF;
  --sky:#EAFBFF;
  --white:#FFFFFF;
  --ice:#F3F8FA;
  --graphite:#18232B;
  --orange:#FF6B00;
  --yellow:#FFC400;
  --success:#16A66A;

  /* dérivés utiles (contraste et profondeur) */
  --navy-80:rgba(7,28,44,.80);
  --navy-12:rgba(7,28,44,.12);
  --navy-08:rgba(7,28,44,.08);
  --cyan-soft:rgba(0,216,255,.14);
  --orange-dark:#E85D00;
  --text:#101B22;
  --text-2:#3C4C56;
  --text-3:var(--text-3);
  --line:#DDE7EC;
  --line-2:#C9D8E0;

  /* typographie */
  --display:'Saira Condensed','Arial Narrow',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* radius : petit 10-12, carte 16-20, conteneur 24 */
  --r-s:10px; --r-m:16px; --r-l:20px; --r-xl:24px; --r-pill:999px;

  /* ombres naturelles */
  --sh-1:0 1px 2px rgba(7,28,44,.06), 0 4px 12px rgba(7,28,44,.07);
  --sh-2:0 2px 6px rgba(7,28,44,.08), 0 14px 32px rgba(7,28,44,.10);
  --sh-3:0 24px 60px rgba(7,28,44,.16);
  --sh-offer:0 18px 40px rgba(255,107,0,.28);

  --c:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; }
body.v8{ background:var(--white); color:var(--text); font:400 17px/1.6 var(--sans); }
.v8 a{ color:inherit; }
.v8 img{ max-width:100%; height:auto; display:block; }
.v8 h1,.v8 h2,.v8 h3,.v8 h4{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.005em; line-height:1; margin:0; color:var(--navy); }
.v8 p{ margin:0 0 1em; }
.v8 p:last-child{ margin-bottom:0; }
.v8-c{ max-width:var(--c); margin:0 auto; padding:0 20px; }
.v8-txt{ max-width:68ch; }               /* paragraphes jamais sur 1000 px */
.v8-sec{ position:relative; padding:clamp(56px,7vw,104px) 0; }
.v8-sec--white{ background:var(--white); }
.v8-sec--ice{ background:var(--ice); }
.v8-sec--sky{ background:linear-gradient(180deg,var(--sky),#F7FCFE); }
.v8-sec--navy{ background:var(--navy); color:#EAF3F7; }
.v8-sec--deep{ background:linear-gradient(180deg,var(--deep),#061726); color:#EAF3F7; }
.v8-sec--navy h2,.v8-sec--deep h2,.v8-sec--navy h3,.v8-sec--deep h3{ color:#fff; }
.v8-sec--offer{ background:linear-gradient(140deg,#0B2638,#071C2C 60%,#0A2036); color:#fff; }

.v8-oe{ display:inline-flex; align-items:center; gap:10px; font:700 12px/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
.v8-oe::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }
.v8-sec--navy .v8-oe,.v8-sec--deep .v8-oe{ color:var(--cyan); }
.v8-sec--white .v8-oe,.v8-sec--ice .v8-oe,.v8-sec--sky .v8-oe{ color:var(--orange); }
.v8-h1{ font-size:clamp(40px,7vw,84px); }
.v8-h2{ font-size:clamp(30px,4.2vw,54px); }
.v8-h3{ font-size:clamp(20px,1.6vw,24px); }
.v8-lead{ font-size:clamp(16px,1.15vw,19px); line-height:1.6; color:var(--text-2); max-width:60ch; }
.v8-sec--navy .v8-lead,.v8-sec--deep .v8-lead,.v8-sec--offer .v8-lead{ color:#B9CFDA; }
.v8-tete{ max-width:760px; margin-bottom:clamp(26px,3.4vw,46px); }
.v8-tete--c{ margin-left:auto; margin-right:auto; text-align:center; }

/* néon : UN seul élément par écran, fin et automobile */
.v8-neon{ position:relative; display:inline-block; color:#fff; }
.v8-neon::after{ content:attr(data-mot); position:absolute; inset:0; z-index:-1;
  color:var(--cyan); filter:blur(14px); opacity:.75;
  animation:v8-souffle 9s var(--ease) infinite; }
.v8-neon::before{ content:attr(data-mot); position:absolute; inset:0; z-index:-1;
  color:transparent; text-shadow:0 0 6px rgba(0,216,255,.9), 0 0 22px rgba(0,216,255,.5); }
@keyframes v8-souffle{ 0%,100%{opacity:.55} 50%{opacity:.9} }

/* ==========================================================================
   3. BARRE PROMOTIONNELLE + HEADER
   ========================================================================== */
.v8-promo{ background:var(--navy); color:#CFE6F1; font:600 12.5px/1 var(--sans); }
.v8-promo__in{ max-width:var(--c); margin:0 auto; padding:9px 20px; display:flex; align-items:center;
  gap:10px 18px; flex-wrap:wrap; justify-content:center; }
.v8-promo b{ color:#fff; }
.v8-promo__sep{ color:var(--cyan); }
.v8-promo__tel{ margin-left:auto; color:#fff; text-decoration:none; display:inline-flex; gap:7px; align-items:center; }
.v8-promo__tel:hover{ color:var(--cyan); }

.v8-head{ position:sticky; top:0; z-index:80; background:var(--white);
  border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(7,28,44,.03), 0 6px 18px rgba(7,28,44,.05); }
.v8-head__in{ max-width:var(--c); margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:16px;
  min-height:78px; }
.v8-head__logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.v8-head__logo img{ height:46px; width:auto; }
.v8-nav{ display:flex; gap:20px; margin-left:14px; }
.v8-nav a{ font:600 14.5px/1 var(--sans); color:var(--navy); text-decoration:none; padding:8px 2px;
  border-bottom:2px solid transparent; }
.v8-nav a:hover,.v8-nav a[aria-current="page"]{ color:var(--orange); border-bottom-color:var(--orange); }
.v8-head__cta{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.v8-head__tel{ text-align:right; text-decoration:none; }
.v8-head__tel small{ display:block; font:600 11px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); }
.v8-head__tel b{ display:flex; align-items:center; gap:7px; font:800 19px/1.2 var(--sans); color:var(--navy); }
.v8-head__tel svg{ flex:none; }
.v8-head__tel:hover b{ color:var(--orange); }
.v8-burger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line);
  background:var(--white); align-items:center; justify-content:center; gap:4px; flex-direction:column; cursor:pointer; }
.v8-burger span{ display:block; width:20px; height:2px; background:var(--navy); border-radius:2px; }
.v8-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.v8-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.v8-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.v8-head__appel{ display:none; }

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */
.v8-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 24px;
  border-radius:var(--r-pill); border:2px solid transparent; cursor:pointer; text-decoration:none;
  font:800 16px/1 var(--sans); transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.v8-btn--primary{ background:var(--orange); color:#fff; box-shadow:var(--sh-offer); }
.v8-btn--primary:hover{ transform:translateY(-2px); background:var(--orange-dark); }
.v8-btn--navy{ background:var(--navy); color:#fff; }
.v8-btn--navy:hover{ transform:translateY(-2px); }
.v8-btn--call{ background:var(--cyan); color:var(--navy); }
.v8-btn--call:hover{ transform:translateY(-2px); }
.v8-btn--ghost{ border-color:var(--line-2); color:var(--navy); background:var(--white); }
.v8-btn--ghost:hover{ border-color:var(--navy); transform:translateY(-2px); }
.v8-btn--ghost-clair{ border-color:rgba(255,255,255,.4); color:#fff; }
.v8-btn--ghost-clair:hover{ border-color:#fff; }
.v8-btn--large{ width:100%; padding:18px 26px; font-size:17px; }
.v8-btn--xl{ padding:20px 30px; font-size:19px; }
.v8-btn--pulse{ animation:v8-pulse 3.4s var(--ease) infinite; }
@keyframes v8-pulse{ 0%,100%{ box-shadow:0 18px 40px rgba(255,107,0,.28), 0 0 0 0 rgba(255,107,0,.32); }
  60%{ box-shadow:0 18px 40px rgba(255,107,0,.28), 0 0 0 16px rgba(255,107,0,0); } }

/* ==========================================================================
   5. HERO — scène automobile + action, 85-95vh desktop
   ========================================================================== */
.v8-hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,#F7FBFD 0%,var(--sky) 62%,#F2FAFE 100%); }
.v8-hero__in{ position:relative; z-index:2; max-width:var(--c); margin:0 auto; padding:clamp(22px,3vw,52px) 20px clamp(26px,3vw,46px);
  display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:clamp(18px,2.4vw,40px); align-items:center;
  min-height:min(90vh,940px); }
.v8-hero__badge{ display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:var(--r-pill);
  background:var(--white); border:1px solid var(--line-2); color:var(--navy); font:700 12.5px/1 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; box-shadow:var(--sh-1); margin-bottom:16px; }
.v8-hero__badge i{ width:8px; height:8px; border-radius:50%; background:var(--success); }
.v8-hero__titre{ font-size:clamp(32px,4.1vw,58px); line-height:.98; margin-bottom:16px; hyphens:none; }
.v8-hero__titre span{ white-space:nowrap; }
@media (max-width:1080px){ .v8-hero__titre span{ white-space:normal; } }
.v8-hero__titre span{ display:block; }
.v8-hero__sous{ font-size:clamp(16px,1.2vw,19px); line-height:1.55; color:var(--text-2); max-width:46ch; margin-bottom:18px; }
.v8-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px; }
.v8-hero__scene{ position:relative; }
.v8-hero__scene svg,.v8-hero__scene img{ width:100%; height:auto; display:block; }
.v8-hero__scene img{ border-radius:var(--r-xl); box-shadow:var(--sh-3); }
/* reflet de pare-brise cyan : un seul élément lumineux de la scène */
.v8-reflet{ position:absolute; left:26%; top:26%; width:36%; height:20%;
  background:radial-gradient(closest-side,rgba(0,216,255,.55),transparent 72%); filter:blur(12px);
  mix-blend-mode:screen; pointer-events:none; animation:v8-souffle 8s var(--ease) infinite; }

/* ==========================================================================
   6. OFFRE — forme retail (sticker / ticket / panneau), orange & jaune
   ========================================================================== */
.v8-offre{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(12px,1.6vw,24px); padding:clamp(18px,2.2vw,30px); border-radius:var(--r-l);
  background:linear-gradient(135deg,#F07800 0%,#E85D00 46%,#C94F00 100%);
  border:3px solid #fff; box-shadow:0 22px 52px rgba(232,93,0,.32); overflow:hidden; }
.v8-offre::before{ content:""; position:absolute; top:-30%; right:-10%; width:60%; height:160%;
  background:radial-gradient(closest-side,rgba(255,196,0,.55),transparent 70%); pointer-events:none; }
.v8-offre__bloc{ position:relative; z-index:2; }
.v8-offre__k{ display:block; font:800 12.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:#2A1200; margin-bottom:6px; }
.v8-offre__v{ display:block; font-family:var(--display); font-weight:800; text-transform:uppercase; color:#fff;
  line-height:.92; text-shadow:0 2px 0 rgba(160,60,0,.28); }
.v8-offre__v--max{ font-size:clamp(44px,6.4vw,86px); }
.v8-offre__v--mid{ font-size:clamp(26px,3.4vw,46px); }
.v8-offre__croix{ position:relative; z-index:2; font:800 34px/1 var(--sans); color:#fff; opacity:.95; }
.v8-offre--sticker{ border-radius:var(--r-l); border-width:4px; transform:rotate(-1.2deg); }
.v8-offre--ticket{ border-radius:var(--r-m); border-style:dashed; border-color:rgba(255,255,255,.85); }
.v8-offre--ticket::after{ content:""; position:absolute; inset:6px; border:1px dashed rgba(255,255,255,.5); border-radius:var(--r-s); }
.v8-offre--panneau{ border-radius:6px; border-color:rgba(255,255,255,.35); box-shadow:0 26px 60px rgba(232,93,0,.36), inset 0 0 0 1px rgba(255,255,255,.2); }
.v8-offre__bas{ position:relative; z-index:2; grid-column:1/-1; margin:14px 0 0; padding-top:12px;
  border-top:1px solid rgba(42,18,0,.3); font:600 12.5px/1.5 var(--sans); color:#2A1200; }
.v8-offre__bas a{ color:#2A1200; text-decoration:underline; font-weight:800; }
/* version compacte pour bandeaux */
.v8-offre-mini{ display:inline-flex; align-items:center; gap:10px; padding:9px 15px; border-radius:var(--r-pill);
  background:linear-gradient(120deg,var(--yellow),var(--orange)); color:#3A1A00; font:800 13.5px/1.2 var(--sans);
  box-shadow:0 8px 20px rgba(255,107,0,.26); }
.v8-offre-mini b{ color:#2A1200; }

/* ==========================================================================
   7. RÉASSURANCE (4 pictogrammes)
   ========================================================================== */
.v8-reass{ background:var(--navy); }
.v8-reass__in{ max-width:var(--c); margin:0 auto; padding:20px; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.v8-reass__i{ display:flex; align-items:center; gap:12px; color:#DCEAF2; }
.v8-reass__i svg{ flex:none; }
.v8-reass__i b{ display:block; font:700 15px/1.25 var(--sans); color:#fff; }
.v8-reass__i small{ display:block; font-size:12.5px; color:#8FAEC0; margin-top:2px; }

/* ==========================================================================
   8. SÉLECTEUR DE VITRAGE (grand, centré, interactif)
   ========================================================================== */
.v8-select{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,2.6vw,44px); align-items:center; }
.v8-select__scene svg{ width:100%; height:auto; display:block; }
.v8-zone{ fill:#E7F0F4; stroke:#B9CFDA; stroke-width:1.6; cursor:pointer; transition:fill .2s var(--ease), stroke .2s var(--ease); }
.v8-zone:hover{ fill:#D3EAF3; stroke:var(--cyan); }
.v8-zone.actif{ fill:var(--cyan); stroke:#0098B8; }
.v8-zone__t{ font:700 11px/1 var(--sans); fill:var(--navy); pointer-events:none; }
.v8-select__liste{ display:grid; gap:10px; }
.v8-select__opt{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  padding:16px 18px; border-radius:var(--r-m); border:2px solid var(--line); background:var(--white);
  box-shadow:var(--sh-1); transition:border-color .2s var(--ease), transform .2s var(--ease); }
.v8-select__opt:hover{ border-color:var(--cyan); transform:translateX(2px); }
.v8-select__opt.actif{ border-color:var(--orange); background:#FFF7F1; }
.v8-select__opt b{ display:block; font:800 17px/1.2 var(--sans); color:var(--navy); }
.v8-select__opt small{ display:block; font-size:13.5px; color:var(--text-3); margin-top:3px; }
.v8-select__opt i{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--ice);
  display:grid; place-items:center; }
.v8-select__opt.actif i{ background:var(--orange); }
.v8-select__opt.actif i svg{ stroke:#fff; }
.v8-select__resultat{ margin-top:14px; padding:16px; border-radius:var(--r-m); border:1px dashed var(--cyan);
  background:var(--sky); display:none; }
.v8-select__resultat.on{ display:block; animation:v8-monte .35s var(--ease) both; }
@keyframes v8-monte{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ==========================================================================
   9. ON VIENT À VOUS — scene split
   ========================================================================== */
.v8-va{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px); }
.v8-va__s{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--white);
  border:1px solid var(--line); box-shadow:var(--sh-1); padding:clamp(16px,1.8vw,24px); }
.v8-va__s h3{ font-size:22px; margin-bottom:6px; }
.v8-va__s p{ color:var(--text-3); font-size:14.5px; }
.v8-va__s svg{ width:100%; height:auto; display:block; margin-top:10px; }
.v8-route{ display:flex; align-items:center; gap:14px; margin-top:22px; }
.v8-route__l{ font:800 22px/1 var(--display); text-transform:uppercase; color:var(--navy); }
.v8-route__bar{ flex:1; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--cyan),var(--orange)); position:relative; overflow:hidden; }
.v8-route__bar::after{ content:""; position:absolute; top:0; bottom:0; left:-30%; width:30%; border-radius:4px;
  background:linear-gradient(90deg,transparent,#fff,transparent); animation:v8-roule 3.6s var(--ease) infinite; }
@keyframes v8-roule{ to{ left:100% } }

/* ==========================================================================
   10. ÉTAPES — route horizontale desktop / timeline mobile
   ========================================================================== */
.v8-etapes{ position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.v8-etapes::before{ content:""; position:absolute; left:4%; right:4%; top:36px; height:3px; border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 12px,transparent 12px 22px); }
.v8-etape{ position:relative; z-index:2; text-align:center; }
.v8-etape__n{ width:72px; height:72px; margin:0 auto 14px; border-radius:50%; background:var(--white);
  border:3px solid var(--navy); display:grid; place-items:center; font:800 24px/1 var(--display); color:var(--navy); }
.v8-etape__n svg{ width:32px; height:32px; }
.v8-etape b{ display:block; font:800 16px/1.25 var(--sans); color:var(--navy); margin-bottom:5px; }
.v8-etape span{ display:block; font-size:13.5px; line-height:1.5; color:var(--text-3); }

/* ==========================================================================
   11. ASSURANCE
   ========================================================================== */
.v8-assur{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.v8-assur__b{ text-align:left; cursor:pointer; padding:22px; border-radius:var(--r-l); border:2px solid var(--line);
  background:var(--white); box-shadow:var(--sh-1); transition:border-color .2s var(--ease), transform .2s var(--ease); }
.v8-assur__b:hover{ border-color:var(--navy); transform:translateY(-3px); }
.v8-assur__b[aria-pressed="true"]{ border-color:var(--orange); background:#FFF7F1; }
.v8-assur__b b{ display:block; font:800 20px/1.2 var(--display); text-transform:uppercase; color:var(--navy); margin-bottom:6px; }
.v8-assur__b span{ font-size:14px; line-height:1.5; color:var(--text-3); }
.v8-assur__r{ margin-top:18px; padding:22px; border-radius:var(--r-l); background:var(--navy); color:#DCEAF2; display:none; }
.v8-assur__r.on{ display:block; animation:v8-monte .35s var(--ease) both; }

/* ==========================================================================
   12. AVANT / APRÈS + ADAS
   ========================================================================== */
.v8-aa{ position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); }
.v8-aa__paire{ display:grid; grid-template-columns:1fr 1fr; }
.v8-aa__c{ position:relative; padding:18px; background:var(--ice); }
.v8-aa__c--a{ background:#F6EFEF; }
.v8-aa__c--b{ background:#EDF8F5; }
.v8-aa__e{ position:absolute; top:14px; left:14px; padding:6px 12px; border-radius:var(--r-pill);
  font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.v8-aa__c--a .v8-aa__e{ background:#fff; color:#B4655F; }
.v8-aa__c--b .v8-aa__e{ background:var(--navy); color:#fff; }
.v8-aa__c svg{ width:100%; height:auto; margin-top:30px; }
.v8-aa__n{ margin:0; padding:12px 18px; background:var(--white); font-size:12.5px; color:var(--text-3); }

.v8-adas{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(18px,2.6vw,44px); align-items:center; }
.v8-adas svg{ width:100%; height:auto; display:block; }
.v8-adas__c{ animation:v8-scan 6s var(--ease) infinite; }
@keyframes v8-scan{ 0%,100%{opacity:.42} 50%{opacity:.95} }

/* ==========================================================================
   13. CARTE IDF + CARTES GÉNÉRIQUES
   ========================================================================== */
.v8-carte-idf{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(16px,2.4vw,34px); align-items:start; }
.v8-plan svg{ width:100%; height:auto; display:block; }
.v8-dep{ fill:#DCEBF1; stroke:#AFC9D6; stroke-width:1; cursor:pointer; transition:fill .2s var(--ease); }
.v8-dep:hover,.v8-dep.actif{ fill:var(--cyan); stroke:#0089A8; }
.v8-dep__t{ font:800 13px/1 var(--sans); fill:var(--navy); pointer-events:none; }
.v8-panneau{ border:1px solid var(--line); border-radius:var(--r-l); padding:20px; background:var(--white); box-shadow:var(--sh-1); }
.v8-panneau h3{ font-size:24px; margin-bottom:6px; }
.v8-panneau p{ font-size:14px; color:var(--text-3); }
.v8-panneau ul{ margin:10px 0 14px; padding-left:18px; font-size:14px; color:var(--text-2); }
.v8-liste-zones{ display:grid; gap:8px; margin-top:14px; }
.v8-liste-zones a{ display:flex; justify-content:space-between; padding:12px 14px; border-radius:var(--r-s);
  border:1px solid var(--line); text-decoration:none; font-size:14.5px; color:var(--navy); background:var(--white); }
.v8-liste-zones a:hover{ border-color:var(--navy); }

.v8-grid{ display:grid; gap:clamp(14px,1.6vw,22px); }
.v8-grid--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.v8-grid--3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.v8-grid--4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.v8-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(18px,1.8vw,26px);
  box-shadow:var(--sh-1); transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.v8-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.v8-card h3{ font-size:20px; margin-bottom:8px; }
.v8-card p{ font-size:14.5px; color:var(--text-3); }
.v8-card__v{ border-radius:var(--r-m); overflow:hidden; background:var(--ice); margin-bottom:14px; }
.v8-card__v svg{ width:100%; height:auto; display:block; }
.v8-card__lien{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font:700 14px/1 var(--sans);
  color:var(--orange); text-decoration:none; }
.v8-card__lien:hover{ text-decoration:underline; }

/* ==========================================================================
   14. FAQ + CTA FINAL
   ========================================================================== */
.v8-faq{ display:grid; gap:10px; max-width:880px; margin:0 auto; }
.v8-faq details{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-1); }
.v8-faq summary{ cursor:pointer; padding:17px 20px; font:700 16.5px/1.4 var(--sans); color:var(--navy);
  list-style:none; display:flex; justify-content:space-between; gap:14px; }
.v8-faq summary::-webkit-details-marker{ display:none; }
.v8-faq summary::after{ content:"+"; color:var(--orange); font-weight:800; font-size:21px; line-height:1; }
.v8-faq details[open] summary::after{ content:"–"; }
.v8-faq p{ margin:0; padding:0 20px 18px; font-size:15px; line-height:1.65; color:var(--text-2); }

.v8-final{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--deep),var(--navy) 60%,#062033); color:#EAF3F7; }
.v8-final__in{ position:relative; z-index:2; max-width:var(--c); margin:0 auto; padding:clamp(48px,6vw,92px) 20px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.85fr); gap:clamp(20px,3vw,48px); align-items:center; }
.v8-final h2{ color:#fff; font-size:clamp(32px,4.6vw,60px); }
.v8-final p{ color:#B9CFDA; }

/* ==========================================================================
   15. MOTEUR DE CONVERSION (habillage V8 du moteur existant, mécanique intacte)
   ========================================================================== */
.v8-moteur{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); padding:clamp(16px,1.8vw,24px); }
.v8-moteur .moteur,.v8-moteur .moteur--v4,.v8-moteur .moteur--v3{ background:transparent; border:0; box-shadow:none; padding:0; }
.v8-moteur .moteur__question{ font-family:var(--display); font-weight:800; text-transform:uppercase; color:var(--navy);
  font-size:clamp(18px,2vw,24px); }
.v8-moteur .moteur__tete{ color:var(--text-3); }
.v8-moteur .choix,.v8-moteur .option{ background:var(--white); border:2px solid var(--line); border-radius:var(--r-m); color:var(--text); }
.v8-moteur .choix:hover{ border-color:var(--cyan); }
.v8-moteur .choix.actif,.v8-moteur .choix[aria-pressed="true"]{ border-color:var(--orange); background:#FFF7F1; }
.v8-moteur input,.v8-moteur select,.v8-moteur textarea{ border:2px solid var(--line); border-radius:var(--r-s);
  padding:14px; font:500 16px/1.3 var(--sans); color:var(--text); background:var(--white); width:100%; }
.v8-moteur input:focus,.v8-moteur select:focus{ outline:3px solid var(--cyan); outline-offset:1px; border-color:var(--cyan); }
.v8-moteur label{ font:700 13px/1.3 var(--sans); color:var(--navy); display:block; margin-bottom:6px; }
.v8-moteur button[type=submit],.v8-moteur .btn-valider{ background:var(--orange); color:#fff; border:0;
  border-radius:var(--r-pill); padding:16px 24px; font:800 16.5px/1 var(--sans); cursor:pointer; }
.v8-moteur .moteur__compteur,.v8-moteur .moteur__jauge{ color:var(--text-3); }

/* barre commerciale mobile */
.v8-bas{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.97);
  border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(7,28,44,.12); backdrop-filter:blur(12px); }
.v8-bas a{ flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:15px 10px;
  border-radius:var(--r-m); font:800 15px/1 var(--sans); text-decoration:none; min-height:52px; }
.v8-bas .a1{ background:var(--navy); color:#fff; }
.v8-bas .a2{ background:var(--orange); color:#fff; }

/* ==========================================================================
   16. FOOTER NAVY
   ========================================================================== */
.v8-pied{ background:var(--navy); color:#9FBCCB; padding:clamp(40px,5vw,72px) 0 0; }
.v8-pied__g{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(18px,2.4vw,36px); }
.v8-pied h4{ color:#fff; font-size:15px; letter-spacing:.08em; margin-bottom:14px; }
.v8-pied a{ color:#9FBCCB; text-decoration:none; font-size:14.5px; display:block; padding:5px 0; }
.v8-pied a:hover{ color:#fff; }
.v8-pied__bas{ margin-top:34px; border-top:1px solid rgba(255,255,255,.12); padding:18px 0;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; font-size:13px; }
.v8-pied__tel{ color:#fff !important; font:800 20px/1 var(--sans); }

/* ==========================================================================
   17. MOTION + ACCESSIBILITÉ
   ========================================================================== */
[data-v8]{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-v8].vu{ opacity:1; transform:none; }
[data-v8][data-d="1"]{ transition-delay:.07s } [data-v8][data-d="2"]{ transition-delay:.14s } [data-v8][data-d="3"]{ transition-delay:.2s }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-v8]{ opacity:1 !important; transform:none !important; }
}
.v8 a:focus-visible,.v8 button:focus-visible,.v8 summary:focus-visible,.v8 input:focus-visible,.v8 [tabindex]:focus-visible{
  outline:3px solid var(--cyan); outline-offset:2px; border-radius:6px; }
.v8-vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ==========================================================================
   18. RESPONSIVE — mobile d'abord dans l'esprit, 390 px est la référence
   ========================================================================== */
@media (max-width:1080px){
  .v8-hero__in{ grid-template-columns:1fr; min-height:0; gap:16px; padding-bottom:26px; }
  .v8-hero__scene{ order:-1; }
  .v8-select,.v8-adas,.v8-carte-idf{ grid-template-columns:1fr; }
  .v8-reass__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v8-etapes{ grid-template-columns:1fr; }
  .v8-etapes::before{ display:none; }
  .v8-etape{ display:grid; grid-template-columns:auto 1fr; gap:14px; text-align:left; align-items:start; }
  .v8-etape__n{ margin:0; width:54px; height:54px; }
  .v8-pied__g{ grid-template-columns:1fr 1fr; }
  .v8-final__in{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .v8-nav{ display:none; }
  .v8-burger{ display:flex; margin-left:auto; }
  .v8-head__cta{ display:none; }
  .v8-head__appel{ display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:var(--r-pill);
    background:var(--navy); color:#fff; font:800 14px/1 var(--sans); text-decoration:none; margin-left:auto; }
  .v8-head__in{ min-height:64px; padding:8px 14px; }
  .v8-head__logo img{ height:38px; }
  .v8-promo__in{ padding:8px 14px; font-size:11.5px; }
  .v8-promo__tel{ width:100%; justify-content:center; }
}
@media (max-width:430px){
  body.v8{ font-size:16px; }
  .v8-hero__titre{ font-size:clamp(27px,8.4vw,38px); }
  .v8-h2{ font-size:clamp(27px,8vw,36px); }
  .v8-sec{ padding:52px 0; }
  .v8-reass__in{ grid-template-columns:1fr; gap:12px; }
  .v8-assur,.v8-va,.v8-grid--2,.v8-grid--3,.v8-grid--4{ grid-template-columns:1fr; }
  .v8-offre{ grid-template-columns:1fr; text-align:left; }
  .v8-offre__croix{ display:none; }
  .v8-aa__paire{ grid-template-columns:1fr; }
  .v8-pied__g{ grid-template-columns:1fr; }
  .v8-bas{ display:flex; }
  body.v8{ padding-bottom:84px; }
  .v8-hero__actions .v8-btn{ width:100%; }
}
@media (min-width:431px){ .v8-bas{ display:none; } }
/* le bandeau de consentement ne masque jamais l'action */
/* consentement : discret, coin bas droit, ne recouvre ni le H1 ni l'offre */
@media (max-width:1024px){
  .cookies{ left:10px!important; right:10px!important; bottom:86px!important; top:auto!important;
    width:auto!important; max-height:74px!important; overflow:hidden!important;
    padding:8px 10px!important; border-radius:12px!important; }
  .cookies p{ font-size:10.5px!important; line-height:1.3!important; margin:0 0 5px!important; }
  .cookies .actions,.cookies__actions{ display:flex!important; gap:6px!important; }
  .cookies button{ padding:8px 10px!important; font-size:12px!important; flex:1!important; }
}
@media (min-width:1025px){
  .cookies{ left:auto!important; right:22px!important; bottom:22px!important; top:auto!important;
    width:360px!important; max-width:360px!important; padding:12px 14px!important; border-radius:14px!important; }
  .cookies p{ font-size:11.5px!important; }
  .cookies button{ padding:10px 14px!important; font-size:13px!important; }
}

/* offre en colonne etroite : les deux volets s'empilent, le montant n'est jamais tronque */
.v8-offre--compact{ grid-template-columns:1fr; text-align:left; }
.v8-offre--compact .v8-offre__croix{ display:none; }
.v8-offre--compact .v8-offre__v--mid{ font-size:clamp(30px,3vw,40px); }

/* ==========================================================================
   19. MOTEUR DE CONVERSION — styles COMPLETS, y compris les enfants.
   Cause de l'incident de production : seuls les conteneurs étaient restylés.
   Les libellés et descriptions des options héritaient des couleurs claires
   prévues pour l'ancien thème sombre, donc invisibles sur fond blanc.
   Ici chaque niveau est explicitement défini.
   ========================================================================== */
.moteur{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); padding:clamp(16px,1.8vw,24px); color:var(--text); }
.moteur__tete{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.moteur__tete *{ color:var(--text-3) !important; }
.moteur__puce{ display:inline-flex; align-items:center; gap:7px; font:700 12px/1 var(--font-sans);
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.moteur__compteur{ margin-left:auto; font:600 12.5px/1 var(--font-sans); color:var(--text-3); }
.moteur .jauge i{ background:var(--border-2); }
.moteur .jauge i[data-faite="oui"]{ background:var(--rbf-orange); }
.moteur__question{ font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  color:var(--rbf-navy) !important; font-size:clamp(19px,2.1vw,26px); margin:0 0 6px; }
.moteur__aide,.moteur__note{ font-size:14px; color:var(--text-3) !important; }
.moteur .choix,.moteur .option{
  background:var(--surface); border:2px solid var(--border); border-radius:var(--r-md);
  color:var(--text); padding:14px 16px; text-align:left; cursor:pointer;
  display:flex; gap:12px; align-items:flex-start; }
.moteur .choix *,.moteur .option *{ color:var(--text) !important; }
.moteur .choix b,.moteur .option b{ display:block; font:700 16px/1.25 var(--font-sans); color:var(--rbf-navy) !important; }
.moteur .choix small,.moteur .option small{ display:block; font-size:13.5px; color:var(--text-3) !important; margin-top:3px; }
.moteur .choix svg,.moteur .option svg{ stroke:var(--rbf-navy); flex:none; }
.moteur .choix:hover,.moteur .option:hover{ border-color:var(--rbf-cyan); }
.moteur .choix[aria-pressed="true"],.moteur .choix.actif,.moteur .option.actif{
  border-color:var(--rbf-orange); background:#FFF6F0; }
.moteur .choix[aria-pressed="true"] b,.moteur .choix.actif b{ color:#8A3200 !important; }
.moteur input,.moteur select{ background:var(--surface); border:2px solid var(--border); color:var(--text); }
.moteur input::placeholder{ color:#5F7078; }
.moteur button[type="submit"],.moteur .btn-valider,.moteur .envoyer{
  background:var(--rbf-orange); color:#fff !important; border:0; border-radius:var(--r-pill);
  padding:16px 24px; font:800 16.5px/1 var(--font-sans); cursor:pointer; width:100%; }
.moteur button[type="submit"] *,.moteur .btn-valider *{ color:#fff !important; }
.moteur .btn-retour,.moteur .retour{ background:transparent; border:0; color:var(--text-3) !important;
  text-decoration:underline; font-size:14px; cursor:pointer; }
.moteur .erreur,.moteur [role="alert"]{ color:#B3261E !important; font-size:13.5px; }

/* ==========================================================================
   20. MOTEUR — libellés courts/longs (règle perdue avec l'ancienne feuille).
   Symptôme : « DEVIS GRATUIT — 30 SECONDES DEVIS GRATUIT » affiché en double.
   ========================================================================== */
.moteur__puce .court{ display:none; }
.moteur__puce .long{ display:inline; }
@media (max-width:480px){
  .moteur__puce .long{ display:none; }
  .moteur__puce .court{ display:inline; }
}
/* les zones de la silhouette : libellés lisibles à toute taille */
.v8-zone__t{ font-size:12px; font-weight:800; letter-spacing:.02em; }
@media (max-width:520px){ .v8-zone__t{ font-size:10.5px; } }

/* ==========================================================================
   21. HERO PHOTO + BANDEAUX PHOTO (composition publicitaire)
   Message monumental a gauche, visuel metier photographique a droite.
   Le contraste du texte est garanti par les surfaces, jamais par le hasard
   d'une photo : le texte ne repose jamais directement sur l'image.
   ========================================================================== */
.v8-heroP{background:linear-gradient(180deg,#FFFFFF 0%,var(--ice) 100%); border-bottom:1px solid var(--line); padding:22px 0 26px}
@media (min-width:960px){.v8-heroP{padding:18px 0 22px}}
.v8-heroP__grille{display:grid; grid-template-columns:1fr; gap:22px; align-items:center}
@media (min-width:960px){.v8-heroP__grille{grid-template-columns:1.02fr .98fr; gap:40px}
  .v8-heroP__message{
  min-width:0;order:1; grid-column:1; grid-row:1}
  .v8-heroP__visuel{order:2; grid-column:2; grid-row:1}}
.v8-heroP__eyebrow{display:inline-flex; align-items:center; gap:8px; font:800 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); background:var(--sky); border:1px solid rgba(0,216,255,.5); border-radius:999px; padding:7px 13px; margin:0 0 14px}
.v8-heroP__titre{font:900 clamp(29px,7vw,52px)/1.04 var(--display); letter-spacing:-.02em; color:var(--navy); margin:0 0 12px; text-wrap:balance}
.v8-heroP__titre em{font-style:normal; color:var(--navy); background:linear-gradient(180deg,transparent 62%,rgba(0,216,255,.55) 62%); padding:0 2px}
.v8-heroP__chapeau{font:500 clamp(15px,2.1vw,17.5px)/1.6 var(--sans); color:var(--text-2); margin:0 0 14px; max-width:60ch}
@media (min-width:960px){.v8-heroP__chapeau{font-size:16.5px}}
.v8-heroP__actions{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 12px}
.v8-heroP__puces{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:7px}
.v8-heroP__puces li{position:relative; padding-left:26px; font:500 14.5px/1.5 var(--sans); color:var(--text-2)}
.v8-heroP__puces li:before{content:""; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%;
  background:var(--success); box-shadow:inset 0 0 0 4px #fff}
.v8-heroP__puces li:after{content:""; position:absolute; left:5px; top:9px; width:6px; height:3px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg)}
.v8-heroP__visuel{position:relative; order:-1; margin:0; border-radius:20px; overflow:hidden; box-shadow:0 26px 60px -28px rgba(7,28,44,.45); background:var(--graphite)}
.v8-heroP__visuel img{display:block; width:100%; height:auto; aspect-ratio:16/11; object-fit:cover}
@media (min-width:960px){.v8-heroP__visuel img{aspect-ratio:4/3.4; max-height:560px}}
.v8-heroP__visuel figcaption{position:absolute; left:12px; right:12px; bottom:12px; background:rgba(7,28,44,.86); backdrop-filter:blur(6px);
  color:#fff; border-radius:12px; padding:10px 12px; display:grid; gap:2px}
.v8-heroP__visuel figcaption strong{font:800 13px/1.3 var(--sans); letter-spacing:.01em}
.v8-heroP__visuel figcaption span{font:500 11.5px/1.3 var(--sans); color:#B9CFDA}
.v8-heroP .v8-offre--compact{margin:10px 0 0}
.v8-heroP .v8-offre--compact .v8-offre__bas{display:none}
.v8-heroP .v8-offre--compact .v8-offre__v{font-size:clamp(30px,5vw,42px)}
.v8-heroP__conditions{margin:10px 0 0; font:500 11px/1.5 var(--sans); color:var(--text-3); max-width:52ch}
.v8-heroP__mention{margin:12px 0 0; font:500 11px/1.4 var(--sans); color:var(--text-3); text-align:center}

.v8-photo{background:#fff; padding:38px 0; border-bottom:1px solid var(--line)}
.v8-photo__grille{display:grid; grid-template-columns:1fr; gap:20px; align-items:center}
@media (min-width:960px){.v8-photo__grille{grid-template-columns:1.05fr .95fr; gap:40px}}
.v8-photo--inverse .v8-photo__grille{grid-template-columns:1fr}
@media (min-width:960px){.v8-photo--inverse .v8-photo__grille{grid-template-columns:.95fr 1.05fr}.v8-photo--inverse .v8-photo__img{order:2}}
.v8-photo__img{margin:0; border-radius:18px; overflow:hidden; box-shadow:0 22px 50px -30px rgba(7,28,44,.4)}
.v8-photo__img img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.v8-photo__texte h2{font:900 clamp(23px,3.6vw,34px)/1.12 var(--display); color:var(--navy); margin:0 0 12px}
.v8-photo__corps{font:500 16px/1.68 var(--sans); color:var(--text-2)}
.v8-photo__corps p{margin:0 0 12px}

/* ancre du funnel : la zone d'action ne depend jamais d'un style herite */
.v8-ancre{scroll-margin-top:84px}