/* ============================================================
   Ruby — tokens.css  ·  fusion v12.1 du 8 oct. 2026 : + replis de police cyrilliques (DEV-09 §12.2) et --scrim.
   Aucune valeur existante modifiée, aucun sélecteur retiré.
   ------------------------------------------------------------
   Ruby — tokens.css  (source de vérité du design système)
   Chargé une seule fois, avant tout autre CSS. Ne modifier aucune valeur.
   - Thème : clair par défaut, sombre via prefers-color-scheme ET [data-theme="dark"]
   - Accents : data-accent="ocean|solaire|amethyste|braise|foret|nebuleuse" (défaut : ocean)
   - Polices : data-font="crm|systeme|sora" (défaut : Outfit + Manrope)
   - Colonne : data-side="rail" replie la navigation (>= 1024 px)
   - Règle : --x = remplissage, --x-ink = texte/icône sur surface (contraste AA)
   ============================================================ */
/* ---------- Polices : 4 jeux, choisis par data-font sur <html> ---------- */
:root{
  --font-display:"Outfit","Manrope",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
[data-font="crm"]{--font-display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;--font-body:"Inter",system-ui,-apple-system,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
[data-font="systeme"]{--font-display:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
[data-font="sora"]{--font-display:"Sora","Manrope",system-ui,sans-serif;--font-body:"DM Sans","Inter",system-ui,-apple-system,sans-serif;--font-mono:"DM Mono","JetBrains Mono",ui-monospace,Menlo,monospace}

/* ---------- Couleurs : neutres (clair) ---------- */
:root{
  --bg:#f3f5f9; --surface:#ffffff; --surface-2:#f7f9fc; --surface-3:#edf0f6;
  --text:#151a2a; --text-2:#394259; --muted:#5b647c; --border:#dde2ec; --border-2:#c9d1e0;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -14px rgba(16,24,40,.14);
  --shadow-lg:0 24px 60px -20px rgba(16,24,40,.32);

  /* Sémantiques : la version "ink" sert au TEXTE sur fond teinté (contraste AA), la version de base aux remplissages */
  --ok:#17a35e; --ok-ink:#0f6b3f; --warn:#e09a12; --warn-ink:#7a4f05; --danger:#e04545; --danger-ink:#9b1c1c; --info:#2f7cf6; --info-ink:#1a4fb3;
  --ok-soft:color-mix(in srgb,var(--ok) 13%,transparent);
  --warn-soft:color-mix(in srgb,var(--warn) 16%,transparent);
  --danger-soft:color-mix(in srgb,var(--danger) 12%,transparent);
  --info-soft:color-mix(in srgb,var(--info) 12%,transparent);

  /* Accent par défaut : océan (bleu → vert). --accent = remplissages, --accent-ink = texte/icônes sur surface */
  --accent:#2563eb; --accent-2:#0ea5a4; --accent-ink:#1d4ed8; --on-accent:#ffffff;
  --glow:rgba(37,99,235,.35);
  --grad:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  --accent-soft:color-mix(in srgb,var(--accent) 11%,transparent);
  --accent-ring:color-mix(in srgb,var(--accent) 35%,transparent);

  --r-sm:8px; --r:12px; --r-lg:18px;
  --side:240px; --rail:72px; --top:58px; --tab:62px;
  --tap:44px;
  --scrim:rgba(12,15,25,.42);   /* voile des feuilles (ajout Mon compte v12.1) */
}
/* Jeux d'accent. Les deux couleurs d'un dégradé ont une luminosité proche : pas de côté sombre qui ressemble à une bordure. */
[data-accent="ocean"]{--accent:#2563eb;--accent-2:#0ea5a4;--accent-ink:#1d4ed8;--glow:rgba(37,99,235,.35)}
[data-accent="solaire"]{--accent:#f0741f;--accent-2:#f5a524;--accent-ink:#b4500a;--glow:rgba(240,116,31,.35)}
[data-accent="amethyste"]{--accent:#7c3aed;--accent-2:#c026d3;--accent-ink:#6d28d9;--glow:rgba(124,58,237,.35)}
[data-accent="braise"]{--accent:#dc2626;--accent-2:#f0741f;--accent-ink:#b91c1c;--glow:rgba(220,38,38,.35)}
[data-accent="foret"]{--accent:#059669;--accent-2:#65a30d;--accent-ink:#047857;--glow:rgba(5,150,105,.35)}
[data-accent="nebuleuse"]{--accent:#6366f1;--accent-2:#2563eb;--accent-ink:#4f46e5;--glow:rgba(99,102,241,.35);--grad:linear-gradient(135deg,#7c3aed 0%,#6366f1 45%,#2563eb 100%)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c0f19; --surface:#141927; --surface-2:#10141f; --surface-3:#1a2031;
    --text:#edf0f7; --text-2:#c3cadc; --muted:#9aa4bc; --border:#242b40; --border-2:#33405f;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -14px rgba(0,0,0,.6);
    --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
    --ok:#34d27e; --ok-ink:#7ee2ad; --warn:#f5b142; --warn-ink:#ffd089; --danger:#f26b6b; --danger-ink:#ffa3a3; --info:#5b9cff; --info-ink:#9cc2ff;
    --accent-ink:color-mix(in srgb,var(--accent) 70%,#ffffff);
    --scrim:rgba(0,0,0,.6); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0c0f19; --surface:#141927; --surface-2:#10141f; --surface-3:#1a2031;
  --text:#edf0f7; --text-2:#c3cadc; --muted:#9aa4bc; --border:#242b40; --border-2:#33405f;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -14px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
  --ok:#34d27e; --ok-ink:#7ee2ad; --warn:#f5b142; --warn-ink:#ffd089; --danger:#f26b6b; --danger-ink:#ffa3a3; --info:#5b9cff; --info-ink:#9cc2ff;
  --accent-ink:color-mix(in srgb,var(--accent) 70%,#ffffff);
  --scrim:rgba(0,0,0,.6); color-scheme:dark;
}


/* Surfaces en dégradé : pas de bordure, découpe nette, anti-aliasing Safari. Évite l'effet "cadre" sur les côtés. */
.grad-surface,.btn-primary,.nav-btn[aria-current="page"],.brand-mark,.mod .ic:not(.off),.icon-prev,.phone .hdr .mk,.auth-steps span.on,.progress i,.tabbar button[aria-current="page"]::before{
  background:var(--grad);border:0;background-clip:padding-box;isolation:isolate;-webkit-backface-visibility:hidden;outline:1px solid transparent
}