/* LE THÈME DE /admin, TIRÉ DU LOGO (#166.2) — la palette et la typographie, en variables nommées PAR RÔLE, en clair
   et en sombre, le volet de gauche au BLEU du logo.
   ⭐ (#166.3) TOUTE L'ADMIN LE CHARGE : le mandataire le sert à `/charte-application.css` — la feuille du projet, que
      chaque page de /admin charge en dernier —, SUIVI de `application.css` (l'habillage de ce que les jetons
      n'atteignent pas) : `charte/LISEZ-MOI.md`, « Comment il est branché ». L'écran de connexion (#213.2 : celui de la
      brique identites, le seul) le reçoit par la même feuille.
   ⭐ QUATRE PARTIES, dans cet ordre :
        ① LES BASES (`--charte-*`) — les SEULES couleurs écrites en toutes lettres : celles RELEVÉES sur le logo
          (`charte/logo/`), et deux teintes tournées à partir d'elles. C'est CE BLOC, et lui seul, qu'un autre projet
          remplace : il deviendra un réglage par projet au catalogue.
        ② LES RÔLES EN CLAIR (`--theme-*`), ③ LES RÔLES EN SOMBRE : chaque rôle est un MÉLANGE des bases
          (`color-mix(in srgb, …)`) — aucune couleur n'y est écrite en toutes lettres.
        ④ LE BRANCHEMENT : les jetons que les pages de /admin lisent déjà (`--admin-*` de la brique identites,
          `modules/identites/front/jetons.css` ; ceux de la charte commune, `/static/charte.css`) reçoivent les rôles ;
          et DANS le volet, ces mêmes jetons prennent les rôles du volet — ses règles ne sont pas réécrites.
   ⭐ Le sombre suit le sélecteur de la charte commune : `html[data-mode="sombre"]`, posé avant le premier rendu par
      `/static/apparence.js` d'après le choix de la page « Apparence » (clair · sombre · système).
   ⭐ Le réglage d'un projet l'emporte toujours : la page « Personnalisation » écrit sous `:root:root`, ce fichier sous
      `:root` (clair) et `html[data-mode="sombre"]`.
   ⛔ Les trois formes que l'essai sait lire, et rien d'autre : `#rrggbb` (dans ① seulement), `var(--…)`,
      `color-mix(in srgb, a p%, b)`. Une autre forme dans ①, ② ou ③ fait rougir l'essai (`tests/test_theme.py`).
   ⛔ Chaque couple texte / fond tient 4,5:1 (WCAG AA) en clair ET en sombre : la liste des couples et le calcul sont
      dans `charte/palette.py` ; un rôle de plus s'y inscrit (`ROLES`, et `COUPLES` s'il porte ou reçoit du texte). */

/* ── ① LES BASES : ce que le logo porte ─────────────────────────────────────────────────────────────────────────── */
:root {
  --charte-marque: #1e2c52;         /* kaordia-lockup-horizontal.svg — le mot « Kaordia » et les traits du K : le bleu marine */
  --charte-eclat: #39a935;          /* kaordia-lockup-horizontal.svg — le noyau du K : le vert */
  --charte-neutre: #5a768c;         /* kaordia-lockup-horizontal.svg — la signature, sur fond clair : le gris-bleu */
  --charte-neutre-clair: #aebfce;   /* kaordia-lockup-horizontal-white.svg — la signature, sur fond foncé */
  --charte-blanc: #ffffff;          /* kaordia-lockup-horizontal-white.svg — le mot « Kaordia », sur fond foncé */
  --charte-noir: #000000;           /* le seul pôle qui ne vient pas du logo : le noir pur, pour foncer */
  /* Le logo ne porte ni rouge ni ambre : ces deux teintes sont l'ÉCLAT, tourné sur le cercle des teintes (même
     saturation, même clarté) — l'essai refait le calcul et tient l'égalité. */
  --charte-teinte-danger: #a93535;  /* l'éclat à 0° */
  --charte-teinte-alerte: #a97e35;  /* l'éclat à 38° */

  /* La typographie : le logo écrit « Kaordia » sans embarquer de police ; celle du projet Kaordia est Inter (ses
     `variables.css`), en gras et serrée (-1,6 pour un corps de 66 dans le logo : -0,024 em). Inter (OFL) est déjà
     servie par le projet : `/public/polices/inter.woff2`, que la charte commune déclare. ⛔ Jamais un CDN. */
  --charte-police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --charte-police-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --theme-police: var(--charte-police);
  --theme-police-titre: var(--charte-police);
  --theme-police-mono: var(--charte-police-mono);
  --theme-graisse-titre: 700;
  --theme-interlettrage-titre: -.024em;
  --theme-interlettrage-signature: .23em;   /* la signature du logo : 3,4 pour un corps de 15, en capitales */
}

/* ── ①bis LA FORME (#1076.2, socle de l'harmonie de l'espace) : espacements, rayons, hauteur d'un contrôle, ombres —
   UNE définition, que les composants communs de `application.css` (⑯) lisent seuls. Les valeurs sont prises sur ce que
   Guillaume aime déjà : les cartes et la page « Mon index » (le rayon de carte, 10 px, est le `--radius-lg` de la charte
   commune qu'elles lisent ; leurs espaces vont de 4 en 4 px). Ce ne sont pas des couleurs : l'ombre mêle une base à la
   transparence, le sombre l'appuie (③bis). */
:root {
  --theme-espace-1: 4px;
  --theme-espace-2: 8px;
  --theme-espace-3: 12px;
  --theme-espace-4: 16px;
  --theme-espace-5: 24px;
  --theme-espace-6: 32px;
  --theme-rayon-petit: 6px;          /* une pastille du sélecteur segmenté */
  --theme-rayon: 8px;                /* un bouton, un champ, un sélecteur, le cadre du sélecteur segmenté */
  --theme-rayon-carte: 10px;         /* une barre d'outils, un encadré de section, un état vide : celui des cartes */
  --theme-hauteur-controle: 40px;    /* un bouton, un champ, un sélecteur : la même ligne — (#1244.6) celle de .kd-btn */
  --theme-hauteur-petite: 32px;      /* (#1244.6) le petit bouton : celle de .kd-btn-sm. Deux hauteurs, pas une de plus */
  --theme-ombre: 0 1px 2px color-mix(in srgb, var(--charte-marque) 6%, transparent);
  --theme-ombre-haute: 0 1px 2px color-mix(in srgb, var(--charte-marque) 5%, transparent),
    0 4px 12px color-mix(in srgb, var(--charte-marque) 8%, transparent);
}
html[data-mode="sombre"] {
  --theme-ombre: 0 1px 2px color-mix(in srgb, var(--charte-noir) 30%, transparent);
  --theme-ombre-haute: 0 1px 2px color-mix(in srgb, var(--charte-noir) 30%, transparent),
    0 4px 12px color-mix(in srgb, var(--charte-noir) 25%, transparent);
}

/* ── ② LES RÔLES, EN CLAIR ──────────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* la page */
  --theme-fond: color-mix(in srgb, var(--charte-marque) 3%, var(--charte-blanc));
  --theme-surface: var(--charte-blanc);
  --theme-surface-survol: color-mix(in srgb, var(--charte-marque) 6%, var(--charte-blanc));
  --theme-texte: color-mix(in srgb, var(--charte-marque) 60%, var(--charte-noir));
  --theme-texte-second: color-mix(in srgb, var(--charte-marque) 55%, var(--charte-neutre));
  --theme-texte-discret: color-mix(in srgb, var(--charte-neutre) 80%, var(--charte-marque));
  --theme-titre: var(--charte-marque);
  --theme-lien: var(--charte-marque);
  --theme-bordure: color-mix(in srgb, var(--charte-neutre-clair) 45%, var(--charte-blanc));
  --theme-bordure-forte: var(--charte-neutre-clair);
  /* le volet de gauche : le bleu du logo */
  --theme-volet: var(--charte-marque);
  --theme-volet-survol: color-mix(in srgb, var(--charte-marque) 90%, var(--charte-blanc));
  --theme-volet-actif: color-mix(in srgb, var(--charte-marque) 80%, var(--charte-blanc));
  --theme-volet-texte: color-mix(in srgb, var(--charte-blanc) 88%, var(--charte-neutre-clair));
  --theme-volet-texte-discret: var(--charte-neutre-clair);
  --theme-volet-bordure: color-mix(in srgb, var(--charte-marque) 82%, var(--charte-blanc));
  /* le geste principal (boutons) : le bleu, texte blanc — (#820.2) LE MÊME dans les deux modes : le bleu du logo
     éclairci (blanc dessus 6,2:1, et il se détache encore du fond sombre à 3:1) ; le survol, plus foncé (10:1) */
  --theme-primaire: color-mix(in srgb, var(--charte-marque) 75%, var(--charte-blanc));
  --theme-primaire-survol: color-mix(in srgb, var(--charte-marque) 90%, var(--charte-blanc));
  --theme-sur-primaire: var(--charte-blanc);
  --theme-primaire-doux: color-mix(in srgb, var(--charte-marque) 8%, var(--charte-blanc));
  --theme-primaire-bordure: color-mix(in srgb, var(--charte-marque) 40%, var(--charte-blanc));
  /* l'accent : le vert du noyau — ⛔ jamais de texte blanc dessus (3,04:1) : `sur-accent` */
  --theme-accent: var(--charte-eclat);
  --theme-accent-survol: color-mix(in srgb, var(--charte-eclat) 88%, var(--charte-blanc));
  --theme-sur-accent: color-mix(in srgb, var(--charte-marque) 50%, var(--charte-noir));
  --theme-accent-texte: color-mix(in srgb, var(--charte-eclat) 62%, var(--charte-noir));
  --theme-accent-doux: color-mix(in srgb, var(--charte-eclat) 12%, var(--charte-blanc));
  --theme-accent-bordure: color-mix(in srgb, var(--charte-eclat) 45%, var(--charte-blanc));
  /* les états : le texte (ou la pastille) et son fond doux */
  --theme-succes: color-mix(in srgb, var(--charte-eclat) 62%, var(--charte-noir));
  --theme-succes-doux: color-mix(in srgb, var(--charte-eclat) 12%, var(--charte-blanc));
  --theme-alerte: color-mix(in srgb, var(--charte-teinte-alerte) 70%, var(--charte-noir));
  --theme-alerte-doux: color-mix(in srgb, var(--charte-teinte-alerte) 12%, var(--charte-blanc));
  --theme-danger: color-mix(in srgb, var(--charte-teinte-danger) 90%, var(--charte-noir));
  --theme-danger-doux: color-mix(in srgb, var(--charte-teinte-danger) 10%, var(--charte-blanc));
  --theme-info: color-mix(in srgb, var(--charte-neutre) 75%, var(--charte-marque));
  --theme-info-doux: color-mix(in srgb, var(--charte-neutre) 12%, var(--charte-blanc));
  /* le geste qui détruit (bouton plein) */
  --theme-danger-plein: var(--charte-teinte-danger);
  --theme-danger-plein-survol: color-mix(in srgb, var(--charte-teinte-danger) 85%, var(--charte-noir));
  --theme-sur-danger: var(--charte-blanc);
  /* l'anneau de l'élément qui a la main (pas un texte : hors des couples) — (#820.2) plus le vert : le vert ne dit
     que « ouvert / actif » */
  --theme-focus: var(--charte-marque);
  /* (#166.4) le logo dessiné dans une page (la connexion) : ses traits et son mot, sa signature — le noyau est l'accent */
  --theme-logo-trait: var(--charte-marque);
  --theme-logo-signature: var(--charte-neutre);
  /* (#604, n° 79) LA SÉRIE : dix couleurs distinctes pour des catégories (les sortes de points du graphe de « Mon index »),
     tirées des seules bases du logo et de leurs deux teintes */
  --theme-serie-1: var(--charte-eclat);
  --theme-serie-2: var(--charte-marque);
  --theme-serie-3: color-mix(in srgb, var(--charte-teinte-alerte) 85%, var(--charte-noir));
  --theme-serie-4: color-mix(in srgb, var(--charte-teinte-danger) 50%, var(--charte-marque));
  --theme-serie-5: var(--charte-teinte-danger);
  --theme-serie-6: color-mix(in srgb, var(--charte-eclat) 50%, var(--charte-marque));
  --theme-serie-7: color-mix(in srgb, var(--charte-teinte-danger) 50%, var(--charte-teinte-alerte));
  --theme-serie-8: color-mix(in srgb, var(--charte-eclat) 50%, var(--charte-teinte-alerte));
  --theme-serie-9: var(--charte-neutre);
  --theme-serie-10: color-mix(in srgb, var(--charte-teinte-alerte) 45%, var(--charte-neutre));
}

/* ⭐ (#1193) LE FOND SOMBRE COMMUN : défini UNE fois, lu par l'écran de connexion et d'inscription (le rôle `fond` en sombre)
   ET par les fonds sombres du site public (haut de page, blocs sombres, pied) : jamais recopié. */
:root { --fond-sombre-commun: color-mix(in srgb, var(--charte-marque) 35%, var(--charte-noir)); }

/* ── ③ LES RÔLES, EN SOMBRE : les mêmes, d'autres mélanges — le volet reste le bleu du logo ──────────────────────── */
html[data-mode="sombre"] {
  --theme-fond: var(--fond-sombre-commun);
  --theme-surface: color-mix(in srgb, var(--charte-marque) 50%, var(--charte-noir));
  --theme-surface-survol: color-mix(in srgb, var(--charte-marque) 65%, var(--charte-noir));
  --theme-texte: color-mix(in srgb, var(--charte-blanc) 85%, var(--charte-neutre-clair));
  --theme-texte-second: var(--charte-neutre-clair);
  --theme-texte-discret: color-mix(in srgb, var(--charte-neutre-clair) 90%, var(--charte-neutre));   /* (#820.2) éclairci */
  --theme-titre: color-mix(in srgb, var(--charte-blanc) 70%, var(--charte-neutre-clair));
  --theme-lien: var(--charte-neutre-clair);
  --theme-bordure: color-mix(in srgb, var(--charte-marque) 80%, var(--charte-neutre-clair));
  --theme-bordure-forte: color-mix(in srgb, var(--charte-marque) 55%, var(--charte-neutre-clair));
  --theme-volet: var(--charte-marque);
  --theme-volet-survol: color-mix(in srgb, var(--charte-marque) 90%, var(--charte-blanc));
  --theme-volet-actif: color-mix(in srgb, var(--charte-marque) 80%, var(--charte-blanc));
  --theme-volet-texte: color-mix(in srgb, var(--charte-blanc) 88%, var(--charte-neutre-clair));
  --theme-volet-texte-discret: var(--charte-neutre-clair);
  --theme-volet-bordure: color-mix(in srgb, var(--charte-marque) 82%, var(--charte-blanc));
  /* (#820.2, audit du 22/10) le bouton principal est LE MÊME qu'en clair : le vert (#600) ne dit plus que « ouvert /
     actif ». Blanc dessus 6,2:1, il se détache du fond sombre à 3:1 (tests/test_theme.py tient les deux) */
  --theme-primaire: color-mix(in srgb, var(--charte-marque) 75%, var(--charte-blanc));
  --theme-primaire-survol: color-mix(in srgb, var(--charte-marque) 90%, var(--charte-blanc));
  --theme-sur-primaire: var(--charte-blanc);
  --theme-primaire-doux: color-mix(in srgb, var(--charte-neutre-clair) 14%, var(--theme-surface));
  --theme-primaire-bordure: color-mix(in srgb, var(--charte-neutre-clair) 45%, var(--theme-surface));
  --theme-accent: var(--charte-eclat);
  --theme-accent-survol: color-mix(in srgb, var(--charte-eclat) 88%, var(--charte-blanc));
  --theme-sur-accent: color-mix(in srgb, var(--charte-marque) 50%, var(--charte-noir));
  --theme-accent-texte: color-mix(in srgb, var(--charte-eclat) 65%, var(--charte-blanc));
  --theme-accent-doux: color-mix(in srgb, var(--charte-eclat) 16%, var(--theme-surface));
  --theme-accent-bordure: color-mix(in srgb, var(--charte-eclat) 50%, var(--theme-surface));
  --theme-succes: color-mix(in srgb, var(--charte-eclat) 65%, var(--charte-blanc));
  --theme-succes-doux: color-mix(in srgb, var(--charte-eclat) 16%, var(--theme-surface));
  --theme-alerte: color-mix(in srgb, var(--charte-teinte-alerte) 55%, var(--charte-blanc));
  --theme-alerte-doux: color-mix(in srgb, var(--charte-teinte-alerte) 16%, var(--theme-surface));
  --theme-danger: color-mix(in srgb, var(--charte-teinte-danger) 45%, var(--charte-blanc));
  --theme-danger-doux: color-mix(in srgb, var(--charte-teinte-danger) 16%, var(--theme-surface));
  --theme-info: color-mix(in srgb, var(--charte-neutre-clair) 85%, var(--charte-neutre));
  --theme-info-doux: color-mix(in srgb, var(--charte-neutre) 16%, var(--theme-surface));
  --theme-danger-plein: var(--charte-teinte-danger);
  --theme-danger-plein-survol: color-mix(in srgb, var(--charte-teinte-danger) 85%, var(--charte-noir));
  --theme-sur-danger: var(--charte-blanc);
  --theme-focus: var(--charte-neutre-clair);
  /* (#166.4) le logo sur fond foncé : la version blanche du fichier */
  --theme-logo-trait: var(--charte-blanc);
  --theme-logo-signature: var(--charte-neutre-clair);
  /* (#604) la série, éclaircie sur fond foncé */
  --theme-serie-1: var(--charte-eclat);
  --theme-serie-2: color-mix(in srgb, var(--charte-marque) 40%, var(--charte-blanc));
  --theme-serie-3: color-mix(in srgb, var(--charte-teinte-alerte) 60%, var(--charte-blanc));
  --theme-serie-4: color-mix(in srgb, var(--charte-teinte-danger) 45%, var(--charte-neutre-clair));
  --theme-serie-5: color-mix(in srgb, var(--charte-teinte-danger) 55%, var(--charte-blanc));
  --theme-serie-6: color-mix(in srgb, var(--charte-eclat) 45%, var(--charte-neutre-clair));
  --theme-serie-7: color-mix(in srgb, var(--charte-teinte-danger) 40%, var(--charte-teinte-alerte) 60%);
  --theme-serie-8: color-mix(in srgb, var(--charte-eclat) 50%, var(--charte-teinte-alerte));
  --theme-serie-9: var(--charte-neutre-clair);
  --theme-serie-10: color-mix(in srgb, var(--charte-teinte-alerte) 30%, var(--charte-blanc));
}

/* ── ④ LE BRANCHEMENT : les jetons que les pages lisent déjà reçoivent les rôles ─────────────────────────────────
   Écrit UNE fois : chaque jeton lit un rôle, qui change seul avec le thème.
   ⭐ Le bouton de /admin (`--admin-couleur-accent`, vert à texte blanc aujourd'hui : 3,04:1) prend le rôle PRIMAIRE,
      le bleu ; le vert reste l'accent (pastilles, états, anneau). */
:root, html[data-mode="sombre"] {
  /* les jetons de /admin — modules/identites/front/jetons.css */
  --admin-police: var(--theme-police);
  --admin-police-mono: var(--theme-police-mono);
  --admin-couleur-fond: var(--theme-fond);
  --admin-couleur-surface: var(--theme-surface);
  --admin-couleur-survol: var(--theme-surface-survol);
  --admin-couleur-menu: var(--theme-volet);
  --admin-couleur-menu-survol: var(--theme-volet-survol);
  --admin-couleur-texte: var(--theme-texte);
  --admin-couleur-texte-second: var(--theme-texte-second);
  --admin-couleur-texte-discret: var(--theme-texte-discret);
  --admin-couleur-titre: var(--theme-titre);
  --admin-couleur-bord: var(--theme-bordure);
  --admin-couleur-bord-fort: var(--theme-bordure-forte);
  --admin-couleur-accent: var(--theme-primaire);
  --admin-couleur-accent-survol: var(--theme-primaire-survol);
  --admin-couleur-accent-texte: var(--theme-sur-primaire);
  --admin-couleur-accent-doux: var(--theme-primaire-doux);
  --admin-couleur-accent-bord: var(--theme-primaire-bordure);
  --admin-couleur-marque: var(--theme-volet);
  --admin-couleur-sur-marque: var(--theme-volet-texte);
  --admin-couleur-succes: var(--theme-succes);
  --admin-couleur-alerte: var(--theme-alerte);
  --admin-couleur-erreur: var(--theme-danger);
  /* les jetons de la charte commune — /static/charte.css — pour ce qui les lit sans passer par ceux de /admin */
  --font-body: var(--theme-police);
  --font-ui: var(--theme-police);
  --font-mono: var(--theme-police-mono);
  --bg-primary: var(--theme-fond);
  --bg-secondary: var(--theme-surface);
  --bg-surface: var(--theme-surface-survol);
  --bg-hover: var(--theme-surface-survol);
  --bg-volet: var(--theme-volet);
  --bg-hover-volet: var(--theme-volet-survol);
  --text-primary: var(--theme-texte);
  --text-secondary: var(--theme-texte-second);
  --text-muted: var(--theme-texte-discret);
  --border-default: var(--theme-bordure-forte);
  --border-light: var(--theme-bordure);
  --titre: var(--theme-titre);
  --fond-marque: var(--theme-volet);
  --color-success: var(--theme-succes);
  --color-warning: var(--theme-alerte);
  --color-error: var(--theme-danger);
  --color-info: var(--theme-info);
  --saisie-fond: var(--theme-surface);
  --saisie-bordure: var(--theme-bordure-forte);
  --saisie-bordure-focus: var(--theme-primaire-bordure);
}

/* DANS LE VOLET, les mêmes jetons prennent les rôles du volet : ses règles (`.volet-*` de la brique, leurs défauts dans
   `modules/identites/front/admin.css`) lisent `--admin-couleur-texte`, `-texte-second`, `-titre`, `-bord`… et ne sont
   donc pas réécrites — un texte foncé sur le bleu serait illisible. */
.volet {
  --admin-couleur-texte: var(--theme-volet-texte);
  --admin-couleur-texte-second: var(--theme-volet-texte);
  --admin-couleur-texte-discret: var(--theme-volet-texte-discret);
  --admin-couleur-titre: var(--theme-volet-texte);
  --admin-couleur-bord: var(--theme-volet-bordure);
  --admin-couleur-bord-fort: var(--theme-volet-texte-discret);
  --admin-couleur-survol: var(--theme-volet-survol);
  --theme-focus: var(--theme-volet-texte-discret);    /* (#820.2) l'anneau, clair sur le bleu du volet */
  --admin-couleur-accent-bord: var(--theme-focus);
  --admin-couleur-succes: var(--theme-accent);
  --text-primary: var(--theme-volet-texte);
  --text-secondary: var(--theme-volet-texte);
  --text-muted: var(--theme-volet-texte-discret);
  --titre: var(--theme-volet-texte);
  --border-light: var(--theme-volet-bordure);
  color: var(--theme-volet-texte);
}
.volet-entree.actif { background: var(--theme-volet-actif); }