/* ═══════════════════════════════════════════════════════════════════
   FUNDAMENTALS — Système de thème unifié (clair / sombre)
   Source unique de vérité pour les tokens "core" partagés.
   À inclure EN DERNIER dans le <head> de chaque page (après le <style>
   de la page) pour faire autorité par ordre de cascade.

   Convention unique :
     - Mode clair = défaut (:root)
     - Mode sombre = <html class="dark">
   Géré par theme.js + un bootstrap inline (anti-FOUC).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces / fonds ── */
  --bg: #FAF8F5;
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-1: #FFFFFF;
  --surface-2: #F5F5F4;
  --surface-3: #EDEBE8;
  --input-bg: #FFFFFF;
  --nav-bg: rgba(250,248,245,0.88);
  --nav-border: rgba(28,25,23,0.07);

  /* ── Texte ── */
  --text: #1C1917;
  --text-strong: #0C0A09;
  --text-primary: #1C1917;
  --text-secondary: #57534E;
  --text-muted: #706964; /* AA 4,5 tenu aussi sur les lavis des briques (etait #78716C : 4,23) */
  --text-faint: #6F6861; /* AA sur le fond nu ET sur les lavis des briques (etait #756E67 : 4,43) */

  /* ── Bordures ── */
  --border: rgba(28,25,23,0.07);
  --border-subtle: rgba(28,25,23,0.07);
  --border-soft: rgba(28,25,23,0.07);
  --border-mid: rgba(28,25,23,0.11);
  --border-hover: rgba(28,25,23,0.18);

  /* ── Accent (violet de marque) ── */
  --accent: #C4B5FD;
  --accent-strong: #5B21B6;
  /* Fond des boutons d'action. Il portait #8B5CF6 -> #3B82F6, trop clair
     pour du blanc : 4,23 au depart, 3,68 a l'arrivee, dans les deux themes.
     Un cran plus fonce sur chaque borne donne 5,17 sur toute la course,
     sans changer l'identite violet -> bleu. */
  --accent-fill: linear-gradient(135deg, #7C3AED, #2563EB);
  --accent-soft: rgba(196,181,253,0.22);
  --accent-pill-text: #FFFFFF;
  --violet: #7C3AED;
  --indigo: #6366F1;
  --indigo-dim: rgba(99,102,241,0.14);
  /* Anneau de focus de l'avatar (nav-avatar.js). Il vivait dans cinq
     pages sur les douze ou ce script tourne : ailleurs la variable
     etait vide et l'anneau n'existait pas. */
  --indigo-glow: rgba(99,102,241,0.18);

  /* Encre sourde pour les surfaces TEINTEES. --text-muted tient 4,53 sur
     le fond nu mais tombe a 4,40 des qu'une surface l'assombrit un peu :
     en theme clair, toute teinte rapproche le fond d'un gris moyen au lieu
     de l'en eloigner, donc tout lavis coute du contraste. Ici 6,3 sur
     --surface-2. En sombre le probleme ne se pose pas — la teinte
     eclaircit — donc le jeton y vaut simplement --text-muted. */
  --ink-soft: #57534E;
  --purple: #8B5CF6;

  /* ── États / statuts ── */
  --green: #16A34A;

  /* Encre verte. --green est fait pour des aplats, pas pour du texte :
     comme couleur de caractere il donne 3,11 sur la page nue et 2,69 sur
     un lavis --green-dim, c'est-a-dire sur les badges ou il sert le plus.
     En clair tout lavis assombrit le fond et rapproche donc l'encre au
     lieu de l'en eloigner. #15713A est la teinte la plus claire qui tienne
     4,5 sur tous les fonds recenses — 4,95 au pire. Les fonds, bordures et
     traits gardent --green. */
  --green-text: #15713A;
  --green-soft: rgba(34,197,94,0.12);
  --green-dim: rgba(34,197,94,0.18);
  --green-border: rgba(34,197,94,0.32);
  --red: #DC2626;
  --red-soft: rgba(220,38,38,0.10);
  --red-text: #B91C1C;
  --orange: #EA580C;
  /* Encre orange. --orange est fait pour des aplats : comme couleur de
     caractere il donne 3,36 sur le fond nu et 2,98 sur son propre lavis.
     Meme separation que --green / --green-text. */
  --orange-text: #9A3412;
  --orange-soft: rgba(234,88,12,0.10);
  --orange-dim: rgba(234,88,12,0.18);
  --orange-border: rgba(234,88,12,0.32);
  --yellow: #CA8A04;

  /* ── Ombres / lueurs ── */
  --shadow-card: 0 1px 2px rgba(20,20,30,0.04), 0 4px 16px rgba(20,20,30,0.04);
  --shadow-hover: 0 4px 20px rgba(20,20,30,0.10);
  --glow: rgba(139,92,246,0.18);

  /* ── Contrôles divers ── */
  --track: #E7E5E4;
  --toggle-bg: rgba(28,25,23,0.06);
  --toggle-hover: rgba(28,25,23,0.12);

  /* ── Panneau gauche (auth) ── */
  --left-bg: #f8f7ff;
  --left-dot-color: rgba(139,92,246,0.10);
  --left-gradient: radial-gradient(900px 600px at 0% 0%, rgba(196,181,253,0.15) 0%, transparent 55%);

  /* ── Typo (invariant) ── */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', 'Instrument Serif', Georgia, serif;

  /* ── Géométrie & easing (invariant clair/sombre) ── */
  --r-sm: 0.5rem; --r-md: 0.875rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-full: 9999px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --t: 180ms;
}

html.dark {
  /* ── Surfaces / fonds ── */
  --bg: #0B0B1A;
  --bg-elevated: #161824;
  --surface: rgba(255,255,255,0.04);
  --surface-1: #161824;
  --surface-2: rgba(255,255,255,0.06);
  --surface-3: rgba(255,255,255,0.09);
  --input-bg: #1F2230;
  --nav-bg: rgba(11,11,26,0.82);
  --nav-border: rgba(255,255,255,0.05);

  /* ── Texte ── */
  --text: #F5F5F4;
  --text-strong: #FFFFFF;
  --text-primary: #F5F5F4;
  --text-secondary: #D4D4D8;
  --text-muted: #A1A1AA;
  /* Le pendant sombre de la ligne 31. Il etait reste a #71717A, qui ne
     donne que 4,03 sur --bg, 3,89 sur un fond eleve et 3,57 sur
     --surface-2 : le clair avait ete corrige, le sombre oublie.
     #8A8A96 est la teinte la plus discrete qui tienne 4,5 sur les trois
     (5,06 au pire), en restant en retrait de --text-muted (#A1A1AA). */
  --text-faint: #9CA3AF;

  /* ── Bordures ── */
  --border: rgba(255,255,255,0.06);
  --border-subtle: rgba(255,255,255,0.06);
  --border-soft: rgba(255,255,255,0.05);
  --border-mid: rgba(255,255,255,0.10);
  --border-hover: rgba(255,255,255,0.16);

  /* ── Accent ── */
  --accent: linear-gradient(90deg,#8B5CF6 0%,#6366F1 60%,#3B82F6 100%);
  --accent-strong: #A78BFA;
  /* Fond des boutons d'action. Il portait #8B5CF6 -> #3B82F6, trop clair
     pour du blanc : 4,23 au depart, 3,68 a l'arrivee, dans les deux themes.
     Un cran plus fonce sur chaque borne donne 5,17 sur toute la course,
     sans changer l'identite violet -> bleu. */
  --accent-fill: linear-gradient(135deg, #7C3AED, #2563EB);
  --accent-soft: rgba(167,139,250,0.14);
  --accent-pill-text: #FFFFFF;
  --violet: #A78BFA;
  --indigo: #818CF8;
  --indigo-dim: rgba(99,102,241,0.14);
  --indigo-glow: rgba(99,102,241,0.22);
  --ink-soft: var(--text-muted);
  --purple: #A78BFA;

  /* ── États / statuts ── */
  --green: #4ade80;
  /* En sombre le vert clair passe deja largement : rien a corriger. */
  --green-text: var(--green);
  --green-soft: rgba(74,222,128,0.12);
  --green-dim: rgba(74,222,128,0.18);
  --green-border: rgba(74,222,128,0.30);
  --red: #f87171;
  /* Meme separation que --green / --green-text : l'aplat sert de fond, le
     texte a besoin d'une version qui tienne sur les lavis. */
  --red-text: #FCA5A5;
  --red-soft: rgba(248,113,113,0.12);
  --orange: #fbbf24;
  /* En sombre l'orange est clair : il passe deja comme encre. */
  --orange-text: var(--orange);
  --orange-soft: rgba(251,191,36,0.12);
  --orange-dim: rgba(251,191,36,0.18);
  --orange-border: rgba(251,191,36,0.30);
  --yellow: #fbbf24;

  /* ── Ombres / lueurs ── */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 24px rgba(0,0,0,0.20);
  --shadow-hover: 0 4px 20px rgba(0,0,0,0.30);
  --glow: rgba(167,139,250,0.22);

  /* ── Contrôles divers ── */
  --track: rgba(255,255,255,0.08);
  --toggle-bg: rgba(255,255,255,0.08);
  --toggle-hover: rgba(255,255,255,0.14);

  /* ── Panneau gauche (auth) ── */
  --left-bg: #0f0f1a;
  --left-dot-color: rgba(139,92,246,0.18);
  --left-gradient: radial-gradient(1200px 700px at 0% 0%, rgba(30,27,75,0.6) 0%, transparent 55%);
}