/* ============================================================
   Allure Run — Design system « Vélocité » (ADR-002)
   Source de vérité des tokens. Clair + sombre natifs.
   Règles : 1 dégradé/écran · 2 élévations max · chiffres tabular.
   ============================================================ */

:root{
  --bg:#F7F9FC; --surface:#FFFFFF; --ink:#0E1420; --muted:#5B6472; --muted-2:#8A93A2;
  --line:#E2E7F0; --line-soft:#EBEFF6;
  --cobalt:#2B5CFF; --cyan:#22D9E6; --sync-ok:#0E9F6E; --alert:#D64533; --alert-chip:#FF7B6B;
  --grad:linear-gradient(90deg,var(--cobalt),var(--cyan));
  --panel:linear-gradient(160deg,#141C2E,#0E1420);
  --panel-line:transparent;
  --e1:0 1px 2px rgba(14,20,32,.05);
  --e2:0 10px 24px rgba(14,20,32,.07);
  --btn-glow:0 6px 14px rgba(43,92,255,.30);
  --font:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B101B; --surface:#141C2C; --ink:#EDF1F7; --muted:#93A0B4; --muted-2:#7E8AA0;
    --line:#232E46; --line-soft:#1D2740;
    --cobalt:#5B84FF; --cyan:#2FE3F0; --sync-ok:#2ECF96; --alert:#FF7B6B;
    --panel:linear-gradient(160deg,#1B2539,#121A2A);
    --panel-line:#26314A;
    --e1:0 1px 2px rgba(0,0,0,.3);
    --e2:0 10px 24px rgba(0,0,0,.35);
    --btn-glow:0 6px 16px rgba(43,92,255,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0B101B; --surface:#141C2C; --ink:#EDF1F7; --muted:#93A0B4; --muted-2:#7E8AA0;
  --line:#232E46; --line-soft:#1D2740;
  --cobalt:#5B84FF; --cyan:#2FE3F0; --sync-ok:#2ECF96; --alert:#FF7B6B;
  --panel:linear-gradient(160deg,#1B2539,#121A2A);
  --panel-line:#26314A;
  --e1:0 1px 2px rgba(0,0,0,.3);
  --e2:0 10px 24px rgba(0,0,0,.35);
  --btn-glow:0 6px 16px rgba(43,92,255,.45);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.55; font-size:16px; }
h1,h2,h3{ margin:0; text-wrap:balance; letter-spacing:-.02em; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.logo{ font-weight:800; font-size:18px; letter-spacing:-.02em; text-decoration:none; }
.header-nav{ display:flex; align-items:center; gap:18px; font-size:13.5px; font-weight:600; color:var(--muted); }
.header-nav a{ text-decoration:none; }
.header-nav a:hover{ color:var(--ink); }
.lang-link{ border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:12.5px; }
.theme-btn{ background:none; border:1px solid var(--line); border-radius:999px; width:34px; height:34px; cursor:pointer; color:var(--muted); font-size:15px; line-height:1; }
.theme-btn:hover{ color:var(--ink); }

/* ---------- Hero ---------- */
.hero{ padding:72px 0 56px; }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:center; }
.hero h1{ font-weight:800; font-size:clamp(34px,5vw,54px); line-height:1.06; letter-spacing:-.03em; }
.hero .sub{ margin-top:16px; font-size:17px; color:var(--muted); max-width:52ch; }
.badge-soon{ display:inline-block; margin-bottom:14px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cobalt); }

/* Panneau « allure live » (démo visuelle du produit) */
.pace-panel{ background:var(--panel); border:1px solid var(--panel-line); border-radius:20px; padding:26px 24px; color:#FFF; position:relative; overflow:hidden; box-shadow:var(--e2); min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; }
.pace-panel .streak{ position:absolute; height:3px; border-radius:2px; background:linear-gradient(90deg,transparent,#2B5CFF 55%,#22D9E6); }
.pace-panel .s1{ top:34px; right:22px; width:150px; }
.pace-panel .s2{ top:48px; right:40px; width:100px; opacity:.6; }
.pace-panel .s3{ top:62px; right:30px; width:60px; opacity:.3; }
.pace-panel .k{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8FA0BE; font-weight:600; }
.pace-panel .p{ font-size:56px; font-weight:800; letter-spacing:-.02em; line-height:1.05; }
.pace-panel .z{ font-size:13px; color:#8FA0BE; }
.pace-panel .chip{ align-self:flex-start; margin-top:10px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#04121A; background:#22D9E6; border-radius:999px; padding:4px 13px; }
.pace-panel .push{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(143,160,190,.25); font-size:12.5px; color:#8FA0BE; }
.pace-panel .push b{ color:#2ECF96; font-weight:700; }

/* ---------- Formulaire liste d'attente ---------- */
.waitlist{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; max-width:520px; }
.waitlist input[type="email"], .waitlist select{
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:12px 18px; font-size:15px; font-family:var(--font); box-shadow:var(--e1); }
.waitlist input[type="email"]{ flex:1 1 200px; min-width:0; }
.waitlist input[type="email"]::placeholder{ color:var(--muted-2); }
.waitlist select{ flex:1 1 150px; color:var(--muted); cursor:pointer; }
.waitlist .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.btn-primary{ background:var(--cobalt); color:#FFF; border:none; cursor:pointer; font-weight:700; font-size:15px; font-family:var(--font); border-radius:999px; padding:12px 24px; box-shadow:var(--btn-glow); }
.btn-primary:hover{ filter:brightness(1.07); }
.waitlist input:focus-visible, .waitlist select:focus-visible, .btn-primary:focus-visible, .theme-btn:focus-visible, a:focus-visible{ outline:2px solid var(--cobalt); outline-offset:2px; }
.form-note{ margin-top:10px; font-size:12.5px; color:var(--muted-2); max-width:52ch; }
.form-msg{ margin-top:12px; font-size:14.5px; font-weight:600; display:none; }
.form-msg.ok{ display:block; color:var(--sync-ok); }
.form-msg.err{ display:block; color:var(--alert); }

/* ---------- Bande marques ---------- */
.brands{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:16px 0; }
.brands .wrap{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }

/* ---------- Sections ---------- */
section{ padding:64px 0; }
.section-head{ max-width:60ch; margin-bottom:36px; }
.section-head .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cobalt); }
.section-head h2{ font-weight:800; font-size:clamp(26px,3.4vw,36px); margin-top:8px; }
.section-head p{ margin-top:10px; color:var(--muted); font-size:16px; }

.cards3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:16px; padding:22px; box-shadow:var(--e2); }
.card h3{ font-size:18px; font-weight:800; }
.card p{ margin-top:8px; font-size:14.5px; color:var(--muted); }
.card .k{ font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--cobalt); display:block; margin-bottom:8px; }

/* Étapes (séquence réelle → numérotation porteuse de sens) */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; counter-reset:step; }
.step{ background:var(--surface); border:1px solid var(--line-soft); border-radius:16px; padding:22px; box-shadow:var(--e1); }
.step::before{ counter-increment:step; content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px; background:var(--grad); color:#04121A; font-weight:800; font-size:14px; margin-bottom:12px; font-variant-numeric:tabular-nums; }
.step h3{ font-size:16.5px; font-weight:800; }
.step p{ margin-top:6px; font-size:14px; color:var(--muted); }

/* Garde-fous */
.safety{ background:var(--surface); border:1px solid var(--line-soft); border-left:4px solid var(--sync-ok); border-radius:16px; padding:22px 24px; box-shadow:var(--e1); max-width:760px; }
.safety h3{ font-size:17px; font-weight:800; }
.safety p{ margin-top:8px; font-size:14.5px; color:var(--muted); }

/* Prix */
.pricing{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; max-width:760px; }
.price-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:16px; padding:24px; box-shadow:var(--e2); }
.price-card h3{ font-size:17px; font-weight:800; }
.price-card .tag{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cobalt); display:block; margin-bottom:8px; }
.price-card p{ margin-top:8px; font-size:14.5px; color:var(--muted); }
.price-card ul{ margin:12px 0 0; padding-left:18px; font-size:14px; color:var(--muted); display:flex; flex-direction:column; gap:5px; }

/* CTA final */
.cta-final{ text-align:center; }
.cta-final h2{ font-weight:800; font-size:clamp(26px,3.4vw,36px); }
.cta-final .waitlist{ margin:26px auto 0; justify-content:center; }
.cta-final .form-note{ margin-left:auto; margin-right:auto; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line-soft); padding:32px 0 48px; font-size:13px; color:var(--muted-2); }
.site-footer .wrap{ display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:baseline; }
.site-footer a{ color:var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 840px){
  .hero .wrap{ grid-template-columns:1fr; gap:36px; }
  .pace-panel{ max-width:380px; }
  .header-nav .hide-sm{ display:none; }
}