/* ============================================================
   UPVID — DESIGN SYSTEM v2 · upvid.pro
   Direction : "Momentum" — app claire, encre nuit, accent ultramarine,
   dégradé momentum (ultramarine→violet) réservé à la donnée de vélocité.
   Signature : le up-tick (polyline montante) — logo, jauge, chargement.
   Fichier unique, chargé UNE FOIS depuis base.html. Aucun hex ailleurs.
   ============================================================ */
@layer tokens, base, components;

@layer tokens {
  :root {
    /* Couleurs — light (défaut) */
    --ds-paper:#F7F8FC; --ds-surface:#FFFFFF;
    --ds-ink:#131523; --ds-ink-2:#5A5F73; --ds-line:#E3E6F0;
    --ds-up:#3E4BE8; --ds-up-deep:#2E39C4; --ds-up-tint:#EBEDFE;
    --ds-violet:#8B5CF6;                        /* fin du dégradé momentum */
    --ds-momentum:linear-gradient(90deg,var(--ds-up),var(--ds-violet));
    --ds-amber:#B45309; --ds-amber-tint:#FCF1E2;/* fenêtre qui se referme, quotas */
    --ds-danger:#D14343; --ds-danger-tint:#FBEAEA;
    --ds-ok:#0E8F62; --ds-ok-tint:#E3F5EE;      /* confirmations uniquement */
    /* Typo */
    --ds-font-display:"Sora",system-ui,sans-serif;
    --ds-font-body:"Instrument Sans",system-ui,sans-serif;
    --ds-font-data:"JetBrains Mono",ui-monospace,monospace;
    --ds-t-xs:.75rem; --ds-t-sm:.875rem; --ds-t-md:1rem;
    --ds-t-lg:1.25rem; --ds-t-xl:1.5rem; --ds-t-2xl:1.875rem;
    /* Espacement / rayons / ombres / tactile */
    --ds-s1:.25rem; --ds-s2:.5rem; --ds-s3:.75rem; --ds-s4:1rem;
    --ds-s6:1.5rem; --ds-s8:2rem;
    --ds-r-sm:8px; --ds-r-md:14px; --ds-r-lg:20px; --ds-r-pill:999px;
    --ds-shadow:0 1px 2px rgb(19 21 35/.05),0 4px 16px rgb(19 21 35/.06);
    --ds-shadow-up:0 -6px 24px rgb(19 21 35/.08);
    --ds-touch:44px;
    --ds-focus:0 0 0 3px rgb(62 75 232/.35);
    /* Zones sûres PWA */
    --ds-safe-b:env(safe-area-inset-bottom,0px);
    --ds-safe-t:env(safe-area-inset-top,0px);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ds-paper:#0F1119; --ds-surface:#171A26;
      --ds-ink:#EEF0F8; --ds-ink-2:#9BA1B7; --ds-line:#262B3D;
      --ds-up:#6672FF; --ds-up-deep:#8A93FF; --ds-up-tint:#232858;
      --ds-amber:#E8A33D; --ds-amber-tint:#33270F;
      --ds-danger:#F07474; --ds-danger-tint:#3A1B1B;
      --ds-ok:#3ECF8E; --ds-ok-tint:#0F2E22;
      --ds-shadow:0 1px 2px rgb(0 0 0/.4),0 4px 16px rgb(0 0 0/.35);
    }
  }
}

@layer base {
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{background:var(--ds-paper);color:var(--ds-ink);
    font-family:var(--ds-font-body);font-size:var(--ds-t-md);line-height:1.5;
    min-height:100dvh;padding-top:var(--ds-safe-t)}
  h1,h2,h3{font-family:var(--ds-font-display);letter-spacing:-.015em;line-height:1.2}
  a{color:var(--ds-up-deep)}
  button{font:inherit}
  :focus-visible{outline:none;box-shadow:var(--ds-focus);border-radius:var(--ds-r-sm)}
  .mono{font-family:var(--ds-font-data)}
  .muted{color:var(--ds-ink-2)}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
}

@layer components {

/* ---------- Shell : topbar + contenu + bottom nav ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--ds-s3);
  padding:var(--ds-s3) var(--ds-s4);background:color-mix(in srgb,var(--ds-paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ds-line)}
.brand{display:flex;align-items:center;gap:var(--ds-s2);font-family:var(--ds-font-display);
  font-weight:700;font-size:var(--ds-t-lg);color:var(--ds-ink);text-decoration:none}
.brand .tick{width:22px;height:22px;flex:none}
.brand .tick path{stroke:var(--ds-up);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.quota-pill{margin-left:auto;font-family:var(--ds-font-data);font-size:var(--ds-t-xs);
  background:var(--ds-up-tint);color:var(--ds-up-deep);border:1px solid transparent;
  padding:.3rem .7rem;border-radius:var(--ds-r-pill)}
.quota-pill.warn{background:var(--ds-amber-tint);color:var(--ds-amber)}

#content{max-width:680px;margin:0 auto;
  padding:var(--ds-s4) var(--ds-s4) calc(84px + var(--ds-safe-b))}
@media (min-width:1024px){#content{padding-bottom:var(--ds-s8)}}

.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;
  grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;
  background:var(--ds-surface);border-top:1px solid var(--ds-line);
  padding:var(--ds-s1) var(--ds-s2) calc(var(--ds-s1) + var(--ds-safe-b));
  box-shadow:var(--ds-shadow-up)}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;
  min-height:var(--ds-touch);justify-content:center;text-decoration:none;
  color:var(--ds-ink-2);font-size:var(--ds-t-xs)}
.bottomnav a[aria-current="page"]{color:var(--ds-up-deep);font-weight:600}
.bottomnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fab{width:56px;height:56px;border-radius:var(--ds-r-pill);border:none;cursor:pointer;
  background:var(--ds-up);color:#fff;display:grid;place-items:center;
  margin-top:-26px;box-shadow:var(--ds-shadow);justify-self:center}
.fab:active{transform:scale(.96)}
.fab svg{width:24px;height:24px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}
@media (min-width:1024px){ /* même DOM : la bottom nav devient rail gauche */
  .bottomnav{top:0;bottom:auto;left:0;right:auto;height:100dvh;width:220px;
    grid-template-columns:1fr;grid-auto-rows:min-content;align-content:start;
    gap:var(--ds-s2);padding:var(--ds-s6) var(--ds-s3);border-top:none;
    border-right:1px solid var(--ds-line);box-shadow:none}
  .bottomnav a{flex-direction:row;gap:var(--ds-s3);justify-content:flex-start;
    padding:0 var(--ds-s3);border-radius:var(--ds-r-md);font-size:var(--ds-t-sm)}
  .fab{margin-top:var(--ds-s4);width:100%;height:var(--ds-touch);border-radius:var(--ds-r-md)}
  #content{margin-left:calc(220px + (100vw - 220px - 680px)/2)}
  .topbar{margin-left:220px}
}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-s2);
  min-height:var(--ds-touch);padding:0 var(--ds-s4);border-radius:var(--ds-r-md);
  border:1px solid transparent;font-weight:600;font-size:var(--ds-t-sm);cursor:pointer;
  transition:background .15s,transform .05s;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ds-up);color:#fff}
.btn-primary:hover{background:var(--ds-up-deep)}
.btn-secondary{background:var(--ds-surface);color:var(--ds-ink);border-color:var(--ds-line)}
.btn-ghost{background:transparent;color:var(--ds-up-deep)}
.btn-ghost:hover{background:var(--ds-up-tint)}
.btn-danger{background:var(--ds-danger);color:#fff}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Chips & segmented ---------- */
.chips{display:flex;gap:var(--ds-s2);flex-wrap:wrap}
.chip{min-height:36px;padding:0 var(--ds-s3);border-radius:var(--ds-r-pill);
  border:1px solid var(--ds-line);background:var(--ds-surface);color:var(--ds-ink-2);
  font-size:var(--ds-t-sm);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ds-up-tint);border-color:var(--ds-up);
  color:var(--ds-up-deep);font-weight:600}
.seg{display:grid;grid-auto-flow:column;background:var(--ds-line);gap:2px;padding:2px;
  border-radius:var(--ds-r-md)}
.seg button{min-height:38px;border:none;border-radius:calc(var(--ds-r-md) - 3px);
  background:transparent;color:var(--ds-ink-2);font-weight:600;font-size:var(--ds-t-sm);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ds-surface);color:var(--ds-ink);
  box-shadow:var(--ds-shadow)}

/* ---------- Champs ---------- */
.field{display:flex;flex-direction:column;gap:var(--ds-s1);margin-bottom:var(--ds-s4)}
.field label{font-size:var(--ds-t-sm);font-weight:600}
.field input,.field select,.field textarea{font:inherit;color:var(--ds-ink);
  min-height:var(--ds-touch);padding:var(--ds-s2) var(--ds-s3);
  border:1.5px solid var(--ds-line);border-radius:var(--ds-r-md);background:var(--ds-surface)}
.field textarea{min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--ds-up);box-shadow:var(--ds-focus)}
.field .hint{font-size:var(--ds-t-xs);color:var(--ds-ink-2)}
.field.error input,.field.error textarea{border-color:var(--ds-danger)}
.field.error .hint{color:var(--ds-danger)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--ds-font-data);
  font-size:var(--ds-t-xs);padding:.25rem .6rem;border-radius:var(--ds-r-pill)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-rising{background:var(--ds-up-tint);color:var(--ds-up-deep)}
.badge-hot{background:var(--ds-amber-tint);color:var(--ds-amber)}
.badge-done{background:var(--ds-line);color:var(--ds-ink-2)}
.badge-partial{background:var(--ds-line);color:var(--ds-ink-2)}
.badge-none{background:var(--ds-danger-tint);color:var(--ds-danger)}

/* ---------- Carte vidéo (composant central) ---------- */
.vcard{background:var(--ds-surface);border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow);padding:var(--ds-s4);
  display:flex;flex-direction:column;gap:var(--ds-s3);margin-bottom:var(--ds-s4)}
.vcard.is-handled{opacity:.55}
.vcard .head{display:flex;gap:var(--ds-s3)}
.vcard .thumb{width:96px;height:54px;flex:none;border-radius:var(--ds-r-sm);
  background:var(--ds-ink);background-size:cover;background-position:center;position:relative}
.vcard .thumb::after{content:"";position:absolute;inset:auto 6px 6px auto;width:0;height:0;
  border-left:9px solid var(--ds-up);border-top:6px solid transparent;border-bottom:6px solid transparent}
.vcard h3{font-size:var(--ds-t-md);font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard .chan{font-size:var(--ds-t-xs);color:var(--ds-ink-2);margin-top:2px}
.vcard .stats{display:flex;gap:var(--ds-s4);font-family:var(--ds-font-data);
  font-size:var(--ds-t-xs);color:var(--ds-ink-2);flex-wrap:wrap}
.vcard .stats b{color:var(--ds-ink);font-weight:500}

/* Jauge momentum : fenêtre d'opportunité (up→violet ; poignée = position) */
.gauge{--pct:50%}
.gauge .bar{height:8px;border-radius:var(--ds-r-pill);background:var(--ds-line);
  position:relative;overflow:visible}
.gauge .bar i{position:absolute;inset:0 auto 0 0;width:var(--pct);
  border-radius:var(--ds-r-pill);background:var(--ds-momentum)}
.gauge .bar u{position:absolute;top:50%;left:var(--pct);translate:-50% -50%;
  width:16px;height:16px;border-radius:50%;background:var(--ds-surface);
  border:3px solid var(--ds-violet);text-decoration:none}
.gauge .lbl{display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--ds-font-data);font-size:var(--ds-t-xs);color:var(--ds-ink-2)}

/* Bloc angle */
.angle{background:var(--ds-up-tint);border-radius:var(--ds-r-md);padding:var(--ds-s3)}
.angle .k{font-family:var(--ds-font-data);font-size:var(--ds-t-xs);
  text-transform:uppercase;letter-spacing:.12em;color:var(--ds-up-deep);
  display:block;margin-bottom:var(--ds-s1)}
.angle p{font-size:var(--ds-t-sm)}
.vcard .actions{display:grid;grid-template-columns:1fr auto auto;gap:var(--ds-s2)}

/* ---------- Bottom sheet ---------- */
.sheet-backdrop{position:fixed;inset:0;z-index:60;background:rgb(19 21 35/.45)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--ds-surface);
  border-radius:var(--ds-r-lg) var(--ds-r-lg) 0 0;max-height:86dvh;display:flex;
  flex-direction:column;box-shadow:var(--ds-shadow-up);
  padding-bottom:var(--ds-safe-b)}
.sheet .grab{width:36px;height:4px;border-radius:var(--ds-r-pill);
  background:var(--ds-line);margin:10px auto 4px}
.sheet .body{overflow-y:auto;padding:var(--ds-s4)}
.sheet .sticky-actions{position:sticky;bottom:0;background:var(--ds-surface);
  padding:var(--ds-s3) var(--ds-s4);border-top:1px solid var(--ds-line);
  display:grid;grid-template-columns:1fr auto;gap:var(--ds-s2)}
@media (min-width:1024px){.sheet{left:auto;right:var(--ds-s6);bottom:var(--ds-s6);
  width:420px;border-radius:var(--ds-r-lg)}}
.sheet-enter{animation:sheetUp .22s ease-out}
@keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Bannières / toasts / états ---------- */
.banner{display:flex;gap:var(--ds-s3);align-items:flex-start;border-radius:var(--ds-r-md);
  padding:var(--ds-s3) var(--ds-s4);font-size:var(--ds-t-sm);margin-bottom:var(--ds-s3)}
.banner b{display:block}
.banner .dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none;background:currentColor}
.banner-info{background:var(--ds-up-tint);color:var(--ds-ink)}
.banner-info .dot{background:var(--ds-up)}
.banner-quota{background:var(--ds-amber-tint)}
.banner-quota .dot{background:var(--ds-amber)}
.banner-error{background:var(--ds-danger-tint)}
.banner-error .dot{background:var(--ds-danger)}

#toasts{position:fixed;left:50%;bottom:calc(88px + var(--ds-safe-b));translate:-50% 0;
  z-index:70;display:flex;flex-direction:column;gap:var(--ds-s2);align-items:center}
.toast{background:var(--ds-ink);color:var(--ds-paper);font-size:var(--ds-t-sm);
  padding:.6rem 1rem;border-radius:var(--ds-r-md);box-shadow:var(--ds-shadow);
  display:flex;gap:var(--ds-s2);animation:sheetUp .2s ease-out}
.toast .ok{color:var(--ds-ok)}

.state{background:var(--ds-surface);border:1.5px dashed var(--ds-line);
  border-radius:var(--ds-r-lg);padding:var(--ds-s8) var(--ds-s4);text-align:center}
.state h2{font-size:var(--ds-t-lg)}
.state p{color:var(--ds-ink-2);font-size:var(--ds-t-sm);margin:var(--ds-s2) 0 var(--ds-s4)}
/* Up-tick animé = indicateur de scan (signature) */
.uptick{width:88px;height:44px;margin:0 auto var(--ds-s3)}
.uptick path{fill:none;stroke:url(#dsMomentum) var(--ds-up);stroke:var(--ds-up);
  stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:160;stroke-dashoffset:160;animation:draw 1.6s ease-in-out infinite}
@keyframes draw{60%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.25}}

/* Skeletons */
.skl{border-radius:var(--ds-r-md);background:linear-gradient(90deg,
  var(--ds-line) 25%,color-mix(in srgb,var(--ds-line) 40%,var(--ds-surface)) 50%,var(--ds-line) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* Listes (projets, compte) */
.list-item{display:flex;align-items:center;gap:var(--ds-s3);background:var(--ds-surface);
  border:1px solid var(--ds-line);border-radius:var(--ds-r-md);padding:var(--ds-s3) var(--ds-s4);
  margin-bottom:var(--ds-s2);min-height:var(--ds-touch);text-decoration:none;color:var(--ds-ink)}
.list-item .grow{flex:1;min-width:0}
.list-item .sub{font-size:var(--ds-t-xs);color:var(--ds-ink-2)}
}

@layer components {
  /* Utilitaires d'espacement — pour bannir tout style inline statique des templates */
  .mb-2{margin-bottom:var(--ds-s2)} .mb-4{margin-bottom:var(--ds-s4)}
  .mt-4{margin-top:var(--ds-s4)} .gap-v{height:var(--ds-s4)} .skl-card{height:180px;margin-bottom:var(--ds-s4)}
  .danger-link{color:var(--ds-danger)}
  .h1-2xl{font-size:var(--ds-t-2xl)} .state-left{border-style:solid;text-align:left}
}

/* ============================================================
   v2.1 — COMPLÉMENTS SPRINT « CONSOLIDATION »
   1. Polices self-hostées (invariant marque §2 : Sora / Instrument Sans /
      JetBrains Mono). Sans elles, l'identité typographique n'existait pas :
      l'UI retombait silencieusement sur les polices système.
   2. Classes réclamées par des templates mais jamais définies (.auth-*) :
      les écrans d'auth s'affichaient sans mise en page.
   3. Surface publique (landing + plans) : le message du produit a besoin de
      composants, pas de CSS ad hoc dans les pages.
   Aucun hexadécimal : tout passe par les tokens --ds-*.
   ============================================================ */
@font-face{font-family:"Sora";src:url("../fonts/sora-latin-400-normal.a87be5f51483.woff2") format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"Sora";src:url("../fonts/sora-latin-600-normal.4c3aca48be0c.woff2") format("woff2");font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:"Sora";src:url("../fonts/sora-latin-700-normal.b2758c7ec7e6.woff2") format("woff2");font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-400-normal.c178fc5e2d41.woff2") format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-600-normal.36a59be54659.woff2") format("woff2");font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-700-normal.51ec31ea8d92.woff2") format("woff2");font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-400-normal.caf0dfde4e44.woff2") format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-600-normal.075ec35bc15b.woff2") format("woff2");font-weight:600;font-display:swap;font-style:normal}

@layer components {

  /* ---------- Auth (login / signup / verify) ---------- */
  .auth-main{max-width:420px;margin:0 auto;padding:var(--ds-s6) var(--ds-s4) var(--ds-s8)}
  .auth-card{background:var(--ds-surface);border:1px solid var(--ds-line);
    border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow);padding:var(--ds-s6)}

  /* ---------- Surface publique : landing ---------- */
  .public-actions{display:flex;gap:var(--ds-s2);align-items:center;margin-left:auto}
  .hero{padding:var(--ds-s8) 0 var(--ds-s6);text-align:left}
  .eyebrow{font-family:var(--ds-font-data);font-size:var(--ds-t-xs);letter-spacing:.08em;
    text-transform:uppercase;color:var(--ds-up)}
  .hero h1{font-family:var(--ds-font-display);font-size:var(--ds-t-2xl);line-height:1.15;
    margin:var(--ds-s3) 0 var(--ds-s3);max-width:16ch}
  .hero p{color:var(--ds-ink-2);max-width:52ch;margin-bottom:var(--ds-s6)}
  .hero .actions{display:flex;flex-wrap:wrap;gap:var(--ds-s2)}

  /* Bande de réassurance — la ligne anti-spam, visible sans scroller. */
  .reassure{display:flex;flex-wrap:wrap;gap:var(--ds-s2) var(--ds-s4);padding:var(--ds-s3) var(--ds-s4);
    background:var(--ds-up-tint);border-radius:var(--ds-r-md);font-size:var(--ds-t-sm);
    color:var(--ds-ink);margin-bottom:var(--ds-s8)}
  .reassure span{display:flex;align-items:center;gap:var(--ds-s2)}
  .reassure span::before{content:"";width:6px;height:6px;border-radius:var(--ds-r-pill);
    background:var(--ds-up);flex:none}

  .section{margin-bottom:var(--ds-s8)}
  .section > h2{font-family:var(--ds-font-display);font-size:var(--ds-t-xl);margin-bottom:var(--ds-s2)}
  .section > p.lede{color:var(--ds-ink-2);margin-bottom:var(--ds-s4);max-width:56ch}

  .steps{display:grid;gap:var(--ds-s3)}
  .step{display:flex;gap:var(--ds-s3);background:var(--ds-surface);border:1px solid var(--ds-line);
    border-radius:var(--ds-r-md);padding:var(--ds-s4)}
  .step .n{font-family:var(--ds-font-data);font-weight:600;color:var(--ds-up);flex:none}
  .step strong{display:block;margin-bottom:var(--ds-s1)}
  .step .sub{color:var(--ds-ink-2);font-size:var(--ds-t-sm)}

  /* ---------- Plans ---------- */
  .plan{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);
    padding:var(--ds-s4);margin-bottom:var(--ds-s3)}
  .plan.is-current{border-color:var(--ds-up);box-shadow:var(--ds-focus)}
  .plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ds-s2)}
  .plan-head strong{font-family:var(--ds-font-display);font-size:var(--ds-t-lg)}
  .plan-price{font-size:var(--ds-t-lg);font-weight:600;white-space:nowrap}
  .plan-price small{color:var(--ds-ink-2);font-size:var(--ds-t-xs)}
  .plan .sub{color:var(--ds-ink-2);font-size:var(--ds-t-sm);margin:var(--ds-s1) 0 var(--ds-s3)}
  .plan p.muted{font-size:var(--ds-t-sm);margin-bottom:0}

  /* ---------- FAQ ---------- */
  .faq details{background:var(--ds-surface);border:1px solid var(--ds-line);
    border-radius:var(--ds-r-md);padding:var(--ds-s3) var(--ds-s4);margin-bottom:var(--ds-s2)}
  .faq summary{font-weight:600;cursor:pointer;min-height:var(--ds-touch);display:flex;align-items:center}
  .faq summary::marker{color:var(--ds-up)}
  .faq p{color:var(--ds-ink-2);font-size:var(--ds-t-sm);margin-top:var(--ds-s2)}

  /* Desktop : le message respire, sans changer le DOM (mobile-first, §B3). */
  @media (min-width:1024px){
    .hero h1{font-size:calc(var(--ds-t-2xl) * 1.6)}
    .steps{grid-template-columns:repeat(3,1fr)}
  }
}