/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   LE GLOBAL CSS DE L'APPLICATION — posé à la naissance du projet (everbrain #1146.1), servi à /charte-application.css
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Guillaume, 03/10 : « quand on crée un nouveau projet avec l'interface d'administration, on doit aussi
   systématiquement créer un global CSS avec absolument toutes les classes de l'interface d'administration, et aussi
   les classes de la page Login du projet, de la page d'accueil, bref le minimum de pages que l'on doit créer. »

   ⭐ UNE SEULE FEUILLE POUR TOUT LE PROJET, et c'est la sienne :
      · les pages de base de l'application (connexion, accueil) la chargent ;
      · chaque page de /admin la charge EN DERNIER (identites 0.12.0 et après, `feuille_du_projet` de classes.json) ;
      · le volet (brique `volet`, tirée en modules/application/volet) n'a aucun style : il est dessiné ICI.
   ⭐ CE QU'ELLE STYLE, et rien d'autre — trois listes FIGÉES que ce fichier ne recopie pas, il les dessine :
      · modules/identites/front/classes.json   — les classes de /admin (sauf les « crochets », nommés en fin de feuille),
                                                 et ses composants communs (kv-selecteur, modale) ;
      · modules/application/volet/classes.js   — les classes du volet ;
      · modules/application/classes.json        — les classes des pages de base de l'application.
      `scripts/eprouver-le-global-css.sh` (dans le projet) exige que CHAQUE classe de ces trois listes y ait sa règle,
      dans un vrai navigateur : en retirer une fait rougir l'essai.
   ⭐ LA PERSONNALISATION LA RÈGLE (page Personnalisation de /admin) : elle ne touche jamais ce fichier ; elle donne des
      VALEURS aux variables `--admin-*` (/public/personnalisation.css pour l'application, /admin/personnalisation.css
      pour /admin quand « l'administration suit » est cochée). Les défauts ci-dessous sont posés sous `:where(:root)` —
      la spécificité zéro : toute valeur de la Personnalisation l'emporte, et ces défauts ne valent que pour ce qu'elle
      ne dit pas. Ils valent la charte commune (/static/charte.css), comme ceux de /admin (jetons.css) : l'application
      et son administration ont le même dessin dès la naissance.
   ⛔ Aucune couleur écrite en dur hors des jetons : une couleur se règle dans la Personnalisation.
   ⭐ Le projet en fait ensuite ce qu'il veut — c'est SA charte. Une classe des trois listes ne se retire pas d'ici.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. LES JETONS — réglés par la Personnalisation ─────────────────────────────────────────────────────────────── */
:where(:root) {
  --admin-police: var(--font-body);
  --admin-police-mono: var(--font-mono);
  --admin-couleur-fond: var(--bg-primary);
  --admin-couleur-surface: var(--bg-secondary);
  --admin-couleur-survol: var(--bg-hover);
  --admin-couleur-menu: var(--bg-volet);
  --admin-couleur-menu-survol: var(--bg-hover-volet);
  --admin-couleur-texte: var(--text-primary);
  --admin-couleur-texte-second: var(--text-secondary);
  --admin-couleur-texte-discret: var(--text-muted);
  --admin-couleur-titre: var(--titre);
  --admin-couleur-bord: var(--border-light);
  --admin-couleur-bord-fort: var(--border-default);
  --admin-couleur-accent: var(--accent);
  --admin-couleur-accent-survol: var(--accent-hover);
  --admin-couleur-accent-texte: var(--accent-text);
  --admin-couleur-accent-doux: var(--accent-soft);
  --admin-couleur-accent-bord: var(--accent-border);
  --admin-couleur-marque: var(--fond-marque);
  --admin-couleur-sur-marque: #fff;
  --admin-couleur-succes: var(--color-success);
  --admin-couleur-alerte: var(--color-warning);
  --admin-couleur-erreur: var(--color-error);
  --admin-rayon: var(--radius-md);
  --admin-rayon-carte: var(--radius-lg);
  --admin-rayon-pastille: var(--radius-full);
  --admin-ombre: var(--shadow-sm);
  --admin-logo: none;
}
/* ⭐ Ce qui est propre à la charte DU PROJET (pas à la Personnalisation) : le dessin de ses boutons. C'est par ces
      valeurs que l'application et /admin se reconnaissent — et que l'essai voit qu'un bouton de /admin suit la feuille. */
:root {
  --charte-bouton-graisse: var(--font-semibold, 600);
  --charte-bouton-rayon: 8px;
  --charte-bouton-espace: 8px var(--space-4, 16px);
  --charte-barre-telephone: 52px;
}

/* ── 2. LA BASE ────────────────────────────────────────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
.app-page, .admin-coquille, body.admin-connexion {
  margin: 0; font-family: var(--admin-police); font-size: var(--text-sm); line-height: var(--leading-normal);
  color: var(--admin-couleur-texte); background: var(--admin-couleur-fond);
}
.app-page *, .app-page *::before, .app-page *::after,
body.admin-connexion *, body.admin-connexion *::before, body.admin-connexion *::after { box-sizing: border-box; }
.app-titre { margin: 0 0 var(--space-2); font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--admin-couleur-titre); }
.app-sous, .admin-sous { color: var(--admin-couleur-texte-second); margin: 0 0 var(--space-5); max-width: 760px; }
.app-note, .admin-note { color: var(--admin-couleur-texte-discret); font-size: var(--text-xs); }

/* ── 3. LES COMPOSANTS PARTAGÉS — le même dessin dans l'application et dans /admin ──────────────────────────────── */
.app-bouton, .admin-bouton, .admin-connexion-carte button {
  border: 1px solid var(--admin-couleur-bord-fort); background: var(--admin-couleur-surface); color: var(--admin-couleur-texte);
  border-radius: var(--charte-bouton-rayon); padding: var(--charte-bouton-espace); font: inherit;
  font-weight: var(--charte-bouton-graisse); cursor: pointer; white-space: nowrap;
}
.app-bouton:hover:not(:disabled), .admin-bouton:hover:not(:disabled) { background: var(--admin-couleur-survol); }
.app-bouton:disabled, .admin-bouton:disabled { opacity: .45; cursor: not-allowed; }
.app-bouton-principal, .admin-bouton-principal, .admin-connexion-carte button {
  background: var(--admin-couleur-accent); border-color: var(--admin-couleur-accent); color: var(--admin-couleur-accent-texte);
  font-weight: var(--charte-bouton-graisse); border-radius: var(--charte-bouton-rayon);
}
.app-bouton-principal:hover:not(:disabled), .admin-bouton-principal:hover:not(:disabled),
.admin-connexion-carte button:hover { background: var(--admin-couleur-accent-survol); }
.admin-bouton-petit { font-size: var(--text-xs); padding: 4px var(--space-3); }
.admin-bouton-danger { color: var(--admin-couleur-erreur); }
.app-badge, .admin-badge {
  font-size: var(--text-xs); border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon-pastille);
  padding: 1px 8px; color: var(--admin-couleur-texte-discret); white-space: nowrap;
}
.app-badge-accent, .admin-badge-accent { border-color: var(--admin-couleur-accent-bord); background: var(--admin-couleur-accent-doux); color: var(--admin-couleur-texte); }
.app-carte, .admin-carte {
  background: var(--admin-couleur-surface); border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon-carte);
  padding: var(--space-5); margin-bottom: var(--space-5); box-shadow: var(--admin-ombre);
}
.app-champ, .admin-barre label, .admin-formulaire label {
  display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--admin-couleur-texte-discret);
}
.app-saisie, .admin-barre input[type="text"], .admin-barre input[type="email"], .admin-formulaire input[type="text"],
.admin-formulaire input[type="email"], .admin-formulaire input[type="number"], .admin-connexion-carte input {
  border: 1px solid var(--admin-couleur-bord-fort); border-radius: var(--admin-rayon); padding: 7px var(--space-3);
  background: var(--admin-couleur-surface); color: var(--admin-couleur-texte); font: inherit; min-width: 0;
}
.app-saisie:focus, .admin-connexion-carte input:focus { outline: 2px solid var(--admin-couleur-accent-bord); outline-offset: 0; }
.app-refus, .admin-refus, .admin-connexion-refus { color: var(--admin-couleur-erreur); margin: var(--space-2) 0; font-size: var(--text-sm); }
.admin-fait { color: var(--admin-couleur-succes); margin: var(--space-2) 0; }

/* ── 4. LES PAGES DE BASE DE L'APPLICATION ─────────────────────────────────────────────────────────────────────── */
/* la connexion */
.app-connexion { min-height: 100vh; display: grid; place-items: center; }
.app-connexion-carte {
  width: min(380px, 92vw); display: grid; gap: var(--space-3); padding: 28px; background: var(--admin-couleur-surface);
  border: 1px solid var(--admin-couleur-bord); border-radius: var(--radius-xl); box-shadow: var(--admin-ombre);
}
.app-connexion-logo { max-width: 200px; max-height: 64px; object-fit: contain; justify-self: start; }
.app-connexion-carte .app-bouton-principal { margin-top: var(--space-2); }
.app-connexion-refus { min-height: 1.2em; }
/* l'accueil, dans le volet */
.app-accueil { max-width: 1080px; width: 100%; margin: 0 auto; padding: var(--space-6); }
.app-qui { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.app-role { font-weight: var(--font-medium); }
.app-role-administrateur { border-color: var(--admin-couleur-accent-bord); background: var(--admin-couleur-accent-doux); color: var(--admin-couleur-texte); }
.app-role-utilisateur { color: var(--admin-couleur-texte-second); }
.app-liens { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.app-lien { color: var(--admin-couleur-accent); text-decoration: none; font-weight: var(--font-medium); }
.app-lien:hover { text-decoration: underline; }

/* ── 5. LE VOLET — la brique `volet` (modules/application/volet), dessinée à la charte du projet ─────────────────── */
.volet-coquille { display: flex; height: 100vh; overflow: hidden; }
.volet-contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
:where(.volet-bouton) { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer;
                        font: inherit; color: inherit; text-decoration: none; }
:where(.volet-bouton):focus-visible { outline: 2px solid var(--admin-couleur-accent); outline-offset: 2px; }
.volet-pied form { margin: 0; display: contents; }
.volet-place { position: relative; flex-shrink: 0; height: 100%; width: 220px; z-index: 60; transition: width .15s ease; }
.volet-place.volet-place-replie { width: 60px; }
.volet {
  height: 100%; width: 220px; min-width: 220px; max-width: 220px; flex-shrink: 0; display: flex; flex-direction: column;
  overflow: hidden; background: var(--admin-couleur-menu); border-right: 1px solid var(--admin-couleur-bord); transition: width .15s ease;
}
.volet.volet-replie { width: 60px; min-width: 60px; max-width: 60px; }
.volet.volet-survol { position: absolute; top: 0; left: 0; bottom: 0; z-index: 61; box-shadow: var(--shadow-md); }
.volet-marque { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-3);
                border-bottom: 1px solid var(--admin-couleur-bord); }
.volet-replie .volet-marque { justify-content: center; padding-left: 0; padding-right: 0; }
.volet-bascule { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
                 border-radius: var(--admin-rayon); color: var(--admin-couleur-texte-discret); }
.volet-bascule:hover, .volet-bascule:focus-visible { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); }
.volet-logo { flex: none; width: auto; height: 32px; object-fit: contain; }
/* volet 0.4.0 — le logo et le nom ENSEMBLE : ils prennent la place, la croix du téléphone reste au bout de la ligne. */
.volet-identite { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.volet-nom { min-width: 0; font-weight: var(--font-semibold); color: var(--admin-couleur-titre); white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.volet-nav { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.volet-entree { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 8px var(--space-3);
                border-radius: var(--admin-rayon); text-align: left; white-space: nowrap; color: var(--admin-couleur-texte-second); }
.volet-entree:hover { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); }
.volet-entree.actif { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); font-weight: var(--font-medium); }
.volet-entree.actif .volet-entree-icone { color: var(--admin-couleur-accent); }
.volet-replie .volet-entree { justify-content: center; padding-left: 0; padding-right: 0; }
.volet-entree-icone { flex: none; width: 18px; height: 18px; }
.volet-libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.volet-entree-compte { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--admin-rayon-pastille);
                       background: var(--admin-couleur-accent); color: var(--admin-couleur-accent-texte); font-size: var(--text-xs);
                       font-weight: var(--font-semibold); line-height: 18px; text-align: center; }
.volet-entree-compte[data-replie] { position: absolute; top: 2px; right: 2px; margin: 0; }
.volet-bas { border-top: 1px solid var(--admin-couleur-bord); padding: var(--space-2) var(--space-3); display: flex;
             flex-direction: column; gap: var(--space-2); }
.volet-replie .volet-bas { padding-left: var(--space-1); padding-right: var(--space-1); align-items: center; }
.volet-etat { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--admin-couleur-texte-discret); }
.volet-pastille { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--admin-couleur-bord-fort); }
.volet-pastille-en-ligne { background: var(--admin-couleur-succes); }
.volet-pastille-hors-ligne { background: var(--admin-couleur-alerte); }
.volet-pastille-inconnue { background: var(--admin-couleur-bord-fort); }
.volet-etat-texte { white-space: nowrap; }
.volet-pied { display: flex; align-items: center; gap: var(--space-2); }
.volet-replie .volet-pied { flex-direction: column; }
.volet-moi { flex: none; display: inline-flex; padding: 2px; border-radius: 50%; }
.volet-moi:hover, .volet-moi:focus-visible { box-shadow: 0 0 0 2px var(--admin-couleur-accent); }
.volet-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; overflow: hidden; display: inline-flex;
                align-items: center; justify-content: center; background: var(--admin-couleur-marque);
                color: var(--admin-couleur-sur-marque); font-size: 11px; font-weight: var(--font-semibold); user-select: none; }
.volet-avatar-image { width: 100%; height: 100%; object-fit: cover; }
.volet-deconnexion { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2);
                     border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon); color: var(--admin-couleur-texte-discret); }
.volet-deconnexion:hover { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); }
/* volet 0.4.0 — la roue dentée des Paramètres, entre l'avatar et la déconnexion : le même bouton, et `actif` sur la page. */
.volet-parametres { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2);
                    border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon); color: var(--admin-couleur-texte-discret); }
.volet-parametres:hover { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); }
.volet-parametres.actif { border-color: var(--admin-couleur-accent); color: var(--admin-couleur-texte); }
.volet-barre, .volet-fermer, .volet-voile { display: none !important; }
.volet-barre-espace { flex: 1; }
.volet-hamburger { flex: none; }
@media (max-width: 768px) {
  .volet-coquille { height: auto; min-height: 100vh; overflow: visible; }
  .volet-contenu { overflow: visible; }
  .volet-barre { display: flex !important; align-items: center; gap: var(--space-3); position: sticky; top: 0; z-index: 50;
                 height: var(--charte-barre-telephone); padding: 0 var(--space-3); background: var(--admin-couleur-surface);
                 border-bottom: 1px solid var(--admin-couleur-bord); }
  .volet-barre .volet-logo { height: 28px; }
  .volet-hamburger, .volet-fermer { display: inline-flex; align-items: center; justify-content: center; flex: none;
                                    width: 40px; height: 40px; color: var(--admin-couleur-texte); background: var(--admin-couleur-surface);
                                    border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon); }
  .volet-fermer { display: inline-flex !important; margin-left: auto; }
  .volet-place { width: 0 !important; height: 0; position: static; }
  .volet { display: none !important; }
  .volet.volet-ouvert { display: flex !important; position: fixed !important; left: 0; top: 0; bottom: 0; z-index: 60;
                        width: min(280px, 85vw) !important; min-width: 0 !important; max-width: none !important;
                        height: auto !important; box-shadow: var(--shadow-lg); }
  .volet-voile { display: block !important; position: fixed; inset: 0; z-index: 55; background: var(--voile); }
  .volet-bascule, .volet-nom, .volet-libelle, .volet-etat-texte { display: none !important; }
  .volet-ouvert .volet-libelle, .volet-ouvert .volet-etat-texte { display: inline !important; }
  .volet-ouvert .volet-nom { display: block !important; }
  .volet-ouvert .volet-entree { min-height: 44px; }
  .volet-pied { flex-direction: row !important; }
}
@media (prefers-reduced-motion: reduce) { .volet, .volet-place { transition: none; } }

/* ── 6. /admin — la coquille, sa connexion, ses pages, ses états (modules/identites/front/classes.json) ─────────── */
/* la coquille */
.admin-coquille { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.admin-tete { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); flex: none;
              border-bottom: 1px solid var(--admin-couleur-bord); background: var(--admin-couleur-surface); }
.admin-titre { flex: 1; color: var(--admin-couleur-titre); }
.admin-titre span { color: var(--admin-couleur-texte-discret); }
.admin-qui { color: var(--admin-couleur-texte-discret); font-size: var(--text-xs); }
.admin-moi { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; border-radius: var(--admin-rayon-pastille); }
.admin-moi:focus-within { outline: 2px solid var(--admin-couleur-accent-bord); }
.admin-retour { color: var(--admin-couleur-texte-second); text-decoration: none; border: 1px solid var(--admin-couleur-bord-fort);
                border-radius: var(--charte-bouton-rayon); padding: 4px var(--space-3); }
.admin-retour:hover { background: var(--admin-couleur-survol); }
.admin-marque { display: flex; align-items: center; gap: var(--space-2); color: var(--admin-couleur-titre); font-weight: var(--font-semibold); }
.admin-logo { display: inline-block; width: 28px; height: 28px; flex: none; background: var(--admin-logo) center / contain no-repeat; }
.admin-logo-grand { width: 96px; height: 56px; }
.admin-corps { flex: 1; display: flex; min-height: 0; }
.admin-nav { width: 232px; flex: none; background: var(--admin-couleur-menu); border-right: 1px solid var(--admin-couleur-bord);
             padding: var(--space-4) var(--space-3); overflow-y: auto; }
.admin-groupe { display: grid; gap: 2px; margin-bottom: var(--space-4); }
.admin-groupe-titre { font-size: var(--text-xs); color: var(--admin-couleur-texte-discret); text-transform: uppercase;
                      letter-spacing: .04em; padding: 0 var(--space-2) var(--space-1); }
.admin-nav a { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--admin-rayon);
               color: var(--admin-couleur-texte-second); text-decoration: none; }
.admin-nav a:hover { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); }
.admin-nav a.admin-actif { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); font-weight: var(--font-medium); }
.admin-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
                 stroke-linejoin: round; flex: none; }
.admin-cadre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-cadre iframe { flex: 1; border: 0; width: 100%; background: var(--admin-couleur-fond); }
.admin-coquille > .admin-refus { margin: var(--space-6); }
/* la connexion de la porte */
body.admin-connexion { min-height: 100vh; display: grid; place-items: center; }
.admin-connexion-carte { width: min(380px, 92vw); background: var(--admin-couleur-surface); border: 1px solid var(--admin-couleur-bord);
                         border-radius: var(--radius-xl); padding: 28px; display: grid; gap: var(--space-3); box-shadow: var(--admin-ombre); }
.admin-connexion-carte h1 { margin: 0; font-size: var(--text-xl); color: var(--admin-couleur-titre); }
.admin-connexion-carte p { margin: 0; color: var(--admin-couleur-texte-discret); font-size: var(--text-sm); }
.admin-connexion-carte form { display: grid; gap: var(--space-3); }
.admin-connexion-carte label { display: grid; gap: 4px; font-size: var(--text-sm); color: var(--admin-couleur-texte-second); }
.admin-connexion-logo { max-width: 200px; max-height: 64px; object-fit: contain; justify-self: start; }
/* une page */
.admin-page { max-width: 1080px; margin: 0 auto; padding: var(--space-6); }
.admin-page h1 { font-size: var(--text-xl); color: var(--admin-couleur-titre); margin: 0 0 var(--space-2); font-weight: var(--font-semibold); }
.admin-page h2 { font-size: var(--text-base); color: var(--admin-couleur-titre); margin: var(--space-6) 0 var(--space-3); font-weight: var(--font-semibold); }
.admin-barre { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; background: var(--admin-couleur-surface);
               border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon-carte); padding: var(--space-4);
               margin: 0 0 var(--space-4); box-shadow: var(--admin-ombre); }
.admin-large { flex: 1 1 240px; }
.admin-formulaire { display: grid; gap: var(--space-3); max-width: 720px; }
.admin-formulaire .admin-large { flex: 1 1 320px; }
.admin-formulaire .admin-large input { width: 100%; }
.admin-rangee { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.admin-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon-carte);
               background: var(--admin-couleur-surface); overflow: hidden; }
.admin-ligne { display: grid; grid-template-columns: 28px minmax(0, 2fr) minmax(150px, auto) minmax(0, 2fr) auto; gap: var(--space-3);
               align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--admin-couleur-bord); }
.admin-ligne:first-child { border-top: 0; }
.admin-ligne-org { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.admin-ligne .admin-badge, .admin-ligne .admin-note { justify-self: start; white-space: nowrap; }
.admin-liste-personnes .admin-ligne { grid-template-columns: 28px minmax(170px, 2fr) minmax(150px, auto) minmax(130px, 1.2fr) minmax(0, 3fr); }
.admin-initiales { width: 28px; height: 28px; border-radius: var(--admin-rayon-pastille); background: var(--admin-couleur-marque);
                   color: var(--admin-couleur-sur-marque); display: grid; place-items: center; font-size: 11px; font-weight: var(--font-semibold); }
img.admin-avatar, .admin-avatar { object-fit: cover; padding: 0; }
.admin-nom { display: grid; min-width: 0; }
.admin-nom b { font-weight: var(--font-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-nom small, .admin-etat small { color: var(--admin-couleur-texte-discret); font-size: var(--text-xs); overflow: hidden;
                                      text-overflow: ellipsis; white-space: nowrap; }
.admin-etat { display: grid; min-width: 0; }
.admin-statut { font-size: var(--text-xs); font-weight: var(--font-medium); }
.admin-statut-actif { color: var(--admin-couleur-succes); }
.admin-statut-invite { color: var(--admin-couleur-alerte); }
.admin-statut-expire { color: var(--admin-couleur-erreur); }
.admin-statut-secours, .admin-statut-desactive { color: var(--admin-couleur-texte-discret); }
.admin-gestes { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.admin-colonne-app span { color: var(--admin-couleur-texte-discret); }
.admin-nom .admin-colonne-app { color: var(--admin-couleur-texte-second); }
.admin-droits .admin-badge { margin-left: 4px; }
/* les tables : la matrice, les droits d'une personne, le journal */
.admin-groupe-matrice { border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon-carte); background: var(--admin-couleur-surface);
                        margin-bottom: var(--space-4); box-shadow: var(--admin-ombre); }
.admin-groupe-matrice summary { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4);
                                cursor: pointer; color: var(--admin-couleur-titre); }
.admin-groupe-matrice[open] summary { border-bottom: 1px solid var(--admin-couleur-bord); }
table.admin-matrice { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: var(--text-xs); }
table.admin-matrice col.admin-col-ressource { width: 30%; }
table.admin-matrice th, table.admin-matrice td { padding: 6px var(--space-2); border-bottom: 1px solid var(--admin-couleur-bord);
                                                 text-align: left; vertical-align: middle; }
table.admin-matrice tr:last-child td { border-bottom: 0; }
table.admin-matrice th { color: var(--admin-couleur-texte-discret); font-weight: var(--font-medium); overflow: hidden;
                         text-overflow: ellipsis; white-space: nowrap; }
table.admin-matrice td.admin-ressource { display: table-cell; }
table.admin-matrice td.admin-ressource span { display: block; color: var(--admin-couleur-texte); font-size: var(--text-sm); overflow-wrap: anywhere; }
.admin-cle { display: block; font-family: var(--admin-police-mono); color: var(--admin-couleur-texte-discret); overflow-wrap: anywhere; }
table.admin-matrice kv-selecteur, table.admin-droits-personne kv-selecteur { min-width: 0; width: 100%; display: block; }
table.admin-matrice.admin-journal { table-layout: auto; }
table.admin-matrice.admin-journal td { overflow-wrap: anywhere; }
table.admin-matrice.admin-journal td:first-child { white-space: nowrap; }
table.admin-droits-personne tr.admin-a-exception td { background: var(--admin-couleur-accent-doux); }
.admin-exceptions { display: inline-block; margin-top: 2px; cursor: help; }
.admin-sans-droit { display: block; color: var(--admin-couleur-alerte); font-weight: var(--font-medium); }
/* le coffre */
.admin-secret { font-size: var(--text-xs); }
.admin-secret.admin-present { color: var(--admin-couleur-succes); }
.admin-secret.admin-absent { color: var(--admin-couleur-erreur); }
/* les onglets (Utilisateurs : les comptes du client, et Maintenance) */
.admin-onglets { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--admin-couleur-bord); margin: 0 0 var(--space-4); }
.admin-onglets [role="tab"] { border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; cursor: pointer;
                              color: var(--admin-couleur-texte-second); padding: var(--space-2) var(--space-3); margin-bottom: -1px; }
.admin-onglets [role="tab"]:hover { color: var(--admin-couleur-texte); }
.admin-onglets [role="tab"][aria-selected="true"] { color: var(--admin-couleur-titre); border-bottom-color: var(--admin-couleur-accent);
                                                    font-weight: var(--font-medium); }
.admin-compte { font-size: var(--text-xs); color: var(--admin-couleur-texte-discret); margin-left: 4px; }
.admin-note-onglet { margin: 0 0 var(--space-4); max-width: 760px; }
.admin-ligne.admin-desactive > :not(.admin-gestes) { opacity: .5; }
.admin-ligne.admin-desactive { background: var(--admin-couleur-survol); }
/* la Personnalisation */
.admin-reglage { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-4); align-items: start;
                 padding: var(--space-4) 0; border-top: 1px solid var(--admin-couleur-bord); }
.admin-carte h2 + .admin-reglage { border-top: 0; padding-top: 0; }
.admin-reglage-nom b { display: block; font-weight: var(--font-semibold); }
.admin-reglage-nom small { display: block; font-size: var(--text-xs); color: var(--admin-couleur-texte-discret); margin-top: 2px; }
.admin-reglage .admin-rangee { align-items: center; }
.admin-teintes { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.admin-teinte { width: 28px; height: 28px; border-radius: var(--admin-rayon-pastille); border: 2px solid var(--admin-couleur-fond); cursor: pointer;
                box-shadow: 0 0 0 1px var(--admin-couleur-bord-fort); display: grid; place-items: center; padding: 0;
                color: var(--admin-couleur-sur-marque); }
.admin-teinte:disabled { cursor: not-allowed; }
.admin-teinte[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--admin-couleur-texte); }
.admin-teinte svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.admin-teinte-charte { background: var(--admin-couleur-surface); color: var(--admin-couleur-texte-discret); }
.admin-teinte-libre { display: inline-flex !important; align-items: center; gap: var(--space-2); margin-left: var(--space-2); }
.admin-teinte-libre input { width: 32px; height: 28px; padding: 0; border: 1px solid var(--admin-couleur-bord-fort);
                            border-radius: var(--admin-rayon); background: none; cursor: pointer; }
.admin-polices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.admin-police { display: flex; align-items: center; gap: var(--space-2); text-align: left; padding: var(--space-2) var(--space-3); font: inherit;
                font-size: var(--text-xs); color: var(--admin-couleur-texte-second); background: var(--admin-couleur-surface);
                border: 1px solid var(--admin-couleur-bord-fort); border-radius: var(--admin-rayon); cursor: pointer; }
.admin-police:hover:not(:disabled) { background: var(--admin-couleur-survol); }
.admin-police[aria-checked="true"] { border-color: var(--admin-couleur-accent); background: var(--admin-couleur-accent-doux); color: var(--admin-couleur-texte); }
.admin-police-exemple { font-size: var(--text-xl); color: var(--admin-couleur-titre); min-width: 34px; }
.admin-perso-apercu, .admin-perso-fichier { align-items: center; }
.admin-perso-vignette { display: grid; place-items: center; width: 96px; height: 56px; border: 1px dashed var(--admin-couleur-bord-fort);
                        border-radius: var(--admin-rayon); background: var(--admin-couleur-fond); }
.admin-perso-vignette-logo { width: 96px; }
.admin-perso-vignette-favicon { width: 56px; }
.admin-perso-vignette img { max-width: 88%; max-height: 80%; object-fit: contain; }
.admin-perso-case { display: flex !important; align-items: center; gap: var(--space-2); font-size: var(--text-sm) !important;
                    color: var(--admin-couleur-texte) !important; }
.admin-perso-nom { color: var(--admin-couleur-titre); }
@media (max-width: 760px) {
  .admin-nav { width: 64px; padding: var(--space-3) var(--space-2); }
  .admin-nav span, .admin-groupe-titre { display: none; }
  .admin-ligne, .admin-liste-personnes .admin-ligne { grid-template-columns: 28px minmax(0, 1fr); }
  .admin-ligne > :nth-child(n+3) { grid-column: 2; }
  .admin-ligne-org { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-ligne-org > :nth-child(n+3) { grid-column: auto; }
  .admin-reglage { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ── 7. LES COMPOSANTS COMMUNS DE /admin (classes.json, « communs ») : leurs noms sont figés tels quels ──────────── */
/* le sélecteur (kv-selecteur) : sa liste en surimpression */
kv-selecteur { min-width: 170px; }
.sel-liste { background: var(--admin-couleur-surface); color: var(--admin-couleur-texte); border: 1px solid var(--admin-couleur-bord);
             border-radius: var(--admin-rayon-carte); }
.sel-recherche { border: 1px solid var(--admin-couleur-bord-fort); border-radius: var(--admin-rayon); background: var(--admin-couleur-fond);
                 color: var(--admin-couleur-texte); }
.sel-options { gap: 1px; }
.sel-option { border-radius: var(--admin-rayon); }
.sel-option.actif { background: var(--admin-couleur-survol); }
.sel-coche { color: var(--admin-couleur-accent); }
.sel-texte { min-width: 0; }
.sel-libelle { color: var(--admin-couleur-texte); }
.sel-description, .sel-vide { color: var(--admin-couleur-texte-discret); }
/* la modale */
html.modale-ouverte { overflow: hidden; }
.modale-fond { background: var(--voile); }
.modale { background: var(--admin-couleur-surface); color: var(--admin-couleur-texte); border: 1px solid var(--admin-couleur-bord);
          font-family: var(--admin-police); }
.modale-etroite { width: min(420px, 100%); }
.modale-large { width: min(640px, 100%); }
.modale-titre { color: var(--admin-couleur-titre); }
.modale-corps, .modale-libelle { color: var(--admin-couleur-texte-second); }
.modale-contenu, .modale-espace { color: var(--admin-couleur-texte); }
.modale-refus { color: var(--admin-couleur-erreur); }
.modale-entete, .modale-etapes, .modale-etape, .modale-etape-point, .modale-repere { color: var(--admin-couleur-texte-discret); }
.modale-etape-pastille { border-color: var(--admin-couleur-bord-fort); }
.modale-etape-nom { color: var(--admin-couleur-texte-second); }
.modale-etape-bouton { font: inherit; color: inherit; }
.modale-boutons { gap: var(--space-2); }
.modale-bouton { border-radius: var(--charte-bouton-rayon); font-weight: var(--charte-bouton-graisse); }

/* ── 8. LES CROCHETS — des prises du code de /admin, PAS des styles (classes.json, sorte « crochet ») ────────────── */
/* ⛔ Ne les stylez pas : le code les cherche, et un style posé dessus suivrait un geste, pas un dessin. Ils sont
      nommés ici pour que la feuille porte ABSOLUMENT toutes les classes de /admin :
   crochets : .admin-archiver .admin-avatar-place .admin-case .admin-desactiver .admin-dit-droits .admin-effectif
              .admin-exception .admin-geste-app .admin-lien .admin-nouveau-app .admin-reactiver .admin-renommer
              .admin-retirer .admin-role .admin-teinte-libre-choix .admin-vers-client .admin-vers-maintenance */