/* Jetons du design v4 « inspiration Apple » et de sa passe v5 « D.A.T.A » (docs/design-v4.md).
   Ce fichier ne contient que des variables : couleurs (clair sur :root nu, sombre sous les deux gardes), couleurs des
   blocs politiques, typographie, espacements, rayons, ombres, matériaux, mouvement. Aucune règle de mise en page ici.
   Les noms de la v3 sont conservés (les feuilles d'écran et l'outil de comptes les utilisent) ; leurs valeurs changent.
   Couleurs des blocs (gauche rose, extrême gauche rouge depuis le 24 septembre 2026) : validées par validate_palette.js du skill dataviz (bande de clarté, séparation
   daltonienne des voisins, plancher en vision normale) en clair sur #ffffff et en sombre sur #1c1c1e. Le contraste de
   l'ambre et du bleu avec le fond est sous 3:1 : chaque graphique a donc ses étiquettes et son tableau exact. */

:root {
  /* fonds groupés et surfaces, thème clair */
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --surface-3: #e5e5ea;
  --ink: #1c1c1e;
  --ink-2: #48484d;
  --muted: #6c6c72;
  --line: rgba(60, 60, 67, .13);
  --line-2: rgba(60, 60, 67, .24);
  --accent: #00758a;
  --accent-ink: #ffffff;
  --accent-soft: #dff3f6;
  --focus: #0a9bb5;
  --danger: #c5221f;
  --danger-soft: #fde7e6;
  --ok: #1d7f4f;
  --ok-soft: #e0f5e9;
  --warn: #9a5b00;
  --warn-soft: #fff1d6;
  --na: #c7c7cc;
  --na-2: #e5e5ea;
  --ref: #8e8e93;
  --fill: rgba(120, 120, 128, .12);
  --fill-2: rgba(120, 120, 128, .22);
  --seg: #ffffff;
  --overlay: rgba(0, 0, 0, .32);
  --nav-bg: rgba(242, 242, 247, .78);
  --glass: saturate(180%) blur(22px);
  /* verre liquide (recette de style.css : calque flou et déformé + voile teinté + reflet) et fond de page en nappes de
     couleur douces, pour que le verre ait quelque chose à réfracter */
  --lg-blur: 10px;
  --lg-blur-strong: 18px;
  --lg-tint: rgba(255, 255, 255, .30);
  --lg-tint-strong: rgba(255, 255, 255, .55);
  --lg-tint-opaque: rgba(255, 255, 255, .93);
  --lg-rim: rgba(255, 255, 255, .85);
  --lg-rim-2: rgba(255, 255, 255, .35);
  --lg-edge: rgba(255, 255, 255, .42);
  --lg-edge-dark: rgba(0, 0, 0, .06);
  --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .24));
  --lg-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 40px rgba(0, 0, 0, .14);
  --lg-bubble: rgba(255, 255, 255, .6);
  --blob-1: rgba(0, 150, 175, .26);
  --blob-2: rgba(242, 114, 163, .22);
  --blob-3: rgba(243, 159, 18, .18);
  --blob-4: rgba(56, 154, 241, .22);
  /* liseré des cartes (v5) : définit le bord sur le fond en nappes de couleur, sans bordure dessinée */
  --card-edge: rgba(60, 60, 67, .08);
  --shadow-1: 0 0 0 1px var(--card-edge), 0 1px 1px rgba(0, 0, 0, .03), 0 8px 24px rgba(0, 0, 0, .05);
  --shadow-2: 0 -12px 44px rgba(0, 0, 0, .18);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 34px rgba(0, 0, 0, .14);

  /* blocs politiques (ordre fixe : EXG, GAU, CEN, DTE, EXD, DIV ; NA = nuance non attribuée) */
  --bloc-EXG: #c8102e;
  --bloc-GAU: #f272a3;
  --bloc-CEN: #f39f12;
  --bloc-DTE: #389af1;
  --bloc-EXD: #5944bb;
  --bloc-DIV: #759b4f;
  --bloc-NA: #c7c7cc;

  /* typographie : San Francisco là où elle existe, chiffres arrondis pour les grands nombres */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-11: 12px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-22: 22px;
  --fs-28: 30px;
  --fs-34: 36px;

  /* espacements (échelle sur 4 px) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;

  /* rayons : petits éléments 8, contrôles 12, cartes 22, feuilles 28 */
  --r-6: 8px;
  --r-8: 12px;
  --r-12: 22px;
  --r-16: 28px;

  /* mouvement : fondus courts, ressort doux pour ce qui apparaît, courbe iOS pour les feuilles */
  --d-fast: 140ms;
  --d-base: 280ms;
  --d-sheet: 420ms;
  /* --ease : survols et couleurs ; --ease-out : ce qui entre ou sort (part vite) ; --ease-in-out : ce qui se déplace à
     l'écran ; --ease-sheet : courbe iOS des feuilles ; --ease-spring : léger rebond, réservé aux éléments « vivants » */
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.2, .64, 1);
}

/* thème sombre suivant le système, sauf si l'utilisateur force le clair */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --surface-3: #3a3a3c;
    --ink: #f5f5f7;
    --ink-2: #c7c7cc;
    --muted: #98989f;
    --line: rgba(255, 255, 255, .10);
    --line-2: rgba(255, 255, 255, .20);
    --accent: #5ac8dc;
    --accent-ink: #00222a;
    --accent-soft: #12363d;
    --focus: #7bd7e7;
    --danger: #ff8a80;
    --danger-soft: #4a211f;
    --ok: #5ad08e;
    --ok-soft: #153a29;
    --warn: #f2b65c;
    --warn-soft: #43310f;
    --na: #48484a;
    --na-2: #3a3a3c;
    --ref: #8e8e93;
    --fill: rgba(120, 120, 128, .24);
    --fill-2: rgba(120, 120, 128, .38);
    --seg: #636366;
    --overlay: rgba(0, 0, 0, .56);
    --nav-bg: rgba(14, 14, 16, .74);
    --lg-blur: 10px;
    --lg-blur-strong: 18px;
    --lg-tint: rgba(22, 22, 30, .34);
    --lg-tint-strong: rgba(22, 22, 30, .6);
    --lg-tint-opaque: rgba(22, 22, 30, .93);
    --lg-rim: rgba(255, 255, 255, .26);
    --lg-rim-2: rgba(255, 255, 255, .08);
    --lg-edge: rgba(255, 255, 255, .14);
    --lg-edge-dark: rgba(0, 0, 0, .4);
    --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .06));
    --lg-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 40px rgba(0, 0, 0, .55);
    --lg-bubble: rgba(255, 255, 255, .16);
    --blob-1: rgba(0, 150, 175, .22);
    --blob-2: rgba(242, 114, 163, .16);
    --blob-3: rgba(243, 159, 18, .12);
    --blob-4: rgba(56, 154, 241, .18);
    --card-edge: rgba(255, 255, 255, .07);
    --shadow-1: 0 0 0 1px var(--card-edge);
    --shadow-2: 0 -12px 44px rgba(0, 0, 0, .6);
    --shadow-float: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 34px rgba(0, 0, 0, .6);
    --bloc-EXG: #c9202f;
    --bloc-GAU: #dd5f9e;
    --bloc-CEN: #bd811c;
    --bloc-DTE: #2b96e1;
    --bloc-EXD: #795be4;
    --bloc-DIV: #6a9845;
    --bloc-NA: #48484a;
  }
}

/* thème sombre forcé par l'utilisateur */
:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --ink: #f5f5f7;
  --ink-2: #c7c7cc;
  --muted: #98989f;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .20);
  --accent: #5ac8dc;
  --accent-ink: #00222a;
  --accent-soft: #12363d;
  --focus: #7bd7e7;
  --danger: #ff8a80;
  --danger-soft: #4a211f;
  --ok: #5ad08e;
  --ok-soft: #153a29;
  --warn: #f2b65c;
  --warn-soft: #43310f;
  --na: #48484a;
  --na-2: #3a3a3c;
  --ref: #8e8e93;
  --fill: rgba(120, 120, 128, .24);
  --fill-2: rgba(120, 120, 128, .38);
  --seg: #636366;
  --overlay: rgba(0, 0, 0, .56);
  --nav-bg: rgba(14, 14, 16, .74);
  --lg-blur: 10px;
  --lg-blur-strong: 18px;
  --lg-tint: rgba(22, 22, 30, .34);
  --lg-tint-strong: rgba(22, 22, 30, .6);
  --lg-rim: rgba(255, 255, 255, .26);
  --lg-rim-2: rgba(255, 255, 255, .08);
  --lg-edge: rgba(255, 255, 255, .14);
  --lg-edge-dark: rgba(0, 0, 0, .4);
  --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .06));
  --lg-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 40px rgba(0, 0, 0, .55);
  --lg-bubble: rgba(255, 255, 255, .16);
  --blob-1: rgba(0, 150, 175, .22);
  --blob-2: rgba(242, 114, 163, .16);
  --blob-3: rgba(243, 159, 18, .12);
  --blob-4: rgba(56, 154, 241, .18);
  --card-edge: rgba(255, 255, 255, .07);
  --shadow-1: 0 0 0 1px var(--card-edge);
  --shadow-2: 0 -12px 44px rgba(0, 0, 0, .6);
  --shadow-float: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 34px rgba(0, 0, 0, .6);
  --bloc-EXG: #c9202f;
  --bloc-GAU: #dd5f9e;
  --bloc-CEN: #bd811c;
  --bloc-DTE: #2b96e1;
  --bloc-EXD: #795be4;
  --bloc-DIV: #6a9845;
  --bloc-NA: #48484a;
}

/* mouvement réduit : plus de durées, sauf les fondus ramenés à 100 ms (voir style.css) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-base: 0ms;
    --d-sheet: 0ms;
  }
}