/* Tuto Mix : design tokens. Généré par _docs/build-tokens.py depuis design-system/tokens.json
   puis maintenu à la main. Aucune valeur en dur ailleurs : toute nouvelle valeur s'ajoute ici. */

:root {
  /* Couleurs */
  --tm-black: #0b0b0c;
  --tm-ink-900: #101013;
  --tm-ink-850: #141417;
  --tm-ink-820: #14141a;
  --tm-ink-800: #17171c;
  --tm-ink-750: #1a1a1f;
  --tm-line-1: #1e1e23;
  --tm-line-2: #2a2a30;
  --tm-line-3: #3a3a42;
  --tm-line-4: #4a4a54;
  --tm-white: #f4f4f5;
  --tm-grey-200: #c6c6cd;
  --tm-grey-300: #a0a0a8;
  --tm-grey-400: #8a8a96;
  --tm-grey-500: #6c6c78;
  --tm-yellow: #fdfb48;
  --tm-yellow-hover: #fffb7a;
  --tm-red: #ff3b2e;
  --tm-red-hover: #ff5a4e;
  --tm-blue: #4b8dff;
  --tm-blue-hover: #7fb0ff;
  --tm-blue-surface: #141b26;
  --tm-blue-line: #1e2530;
  --tm-logo-red: #ff3b2e;
  --tm-logo-blue: #2563ff;
  --tm-logo-violet: #9b1fe8;
  --tm-logo-yellow: #ffc93c;
  --tm-logo-cyan: #4fc3e8;
  --surface-page: var(--tm-black);
  --surface-alt: var(--tm-ink-900);
  --surface-card: var(--tm-ink-850);
  --surface-raised: var(--tm-ink-800);
  --surface-hover: var(--tm-ink-750);
  --surface-input: var(--tm-black);
  --surface-overlay: rgba(11,11,12,0.82);
  --border-subtle: var(--tm-line-1);
  --border-default: var(--tm-line-2);
  --border-muted: var(--tm-line-3);
  --border-strong: var(--tm-line-4);
  --text-primary: var(--tm-white);
  --text-secondary: var(--tm-grey-200);
  --text-muted: var(--tm-grey-300);
  --text-subtle: var(--tm-grey-400);
  --text-faint: var(--tm-grey-500);
  --text-on-accent: var(--tm-black);
  --accent: var(--tm-yellow);
  --accent-hover: var(--tm-yellow-hover);
  --accent-surface: var(--tm-ink-850);
  --accent-line: var(--tm-line-1);
  /* Accent pour textes, icônes et traits (fonds pleins : --accent). Foncé en mode clair pour rester lisible. */
  --accent-ink: var(--accent);
  --surface-header-m: rgba(11,11,12,0.9);
  --texture-line: rgba(255,255,255,0.03);
  --logo-filter: grayscale(1) brightness(1.8); /* logos blancs sur fond transparent (tm-logo-*.png) : les couleurs (Locasono, Les Echos) passent en blanc */
  --logo-blend: normal;
  color-scheme: dark;

  /* Familles */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --container: 1200px;
  --container-narrow: 800px;
  --container-reading: 760px;
  /* Largeurs intermédiaires des blocs (BlockShell du DS) */
  --container-wide: 1000px;
  --container-medium: 900px;
  --container-tight: 640px;
  --header-h: var(--header-height);
  --gutter: 40px;
  --gutter-mobile: 20px;
  --header-height: 80px;
  --section-y: 96px;
  --section-y-mobile: 48px;

  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-modal: 0 30px 60px rgba(0,0,0,0.5);
  --shadow-frame: 0 40px 80px rgba(0,0,0,0.45);
  --glow-hover: 0 0 20px 0 rgba(253,251,72,0.35);

  /* Typographie fine, halos, textures (bundle.css du DS) */
  --font-display-stretch: 112%;

  --text-display: 64px;
  --text-h1: 56px;
  --text-h2: 40px;
  --text-h2-lg: 48px;
  --text-h3: 22px;
  --text-h3-lg: 28px;
  --text-stat: 32px;
  --text-lead: 18px;
  --text-body: 16px;
  --text-body-lg: 17px;
  --text-small: 14px;
  --text-caption: 13px;
  --text-micro: 12px;
  --text-eyebrow: 11px;
  --text-button: 14px;
  --text-button-sm: 13px;
  --text-h1-mobile: 36px;
  --text-h2-mobile: 28px;
  --text-h3-mobile: 20px;
  --text-body-mobile: 15px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.04;
  --leading-heading: 1.1;
  --leading-snug: 1.2;
  --leading-body: 1.65;
  --leading-relaxed: 1.75;

  --tracking-display: -0.035em;
  --tracking-h2: -0.03em;
  --tracking-h3: -0.02em;
  --tracking-button: 0.06em;
  --tracking-eyebrow: 0.16em;

  --tm-yellow-rgb: 253,251,72;
  --tm-red-rgb: 255,59,46;
  --tm-blue-rgb: 75,141,255;
  --accent-rgb: var(--tm-yellow-rgb);

  --glow-hero: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.16), transparent 65%);
  --texture-grid: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 48px);
  --texture-hatch: repeating-linear-gradient(135deg, #141417 0 10px, #101013 10px 20px);
  --blur-header: blur(16px);
  --transition-fast: 120ms ease;
}

[data-theme="parcours"] {
  --accent: var(--tm-blue);
  --accent-hover: var(--tm-blue-hover);
  --accent-surface: var(--tm-blue-surface);
  --accent-line: var(--tm-blue-line);
  --glow-hover: 0 0 20px 0 rgba(75,141,255,0.35);

  --accent-rgb: var(--tm-blue-rgb);
  --glow-hero: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.16), transparent 65%);
  --surface-alt: var(--tm-ink-820); /* maquette Le Parcours : bandes alternées en #14141A */
  --accent-ink: var(--accent);
}

[data-theme="cours"] {
  --accent: var(--tm-red);
  --accent-hover: var(--tm-red-hover);
  --glow-hover: 0 0 20px 0 rgba(255,59,46,0.35);

  --accent-rgb: var(--tm-red-rgb);
  --glow-hero: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.16), transparent 65%);
  --accent-ink: var(--accent);
}

/* Mode clair : data-mode="light" sur <html> (bouton du header, choix mémorisé ; sombre par défaut).
   Seuls les jetons changent ; les fonds pleins d'accent (boutons) gardent la couleur de la marque. */
[data-mode="light"] {
  color-scheme: light;
  --surface-page: #ffffff;
  --surface-alt: #f4f4f6;
  --surface-card: #fafafb;
  --surface-raised: #f0f0f3;
  --surface-hover: #ececf0;
  --surface-input: #ffffff;
  --surface-overlay: rgba(255,255,255,0.85);
  --surface-header-m: rgba(255,255,255,0.92);
  --border-subtle: #e6e6eb;
  --border-default: #d6d6dd;
  --border-muted: #c2c2cb;
  --border-strong: #9a9aa6;
  --text-primary: #0b0b0c;
  --text-secondary: #33333b;
  --text-muted: #55555f;
  --text-subtle: #6c6c78;
  --text-faint: #85858f;
  --accent-ink: #786a00;
  --accent-surface: #f6f6f8;
  --accent-line: #e6e6eb;
  --texture-grid: repeating-linear-gradient(90deg, rgba(0,0,0,0.018) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(0,0,0,0.014) 0 1px, transparent 1px 48px); /* atténuée (retour client 2026-10-16) */
  --texture-hatch: repeating-linear-gradient(135deg, #ededf1 0 10px, #f6f6f8 10px 20px);
  --texture-line: rgba(0,0,0,0.02);
  --logo-filter: grayscale(1) brightness(1.8) invert(1); /* logos blancs transparents : passés en noir */
  --logo-blend: normal;
  --glow-hero: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.22), transparent 65%);
  --shadow-modal: 0 30px 60px rgba(0,0,0,0.18);
  --shadow-frame: 0 40px 80px rgba(0,0,0,0.14);
}
[data-mode="light"][data-theme="parcours"], [data-mode="light"] [data-theme="parcours"] {
  --accent-ink: #1d5bd0;
  --accent-surface: #eef4ff;
  --accent-line: #d6e4ff;
  --surface-alt: #f3f5f9;
}
[data-mode="light"][data-theme="cours"], [data-mode="light"] [data-theme="cours"] {
  --accent-ink: #cc2418;
}