/* ============================================================
   IA Dimension — tokens.css
   Direction « Opacity / Faces » : monochrome noir sur blanc cassé.
   - Titres : Open Runde (rond géométrique). Corps/UI : Inter.
   - Teal = MICRO-accent seulement (focus, liens, point du logo, détail).
   - Le « monde système » sombre est neutralisé : tout le site est clair.
   AUCUNE italique nulle part.
   ============================================================ */
:root{
  /* --- Palette monochrome --- */
  --cream:#EFEFEC; --cream-2:#E6E6E1; --paper:#FFFFFF;
  --ink:#000000; --ink-2:#3A3A37; --muted:#6F6F69;
  --line:#E1E1DB; --line-2:#D3D3CD;
  /* Accent = BLEU vibrant #266EF1 (réf. Faces + ChronoTask). Remplace le teal
     (retiré 2026-07-23, choix Mick). Sert au CTA, liens, focus, détails. */
  --accent:#266EF1; --accent-deep:#1B54C0; --accent-tint:#E7EEFE;

  /* --- Palette « pop » façon Faces (couleurs réelles échantillonnées sur
     faces.app). Franches, plates, web-native. Usage : slides/cartes colorés
     (page « en action »), PAS le fond global (qui reste crème monochrome). --- */
  --pop-blue:#266EF1; --pop-green:#01AE5A; --pop-amber:#FFB400;
  --pop-purple:#9847F5; --pop-red:#EB0000;

  /* --- « Système » neutralisé en monochrome clair (plus de monde sombre).
     Le diagramme de flux et .sys s'en servent encore. --- */
  --sys-bg:#EFEFEC; --sys-surface:#FFFFFF; --sys-line:#D3D3CD;
  --sys-ink:#000000; --sys-muted:#6F6F69;
  --sys-accent:#266EF1; --sys-glow:#266EF1;

  /* --- Ombres discrètes (Opacity/Faces sont quasi plats) --- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:0 24px 60px -28px rgba(0,0,0,.24);

  /* --- Familles --- */
  --display:'Open Runde',system-ui,-apple-system,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* --- Echelle typo (base 17px = 1rem ; titrage agrandi façon Opacity) --- */
  --fs-display:clamp(2.7rem,7.2vw,5rem);
  --fs-h1:clamp(2.1rem,5.2vw,3.4rem);
  --fs-h2:clamp(1.6rem,3.6vw,2.3rem);
  --fs-h3:1.3rem;
  --fs-lead:clamp(1.08rem,1.8vw,1.3rem);
  --fs-body:1.0625rem;
  --fs-small:.875rem;
  --fs-label:.8rem;

  /* --- Layout --- */
  --wrap:680px; --wrap-wide:1080px; --wrap-read:44rem;
  --pad-x:clamp(20px,5vw,32px);
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:100px;
}

/* ============================================================
   .sys — jadis le monde sombre. Désormais monochrome clair :
   une simple section alternée (fond légèrement plus dense).
   On garde la classe car des composants la ciblent encore.
   ============================================================ */
.sys{
  --cream:var(--cream-2);
  background:var(--cream-2); color:var(--ink);
}