/* =============================================================================
   FuelMapper, site vitrine

   Une seule couleur : le rouge de l'application, décliné du plus pâle au plus
   profond, posé sur le crème. Aucun vert, aucun ambre, aucun bleu, aucun
   panneau noir. La profondeur vient du verre, jamais de l'obscurité.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Polices, auto-hébergées, aucune requête tierce
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Archivo';
  font-style:normal; font-weight:400 900; font-stretch:62% 125%;
  font-display:swap;
  src:url('assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:400 800;
  font-display:swap;
  src:url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}

/* -----------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* --- Partagés avec app/index.html du dépôt voisin. Ne jamais modifier ici
         seul : reporter dans l'app et dans les deux design-system.md. --- */
  --bg:#f4efe3;
  --panel:#fdfbf5;
  --panel2:#ece3d3;
  --line:#e6dcc8;
  --txt:#2a241d;
  --muted:#8c8274;
  --brand:#a8111b;
  --brand-d:#77090f;
  --brand-l:#f7e5e6;
  --money:#12b886;   /* déclaré pour rester aligné sur l'app. Le site ne l'emploie pas. */
  --warn:#e8930c;    /* idem. */
  --radius:15px;
  --shadow:0 4px 16px rgba(20,25,40,.06);

  /* --- Propres au site --- */
  --wrap:1120px;

  /* L'échelle de rouge. Tout l'accent du site sort d'ici. */
  --r-02:rgba(168,17,27,.02);
  --r-05:rgba(168,17,27,.05);
  --r-09:rgba(168,17,27,.09);
  --r-14:rgba(168,17,27,.14);
  --r-22:rgba(168,17,27,.22);
  --r-38:rgba(168,17,27,.38);
  --brand-surf:#a8111b;      /* le rouge qui porte du texte blanc */
  --on-brand:#ffffff;

  /* Le verre. Léger, toujours posé sur du crème ou sur une voile rouge. */
  --verre:rgba(253,251,245,.58);
  --verre-fort:rgba(253,251,245,.84);
  --verre-trait:rgba(168,17,27,.12);
  --verre-haut:rgba(255,255,255,.72);
  --flou:16px;

  /* --muted (#8c8274) ne tient que 3,29:1 sur --bg : il reste aux traits et
     aux pictogrammes. Dès qu'une couleur porte du texte, on prend --muted-txt. */
  --muted-txt:#6b6154;

  /* Le châssis des téléphones. Trois arrêts, pour que le cadre ait du relief. */
  --deep-haut:#b81c26;   /* haut du dégradé du pied d'appel */
  --cadre-1:#fffdf8;
  --cadre-2:#ece3d3;
  --cadre-3:#ded2bd;

  --ombre-douce:0 2px 10px rgba(120,40,30,.05);
  --ombre-carte:0 10px 30px rgba(120,40,30,.09);
  --ombre-haute:0 26px 60px rgba(120,40,30,.16);

  --section-y:clamp(56px,6.6vw,94px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.5s;

  --font-display:'Archivo','Arial Narrow',Arial,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
    Helvetica,Arial,sans-serif;

  color-scheme:light;
}

/* Mode sombre : le même dessin, la même unique couleur, sur un fond profond.
   Aucun aplat noir : le fond reste un brun très sombre, chaud. */
[data-theme="dark"]{
  --bg:#1a1512;
  --panel:#231c18;
  --panel2:#2d241e;
  --line:#3a2e26;
  --txt:#f4ede3;
  --muted:#8f8474;
  --brand:#f2626b;          /* éclairci : tient 4,5:1 sur les quatre fonds sombres */
  --brand-d:#8f101a;
  --brand-l:#3a1a1c;
  --shadow:0 4px 16px rgba(0,0,0,.3);

  --r-02:rgba(242,98,107,.03);
  --r-05:rgba(242,98,107,.05);
  --r-09:rgba(242,98,107,.08);
  --r-14:rgba(242,98,107,.13);
  --r-22:rgba(242,98,107,.22);
  --r-38:rgba(242,98,107,.38);
  --brand-surf:#b81723;

  --verre:rgba(45,36,30,.55);
  --verre-fort:rgba(45,36,30,.86);
  --verre-trait:rgba(242,98,107,.16);
  --verre-haut:rgba(255,255,255,.06);

  --muted-txt:#b7ab99;

  --deep-haut:#c02631;
  --cadre-1:#4a3f36;
  --cadre-2:#2f2721;
  --cadre-3:#191410;

  --ombre-douce:0 2px 10px rgba(0,0,0,.24);
  --ombre-carte:0 10px 30px rgba(0,0,0,.34);
  --ombre-haute:0 26px 60px rgba(0,0,0,.46);

  color-scheme:dark;
}

/* -----------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:inherit}
svg{display:block}

/* Anneau de focus à deux couches : lisible sur le crème comme sur le rouge. */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--panel),0 0 0 5.5px var(--brand);
  border-radius:8px;
}

::selection{background:var(--brand); color:var(--on-brand)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

.skip-link{
  position:absolute; left:16px; top:-72px; z-index:200;
  background:var(--brand-surf); color:var(--on-brand);
  padding:12px 20px; border-radius:12px;
  font-weight:700; font-size:14px; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus-visible{top:14px}

/* Les chiffres. Archivo condensé, chasse fixe, pour que les montants
   s'alignent d'une ligne à l'autre. */
.display{
  font-family:var(--font-display);
  font-stretch:75%;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* -----------------------------------------------------------------------------
   4. Le verre
   -------------------------------------------------------------------------- */
.verre{
  background:var(--verre);
  backdrop-filter:blur(var(--flou)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--flou)) saturate(1.3);
  border:1px solid var(--verre-trait);
  box-shadow:inset 0 1px 0 var(--verre-haut), var(--ombre-carte);
}

/* -----------------------------------------------------------------------------
   5. Identité
   -------------------------------------------------------------------------- */
.wordmark{
  font-family:var(--font-display); font-stretch:100%; font-weight:900;
  font-size:23px; letter-spacing:-.4px; line-height:1;
  display:inline-block;
  transform:skewX(-11deg); transform-origin:left bottom;
  color:var(--brand);
}
.wordmark.small{font-size:19px}
.logo-mark{width:26px; height:30px; color:var(--brand); flex:0 0 auto}

/* -----------------------------------------------------------------------------
   6. En-tête
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bg) 76%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--r-09);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:70px; gap:18px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; padding:7px 0}

.site-nav{display:flex; align-items:center; gap:26px}
.site-nav a{
  position:relative;
  text-decoration:none; font-size:14.5px; font-weight:600; color:var(--muted-txt);
  transition:color .16s var(--ease);
}
.site-nav a:not(.btn):after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
  background:var(--brand); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .24s var(--ease);
}
.site-nav a:not(.btn):hover{color:var(--brand)}
.site-nav a:not(.btn):hover:after{transform:scaleX(1)}
.site-nav a.btn{color:var(--on-brand)}          /* sinon .site-nav a l'emporte */
.site-nav a:not(.btn){padding:11px 0}           /* 44 px de haut, y compris au clavier */

.header-tools{display:flex; align-items:center; gap:8px}

.icon-btn,.burger{
  display:grid; place-items:center;
  width:44px; height:44px; padding:0;
  background:var(--r-05); border:1px solid var(--r-14); border-radius:13px;
  color:var(--brand); cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.icon-btn:hover,.burger:hover{background:var(--r-14); border-color:var(--r-22)}
.icon-btn svg{width:19px; height:19px; grid-area:1/1}
.ico-moon{display:none}
[data-theme="dark"] .ico-sun{display:none}
[data-theme="dark"] .ico-moon{display:block}

.burger{display:none}
.burger span{
  display:block; width:18px; height:2px; background:var(--brand);
  border-radius:2px; margin:3.5px auto;
  transition:transform .24s var(--ease), opacity .16s var(--ease);
}
body.nav-open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.jauge{height:2px; background:var(--r-05)}
.jauge-fill{
  height:100%; width:0;
  background:linear-gradient(90deg,var(--r-38),var(--brand));
  transition:width .1s linear;
}

/* -----------------------------------------------------------------------------
   7. Rail de section
   -------------------------------------------------------------------------- */
.rail{
  display:none;
  position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:40;
  flex-direction:column; gap:2px;
}
.rail a{display:flex; align-items:center; gap:10px; padding:6px; text-decoration:none; border-radius:8px}
.rail-dot{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--r-22);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.rail-label{
  font-size:11px; font-weight:700; color:var(--muted-txt); white-space:nowrap;
  opacity:0; transform:translateX(-4px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.rail a:hover .rail-label,.rail a:focus-visible .rail-label{opacity:1; transform:none}
.rail a.is-on .rail-dot{background:var(--brand); transform:scale(1.6)}
.rail a.is-on .rail-label{opacity:1; transform:none; color:var(--brand)}

/* -----------------------------------------------------------------------------
   8. Boutons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 24px;
  text-decoration:none; text-align:center;
  background:var(--brand-surf); color:var(--on-brand);
  font-family:inherit; font-weight:700; font-size:15px;
  border:1px solid transparent; border-radius:13px; cursor:pointer;
  box-shadow:0 4px 14px var(--r-22);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease),
             background .14s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 26px var(--r-38)}
.btn:active{transform:translateY(0)}
.btn svg{width:19px; height:19px; flex:0 0 auto}
.btn-sm{min-height:44px; padding:0 18px; font-size:13.5px}

.btn-ghost{
  background:var(--r-05); color:var(--brand);
  border-color:var(--r-22); box-shadow:none;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:var(--r-14); box-shadow:none}

.btn-clair{
  background:var(--verre-fort); color:var(--brand);
  border-color:rgba(255,255,255,.5); box-shadow:none;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.btn-clair:hover{background:#fff; box-shadow:0 10px 26px rgba(0,0,0,.16)}

.btn-store{min-width:168px}

.lien-reinit{
  align-self:flex-start;
  display:inline-flex; align-items:center; min-height:44px;
  background:none; border:0; padding:0;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--muted-txt);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--r-22); cursor:pointer;
  transition:color .16s var(--ease);
}
.lien-reinit:hover{color:var(--brand); text-decoration-color:var(--brand)}

/* -----------------------------------------------------------------------------
   9. Titres de section
   -------------------------------------------------------------------------- */
.kicker{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 14px;
  font-size:11.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--brand);
}
.kicker:before,.kicker:after{
  content:""; width:26px; height:1px; background:var(--r-22);
}
.titre{
  font-family:var(--font-display); font-stretch:100%; font-weight:800;
  font-size:clamp(27px,3.6vw,42px); line-height:1.1; letter-spacing:-1.1px;
  text-align:center; margin:0 0 14px; text-wrap:balance;
}
.sous{
  text-align:center; color:var(--muted-txt); font-size:16.5px;
  margin:0 auto 48px; max-width:38em; line-height:1.6; text-wrap:balance;
}

/* -----------------------------------------------------------------------------
   10. Accroche
   -------------------------------------------------------------------------- */
.hero{position:relative; padding:72px 0 96px; overflow:hidden}

.hero-fond{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.voile{position:absolute; border-radius:50%; filter:blur(70px)}
.voile-a{
  top:-260px; left:-140px; width:760px; height:620px;
  background:radial-gradient(closest-side,var(--r-22),transparent);
}
.voile-b{
  top:120px; right:-220px; width:720px; height:680px;
  background:radial-gradient(closest-side,var(--r-14),transparent);
}
.grille{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right,var(--r-05) 1px,transparent 1px),
    linear-gradient(to bottom,var(--r-05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 95% 80% at 50% 40%,#000 15%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 95% 80% at 50% 40%,#000 15%,transparent 80%);
}

.hero-inner{
  position:relative;
  display:grid; grid-template-columns:1.04fr .96fr; gap:44px; align-items:center;
}

.eyebrow{
  display:inline-block; margin:0 0 22px;
  font-size:11.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--brand);
  background:var(--r-05); border:1px solid var(--r-22);
  padding:7px 15px; border-radius:24px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

h1{
  font-family:var(--font-display); font-stretch:110%; font-weight:800;
  font-size:clamp(33px,4.4vw,50px); line-height:1.04; letter-spacing:-1.8px;
  margin:0 0 22px; text-wrap:balance;
}

.lead{
  font-size:18px; color:var(--muted-txt); margin:0; max-width:26em; line-height:1.6;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:34px 0 18px}
.hero-note{font-size:13.5px; color:var(--muted-txt); margin:0}

/* --- La scène : trois téléphones --- */
.scene{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:590px;
}

.tel{
  border-radius:40px; padding:7px;
  background:linear-gradient(155deg,var(--cadre-1),var(--cadre-2) 62%,var(--cadre-3));
  box-shadow:0 0 0 1px var(--r-14), var(--ombre-haute);
}
.tel img,.tel-ecran{
  display:block; width:100%; height:auto;
  border-radius:33px;
  background:linear-gradient(170deg,var(--panel),var(--panel2));
}
.tel-avant{position:relative; z-index:3; width:262px}

.tel-arriere{
  position:absolute; z-index:1; width:200px;
  opacity:.58;
  filter:saturate(.88);
}
.tel-arriere .tel-ecran{aspect-ratio:9/19.5; background-size:cover; background-position:top center}
.tel-gauche{left:0; top:78px; transform:rotate(-8deg)}
.tel-droite{right:0; top:78px; transform:rotate(8deg)}

/* Les deux écrans en retrait. Le dégradé sert de repli tant que la capture
   n'est pas déposée : rien ne casse si le fichier manque. */
.ecran-economies{
  background-image:url('assets/app-economies.webp'),
    linear-gradient(180deg,var(--r-14) 0 9%,var(--panel) 9%);
}
.ecran-actu{
  background-image:url('assets/app-actu.webp'),
    linear-gradient(180deg,var(--r-14) 0 9%,var(--panel) 9%);
}

.pastille{
  position:absolute; z-index:4; left:-12px; bottom:-8px;
  display:flex; flex-direction:column; gap:1px;
  padding:14px 20px; border-radius:18px;
  background:var(--verre-fort);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--verre-trait);
  box-shadow:inset 0 1px 0 var(--verre-haut), var(--ombre-haute);
}
.pastille span{
  font-size:10.5px; font-weight:800; letter-spacing:.9px;
  text-transform:uppercase; color:var(--muted-txt);
}
.pastille b{font-size:32px; line-height:1.05; color:var(--brand)}
.pastille small{font-size:11.5px; color:var(--muted-txt)}

/* -----------------------------------------------------------------------------
   11. Chiffres clés
   -------------------------------------------------------------------------- */
.chiffres{padding:0 0 8px; margin-top:-40px; position:relative; z-index:5}
.chiffres-inner{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  padding:30px 26px; border-radius:22px;
}
.chiffre{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center}
.chiffre b{font-size:clamp(28px,3.4vw,40px); line-height:1; color:var(--brand); letter-spacing:-1.2px}
.chiffre span{font-size:13px; color:var(--muted-txt)}

/* Une section sur deux prend une teinte rosée à 4 %, bornée par un filet.
   C'est ce qui donne le rythme sans ajouter la moindre couleur nouvelle. */
.calc,.route,.communaute,.faq{
  background:color-mix(in srgb,var(--brand) 4%,var(--bg));
  border-top:1px solid var(--r-09);
  border-bottom:1px solid var(--r-09);
}

/* -----------------------------------------------------------------------------
   12. La preuve
   -------------------------------------------------------------------------- */
.preuve{padding:var(--section-y) 0}

.duel{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch}

.ticket{
  display:flex; flex-direction:column;
  padding:26px 24px; border-radius:20px;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--ombre-douce);
}
.ticket-tag{
  margin:0 0 12px;
  font-size:11.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted-txt);
}
.ticket-prix{margin:0; font-size:42px; line-height:1; letter-spacing:-1.6px; color:var(--txt)}
.ticket-prix span{
  font-family:var(--font-body); font-size:15px; font-weight:600;
  color:var(--muted-txt); letter-spacing:0;
}
.ticket ul{list-style:none; padding:0; margin:20px 0 auto; font-size:14.5px}
.ticket li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px dashed var(--line);
  color:var(--muted-txt);
}
.ticket li b{
  color:var(--txt); font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.ticket-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:18px 0 0; padding-top:16px;
  border-top:2px solid var(--line);
  font-size:14.5px; font-weight:600; color:var(--muted-txt);
}
.ticket-total b{font-size:28px; letter-spacing:-.9px; color:var(--txt)}

/* La carte gagnante est la seule à porter du rouge. */
.ticket.gagnant{
  background:var(--verre-fort);
  backdrop-filter:blur(var(--flou)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--flou)) saturate(1.3);
  border-color:var(--r-38);
  box-shadow:inset 0 1px 0 var(--verre-haut), 0 14px 40px var(--r-14);
}
.ticket.gagnant .ticket-tag{color:var(--brand)}
.ticket.gagnant .ticket-total{border-top-color:var(--r-22)}
.ticket.gagnant .ticket-total b{color:var(--brand)}

.duel-vs{
  display:grid; place-items:center; margin:0;
  font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted-txt);
}

.punch{
  text-align:center; margin:38px auto 0; max-width:34em;
  font-size:20px; line-height:1.5; text-wrap:balance;
}
.punch b{color:var(--brand); font-weight:800}

/* -----------------------------------------------------------------------------
   13. Le calculateur
   -------------------------------------------------------------------------- */
.calc{position:relative; padding:var(--section-y) 0}
.calc:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,var(--r-05),transparent 70%);
}
.calc .wrap{position:relative}

.calc-boite{
  display:grid; grid-template-columns:1fr .84fr;
  border-radius:26px; overflow:hidden;
}
.calc-reglages{padding:32px 30px; display:flex; flex-direction:column; gap:20px}
.ctrl label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px}
.ctrl-ligne{display:flex; align-items:center; gap:16px}
.ctrl-ligne output{
  flex:0 0 auto; min-width:92px; text-align:right;
  font-size:16px; line-height:1; color:var(--brand);
}

input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; height:44px; background:none; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:4px; background:var(--r-14);
}
input[type=range]::-moz-range-track{
  height:4px; border-radius:4px; background:var(--r-14);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-9px; border-radius:50%;
  background:var(--brand-surf); border:3px solid var(--panel);
  box-shadow:0 2px 8px var(--r-38);
  transition:transform .12s var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--brand-surf); border:3px solid var(--panel);
  box-shadow:0 2px 8px var(--r-38);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--panel),0 0 0 5.5px var(--brand);
}
input[type=range]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 3px var(--panel),0 0 0 5.5px var(--brand);
}

.calc-verdict{
  padding:32px 30px;
  background:linear-gradient(165deg,var(--r-09),var(--r-02));
  border-left:1px solid var(--verre-trait);
  display:flex; flex-direction:column; gap:24px;
}
.verdict-label{
  margin:0;
  font-size:11.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--muted-txt);
}
.verdict-valeur{
  margin:2px 0 0;
  font-size:clamp(46px,6.4vw,66px); line-height:1; letter-spacing:-2.4px;
  color:var(--brand);
}
.verdict-sous{margin:6px 0 0; font-size:14px; color:var(--muted-txt); line-height:1.5}

.barres{display:flex; flex-direction:column; gap:12px}
.barre{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center}
.barre span{font-size:13px; color:var(--muted-txt); min-width:76px}
.barre-piste{height:8px; border-radius:8px; background:var(--r-09); overflow:hidden}
.barre-plein{
  display:block; height:100%; width:0; border-radius:8px;
  background:var(--brand);
  transition:width .3s var(--ease);
}
.barre-plein.creux{background:var(--r-38)}
.barre b{font-size:14.5px; min-width:68px; text-align:right}

.faits{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding-top:20px; border-top:1px solid var(--r-14);
}
.faits p{margin:0; display:flex; flex-direction:column; gap:1px}
.faits span{font-size:12px; color:var(--muted-txt)}
.faits b{font-size:22px; line-height:1.1; color:var(--txt)}

/* -----------------------------------------------------------------------------
   14. Trois étapes
   -------------------------------------------------------------------------- */
.etapes{padding:var(--section-y) 0}
.etape-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.etape{padding:28px 26px 30px; border-radius:20px}
.etape-num{
  display:grid; place-items:center;
  width:44px; height:44px; margin-bottom:18px;
  border-radius:14px;
  background:var(--brand-surf); color:var(--on-brand);
  font-size:20px; line-height:1;
  box-shadow:0 4px 14px var(--r-22);
}
.etape h3{font-size:18.5px; margin:0 0 8px; font-weight:700; letter-spacing:-.4px}
.etape p{margin:0; color:var(--muted-txt); font-size:15px}

/* -----------------------------------------------------------------------------
   15. Sur ta route
   -------------------------------------------------------------------------- */
.route{padding:var(--section-y) 0}
.route-grille{display:grid; grid-template-columns:1.34fr .66fr; gap:20px; align-items:stretch}

.route-carte{padding:20px; border-radius:22px}
.route-carte svg{width:100%; height:auto}
.carte-fond{color:var(--r-14)}
.carte-couloir{color:var(--brand); opacity:.08}
.carte-route{color:var(--brand); opacity:.85}
.borne circle{fill:var(--brand); stroke:var(--panel); stroke-width:3}
.borne.pale circle{fill:var(--r-38); stroke:none}
.borne text{
  font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:15px;
  fill:var(--txt); text-anchor:middle;
}
.bout circle{fill:var(--txt); stroke:var(--panel); stroke-width:3}
.bout text{
  font-family:var(--font-body); font-size:13.5px; font-weight:700;
  fill:var(--muted-txt); text-anchor:middle;
}

.route-verdicts{display:flex; flex-direction:column; gap:14px}
.verdict{flex:1; padding:22px 22px; border-radius:20px; display:flex; flex-direction:column; gap:4px}
.verdict-tag{
  margin:0;
  font-size:10.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--brand);
}
.verdict-nombre{margin:0; font-size:32px; line-height:1.1; letter-spacing:-1.2px; color:var(--txt)}
.verdict p:last-child{margin:0; font-size:13.5px; color:var(--muted-txt); line-height:1.55}

/* -----------------------------------------------------------------------------
   16. La différence
   -------------------------------------------------------------------------- */
.difference{padding:var(--section-y) 0}
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
.carte{
  grid-column:span 2;
  padding:26px 24px; border-radius:20px;
  transition:transform .22s var(--ease), border-color .22s var(--ease);
}
.carte:hover{transform:translateY(-3px); border-color:var(--r-38)}
.carte.large{grid-column:span 3}
.carte.pleine{grid-column:span 6}
.pict{width:28px; height:28px; color:var(--brand); margin-bottom:16px}
.carte h3{font-size:17.5px; margin:0 0 8px; font-weight:700; letter-spacing:-.3px}
.carte p{margin:0; color:var(--muted-txt); font-size:14.5px}

/* -----------------------------------------------------------------------------
   17. Communauté
   -------------------------------------------------------------------------- */
.communaute{padding:var(--section-y) 0}
.comm-grille{display:grid; grid-template-columns:1.06fr .94fr; gap:20px; align-items:stretch}
.comm-bloc{padding:32px 30px; border-radius:22px}
.comm-bloc h3{font-size:19px; margin:0 0 10px; font-weight:700; letter-spacing:-.4px}
.comm-bloc h3.comm-sep{margin-top:28px; padding-top:26px; border-top:1px solid var(--r-14)}
.comm-bloc p{margin:0 0 14px; color:var(--muted-txt); font-size:15px; line-height:1.65}
.comm-fin{margin-bottom:0 !important; font-size:14px !important}

.pastille-demo{
  display:inline-block; vertical-align:middle; white-space:nowrap;
  font-size:11.5px; font-weight:700; color:var(--brand);
  border:1px solid var(--r-38); border-radius:24px; padding:2px 10px;
  background:var(--r-05);
}

.paliers{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 18px}
.palier{
  display:flex; flex-direction:column; gap:1px; align-items:flex-start;
  font-size:13px; font-weight:700; padding:10px 15px; border-radius:13px;
  background:var(--panel); border:1px solid var(--line); color:var(--muted-txt);
}
.palier small{font-size:10.5px; font-weight:600}
.palier.actif{
  background:var(--r-09); border-color:var(--r-38); color:var(--brand);
}

.antiabus{background:linear-gradient(170deg,var(--r-14),var(--r-02))}
.comm-bloc .tag-abus{
  display:inline-block; margin:0 0 14px;
  font-size:10.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
  background:var(--brand-surf); color:var(--on-brand);
  padding:5px 12px; border-radius:24px;
}
.regles{list-style:none; padding:0; margin:0}
.regles li{
  position:relative;
  font-size:14.5px; line-height:1.6; color:var(--muted-txt);
  padding:16px 0 16px 28px; border-top:1px solid var(--r-14);
}
.regles li:first-child{border-top:0; padding-top:4px}
.regles li:before{
  content:""; position:absolute; left:2px; top:22px;
  width:12px; height:6px;
  border-left:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:rotate(-45deg);
}
.regles li:first-child:before{top:10px}
.regles b{color:var(--txt); font-weight:700}

/* -----------------------------------------------------------------------------
   18. Tarifs
   -------------------------------------------------------------------------- */
.tarifs{padding:var(--section-y) 0}
.bascule{
  display:flex; gap:4px; width:max-content; margin:0 auto 34px;
  padding:4px; border-radius:15px;
  background:var(--r-05); border:1px solid var(--r-14);
}
.bascule-btn{
  min-height:44px; padding:0 20px;
  background:none; border:0; border-radius:11px; cursor:pointer;
  font:inherit; font-size:14px; font-weight:700; color:var(--muted-txt);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.bascule-btn small{font-weight:600; font-size:11px; opacity:.85}
.bascule-btn.actif{background:var(--brand-surf); color:var(--on-brand)}

.formules{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:860px; margin:0 auto}
.formule{
  position:relative;
  display:flex; flex-direction:column;
  padding:32px 28px; border-radius:22px;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--ombre-douce);
}
.formule.vedette{
  background:var(--verre-fort);
  backdrop-filter:blur(var(--flou)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--flou)) saturate(1.3);
  border:1.5px solid var(--r-38);
  box-shadow:inset 0 1px 0 var(--verre-haut), 0 16px 44px var(--r-14);
}
.formule-badge{
  position:absolute; top:-13px; left:28px; margin:0;
  background:var(--brand-surf); color:var(--on-brand);
  font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  padding:6px 13px; border-radius:24px;
}
.formule h3{font-size:19.5px; margin:0 0 8px; font-weight:700}
.formule-prix{margin:0; font-size:44px; letter-spacing:-2px; line-height:1.05; color:var(--txt)}
.formule-prix span{
  font-family:var(--font-body); font-size:15px; font-weight:600;
  color:var(--muted-txt); letter-spacing:0;
}
.formule.vedette .formule-prix{color:var(--brand)}
.formule-sous{color:var(--muted-txt); font-size:13.5px; margin:6px 0 22px; min-height:1.4em}
.formule ul{list-style:none; padding:0; margin:0 0 26px; flex:1}
.formule li{
  position:relative;
  font-size:14.5px; padding:9px 0 9px 26px; color:var(--muted-txt);
  border-bottom:1px dashed var(--line);
}
.formule li:before{
  content:""; position:absolute; left:2px; top:15px;
  width:11px; height:6px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.formule li b{color:var(--txt)}
.tarifs-note{
  text-align:center; color:var(--muted-txt); font-size:13.5px;
  margin:34px auto 0; max-width:40em;
}
.tarifs-note a{color:var(--brand); font-weight:600}

/* -----------------------------------------------------------------------------
   19. Questions
   -------------------------------------------------------------------------- */
.faq{padding:var(--section-y) 0}
.faq-liste{max-width:800px; margin:0 auto}
.faq details{
  padding:0 22px; margin:0 0 10px; border-radius:16px;
  transition:border-color .18s var(--ease);
}
.faq details[open]{border-color:var(--r-38)}
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  cursor:pointer; font-weight:600; font-size:16px; padding:18px 0;
  list-style:none; min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{
  content:""; flex:0 0 auto; width:12px; height:12px;
  border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .24s var(--ease);
}
.faq details[open] summary:after{transform:rotate(225deg) translate(-3px,-3px)}
.faq-corps p{margin:0 0 20px; color:var(--muted-txt); font-size:15px; line-height:1.7}
.faq-corps a{color:var(--brand); font-weight:600}

/* -----------------------------------------------------------------------------
   20. Fin de page
   -------------------------------------------------------------------------- */
.fin{
  position:relative; overflow:hidden; text-align:center;
  padding:calc(var(--section-y) + 6px) 0;
  background:linear-gradient(158deg,var(--deep-haut) 0%,var(--brand-surf) 42%,var(--brand-d) 100%);
  color:var(--on-brand);
}
.fin:before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 74%);
}
.fin .wrap{position:relative}
.fin h2{
  font-family:var(--font-display); font-stretch:104%; font-weight:800;
  font-size:clamp(28px,3.8vw,44px); letter-spacing:-1.4px; margin:0 0 14px;
  text-wrap:balance;
}
.fin > .wrap > p{color:rgba(255,255,255,.9); font-size:17px; margin:0 auto; max-width:32em}
.fin-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:32px 0 0}
.fin-note{
  margin:26px auto 0 !important; font-size:13.5px !important;
  color:rgba(255,255,255,.76) !important;
}
.fin-note a{color:var(--on-brand); font-weight:600}

/* -----------------------------------------------------------------------------
   21. Pied de page
   -------------------------------------------------------------------------- */
.pied{background:var(--panel); border-top:1px solid var(--line); padding:56px 0 28px}
.pied-inner{display:grid; grid-template-columns:1fr 2.1fr; gap:44px}
.pied-marque p{color:var(--muted-txt); font-size:13.5px; margin:10px 0 0}
.pied-donnees{
  font-size:12.5px !important; line-height:1.6; max-width:26em;
  margin-top:16px !important; padding-top:16px; border-top:1px solid var(--line);
}
.pied-nav{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.pied-nav h3{
  font-size:12px; text-transform:uppercase; letter-spacing:.9px;
  color:var(--muted-txt); margin:0 0 10px; font-weight:700;
}
.pied-nav a{
  display:flex; align-items:center; min-height:44px;
  text-decoration:none; font-size:14px; color:var(--txt);
  transition:color .16s var(--ease);
}
.pied-nav a:hover{color:var(--brand)}
.pied-bas{border-top:1px solid var(--line); margin-top:36px; padding-top:22px}
.pied-bas p{color:var(--muted-txt); font-size:12.5px; margin:0; line-height:1.65}

/* -----------------------------------------------------------------------------
   22. Mouvement
   Une révélation, deux moments orchestrés, rien d'autre.
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.seen{opacity:1; transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}
.reveal:nth-child(6){transition-delay:.30s}

.carte-route{stroke-dasharray:1000; stroke-dashoffset:1000}
.carte-route.drawn{transition:stroke-dashoffset 1.5s var(--ease); stroke-dashoffset:0}
.borne,.bout{opacity:0; transition:opacity .4s var(--ease)}
.route-carte.drawn .borne,.route-carte.drawn .bout{opacity:1}
.route-carte.drawn .borne:nth-of-type(2){transition-delay:.5s}
.route-carte.drawn .borne:nth-of-type(3){transition-delay:.7s}
.route-carte.drawn .borne:nth-of-type(4){transition-delay:.9s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .reveal{opacity:1; transform:none}
  .carte-route{stroke-dasharray:none; stroke-dashoffset:0}
  .borne,.bout{opacity:1}
}

/* -----------------------------------------------------------------------------
   23. Adaptation
   -------------------------------------------------------------------------- */
@media (min-width:1320px){ .rail{display:flex} }

@media (max-width:1080px){
  /* Sur un écran étroit, la promesse se lit avant la scène. */
  .hero-inner{grid-template-columns:1fr; gap:40px}
  .hero-texte{order:1; text-align:center}
  .scene{order:2; min-height:0; padding:8px 0 56px}
  .lead{margin-inline:auto}
  .hero-cta{justify-content:center}
  .tel-avant{width:238px}
  .tel-arriere{width:196px}
  .tel-gauche{left:0; top:52px}
  .tel-droite{right:0; top:52px}
  .pastille{left:50%; transform:translateX(-50%); bottom:-6px}

  .chiffres{margin-top:-24px}
  .calc-boite{grid-template-columns:1fr}
  .calc-verdict{border-left:0; border-top:1px solid var(--verre-trait)}
  .route-grille{grid-template-columns:1fr}
  .comm-grille{grid-template-columns:1fr}
  .pied-inner{grid-template-columns:1fr; gap:34px}
}

@media (max-width:900px){
  .site-nav{
    position:fixed; inset:72px 0 auto; z-index:59;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    padding:12px 24px 24px;
    background:color-mix(in srgb,var(--bg) 94%,transparent);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--r-14);
    box-shadow:var(--ombre-haute);
  }
  body.nav-open .site-nav{display:flex}
  .site-nav a{padding:15px 0; border-bottom:1px solid var(--line); font-size:16px}
  .site-nav a:not(.btn):after{display:none}
  .site-nav a.btn{margin-top:16px; border:0}
  .burger{display:grid}

  .bento{grid-template-columns:repeat(4,1fr)}
  .carte,.carte.large{grid-column:span 2}
  .carte.pleine{grid-column:span 4}

  .etape-grille{grid-template-columns:1fr}
  .duel{grid-template-columns:1fr}
  .chiffres-inner{grid-template-columns:1fr 1fr; gap:24px}
  .pied-nav{grid-template-columns:1fr 1fr; gap:16px}
}

@media (max-width:620px){
  .wrap{padding:0 18px}
  .hero{padding:44px 0 66px}
  .tel-avant{width:min(54vw,208px)}
  .tel-arriere{width:min(33vw,132px); opacity:.5}
  .tel-gauche{left:2%; top:56px; transform:rotate(-7deg)}
  .tel-droite{right:2%; top:56px; transform:rotate(7deg)}
  .pastille{padding:11px 16px}
  .pastille b{font-size:26px}

  .chiffres-inner{padding:24px 20px}
  .formules{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .carte,.carte.large,.carte.pleine{grid-column:auto}
  .faits{grid-template-columns:1fr}
  .barre{grid-template-columns:1fr auto; gap:6px 12px}
  .barre-piste{grid-column:1/-1; order:3}
  .calc-reglages,.calc-verdict{padding:26px 22px}
  .comm-bloc{padding:26px 22px}
  .pied-nav{grid-template-columns:1fr}
  .btn-store{flex:1}
}