/* 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 */
}

/* ── ② 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 */
  --theme-primaire: var(--charte-marque);
  --theme-primaire-survol: color-mix(in srgb, var(--charte-marque) 85%, var(--charte-noir));
  --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) */
  --theme-focus: var(--charte-eclat);
  /* (#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));
}

/* ── ③ 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: color-mix(in srgb, var(--charte-marque) 35%, var(--charte-noir));
  --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) 75%, var(--charte-neutre));
  --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));
  /* (#600, n° 119 de l'audit du 19/10) en sombre, le bouton principal est VIF : le vert du noyau, éclairci, sous un texte
     marine foncé, à 7,46:1 (le survol, plus clair, 8,88:1) — le gris-bleu à texte blanc de #478.2 (4,5:1) avait l'air
     désactivé. tests/test_theme.py tient les 7:1 */
  --theme-primaire: color-mix(in srgb, var(--charte-eclat) 80%, var(--charte-blanc));
  --theme-primaire-survol: color-mix(in srgb, var(--charte-eclat) 65%, var(--charte-blanc));
  --theme-sur-primaire: color-mix(in srgb, var(--charte-marque) 50%, var(--charte-noir));
  --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-eclat);
  /* (#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);
  --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); }
/* L'HABILLAGE DE /admin (#166.3) — ce que la feuille du projet ajoute AU THÈME (`theme.css`, servi juste avant, dans la
   même réponse : `/charte-application.css` = theme.css PUIS ce fichier, assemblés à la construction de l'image du
   mandataire — mandataire/Dockerfile). Le thème donne les couleurs aux jetons que les pages lisent ; ce fichier
   habille ce que ces jetons n'atteignent pas dans les briques scellées (identites, coffre-projet, besoins, modale),
   SANS les modifier : il est chargé en dernier par chacune de leurs pages.
   ⛔ AUCUNE COULEUR ICI : les rôles `--theme-*` et les bases `--charte-*` du thème, rien d'autre
      (tests/test_aucune_couleur_en_dur.py). Ce fichier, lui, a le droit de nommer une image (`url(…)`) : le thème non.
   ⭐ (#213.2) L'ÉCRAN DE CONNEXION (`/admin/connexion`) est celui de la brique identites, le seul : il charge cette
      feuille comme les autres pages de la porte (③). La page de la vitrine (#166.4) et son adresse de thème sont retirées.
   ⭐ QUATRE PARTIES : ① l'accent de la charte commune ; ② le logo dans le volet ; ③ les pages de la porte restées à la
      forme de la brique (inscription, première connexion, l'accord d'un client) ; ④ la zone de texte, qu'aucune
      feuille de /admin ne dessine. */

/* ── ① L'ACCENT DE LA CHARTE COMMUNE EST LE GESTE PRINCIPAL ─────────────────────────────────────────────────────────
   `/static/charte.css` (brique identites) nomme « accent » la couleur des boutons pleins, de l'étape remplie d'une
   fenêtre, du bord d'un champ qui a la main — avec un texte BLANC dessus. Sur le vert du logo, ce blanc ne tient que
   3,04:1 (charte/LISEZ-MOI.md). Ces jetons prennent donc le rôle PRIMAIRE (le bleu ; le gris-bleu clair en sombre) et
   SON texte, comme `--admin-couleur-accent` dans le thème ; le vert reste l'accent du thème (`--theme-accent` : le
   noyau du logo, l'anneau de l'élément qui a la main, les états). */
:root, html[data-mode="sombre"] {
  --accent: var(--theme-primaire);
  --accent-hover: var(--theme-primaire-survol);
  --accent-active: var(--theme-primaire-survol);
  --accent-soft: var(--theme-primaire-doux);
  --accent-border: var(--theme-primaire-bordure);
  --accent-text: var(--theme-sur-primaire);
}
/* La personne a choisi SA couleur (page « Apparence ») : `/static/apparence.js` la pose en ligne sur <html>, elle
   l'emporte sur `--accent` ci-dessus — et son texte redevient celui de la charte commune, le blanc. */
html[style*="--accent"] { --accent-text: var(--charte-blanc); }

/* ── ② LE LOGO DANS LE VOLET : le symbole du logo, version blanche (le volet est bleu dans les deux thèmes), devant le
   nom du projet. Il s'efface quand le projet a posé SON logo (page « Personnalisation » : l'image n'est plus cachée). */
.volet-logo[hidden] + .volet-nom::before { content: ""; flex: none; width: 22px; height: 22px;
  background: url("/vitrine/kaordia-symbol-white.svg") center / contain no-repeat; }
/* le nom passe sur deux lignes s'il le faut (« Connecteur Kaordia » ne tient pas sur une à côté du symbole : mesuré en
   service le 12/10, il était coupé) — l'en-tête du volet a la hauteur pour deux lignes */
.volet-nom { display: flex; align-items: center; gap: 8px; white-space: normal; line-height: 1.15;
  font-family: var(--theme-police-titre); font-weight: var(--theme-graisse-titre);
  letter-spacing: var(--theme-interlettrage-titre); }

/* ── ③ LES PAGES DE LA PORTE (brique identites, `porte_seule/pages/` : L'ÉCRAN DE CONNEXION — le seul, #213.2 —,
   l'inscription, la première connexion, l'accord d'un client) — la carte de la brique, au thème ; en tête, le logo Kaordia : son symbole (le fichier), son mot et sa
   signature écrits dans la police de la page (une image ne lirait pas Inter), aux proportions de
   charte/logo/kaordia-lockup-horizontal.svg (symbole 120, mot en corps 66, signature en corps 15 : ici × 0,4). */
body.admin-connexion { background: var(--theme-fond); color: var(--theme-texte); font-family: var(--theme-police); }
.admin-connexion-carte { position: relative; background: var(--theme-surface); border-color: var(--theme-bordure); }
.admin-connexion-carte::before { content: "Kaordia"; order: -2; display: block; box-sizing: border-box; height: 48px;
  padding: 7px 0 0 61px; font: var(--theme-graisse-titre) 26.4px/1 var(--theme-police-titre);
  letter-spacing: var(--theme-interlettrage-titre); color: var(--theme-logo-trait);
  background: url("/vitrine/kaordia-symbol.svg") left center / 48px 48px no-repeat; }
html[data-mode="sombre"] .admin-connexion-carte::before { background-image: url("/vitrine/kaordia-symbol-white.svg"); }
/* (#598.5, n° 105) la signature dit le produit, « Connecteur » (le logo lit alors « Kaordia · CONNECTEUR »), plus
   « AGENT ORCHESTRATION », la signature du socle, qui ne disait rien au client */
.admin-connexion-carte::after { content: "CONNECTEUR"; position: absolute; top: 62px; left: 90px;
  font: 600 6px/1 var(--theme-police); letter-spacing: var(--theme-interlettrage-signature); color: var(--theme-logo-signature); }
.admin-connexion-logo { display: none; }
.admin-connexion-carte h1 { font-family: var(--theme-police-titre); font-weight: var(--theme-graisse-titre);
  letter-spacing: var(--theme-interlettrage-titre); color: var(--theme-titre); }
.admin-connexion-carte p { color: var(--theme-texte-second); }
/* ⛔ (#213.2) Les boutons des fournisseurs (`.admin-connexion-fournisseur` : Microsoft, Google) et le lien qui déplie le
   mot de passe (`[data-moyen]`) ne sont PAS des boutons de la charte : les premiers gardent le cadre de leur éditeur
   (la feuille de la brique, `/admin/connexion.css`), le second est un lien. Rien ci-dessous ne les touche. */
.admin-connexion-carte button:not([data-choix]):not([data-moyen]), .admin-connexion-carte a:not(.admin-connexion-fournisseur) { font-weight: 600; }
.admin-connexion-carte button:not([data-choix]):not([data-moyen]) { border-color: var(--theme-primaire); background: var(--theme-primaire);
  color: var(--theme-sur-primaire); }
.admin-connexion-carte button:not([data-choix]):not([data-moyen]):hover { border-color: var(--theme-primaire-survol); background: var(--theme-primaire-survol); }
.admin-connexion-carte button[data-moyen] { color: var(--theme-lien); }
.admin-connexion-carte button[data-moyen]:hover { color: var(--theme-texte); }
.admin-connexion-carte button[data-choix]:hover, .admin-connexion-carte button[data-choix]:focus-visible { border-color: var(--theme-primaire);
  background: var(--theme-primaire-doux); }
.admin-connexion-carte a:not(.admin-connexion-fournisseur) { color: var(--theme-lien); border-color: var(--theme-bordure-forte); }
.admin-connexion-carte a:not(.admin-connexion-fournisseur):hover { background: var(--theme-surface-survol); }
.admin-connexion-carte :focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.admin-connexion-carte .admin-connexion-refus { color: var(--theme-danger); }

/* ── ④ LA ZONE DE TEXTE : aucune feuille de /admin ne la dessine (la page « Garde-fous » en porte) — sans cette règle
   elle garde le gris du navigateur, illisible sur la carte sombre (vu en service le 12/10). `:where` : elle ne
   l'emporte sur AUCUNE règle d'une page, seulement sur le défaut du navigateur.
   (#606, n° 98) `font: inherit` : la police de la page, jamais la chasse fixe que le navigateur donne à une zone de texte. */
:where(textarea) { box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--theme-bordure-forte); border-radius: 6px;
  background: var(--theme-surface); color: var(--theme-texte); font: inherit; }
:where(textarea):focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 1px; }

/* ── ⑤ L'ACCUEIL DE /admin (#197.2, modules/mcp/accueil.html) : les trois gestes côte à côte, l'un sous l'autre au
   téléphone. Des prises de la page (`data-…`), aucune classe de plus : les cartes sont les `admin-carte` de /admin. */
[data-accueil-gestes] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
  margin-bottom: 20px; }
[data-accueil-gestes] > a.admin-carte { display: block; margin-bottom: 0; color: inherit; text-decoration: none; }
[data-accueil-gestes] > a.admin-carte:hover { border-color: var(--theme-primaire); background: var(--theme-primaire-doux); }
[data-accueil-gestes] > a.admin-carte:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
[data-accueil-gestes] > a.admin-carte h2 { color: var(--theme-lien); }
/* (#602, n° 15) chaque geste se lit comme un lien : une flèche après son titre */
[data-accueil-gestes] > a.admin-carte h2::after { content: " \2192"; }
[data-accueil] .admin-carte > :last-child { margin-bottom: 0; }
[data-accueil] .admin-carte > :first-child { margin-top: 0; }
[data-accueil] a.admin-bouton { display: inline-block; text-decoration: none; }
/* ── ⑥ LA CARTE DE /admin (#258.2, mandataire/menu-en-sections.js : lire son en-tête) — cinq entrées au volet, les
   onglets de la page au-dessus du cadre, le menu du compte sur les initiales. Le volet garde ses classes : ses entrées
   sont des copies de celles de la coquille ; la liste défile si elle ne tient pas (un téléphone couché). */
#admin-nav { overflow-y: auto; }
#admin-nav > a { flex-shrink: 0; }
/* les onglets : une rangée qui défile de côté au téléphone, jamais sur deux lignes ; le nom d'un groupe (« Personnes »,
   « Accès ») devant ses onglets, en petit */
.admin-onglets { flex: none; display: flex; align-items: flex-end; gap: 20px; overflow-x: auto; padding: 8px 24px 0;
  border-bottom: 1px solid var(--theme-bordure); background: var(--theme-surface); white-space: nowrap; }
.admin-onglets[hidden] { display: none; }
.admin-onglets-groupe { display: flex; align-items: flex-end; gap: 4px; }
.admin-onglets-titre { align-self: center; margin-right: 4px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--theme-texte-discret); }
.admin-onglet { display: inline-block; padding: 8px 10px; border-bottom: 2px solid var(--theme-surface); color: var(--theme-texte-second);
  text-decoration: none; font-weight: 500; }
.admin-onglet:hover { color: var(--theme-texte); background: var(--theme-surface-survol); }
.admin-onglet.actif { color: var(--theme-lien); border-bottom-color: var(--theme-primaire); font-weight: 600; }
.admin-onglet:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: -2px; }
@media (max-width: 768px) { .admin-onglets { padding: 6px 12px 0; gap: 12px; } }
/* le menu du compte : au-dessus des initiales, en bas à gauche, par-dessus la page (le volet replié est trop étroit
   pour le porter). ⛔ (#258.4) Par son IDENTIFIANT : la classe « admin-compte » est aussi le compteur des onglets de
   l'écran Utilisateurs (brique identites), où cette feuille est chargée — il flottait, une case « 3 » en bas à gauche. */
#admin-compte { position: fixed; left: 8px; bottom: 64px; z-index: 60; min-width: 220px; display: flex; flex-direction: column;
  padding: 6px; border: 1px solid var(--theme-bordure); border-radius: 8px; background: var(--theme-surface);
  box-shadow: 0 8px 24px var(--theme-bordure-forte); }
#admin-compte[hidden] { display: none; }
.admin-compte-choix { display: block; width: 100%; box-sizing: border-box; padding: 8px 12px; border: 0; border-radius: 6px;
  background: none; color: var(--theme-texte); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.admin-compte-choix:hover { background: var(--theme-surface-survol); }
.admin-compte-choix[aria-current="page"] { color: var(--theme-lien); font-weight: 600; }
.admin-compte-choix:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: -2px; }
.admin-compte-choix[data-geste="avatar"] { margin-top: 4px; border-top: 1px solid var(--theme-bordure); border-radius: 0 0 6px 6px; }
.volet-moi.actif { box-shadow: 0 0 0 2px var(--theme-primaire); }
/* ── ⑦ LE REPÈRE DE PROGRESSION ET L'ÉTAT VIDE (#258.3, mandataire/menu-en-sections.js : tables COMPTEURS et REPERES)
   — une bande sobre sous les onglets, au-dessus du cadre : le compteur d'abord (« 3 outils reliés »), puis, quand il
   n'y a rien, une phrase et le premier geste. Ni animation, ni badge : les rôles du thème seulement. */
.admin-repere { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 10px 24px;
  border-bottom: 1px solid var(--theme-bordure); background: var(--theme-surface); }
.admin-repere[hidden] { display: none; }
.admin-repere-compte { margin: 0; color: var(--theme-texte); font-weight: 600; }
.admin-repere-vide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; flex: 1 1 420px;
  padding: 10px 14px; border: 1px solid var(--theme-primaire-bordure); border-radius: 8px; background: var(--theme-primaire-doux); }
.admin-repere-vide > p { margin: 0; flex: 1 1 280px; color: var(--theme-texte); }
.admin-repere-vide > a.admin-bouton { flex: none; display: inline-block; text-decoration: none; }
@media (max-width: 768px) { .admin-repere { padding: 8px 12px; } }
/* ── ⑧ LA BANDE D'UNE LIGNE DE « CE QUE L'IA PEUT FAIRE » (#271.2, modules/mcp/carte.html) — les trois repères, l'adresse
   à donner à son IA en pastille avec « Copier », le « ? » : UNE ligne, jamais deux (vu en service le 13/10 : à 1 440 px,
   l'adresse passait à la ligne). La page de la carte prend la largeur du cadre, comme la carte sous elle ; l'adresse
   se rogne en dernier (elle se copie entière). Des prises de la page (`data-…`), aucune classe de plus. */
.admin-page-carte { max-width: none; }
[data-bande] { flex-wrap: nowrap; white-space: nowrap; min-width: 0; column-gap: 8px; }
[data-bande] > [data-repere] { flex: none; }
[data-bande] > [data-adresse-ia] { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex: 0 1 auto;
  min-width: 0; margin-left: auto; padding: 2px 2px 2px 10px; border: 1px solid var(--theme-bordure); border-radius: 999px;
  background: var(--theme-surface); }
[data-bande] > [data-adresse-ia][hidden] { display: none; }
[data-bande] > [data-adresse-ia] > .admin-reglage-nom { flex: none; font-size: 12px; }
[data-bande] > [data-adresse-ia] > [data-adresse] { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
[data-bande] > [data-adresse-ia] > button, [data-bande] > [data-aide] { flex: none; }
[data-bande] > [data-adresse-ia] > [data-copie]:empty { display: none; }
@media (max-width: 768px) { [data-bande] { flex-wrap: wrap; white-space: normal; } [data-bande] > [data-adresse-ia] { margin-left: 0; } }
/* ── ⑨ (#495.2) LA PAGE PREND TOUTE LA LARGEUR DU CADRE — la cause commune : `.admin-page` (brique identites) plafonnait
   chaque page de /admin à 1 080 px, centrée, et les pages de besoins et du coffre à 960 px ; un grand bord droit restait
   vide. La page s'étire à droite du volet, à la marge de la page ; tables, barres de filtres et cartes la suivent. Seuls les
   paragraphes de texte courant (`.admin-sous`, l'aide d'un onglet) gardent leur largeur de lecture. Mise en page seulement :
   ni couleur, ni police, ni taille changée. */
.admin-page, .besoins, .coffre { max-width: none; min-width: 0; }
.admin-page > p:not([class]) { max-width: 90ch; }
/* ── ⑩ (#600, socle de #598) CE QUI VAUT PARTOUT : le focus, le bouton secondaire, l'écran étroit, le menu du compte ──
   ⭐ LE FOCUS (n° 120) : l'élément qui a la main porte un anneau de 2 px, le vert du noyau du logo (`--theme-focus`),
      dans toutes les pages qui chargent cette feuille — le contour du navigateur (0,8 px) ne se voyait pas en sombre.
      `:root` le place au-dessus des règles des briques de même poids ; un champ de la modale garde son halo à lui. */
:root :focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
/* ⭐ UN SEUL BOUTON SECONDAIRE (n° 122) : celui de /admin (`.admin-bouton` sans genre) et celui de la fenêtre de la brique
      (`.modale-bouton` sans genre) ont le même dessin : bord fort, surface, texte courant. */
.admin-bouton:not(.admin-bouton-principal):not(.admin-bouton-danger),
.modale-bouton:not([data-genre]) {
  border: 1px solid var(--theme-bordure-forte); background: var(--theme-surface); color: var(--theme-texte); border-radius: 6px; }
.admin-bouton:not(.admin-bouton-principal):not(.admin-bouton-danger):hover:not(:disabled),
.modale-bouton:not([data-genre]):hover:not(:disabled) { background: var(--theme-surface-survol); }
/* ⭐ SOUS 1 000 px (n° 118) : les onglets passent à la ligne au lieu d'être coupés (le volet, lui, est replié par
      mandataire/menu-en-sections.js, qui en garde la mémoire) */
@media (max-width: 999px) {
  .admin-onglets { flex-wrap: wrap; white-space: normal; overflow-x: visible; row-gap: 2px; padding: 6px 12px 0; gap: 12px; }
  .admin-onglets-groupe { flex-wrap: wrap; }
}
/* ⭐ LE MENU DU COMPTE (fusion 9, n° 116-117) : qui je suis en tête, l'apparence en trois choix, la déconnexion en bas */
.admin-compte-qui { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--theme-bordure); }
.admin-compte-qui[hidden] { display: none; }
.admin-compte-adresse { font-size: 13px; color: var(--theme-texte-second); overflow-wrap: anywhere; }
.admin-compte-apparence { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 12px; margin-top: 4px;
  border-top: 1px solid var(--theme-bordure); }
.admin-compte-titre { flex-basis: 100%; font-size: 12px; color: var(--theme-texte-discret); }
.admin-compte-apparence > .admin-compte-choix { flex: 1 1 0; width: auto; padding: 6px 8px; text-align: center;
  border: 1px solid var(--theme-bordure); }
.admin-compte-apparence > .admin-compte-choix[aria-checked="true"] { border-color: var(--theme-primaire); color: var(--theme-lien); font-weight: 600; }
.admin-compte-choix[data-geste="sortie"] { margin-top: 4px; border-top: 1px solid var(--theme-bordure); border-radius: 0 0 6px 6px; }
.admin-compte-choix[data-geste="avatar"] { border-radius: 6px; }
/* ⭐ (#601, n° 44) EN SOMBRE, LES PASTILLES D'INITIALES SE VOIENT : le couple du bouton principal (7,46:1), plus le bleu du
      volet, qui se confondait avec la surface */
html[data-mode="sombre"] .admin-initiales { background: var(--theme-primaire); color: var(--theme-sur-primaire); }
/* ── ⑪ (#605, n° 58) LE LOGO OFFICIEL D'UN OUTIL (charte/logos.json, Kaordia.imageDuLogo) : devant le nom d'une carte
      d'« Outils » et d'une section de « Rôles et droits », à la hauteur du texte. Aucune couleur : l'image seule. */
img[data-logo-outil] { display: inline-block; width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.25em;
  margin-right: 0.45em; flex: none; }

/* (#618, n° 89) LA TEINTE PRÊTÉE À LA CARTE « Ce que l'IA peut faire » : la brique carte-mcp (0.11.0 ou plus) garde son ombre,
   et ses rôles prennent ces variables (CONTRAT.md de la brique, « La teinte prêtée ») ; clair ou sombre suit /admin. */
[data-carte-hote] {
  --carte-mcp-fond: var(--theme-fond); --carte-mcp-surface: var(--theme-surface); --carte-mcp-survol: var(--theme-surface-survol);
  --carte-mcp-texte: var(--theme-texte); --carte-mcp-texte-second: var(--theme-texte-second); --carte-mcp-texte-discret: var(--theme-texte-discret);
  --carte-mcp-bordure: var(--theme-bordure); --carte-mcp-bordure-forte: var(--theme-bordure-forte);
  --carte-mcp-accent: var(--theme-primaire); --carte-mcp-accent-doux: var(--theme-primaire-doux);
  --carte-mcp-action: var(--theme-succes); --carte-mcp-danger: var(--theme-danger); --carte-mcp-police: var(--theme-police);
}