/* ==========================================================================
   JETONS DE COULEUR — SOURCE UNIQUE POUR LES 13 PAGES
   ==========================================================================

   POURQUOI UNE FEUILLE À PART.

   Les couleurs vivaient dans `vitrine.css`, que trois pages ne chargent pas.
   Elles sont maintenant ici, chargées AVANT toute autre feuille : une seule
   définition, valable partout, y compris sur les pages juridiques.

   LE CLAIR EST LA SOURCE DE VÉRITÉ. Le sombre ne redéfinit que des JETONS,
   jamais une règle de composant. Un composant qui prendrait sa couleur
   directement dans un bloc `@media` ne s'appliquerait pas dans l'état par
   défaut du navigateur, et la page s'afficherait en texte d'un thème sur le
   fond de l'autre.

   TROIS ÉTATS, PAS DEUX.

   Le lecteur qui n'a rien choisi ne porte AUCUN attribut : seul
   `prefers-color-scheme` le distingue. D'où les trois blocs :

     :root                                        → palette claire complète
     @media (dark) :root:not([data-theme=light])  → le système décide
     :root[data-theme=dark]                       → le lecteur a choisi

   La garde `:not([data-theme="light"])` fait qu'un choix explicite « clair »
   l'emporte sur un système sombre. Sans elle, la bascule ne fonctionnerait
   que dans un sens.

   PALETTE REPRISE DE L'APPLICATION (packages/frontend, refonte-tokens.scss).
   Les valeurs claires y étaient déjà identiques à celles de la vitrine, au
   préfixe près. Le sombre en vient donc tel quel : deux surfaces, une seule
   charte, et rien d'inventé.
   ========================================================================== */

:root {
  /* — Fonds ————————————————————————————————————————————————————— */
  --bg-page: oklch(0.985 0.003 258);
  --bg-band: oklch(0.975 0.004 258);
  --bg-card: #fff;
  --bg-subtle: oklch(0.96 0.005 258);
  --bg-subtle-hover: oklch(0.98 0.004 258);

  /* Les panneaux sombres du design clair. En mode sombre ils s'INVERSENT et
     deviennent plus clairs que la page : c'est ce qui préserve le rythme des
     pages, un panneau devant rester un accent de contraste. */
  --ink-panel: oklch(0.19 0.015 258);
  --ink-panel-deep: oklch(0.16 0.014 258);

  /* — Traits ———————————————————————————————————————————————————— */
  --line: oklch(0.92 0.008 258);
  --line-soft: oklch(0.955 0.005 258);
  --line-strong: oklch(0.88 0.01 258);
  --line-panel: oklch(0.3 0.02 258);

  /* — Textes ———————————————————————————————————————————————————
     `--text-3` ne descend PAS sous 0.5 de clarté : au-delà, il tombait sous
     4.5:1 sur `--bg-band` et faisait échouer huit libellés à l'audit. */
  --text: oklch(0.2 0.015 258);
  --text-2: oklch(0.44 0.02 258);
  --text-3: oklch(0.5 0.02 258);
  --text-on-panel: oklch(0.97 0.005 258);
  --text-on-panel-2: oklch(0.82 0.015 258);
  --text-on-panel-3: oklch(0.72 0.02 258);

  /* — Accent ———————————————————————————————————————————————————— */
  --accent: oklch(0.55 0.17 258);
  --accent-hover: oklch(0.49 0.17 258);
  --accent-border: oklch(0.5 0.17 258);
  --accent-soft: oklch(0.95 0.03 258);
  --accent-soft-text: oklch(0.42 0.15 258);
  /* Le texte POSÉ SUR l'accent. Il était écrit en dur et à 0.88 d'opacité,
     ce qui donnait 4.22:1 — sous le seuil. Plein, il passe. */
  --accent-text-on: #fff;
  --text-on-risk: oklch(0.99 0.005 258);

  /* — Échelle de risque — même chroma, teintes ordonnées. Jamais réutilisée
       pour un statut de workflow (c'est la règle de la charte). */
  --risk-low: oklch(0.62 0.13 162);
  --risk-low-text: oklch(0.5 0.13 162);
  --risk-mid: oklch(0.72 0.13 88);
  --risk-mid-text: oklch(0.55 0.13 88);
  --risk-high: oklch(0.63 0.16 45);
  --risk-high-text: oklch(0.5 0.14 45);
  --risk-crit: oklch(0.52 0.19 20);
  --risk-crit-text: oklch(0.48 0.19 20);

  /* — Voiles et ombres — neutres, donc valables sur les deux fonds, mais
       tokenisés pour que le sombre puisse les renforcer. */
  --voile-faible: oklch(0.5 0 0 / 0.06);
  --voile-moyen: oklch(0.5 0 0 / 0.09);
  --voile-fort: oklch(0.5 0 0 / 0.14);
  --ombre-carte: 0 4px 24px oklch(0.2 0.015 258 / 0.08);
  --ombre-relief: 0 1px 2px oklch(0.2 0.015 258 / 0.06);

  /* — Anneau de focus — visible sur les deux thèmes, jamais supprimé. */
  --focus-ring: 0 0 0 3px oklch(0.55 0.17 258 / 0.45);
  /* Fond de l'en-tête collante : translucide, donc distinct de --bg-page. */
  --bg-entete: oklch(0.985 0.003 258 / 0.92);
  --ink-panel-hover: oklch(0.28 0.015 258);
  --risk-low-wash: oklch(0.62 0.13 162 / 0.13);
  --risk-crit-wash: oklch(0.52 0.19 20 / 0.1);
  --risk-mid-wash: oklch(0.72 0.13 88 / 0.12);

  /* — Typographie et gabarit — invariants de thème. */
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --shell: 1160px;
  --gut: clamp(18px, 4vw, 32px);
  --bloc: clamp(48px, 7vw, 88px);
}

/* Le lecteur n'a rien choisi : le système décide. La garde laisse gagner un
   choix explicite « clair ». */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-page: oklch(0.13 0.012 258);
    --bg-band: oklch(0.17 0.014 258);
    --bg-card: oklch(0.16 0.013 258);
    --bg-subtle: oklch(0.19 0.015 258);
    --bg-subtle-hover: oklch(0.22 0.017 258);

    --ink-panel: oklch(0.94 0.006 258);
    --ink-panel-deep: oklch(0.9 0.008 258);

    --line: oklch(0.28 0.02 258);
    --line-soft: oklch(0.23 0.017 258);
    --line-strong: oklch(0.34 0.02 258);
    --line-panel: oklch(0.84 0.01 258);

    --text: oklch(0.96 0.005 258);
    --text-2: oklch(0.78 0.015 258);
    --text-3: oklch(0.69 0.02 258);
    --text-on-panel: oklch(0.2 0.015 258);
    --text-on-panel-2: oklch(0.4 0.02 258);
    --text-on-panel-3: oklch(0.45 0.02 258);

    --accent: oklch(0.72 0.14 258);
    --accent-hover: oklch(0.78 0.13 258);
    --accent-border: oklch(0.76 0.13 258);
    --accent-soft: oklch(0.24 0.045 258);
    --accent-soft-text: oklch(0.85 0.1 258);
    --accent-text-on: oklch(0.14 0.02 258);
    --text-on-risk: oklch(0.99 0.005 258);

    --risk-low: oklch(0.66 0.13 162);
    --risk-low-text: oklch(0.82 0.11 162);
    --risk-mid: oklch(0.7 0.13 88);
    --risk-mid-text: oklch(0.85 0.12 90);
    --risk-high: oklch(0.66 0.16 45);
    --risk-high-text: oklch(0.82 0.12 48);
    --risk-crit: oklch(0.58 0.19 22);
    --risk-crit-text: oklch(0.86 0.09 20);

    --voile-faible: oklch(0.8 0 0 / 0.06);
    --voile-moyen: oklch(0.8 0 0 / 0.09);
    --voile-fort: oklch(0.8 0 0 / 0.14);
    --ombre-carte: 0 4px 24px oklch(0 0 0 / 0.5);
    --ombre-relief: 0 1px 2px oklch(0 0 0 / 0.4);
    --focus-ring: 0 0 0 3px oklch(0.72 0.14 258 / 0.55);
    --bg-entete: oklch(0.13 0.012 258 / 0.92);
    --ink-panel-hover: oklch(0.86 0.008 258);
    --risk-low-wash: oklch(0.66 0.13 162 / 0.18);
    --risk-crit-wash: oklch(0.58 0.19 22 / 0.18);
    --risk-mid-wash: oklch(0.7 0.13 88 / 0.18);
  }
}

/* Le lecteur a explicitement choisi le sombre : ça l'emporte sur un système
   clair. Les deux blocs sont identiques — c'est la contrepartie des trois
   états, et la seule façon que la bascule marche dans les deux sens. */
:root[data-theme='dark'] {
  --bg-page: oklch(0.13 0.012 258);
  --bg-band: oklch(0.17 0.014 258);
  --bg-card: oklch(0.16 0.013 258);
  --bg-subtle: oklch(0.19 0.015 258);
  --bg-subtle-hover: oklch(0.22 0.017 258);

  --ink-panel: oklch(0.94 0.006 258);
  --ink-panel-deep: oklch(0.9 0.008 258);

  --line: oklch(0.28 0.02 258);
  --line-soft: oklch(0.23 0.017 258);
  --line-strong: oklch(0.34 0.02 258);
  --line-panel: oklch(0.84 0.01 258);

  --text: oklch(0.96 0.005 258);
  --text-2: oklch(0.78 0.015 258);
  --text-3: oklch(0.69 0.02 258);
  --text-on-panel: oklch(0.2 0.015 258);
  --text-on-panel-2: oklch(0.4 0.02 258);
  --text-on-panel-3: oklch(0.45 0.02 258);

  --accent: oklch(0.72 0.14 258);
  --accent-hover: oklch(0.78 0.13 258);
  --accent-border: oklch(0.76 0.13 258);
  --accent-soft: oklch(0.24 0.045 258);
  --accent-soft-text: oklch(0.85 0.1 258);
  --accent-text-on: oklch(0.14 0.02 258);
  --text-on-risk: oklch(0.99 0.005 258);

  --risk-low: oklch(0.66 0.13 162);
  --risk-low-text: oklch(0.82 0.11 162);
  --risk-mid: oklch(0.7 0.13 88);
  --risk-mid-text: oklch(0.85 0.12 90);
  --risk-high: oklch(0.66 0.16 45);
  --risk-high-text: oklch(0.82 0.12 48);
  --risk-crit: oklch(0.58 0.19 22);
  --risk-crit-text: oklch(0.86 0.09 20);

  --voile-faible: oklch(0.8 0 0 / 0.06);
  --voile-moyen: oklch(0.8 0 0 / 0.09);
  --voile-fort: oklch(0.8 0 0 / 0.14);
  --ombre-carte: 0 4px 24px oklch(0 0 0 / 0.5);
  --ombre-relief: 0 1px 2px oklch(0 0 0 / 0.4);
  --focus-ring: 0 0 0 3px oklch(0.72 0.14 258 / 0.55);
  --bg-entete: oklch(0.13 0.012 258 / 0.92);
  --ink-panel-hover: oklch(0.86 0.008 258);
  --risk-low-wash: oklch(0.66 0.13 162 / 0.18);
  --risk-crit-wash: oklch(0.58 0.19 22 / 0.18);
  --risk-mid-wash: oklch(0.7 0.13 88 / 0.18);
}

/* Le fond de la page est peint explicitement : sans ça, un corps transparent
   emprunte le fond du navigateur et le thème se casse en deux. */
html { background: var(--bg-page); color-scheme: light dark; }
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

/* L'anneau de focus ne se supprime jamais : c'est le seul repère d'une
   navigation au clavier. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}