/* ============================================================
   Vlocal, couche « clean » (septembre 2026).
   Moins de décor, un seul gabarit de section, une police utilitaire
   mono (Geist Mono, déjà servie) pour tout ce qui se clique ou s'étiquette,
   et un rail qui suit les quatre choses que fait l'app.
   Chargée après styles.css : ne redéfinit que ce qu'elle change.
   ============================================================ */
:root{
  --mono:'Geist Mono',ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;   /* la sœur mono de Geist, déjà servie par le site */
  --tint:#a9b8ff;                 /* la deuxième voix des titres */
  --hair:rgba(var(--ink),.09);
  --hair-2:rgba(var(--ink),.18);
}
html[data-theme="light"]{--tint:#4450c4}

/* ---- décor retiré : fond plat ---- */
.grain,.aurora{display:none}

/* ---- ce qui se clique : mono, angles nets ---- */
.btn{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0;border-radius:9px;padding:12px 18px}
.btn.lg{font-size:13.5px;border-radius:10px;padding:15px 24px}
.btn-primary{box-shadow:none}
.btn-primary:hover{box-shadow:0 10px 30px -14px var(--btn-primary-glow)}
.nav-links{font-family:var(--mono);font-size:12.5px;gap:26px}
.nav-cta{font-size:12.5px;padding:9px 14px}
.hero-meta,.hero-ctx,.kicker,.stat-lbl,.compare-note,.plan-sub{font-family:var(--mono)}
.kicker{font-size:11.5px;letter-spacing:.08em;color:var(--dim)}

/* ---- héros : trois lignes, la dernière dans la teinte ---- */
.hero-head .hl3{color:var(--tint)}
.hero-head .hl3 em{font-style:normal;background:none;-webkit-text-fill-color:currentColor;color:inherit}
.hero-head .hl2{color:var(--strong)}
.hero-glow{opacity:.55}
.hero-meta{font-size:11.5px;letter-spacing:0}

/* ---- bande des apps : l'équivalent d'une bande de logos clients ---- */
.applogos{padding-top:clamp(18px,3vw,34px);padding-bottom:clamp(36px,5vw,64px);border-bottom:1px solid var(--hair)}
.applogos-lead{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-bottom:22px}
.applogos-lead strong{color:var(--txt);font-weight:500}

/* ---- le cycle : un rail à gauche, quatre sections au même gabarit ---- */
.cycle{max-width:1280px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr);position:relative;z-index:2}
.cycle-rail{display:none}
@media (min-width:1120px){
  .cycle{grid-template-columns:172px minmax(0,1fr);column-gap:clamp(28px,4vw,64px)}
  .cycle-rail{display:block;position:sticky;top:112px;align-self:start;padding-top:clamp(64px,8vw,112px);height:max-content}
}
.cycle-rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair)}
.cycle-rail a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:1px solid transparent;
  font-family:var(--mono);font-size:12.5px;color:var(--dim);transition:color .25s var(--ease),border-color .25s var(--ease)}
.cycle-rail a:hover{color:var(--txt)}
.cycle-rail a.on{color:var(--strong);border-left-color:var(--tint)}

.cycle-body > section{max-width:none;margin:0;padding:clamp(64px,8vw,112px) 0;border-bottom:1px solid var(--hair);overflow:visible}
.cycle-body > section:last-child{border-bottom:0}
.cycle-body .feature{gap:clamp(32px,5vw,72px);align-items:center}
.cycle-body .feature.alt .feature-text{order:0}

/* le mot, puis la phrase */
.cycle-body .kicker,.cycle-body .kicker.center{display:block;text-align:left;font-family:'Geist',system-ui,sans-serif;
  font-size:clamp(2rem,3.3vw,2.75rem);font-weight:600;letter-spacing:-.025em;text-transform:none;color:var(--strong);margin:0 0 14px;line-height:1.05}
.cycle-body .kicker .beta,.cycle-body .kicker .b-beta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;vertical-align:middle;margin-left:10px}
.cycle-body h2{font-size:clamp(1.22rem,1.9vw,1.55rem);font-weight:400;letter-spacing:-.012em;line-height:1.32;color:var(--tint);margin:0 0 18px;max-width:24em;text-align:left}
.cycle-body h2 br{display:none}
.cycle-body .feature p,.cycle-body .rappels-lede,.cycle-body .privacy-lede{font-size:.98rem;line-height:1.62;color:var(--txt-2);font-weight:300;max-width:31em;margin:0;text-align:left}
.cycle-body .ticks{margin-top:22px;gap:10px}
.cycle-body .ticks li{padding-left:18px;font-size:.94rem}
.cycle-body .ticks li::before{width:5px;height:5px;border:0;border-radius:1px;background:var(--tint);transform:none;top:.62em;left:1px}

/* puces de liens */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--txt);
  padding:8px 12px;border:1px solid var(--hair-2);border-radius:8px;transition:background .2s var(--ease),border-color .2s var(--ease)}
.chip span{color:var(--dim);transition:transform .2s var(--ease),color .2s var(--ease)}
.chip:hover{background:var(--glass-2);border-color:rgba(var(--ink),.3)}
.chip:hover span{transform:translate(1px,-1px);color:var(--tint)}
.chip:focus-visible,.cycle-rail a:focus-visible{outline:2px solid var(--tint);outline-offset:2px}

/* rappels et confidentialité : même gabarit, texte à gauche, preuve à droite */
.cycle-body .rappels-in,.cycle-body .privacy-inner{max-width:none;text-align:left;display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
.cycle-body .rap-stage{margin:34px 0 8px;width:100%}
.cycle-body .rap-cards{justify-content:flex-start;margin-top:22px}
.cycle-body .rap-note{text-align:left;font-family:var(--mono);font-size:11.5px;margin-top:18px}
.cycle-body .wifi-proof{margin:34px 0 0;max-width:none;align-items:flex-start}
.cycle-body .privacy-grid{margin-top:44px}
@media (min-width:900px){
  .cycle-body .rappels-in,.cycle-body .privacy-inner{grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px);align-items:start}
  .cycle-body .rappels-in > *,.cycle-body .privacy-inner > *{grid-column:1}
  .cycle-body .rap-stage{grid-column:2;grid-row:1 / span 6;margin:0;align-self:center}
  .cycle-body .wifi-proof{grid-column:2;grid-row:1 / span 4;margin:0;align-self:center;align-items:center}
  .cycle-body .privacy-grid{grid-column:1 / -1}
}

/* ---- chiffres réels ---- */
.statband{padding:clamp(56px,7vw,96px) var(--pad);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.statband-in{max-width:var(--maxw);margin:0 auto}
.statband .livestats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;max-width:none}
.statband .livestats[hidden]{display:none}
.statband .ls{padding:6px clamp(16px,3vw,40px);border-left:1px solid var(--hair);text-align:center;background:none;border-radius:0}
.statband .ls:first-child{border-left:0}
.statband .ls b{display:block;font-size:clamp(2.4rem,5vw,4rem);font-weight:500;letter-spacing:-.03em;color:var(--strong);line-height:1;font-variant-numeric:tabular-nums}
.statband .ls span{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.statband .ls-note{margin:30px 0 0;text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
@media (max-width:640px){
  .statband .livestats{grid-template-columns:1fr;row-gap:26px}
  .statband .ls{border-left:0;padding-left:0}
}

/* ---- le reste de la page : même voix, moins d'effets ---- */
.overshow,.compare,.pricing,.faq,.askai{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.overshow h2,.compare h2,.pricing h2,.faq h2,.askai h2,.final h2{letter-spacing:-.025em}
.compare h2 em,.final h2 em{font-style:normal;color:var(--tint);background:none;-webkit-text-fill-color:currentColor}
.plan.featured{box-shadow:none}
.tilt{transform:none !important}

@media (prefers-reduced-motion:reduce){.chip,.chip span,.cycle-rail a{transition:none}}

/* le rail collant a besoin d'un ancêtre sans conteneur de défilement : clip, pas hidden */
html,body{overflow-x:clip}

/* dans le cycle, aucune section ne peint son propre fond (sinon ses bords se voient) */
.cycle-body > section{background:none}
.cycle-body > section::before,.cycle-body > section::after{display:none}