/* Propriétaire : habillage. Identité Légion XIII (DESIGN_V2 §1) : noir quadrillé, or, rouge.
   Feuille unique écrite à la main, sans compilation ni ressource externe (CSP default-src 'self').
   Les gabarits n'utilisent que les jetons sémantiques (deuxième bloc de :root) et les classes de
   composants du §7.2 ; les anciennes classes du lot 1a restent lisibles.
   Plan : 1 jetons · 2 police · 3 base · 4 bandeau, en-tête · 5 composants (boutons, champs,
   badges, alertes, menus, dialogue) · 6 arborescence et palette · 7 fiche et tableau des droits ·
   8 états de glisser · 9 barre du brouillon, annonces, aperçu · 10 autres pages · 11 téléphone ·
   12 mouvement réduit, impression. */

/* ===================== 1. Jetons (§1.2, recopiés tels quels) ===================== */
:root {
  color-scheme: dark;
  /* --- palette brute (site des paris) --- */
  --ink-950:#080706; --ink-900:#0d0b09; --ink-850:#12100d; --ink-800:#171410; --ink-700:#211c16; --ink-600:#2e2820;
  --gold-100:#fbf3da; --gold-200:#f4e3ad; --gold-300:#ecce79; --gold-400:#e0b54e; --gold-500:#cf9b34;
  --gold-600:#a87a2c; --gold-700:#7e5b22; --gold-800:#574017;
  --blood-300:#f87171; --blood-400:#ef4444; --blood-500:#dc2626; --blood-600:#b91c1c; --blood-700:#911616;

  /* --- surfaces et texte --- */
  --fond:var(--ink-950);            /* page, avec quadrillage */
  --surface:var(--ink-900);         /* cartes, panneaux */
  --surface-2:var(--ink-800);       /* en-têtes de catégorie, lignes survolées */
  --surface-3:var(--ink-700);       /* champs, colonnes du tableau */
  --bord:var(--ink-600);            /* séparateurs (décoratif, jamais seul contour d'un composant) */
  --bord-fort:var(--gold-600);      /* contour d'un élément actif (4,42:1 sur --surface-3) */
  --carte-bord:#786e5e;             /* contour des cartes, puces, jetons, champs (3,37:1 sur --surface-3) */
  --texte:#e7e2d8;                  /* 15,6:1 sur --fond */
  --texte-doux:#a39a8a;             /* 7,2:1 sur --fond, 6,07:1 sur --surface-3 */
  --texte-faible:#958c7c;           /* 5,09:1 sur --surface-3, 5,52:1 sur --surface-2 */

  /* --- accent --- */
  --accent:var(--gold-500);         /* fond des boutons principaux ; texte --ink-950 (8:1) */
  --accent-survol:var(--gold-400);
  --accent-texte:var(--gold-300);   /* titres, onglet actif (13:1) */
  --accent-trait:var(--gold-600);   /* contours seulement (4,42:1 sur --surface-3) ; jamais du texte */

  /* --- états --- */
  --succes:#4ade80;    --succes-fond:#0f2417;    --succes-bord:#166534;
  --attention:#fb923c; --attention-fond:#2a1a0b; --attention-bord:#9a3412;
  --danger:#f87171;    --danger-fond:#2a0e0e;    --danger-bord:var(--blood-700); --danger-plein:var(--blood-600);
  --info:#67e8f9;      --info-fond:#0b2026;      --info-bord:#155e75;

  /* --- bandeaux de serveur (§1.7) --- */
  --test-1:#1d4ed8; --test-2:#1e40af; --test-texte:#ffffff;   /* 6,7:1 et 8,7:1 */
  --prod-1:var(--blood-600); --prod-2:var(--blood-700); --prod-texte:#ffffff;   /* lot 3 */

  /* --- niveaux d'accès (§1.6) : fond / texte --- */
  /* Toute carte, puce ou jeton porte en plus une bordure 1 px --carte-bord (pointillée pour
     « Ne voit pas ») : les fonds aucun (= --surface-3) et lit (1,08:1) ne se distinguent pas
     seuls du fond de colonne. */
  --niv-aucun-fond:var(--ink-700);  --niv-aucun-texte:var(--texte-doux);   /* 6,07:1 */
  --niv-lit-fond:#2b2213;           --niv-lit-texte:var(--gold-200);       /* 12,3:1 */
  --niv-repond-fond:var(--gold-800);--niv-repond-texte:var(--gold-100);    /* 8,8:1 */
  --niv-poste-fond:var(--gold-600); --niv-poste-texte:var(--ink-950);      /* 5,3:1 */
  --niv-gere-fond:var(--gold-400);  --niv-gere-texte:var(--ink-950);       /* 10,4:1 */

  /* --- typographie --- */
  --police-titre:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --police-texte:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --taille-xs:.75rem; --taille-s:.875rem; --taille-m:1rem; --taille-l:1.25rem; --taille-xl:1.6rem; --taille-xxl:2.4rem;
  --interligne:1.5; --chasse-titre:.12em;   /* letter-spacing des capitales mono */

  /* --- espacements (base 4 px) --- */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px;

  /* --- rayons --- */
  --r-0:0; --r-1:2px; --r-2:4px; --r-pilule:999px;

  /* --- ombres (sur fond sombre : profondeur + liseré) --- */
  --ombre-1:0 1px 0 rgba(255,255,255,.03) inset, 0 4px 14px rgba(0,0,0,.45);
  --ombre-2:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 28px rgba(0,0,0,.6);
  --ombre-levee:0 14px 34px rgba(0,0,0,.7), 0 0 0 1px var(--gold-500);   /* carte en cours de glisser */
  --halo-focus:0 0 0 2px var(--ink-950), 0 0 0 4px var(--gold-300);

  /* --- mouvement --- */
  --duree-1:120ms; --duree-2:200ms; --courbe:cubic-bezier(.2,.7,.2,1);

  /* --- mise en page --- */
  --largeur-page:1280px; --largeur-palette:264px; --hauteur-bandeau:32px; --hauteur-entete:64px;
  --hauteur-barre:56px;
}
@media (prefers-reduced-motion: reduce) { :root { --duree-1:0ms; --duree-2:0ms; } }

/* ===================== 2. Police (§1.3) : JetBrains Mono, OFL 1.1, servie localement ===================== */
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/static/fonts/jetbrains-mono-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ===================== 3. Base ===================== */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hauteur-bandeau) + var(--hauteur-entete) + var(--e-3)); }
body {
  margin:0; min-height:100vh; color:var(--texte); font-family:var(--police-texte); font-size:var(--taille-m);
  line-height:var(--interligne); -webkit-font-smoothing:antialiased;
  background-color:var(--fond);
  background-image:
    linear-gradient(rgba(207,155,52,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207,155,52,.045) 1px, transparent 1px),
    radial-gradient(1100px 520px at 50% -200px, rgba(220,38,38,.10), transparent 70%);
  background-size:40px 40px, 40px 40px, 100% 100%;
}
.hazard { height:3px; background-image:repeating-linear-gradient(45deg,var(--gold-500) 0 10px,#7a1212 10px 20px); opacity:.7; }

h1, h2, h3, h4 { font-family:var(--police-titre); font-weight:700; text-transform:uppercase; line-height:1.25; margin:0; }
h1 { font-size:var(--taille-xl); letter-spacing:var(--chasse-titre); color:var(--accent-texte); margin:var(--e-2) 0 var(--e-4); }
h2 { font-size:var(--taille-l); letter-spacing:.1em; color:var(--texte); margin:var(--e-5) 0 var(--e-3); }
h3 { font-size:var(--taille-m); letter-spacing:.08em; color:var(--texte); margin:var(--e-4) 0 var(--e-2); }
.carte > h2:first-child, .carte > h3:first-child, .bloc > h2:first-child { margin-top:0; }
p { margin:0 0 var(--e-3); }
a { color:var(--accent-texte); text-decoration-color:rgba(236,206,121,.45); text-underline-offset:3px; }
a:hover { text-decoration-color:currentColor; }
code, kbd, samp { font-family:var(--police-titre); font-size:.88em; background:var(--surface-3); color:var(--gold-200);
  border:1px solid var(--bord); border-radius:var(--r-1); padding:0 .3em; }
hr { border:0; border-top:1px solid var(--bord); margin:var(--e-4) 0; }
small, .aide { color:var(--texte-doux); font-size:var(--taille-s); }
.fil { color:var(--texte-doux); font-size:var(--taille-s); margin:0 0 var(--e-3); }
.fil a { color:var(--texte-doux); }
.fil a:hover { color:var(--accent-texte); }
.vide { color:var(--texte-faible); font-style:italic; }
.date, time { font-variant-numeric:tabular-nums; }
.id, .identifiant { font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:400; color:var(--texte-doux); }
/* Texte réservé aux lecteurs d'écran (et notes des onglets à venir) */
.cache { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
::selection { background:var(--gold-700); color:var(--gold-100); }

/* Icônes du sprite (§1.8) : <svg class="icone" aria-hidden="true"><use href="/static/img/icones.svg#…"></use></svg> */
.icone { width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; color:inherit; }
.pastille-role { width:10px; height:10px; flex:none; overflow:visible; }
.pastille-role circle { stroke:var(--carte-bord); stroke-width:1px; }
.pastille-role.sans-couleur circle { fill:var(--texte-faible); }

/* Focus clavier (§1.5) : toujours un halo, jamais d'outline nu ; il prime sur l'ombre des composants
   (cartes, lignes, puces), d'où !important */
:focus-visible { outline:none; box-shadow:var(--halo-focus) !important; }
:focus:not(:focus-visible) { outline:none; }

/* Défilement aux couleurs du site */
* { scrollbar-color:var(--gold-800) var(--ink-900); scrollbar-width:thin; }

/* ===================== 4. Bandeau de serveur et en-tête (§1.7, §2.1) ===================== */
.bandeau { position:sticky; top:0; z-index:60; min-height:var(--hauteur-bandeau); display:flex; align-items:center;
  gap:var(--e-2) var(--e-4); flex-wrap:wrap; padding:0 var(--e-4) 0 0; color:var(--test-texte); font-size:var(--taille-s);
  background:var(--test-1); border-bottom:1px solid rgba(0,0,0,.35); }
.bandeau strong, .bandeau-mini strong {
  align-self:stretch; display:flex; align-items:center; padding:0 var(--e-4); font-family:var(--police-titre);
  font-weight:700; font-size:var(--taille-xs); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  background:repeating-linear-gradient(135deg, var(--test-1) 0 14px, var(--test-2) 14px 28px);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.25); }
.bandeau .id, .bandeau-mini .id { color:var(--test-texte); opacity:.92; }
.bandeau .note { opacity:.92; }
.bandeau .court { display:none; }
.bandeau.production, .bandeau-mini.production { background:var(--prod-1); color:var(--prod-texte); }
.bandeau.production { min-height:40px; }
.bandeau.production strong, .bandeau-mini.production strong {
  background:repeating-linear-gradient(135deg, var(--prod-1) 0 14px, var(--prod-2) 14px 28px); }
body.production { box-shadow:inset 0 0 0 3px var(--prod-1); }
.bandeau-mini { display:flex; align-items:center; gap:var(--e-3); min-height:24px; padding:0 var(--e-3) 0 0;
  background:var(--test-1); color:var(--test-texte); font-size:var(--taille-xs); }
.bandeau-mini strong { padding:0 var(--e-3); letter-spacing:.14em; }

.entete { position:sticky; top:var(--hauteur-bandeau); z-index:50; min-height:var(--hauteur-entete);
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2) var(--e-5); padding:var(--e-2) var(--e-5);
  background:rgba(8,7,6,.9); border-bottom:1px solid var(--bord);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.marque { display:flex; align-items:center; gap:var(--e-3); text-decoration:none; color:var(--gold-200); flex:none; }
.marque .logo { width:44px; height:44px; display:block; filter:drop-shadow(0 0 8px rgba(207,155,52,.35)); }
.marque-texte { display:flex; flex-direction:column; line-height:1.15; }
.marque-nom { font-family:var(--police-titre); font-weight:700; font-size:var(--taille-s);
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-200); }
.marque-sous { font-family:var(--police-titre); font-weight:700; font-size:.6875rem; letter-spacing:.25em;
  text-transform:uppercase; color:var(--blood-300); margin-top:3px; }
.navigation { display:flex; align-items:center; flex:1; flex-wrap:wrap; gap:var(--e-2) var(--e-2); min-width:0; }
.onglets { display:flex; align-items:stretch; gap:var(--e-1); flex-wrap:wrap; flex:1; }
.onglet { display:inline-flex; align-items:center; gap:var(--e-1); min-height:40px; padding:0 6px;
  font-family:var(--police-titre); font-weight:700; font-size:var(--taille-s); letter-spacing:.03em; text-transform:uppercase;
  color:var(--texte-doux); text-decoration:none; border-bottom:2px solid transparent;
  transition:color var(--duree-1), border-color var(--duree-1), background-color var(--duree-1); }
@media (hover: hover) { a.onglet:hover { color:var(--texte); border-bottom-color:var(--bord); } }
.onglet.actif, .onglet[aria-current="page"] { color:var(--accent-texte); border-bottom-color:var(--accent);
  background:linear-gradient(0deg, rgba(207,155,52,.08), transparent 70%); }
.onglet.grise { color:var(--texte-faible); opacity:.6; cursor:not-allowed; font-weight:400; font-size:var(--taille-xs); }
.onglet.grise small { display:none; }
.onglets .separateur { width:1px; margin:var(--e-2) var(--e-2); background:var(--bord); }
.compte { display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap; margin-left:auto; }
.avatar { width:28px; height:28px; border-radius:50%; border:1px solid var(--carte-bord); object-fit:cover; flex:none; }
.avatar.initiale { display:inline-grid; place-items:center; background:var(--surface-3); color:var(--gold-200);
  font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700; }
.pseudo { font-family:var(--police-titre); font-size:var(--taille-xs); color:var(--texte); }
.en-ligne { display:inline; margin:0; }
button.lien { background:none; border:0; padding:0; font:inherit; color:var(--accent-texte); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(236,206,121,.45); cursor:pointer; }
.compte button.lien { font-family:var(--police-titre); font-size:var(--taille-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--texte-doux); text-decoration:none; }
@media (hover: hover) { .compte button.lien:hover { color:var(--danger); } }
/* Compteur du brouillon (id compteur-brouillon, OOB) : pastille or */
.compteur:empty { display:none; }
.compteur a, .pastille-brouillon { display:inline-flex; align-items:center; gap:var(--e-2); min-height:28px;
  padding:0 var(--e-3); border-radius:var(--r-pilule); background:var(--niv-lit-fond); color:var(--gold-200);
  border:1px solid var(--accent-trait); font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none; }
.compteur a::before, .pastille-brouillon::before { content:""; width:8px; height:8px; border-radius:50%;
  background:var(--gold-400); box-shadow:0 0 0 3px rgba(224,181,78,.2); }
@media (hover: hover) { .compteur a:hover, .pastille-brouillon:hover { border-color:var(--gold-400); color:var(--gold-100); } }
.entete .bouton-menu { display:none; }

/* ===================== 5. Page, cartes et composants ===================== */
.page { max-width:var(--largeur-page); margin:0 auto; padding:var(--e-5) var(--e-5) calc(var(--hauteur-barre) + var(--e-7)); }
.tete-page { display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3) var(--e-4); margin:0 0 var(--e-4); }
.tete-page h1 { margin:0; flex:1 1 auto; }
.tete-page .outils { display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2); }
.tete-page .outils form { margin:0; }
.lu-a { color:var(--texte-doux); font-size:var(--taille-s); font-variant-numeric:tabular-nums; }

.carte { position:relative; background:linear-gradient(180deg, rgba(255,255,255,.018), transparent 140px), var(--surface);
  border:1px solid var(--bord); border-radius:var(--r-1); padding:var(--e-5); margin:0 0 var(--e-4); box-shadow:var(--ombre-1); }
.carte::before { content:""; position:absolute; left:-1px; top:-1px; width:32px; height:2px; background:var(--accent); }
.carte.etroite { max-width:520px; margin:var(--e-6) auto; }
.bloc { margin:var(--e-5) 0 0; }
.titre-bloc { display:flex; align-items:baseline; gap:var(--e-2) var(--e-4); flex-wrap:wrap; margin:0 0 var(--e-3); }
.titre-bloc h2 { margin:0; font-size:var(--taille-s); letter-spacing:.16em; color:var(--gold-200); }
.titre-bloc .aide { margin:0; }

/* Boutons (§1.5) */
.bouton, button.petit {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2); min-height:36px; padding:0 var(--e-4);
  font-family:var(--police-titre); font-weight:700; font-size:var(--taille-xs); letter-spacing:.08em; text-transform:uppercase;
  line-height:1.1; color:var(--texte); background:var(--surface-3); border:1px solid var(--carte-bord); border-radius:var(--r-1);
  text-decoration:none; cursor:pointer; white-space:nowrap; -webkit-user-select:none; user-select:none;
  transition:background-color var(--duree-1), border-color var(--duree-1), color var(--duree-1), transform var(--duree-1); }
.bouton .icone { width:15px; height:15px; }
.bouton.principal { background:var(--accent); border-color:var(--accent); color:var(--ink-950); box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 6px 18px rgba(207,155,52,.18); }
.bouton.danger { background:var(--danger-plein); border-color:var(--danger-plein); color:#fff; }
.bouton.discret { background:transparent; border-color:transparent; color:var(--texte-doux); }
.bouton.petit, button.petit { min-height:28px; padding:0 var(--e-3); }
.bouton.icone-seule { padding:0; width:32px; min-height:32px; }
.bouton.large { width:100%; min-height:48px; font-size:var(--taille-s); }
@media (hover: hover) {
  .bouton:hover, button.petit:hover { border-color:var(--accent-trait); color:var(--accent-texte); }
  .bouton.principal:hover { background:var(--accent-survol); border-color:var(--accent-survol); color:var(--ink-950); }
  .bouton.danger:hover { background:var(--blood-500); border-color:var(--blood-500); color:#fff; }
  .bouton.discret:hover { color:var(--accent-texte); border-color:var(--bord); }
}
.bouton:active, button.petit:active { transform:translateY(1px); }
.bouton[disabled], button[disabled], .bouton[aria-disabled="true"] { opacity:.45; cursor:not-allowed; transform:none; }
/* Pendant une requête : trait animé en bas du bouton (§1.5) */
.htmx-request .bouton[type="submit"], .htmx-request button.petit[type="submit"], .bouton.htmx-request { position:relative; overflow:hidden; }
.htmx-request .bouton[type="submit"]::after, .htmx-request button.petit[type="submit"]::after, .bouton.htmx-request::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:40%; background:var(--gold-300);
  animation:trait-requete 900ms var(--courbe) infinite; }
@keyframes trait-requete { from { transform:translateX(-100%); } to { transform:translateX(260%); } }

/* Champs et formulaires */
input[type=text], input[type=search], input[type=number], select, textarea {
  font:inherit; font-size:var(--taille-m); color:var(--texte); background:var(--surface-3); border:1px solid var(--carte-bord);
  border-radius:var(--r-1); min-height:40px; padding:var(--e-2) var(--e-3); max-width:100%;
  transition:border-color var(--duree-1); }
input[type=text], textarea { width:100%; max-width:480px; }
textarea { min-height:88px; resize:vertical; }
input::placeholder, textarea::placeholder { color:var(--texte-faible); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color:var(--accent-trait); }
select { padding-right:var(--e-6); appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold-400) 50%), linear-gradient(135deg, var(--gold-400) 50%, transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
input[type=checkbox], input[type=radio] { accent-color:var(--gold-500); width:16px; height:16px; margin:0 var(--e-2) 0 0; vertical-align:-3px; }
label { display:inline-block; margin-right:var(--e-4); }
fieldset { min-inline-size:0; min-width:0; border:1px solid var(--bord); border-radius:var(--r-1); margin:var(--e-3) 0; padding:var(--e-3) var(--e-4) var(--e-4); background:rgba(255,255,255,.01); }
legend { font-family:var(--police-titre); font-weight:700; font-size:var(--taille-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-200); padding:0 var(--e-2); }
.barre { display:flex; gap:var(--e-2) var(--e-3); flex-wrap:wrap; align-items:center; margin:var(--e-2) 0 var(--e-4); }
.recherche { display:flex; gap:var(--e-2); flex:1; min-width:200px; max-width:360px; margin:0; }
.recherche input { flex:1; min-width:0; }
.actions { display:flex; gap:var(--e-2); flex-wrap:wrap; align-items:center; }
.actions form { margin:0; }
.champ { display:grid; gap:var(--e-1); margin:0 0 var(--e-4); }
.champ > label { margin:0; font-family:var(--police-titre); font-weight:700; font-size:var(--taille-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--texte-doux); }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:var(--e-1); min-height:20px; padding:0 var(--e-2);
  font-family:var(--police-titre); font-weight:700; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  line-height:1; white-space:nowrap; vertical-align:middle; text-decoration:none;
  color:var(--texte-doux); background:var(--surface-3); border:1px solid var(--carte-bord); border-radius:var(--r-1); }
.badge .icone { width:12px; height:12px; }
.badge.nouveau { color:var(--gold-200); background:var(--niv-lit-fond); border-color:var(--accent-trait); }
.badge.brouillon, .badge.modifie { color:var(--ink-950); background:var(--gold-400); border-color:var(--gold-400); }
.badge.verrou { color:var(--gold-200); background:var(--niv-lit-fond); border-color:var(--accent-trait); }
.badge.protege { color:var(--texte); background:var(--surface-2); border-color:var(--carte-bord); }
.badge.ne-suit-plus, .badge.particulier, .badge.attention, .badge.non-conforme { color:var(--attention); background:var(--attention-fond); border-color:var(--attention-bord); }
.badge.particulier { text-transform:none; }
.badge.refus, .badge.alerte-badge, .badge.echec, .badge.danger { color:var(--danger); background:var(--danger-fond); border-color:var(--danger-bord); }
.badge.succes, .badge.applique { color:var(--succes); background:var(--succes-fond); border-color:var(--succes-bord); }
.badge.info, .badge.test, .badge.annulation { color:var(--info); background:var(--info-fond); border-color:var(--info-bord); }
.badge.staff { color:var(--gold-200); background:var(--niv-lit-fond); border-color:var(--accent-trait); }   /* or : ce n'est pas un danger (§1.1) */
.badge.mention { color:var(--attention); background:var(--ink-950); border-color:var(--attention); min-width:20px; justify-content:center; }
.badge.sans-vue { color:var(--texte); background:var(--ink-950); border-color:var(--carte-bord); }
/* Consultation seulement (droit « consulter ») : près du nom de la personne connectée ; or discret, sans rouge (ce n'est pas une erreur). */
.pastille-consultation { display:inline-flex; align-items:center; min-height:20px; padding:0 var(--e-2); font-family:var(--police-titre);
  font-weight:700; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; vertical-align:middle;
  color:var(--gold-200); background:var(--ink-950); border:1px solid var(--accent-trait); border-radius:var(--r-1); }
.pastille { display:inline-flex; align-items:center; gap:var(--e-1); background:var(--surface-3); border:1px solid var(--carte-bord);
  border-radius:var(--r-1); padding:1px var(--e-2); margin:2px; font-size:var(--taille-s); }
.pastille.refus { border-color:var(--danger-bord); background:var(--danger-fond); }
.alerte-texte { color:var(--attention); font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

/* Alertes (§2.9) : bordure gauche 4 px, texte en --texte, titre en police titre */
.alerte { position:relative; display:block; margin:var(--e-3) 0; padding:var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 4px);
  color:var(--texte); background:var(--surface-2); border:1px solid var(--bord); border-radius:var(--r-1); overflow:hidden; }
.alerte::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--carte-bord); }
.alerte .titre, .alerte > strong:first-child { display:block; font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--e-1); }
.alerte .titre .icone { width:14px; height:14px; margin-right:var(--e-1); }
.alerte.erreur { background:var(--danger-fond); border-color:var(--danger-bord); }
.alerte.erreur::before { background:var(--danger); }
.alerte.erreur .titre, .alerte.erreur > strong:first-child { color:var(--danger); }
.alerte.ok { background:var(--succes-fond); border-color:var(--succes-bord); }
.alerte.ok::before { background:var(--succes); }
.alerte.ok .titre, .alerte.ok > strong:first-child { color:var(--succes); }
.alerte.info { background:var(--info-fond); border-color:var(--info-bord); }
.alerte.info::before { background:var(--info); }
.alerte.info .titre, .alerte.info > strong:first-child { color:var(--info); }
.alerte.avertissement { background:var(--attention-fond); border-color:var(--attention-bord); }
.alerte.avertissement::before { background:var(--attention); }
.alerte.avertissement .titre, .alerte.avertissement > strong:first-child { color:var(--attention); }
.alerte.bloquant { background:var(--danger-fond); border-color:var(--danger-plein); }
.alerte.bloquant::before { background:var(--danger-plein); }
.alerte.bloquant .titre, .alerte.bloquant > strong:first-child { color:var(--danger); }
.alerte ul { margin:var(--e-1) 0 var(--e-1) var(--e-5); padding:0; }
.alerte p:last-child { margin-bottom:0; }

/* Menus déroulants <details class="menu"> (§2.2, §3.4) */
.menu { position:relative; display:inline-block; }
.menu > summary { list-style:none; display:inline-flex; align-items:center; justify-content:center; gap:var(--e-1);
  min-width:32px; min-height:28px; padding:0 var(--e-2); cursor:pointer; color:var(--texte-doux);
  border:1px solid var(--carte-bord); border-radius:var(--r-1); background:var(--surface-3);
  font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transition:color var(--duree-1), border-color var(--duree-1); -webkit-user-select:none; user-select:none; }
.menu > summary::-webkit-details-marker { display:none; }
.menu > summary .icone { width:16px; height:16px; }
.menu[open] > summary { color:var(--accent-texte); border-color:var(--accent-trait); }
@media (hover: hover) { .menu > summary:hover { color:var(--accent-texte); border-color:var(--accent-trait); } }
.menu-contenu { position:absolute; z-index:40; right:0; top:calc(100% + 4px); min-width:220px;
  display:flex; flex-direction:column; padding:var(--e-1); background:var(--surface-2); border:1px solid var(--accent-trait);
  border-radius:var(--r-2); box-shadow:var(--ombre-2); color:var(--texte); }
.menu-contenu form { margin:0; display:block; }
.menu-contenu button, .menu-contenu a {
  display:flex; align-items:center; gap:var(--e-2); width:100%; min-height:36px; padding:0 var(--e-3); margin:0;
  color:var(--texte); background:none; border:0; border-radius:var(--r-1); font:inherit; font-size:var(--taille-s); font-weight:400;
  text-align:left; text-decoration:none; cursor:pointer; text-transform:none; letter-spacing:0; white-space:nowrap; }
.menu-contenu button .icone, .menu-contenu a .icone { width:15px; height:15px; color:var(--texte-doux); }
@media (hover: hover) { .menu-contenu button:not([disabled]):hover, .menu-contenu a:hover { background:var(--surface-3); color:var(--accent-texte); } }
.menu-contenu button:focus-visible, .menu-contenu a:focus-visible { background:var(--surface-3); color:var(--accent-texte); }
.menu-contenu .actuel { color:var(--accent-texte); }
.menu-contenu .actuel::after { content:"actuel"; margin-left:auto; padding-left:var(--e-3); font-family:var(--police-titre);
  font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--texte-doux); }
.menu-contenu .raison { display:block; padding:0 var(--e-3) var(--e-2) calc(var(--e-3) + 15px + var(--e-2)); font-size:var(--taille-xs); color:var(--texte-doux); white-space:normal; }
.menu-contenu hr { margin:var(--e-1) 0; border-top:1px solid var(--bord); }
.menu-contenu .titre-menu { padding:var(--e-2) var(--e-3) var(--e-1); font-family:var(--police-titre); font-size:.625rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-doux); }
.menu-contenu .niv { width:12px; height:12px; border-radius:2px; border:1px solid var(--carte-bord); flex:none; }
.menu-contenu .niv.niv-aucun { border-style:dashed; }
/* Sous-menu dans un menu (« Déplacer vers… ») : déplié sur place, en retrait */
.menu-sous > summary { list-style:none; display:flex; align-items:center; gap:var(--e-2); min-height:36px; padding:0 var(--e-3);
  border-radius:var(--r-1); font-size:var(--taille-s); cursor:pointer; color:var(--texte); }
.menu-sous > summary::-webkit-details-marker { display:none; }
.menu-sous > summary .icone { width:15px; height:15px; color:var(--texte-doux); }
.menu-sous > summary::after { content:""; margin-left:auto; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); opacity:.7; }
.menu-sous[open] > summary::after { transform:rotate(45deg); }
@media (hover: hover) { .menu-sous > summary:hover { background:var(--surface-3); color:var(--accent-texte); } }
.menu-sous > summary:focus-visible { background:var(--surface-3); color:var(--accent-texte); }
.menu-sous > .menu-contenu { position:static; min-width:0; margin:0 0 var(--e-1) var(--e-5); padding:2px 0 2px var(--e-1); background:transparent;
  border:0; border-left:2px solid var(--accent-trait); border-radius:0; box-shadow:none; }
.menu-contenu span.raison[role="menuitem"] { padding:var(--e-2) var(--e-3); color:var(--texte-faible); cursor:not-allowed; }

/* Dialogue (§3.2, §3.3) */
.dialogue { width:min(620px, calc(100vw - 2 * var(--e-4))); max-height:calc(100vh - 2 * var(--e-6)); padding:0; color:var(--texte);
  background:var(--surface); border:1px solid var(--accent-trait); border-radius:var(--r-2); box-shadow:var(--ombre-2); overflow:auto; }
.dialogue:not([open]) { display:none; }
.dialogue::backdrop { background:rgba(8,7,6,.55); }
.tete-dialogue { display:flex; align-items:center; gap:var(--e-3); padding:var(--e-4) var(--e-5) var(--e-3); }
.tete-dialogue h2 { margin:0; flex:1; font-size:var(--taille-s); letter-spacing:.14em; color:var(--accent-texte); }
.tete-dialogue form { margin:0; }
.corps-dialogue { padding:var(--e-4) var(--e-5); }
.pied-dialogue { display:flex; gap:var(--e-2); justify-content:space-between; align-items:center; flex-wrap:wrap; padding:var(--e-3) var(--e-5);
  border-top:1px solid var(--bord); background:var(--ink-850); }
.pied-dialogue form { margin:0; }
.cible-dialogue { display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2); font-size:var(--taille-l); font-weight:600; margin:0 0 var(--e-1); }
.cible-dialogue .icone { color:var(--accent-texte); }
.cible-dialogue .chemin { color:var(--texte-doux); font-weight:400; }
.etat-actuel { color:var(--texte-doux); font-size:var(--taille-s); }
.etat-actuel strong { color:var(--texte); }
.choix-niveaux { display:grid; grid-template-columns:repeat(auto-fit, minmax(112px, 1fr)); gap:var(--e-2); margin:var(--e-4) 0; }
.choix-niveaux form { margin:0; display:flex; }
.choix-niveaux button { flex:1; min-height:64px; flex-direction:column; gap:3px; width:100%; }
.choix-niveaux button small { font-family:var(--police-texte); font-weight:400; text-transform:none; letter-spacing:0; font-size:var(--taille-xs); color:inherit; opacity:.85; }
.choix-niveaux button.niv-aucun { border-style:dashed; }
@media (hover: hover) { .choix-niveaux button:hover { border-color:var(--gold-300); box-shadow:0 0 0 1px var(--gold-300); color:inherit; } }
.choix-cible { display:grid; gap:var(--e-2); margin:var(--e-3) 0; }
.choix-cible form { margin:0; display:flex; }
.choix-cible button { flex:1; justify-content:flex-start; min-height:52px; padding:var(--e-2) var(--e-4); white-space:normal; text-align:left;
  font-family:var(--police-texte); font-size:var(--taille-m); font-weight:600; text-transform:none; letter-spacing:0; }
.choix-cible button small { display:block; color:var(--texte-doux); font-weight:400; }
/* Choix « Garder / Suivre » en cartes radio (§3.3) */
.choix-radio { display:grid; gap:var(--e-2); margin:var(--e-3) 0; border:0; padding:0; background:none; }
.option-radio { display:grid; grid-template-columns:auto 1fr; gap:var(--e-1) var(--e-3); margin:0; padding:var(--e-3) var(--e-4);
  background:var(--surface-3); border:1px solid var(--carte-bord); border-radius:var(--r-1); cursor:pointer;
  transition:border-color var(--duree-1), background-color var(--duree-1); }
.option-radio input { margin:3px 0 0; grid-row:span 2; }
.option-radio .titre-option { font-weight:600; }
.option-radio .effet { grid-column:2; color:var(--texte-doux); font-size:var(--taille-s); }
.option-radio .effet .alerte { margin:var(--e-2) 0 0; }
.option-radio:has(input:checked) { border-color:var(--gold-400); background:var(--niv-lit-fond); box-shadow:inset 3px 0 0 var(--gold-400); }
.option-radio:has(input:disabled) { cursor:not-allowed; border-style:dashed; }
.option-radio:has(input:disabled) .titre-option { color:var(--texte-doux); }
.option-radio:has(input:focus-visible) { box-shadow:var(--halo-focus); }
.recommande { font-family:var(--police-titre); font-size:.625rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--succes);
  margin-left:var(--e-2); padding:1px var(--e-1); border:1px solid var(--succes-bord); border-radius:var(--r-1); }

/* ===================== 6. Arborescence et palette (§2.2) ===================== */
.zone-arbre { display:grid; grid-template-columns:var(--largeur-palette) minmax(0, 1fr); gap:var(--e-5); align-items:start; }
.arbre { min-width:0; }
.panneau-palette { position:sticky; top:calc(var(--hauteur-bandeau) + var(--hauteur-entete) + var(--e-4));
  max-height:calc(100vh - var(--hauteur-bandeau) - var(--hauteur-entete) - var(--hauteur-barre) - var(--e-6));
  overflow:auto; overscroll-behavior:contain; padding:var(--e-4); background:var(--surface); border:1px solid var(--bord);
  border-radius:var(--r-1); box-shadow:var(--ombre-1); }
.panneau-palette::before { content:""; position:absolute; left:-1px; top:-1px; width:32px; height:2px; background:var(--accent); }
.tete-palette { display:flex; align-items:center; gap:var(--e-2); margin:0 0 var(--e-2); }
.tete-palette h2 { margin:0; flex:1; font-size:var(--taille-s); letter-spacing:.18em; color:var(--accent-texte); }
.panneau-palette > .aide { margin:0 0 var(--e-3); font-size:var(--taille-xs); }
.tete-palette .bascule-palette { display:none; }
.famille { display:flex; align-items:center; gap:var(--e-2); margin:var(--e-4) 0 var(--e-2);
  font-size:.625rem; letter-spacing:.18em; color:var(--texte-doux); }
.famille::after { content:""; flex:1; height:1px; background:var(--bord); }
.famille small { font-family:var(--police-texte); font-size:.6875rem; text-transform:none; letter-spacing:0; color:var(--texte-faible); }
.palette { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--e-1); }
.jeton-role { display:flex; align-items:center; gap:var(--e-2); min-height:34px; padding:0 var(--e-2) 0 var(--e-3);
  background:var(--surface-2); color:var(--texte); border:1px solid var(--carte-bord); border-radius:var(--r-1);
  font-size:var(--taille-s); line-height:1.25; cursor:grab; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  transition:border-color var(--duree-1), background-color var(--duree-1); }
.jeton-role[data-glissable="1"] { border-radius:var(--r-pilule); padding-left:var(--e-1); background:linear-gradient(90deg, var(--surface-3), var(--surface-2) 40%); }
.jeton-role > .poignee { width:18px; height:24px; }
.jeton-role .nom { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jeton-role > .icone { width:14px; height:14px; color:var(--texte-faible); }
@media (hover: hover) { .jeton-role[data-glissable="1"]:hover { border-color:var(--accent-trait); background:var(--surface-3); } }
.jeton-role[data-glissable="0"] { cursor:not-allowed; background:transparent; border-style:dashed; color:var(--texte-doux); padding-top:var(--e-1); padding-bottom:var(--e-1); }
.jeton-role[data-glissable="0"] .nom { white-space:normal; }
.jeton-role .raison { display:block; font-size:var(--taille-xs); color:var(--texte-faible); }
.jeton-armer { display:none; margin-left:auto; min-height:26px; padding:0 var(--e-2); font-family:var(--police-titre); font-size:.625rem;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--texte-doux); background:var(--surface-3);
  border:1px solid var(--carte-bord); border-radius:var(--r-1); cursor:pointer; }
.mode-toucher .jeton-armer { display:inline-flex; align-items:center; }
.jeton-armer[aria-pressed="true"] { color:var(--ink-950); background:var(--gold-400); border-color:var(--gold-400); }
.jeton-role:has(.jeton-armer[aria-pressed="true"]) { border-color:var(--gold-400); box-shadow:0 0 0 1px var(--gold-400); }
.bouton-mode-toucher[aria-pressed="true"] { color:var(--ink-950); background:var(--gold-400); border-color:var(--gold-400); }
.donner-ici { position:relative; z-index:4; }

/* Catégorie : en-tête au coin coupé (décor seulement, sur un pseudo-élément : le focus n'est jamais rogné) */
.categorie { position:relative; margin:0 0 var(--e-4); background:var(--surface); border:1px solid var(--bord); border-radius:var(--r-1); box-shadow:var(--ombre-1); }
.categorie.nouveau { border-color:var(--accent-trait); }
.tete-categorie { position:relative; isolation:isolate; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2) var(--e-3);
  min-height:52px; padding:var(--e-2) var(--e-4); }
.tete-categorie::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(207,155,52,.14), rgba(207,155,52,0) 50%), var(--surface-2);
  clip-path:polygon(0 0, 100% 0, 100% 70%, calc(100% - 14px) 100%, 0 100%); }
.tete-categorie::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.tete-categorie > .icone { color:var(--accent-texte); width:18px; height:18px; }
.tete-categorie h2 { margin:0; font-size:var(--taille-m); letter-spacing:.18em; color:var(--gold-200);
  display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap; }
.tete-categorie h2 a { color:inherit; text-decoration:none; }
@media (hover: hover) { .tete-categorie h2 a:hover { color:var(--accent-texte); } }
.tete-categorie .resume { color:var(--texte-doux); font-size:var(--taille-s); }
.tete-categorie .actions, .salon .actions { margin-left:auto; flex-wrap:nowrap; }
.ligne-acces { display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2); flex-basis:100%; padding:2px 0; }
.etiquette-acces { font-family:var(--police-titre); font-size:.625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--texte-doux); }
.separateur-groupe { display:flex; align-items:center; gap:var(--e-2); padding:var(--e-2) var(--e-4) 2px var(--e-6);
  font-family:var(--police-titre); font-size:.625rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--texte-faible);
  border-top:1px solid var(--bord); }
.separateur-groupe::after { content:""; flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--bord) 0 4px, transparent 4px 8px); }
/* « Vocaux » sans vocal (RANGER_SALONS=tout) : caché, sauf pendant le glisser d'un vocal, quand la liste
   vide s'ouvre (« déposer ici »). Pendant le glisser d'un salon écrit, rien ne s'ouvre ni ne bouge. */
.categorie:not(:has(> .salons-vocaux > li)) > .separateur-groupe { display:none; }
.glisse-salons .categorie:has(> .salons-vocaux.zone-permise) > .separateur-groupe { display:flex; }

/* Listes et lignes de salons */
.salons { position:relative; list-style:none; margin:0; padding:0; }
.salon { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:2px var(--e-3); min-height:40px;
  padding:var(--e-1) var(--e-4) var(--e-1) var(--e-2); border-top:1px solid var(--bord); background:var(--surface);
  transition:background-color var(--duree-1); }
.salons > .salon:first-child { border-top:0; }
@media (hover: hover) { .salon:hover { background:var(--surface-2); } }
.salon:focus-visible { z-index:2; }
.salon > .poignee, .salon > .sans-poignee { width:20px; flex:none; }
.salon > .icone { color:var(--texte-doux); }
.salon .type { color:var(--texte-faible); font-family:var(--police-titre); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; min-width:4.2rem; }
.salon .nom { font-weight:600; color:var(--texte); text-decoration:none; }
a.nom:hover { color:var(--accent-texte); text-decoration:underline; }
.salon .suivi { color:var(--texte-faible); font-size:var(--taille-s); }
.salon .resume { color:var(--texte-doux); font-size:var(--taille-s); }
abbr.etoile { text-decoration:none; cursor:help; color:var(--attention); }
.salon .provenance { color:var(--texte-doux); font-size:var(--taille-xs); }
.salon.nouveau { background:linear-gradient(90deg, rgba(207,155,52,.07), transparent 60%), var(--surface); }
.salon.modifie, .salon.nouveau { box-shadow:inset 3px 0 0 var(--gold-400); }
.salon > .ligne-acces { padding-left:calc(20px + var(--e-3) + 1.15em + var(--e-3)); }
.ligne-acces:not(:has(.puce-acces)) { display:none; }     /* « ACCÈS » sans puce : rien à montrer */
li.vide { padding:var(--e-2) var(--e-4); color:var(--texte-faible); font-style:italic; font-size:var(--taille-s); }

/* Poignée : un simple span (aria-hidden), jamais focalisable (§3.4) */
.poignee { display:inline-flex; align-items:center; justify-content:center; flex:none; width:20px; height:28px; color:var(--texte-faible);
  cursor:grab; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; border-radius:var(--r-1);
  transition:color var(--duree-1), background-color var(--duree-1); }
.poignee .icone { width:16px; height:16px; }
@media (hover: hover) { .poignee:hover { color:var(--accent-texte); background:rgba(207,155,52,.12); } }
.poignee:active { cursor:grabbing; }

/* Puces d'accès (§1.6) : pilule, lettre courte, × */
.puces-acces { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1) var(--e-2); margin:0; padding:0; min-height:24px; }
.puce-acces { display:inline-flex; align-items:center; gap:2px; min-height:26px; padding:0 2px 0 var(--e-1);
  font-size:var(--taille-xs); font-weight:600; border:1px solid var(--carte-bord); border-radius:var(--r-pilule);
  background:var(--niv-aucun-fond); color:var(--niv-aucun-texte); -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.puce-acces .poignee { width:14px; height:20px; color:inherit; opacity:.65; }
.puce-acces .poignee .icone { width:12px; height:12px; }
.puce-acces .libelle { padding:0 var(--e-1); white-space:nowrap; }
.puce-acces abbr, .puce-acces .lettre { font-family:var(--police-titre); font-weight:700; font-size:.6875rem; text-decoration:none; display:inline-grid; place-items:center;
  min-width:18px; height:18px; padding:0 4px; border-radius:var(--r-pilule); background:rgba(0,0,0,.3); }
.puce-acces form { display:inline-flex; margin:0; }
.puce-acces button { display:inline-grid; place-items:center; width:22px; height:22px; padding:0; color:inherit; background:none; border:0;
  border-radius:50%; cursor:pointer; opacity:.75; }
.puce-acces button .icone { width:12px; height:12px; }
@media (hover: hover) { .puce-acces button:hover { opacity:1; background:var(--ink-950); color:var(--danger); } }
.puce-acces[data-retirable="0"] { padding-left:var(--e-2); }
.puce-acces.modifie { box-shadow:0 0 0 2px var(--ink-950), 0 0 0 3px var(--gold-400); }
.puce-acces .badge.mention { min-height:16px; min-width:16px; padding:0 2px; font-size:.625rem; }
.niv-aucun { background:var(--niv-aucun-fond); color:var(--niv-aucun-texte); border-style:dashed; }
.niv-lit { background:var(--niv-lit-fond); color:var(--niv-lit-texte); }
.niv-repond { background:var(--niv-repond-fond); color:var(--niv-repond-texte); }
.niv-poste { background:var(--niv-poste-fond); color:var(--niv-poste-texte); }
.niv-gere { background:var(--niv-gere-fond); color:var(--niv-gere-texte); }
.niv-poste abbr, .niv-gere abbr, .niv-poste .lettre, .niv-gere .lettre { background:rgba(0,0,0,.14); }

/* Zone de dépôt d'accès (geste 2) : vide et invisible hors glisser ; couvre la ligne pendant le glisser */
.depot-acces { list-style:none; margin:0; padding:0; display:none; }
.glisse-palette [data-zone="acces"] > .depot-acces { display:flex; position:absolute; inset:0; z-index:3; align-items:center;
  justify-content:flex-end; padding:0 var(--e-5); }
.depot-acces > .jeton-role { visibility:hidden; pointer-events:none; }   /* l'élément déposé : seul le fantôme se voit */
.glisse-palette [data-zone="acces"].zone-survol > .depot-acces { background:rgba(207,155,52,.14); }   /* fond à 14 % : le nom visé se lit */
.glisse-palette [data-zone="acces"].zone-interdite.zone-survol > .depot-acces { background:rgba(248,113,113,.11); }

/* ===================== 7. Fiche et tableau des droits (§2.3, geste 1) ===================== */
.tableau-droits { position:relative; }
.tete-fiche { display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2) var(--e-4); margin:0 0 var(--e-4); }
.tete-fiche h1 { margin:0; flex:1 1 auto; text-transform:none; letter-spacing:.01em; font-family:var(--police-texte); font-size:var(--taille-xl); color:var(--texte); }
.type-salon, .fiche h1 .type { display:inline-flex; align-items:center; gap:var(--e-2); min-height:26px; padding:0 var(--e-2); font-family:var(--police-titre);
  font-size:var(--taille-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-texte);
  border:1px solid var(--accent-trait); border-radius:var(--r-1); background:var(--niv-lit-fond); vertical-align:middle; }
.etat-salon { display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2) var(--e-4); padding:var(--e-3) var(--e-4); margin:0 0 var(--e-4);
  background:var(--surface-2); border:1px solid var(--bord); border-radius:var(--r-1); font-size:var(--taille-s); }
.etat-salon form { margin:0; }
.etat-salon .sep { width:1px; height:20px; background:var(--bord); }
.etat-salon .groupe { display:inline-flex; align-items:center; gap:var(--e-2); flex-wrap:wrap; }
.verrou { display:inline-flex; align-items:center; gap:var(--e-1); }
.verrou.ok { color:var(--succes); }
.verrou.manque { color:var(--attention); }
.etat-salon .verrou { color:var(--texte); }
.etat-salon .verrou.ok .icone { color:var(--succes); }
.etat-salon .verrou.manque .icone { color:var(--attention); }
.bloc-plancher { display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3) var(--e-5); padding:var(--e-3) var(--e-4); margin:0 0 var(--e-4);
  background:var(--ink-850); border:1px solid var(--bord); border-radius:var(--r-1); }
.bloc-plancher > h2 { margin:0; font-size:.6875rem; letter-spacing:.16em; color:var(--gold-200); flex-basis:100%; }
.bloc-plancher form { display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-3) var(--e-5); margin:0; flex:1; min-width:0; }
.bloc-plancher fieldset { margin:0; padding:0; border:0; background:none; display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2) var(--e-4); }
.bloc-plancher legend { float:left; padding:0; margin-right:var(--e-2); font-family:var(--police-texte); font-size:var(--taille-s); font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--texte-doux); }
.bloc-plancher label { margin:0; }
.bloc-plancher .champ-ligne { display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2); min-width:0; color:var(--texte-doux); font-size:var(--taille-s); }
.bloc-plancher select { min-height:36px; }

.colonnes { display:grid; grid-template-columns:repeat(var(--nb-colonnes, 5), minmax(0, 1fr)); gap:var(--e-3); align-items:stretch; }
.colonnes:has(> .colonne:nth-child(2):last-child) { --nb-colonnes:2; }
.colonnes:has(> .colonne:nth-child(3):last-child) { --nb-colonnes:3; }
.colonnes:has(> .colonne:nth-child(4):last-child) { --nb-colonnes:4; }
.colonne { position:relative; display:flex; flex-direction:column; min-width:0; min-height:200px; background:var(--surface-3);
  border:1px solid var(--bord); border-top:3px solid var(--niveau, var(--carte-bord)); border-radius:var(--r-1);
  transition:background-color var(--duree-1), box-shadow var(--duree-1); }
/* Couleur d'une colonne : son NIVEAU réel (data-niveau, §1.6), pas sa clé (la colonne du minimum
   garde la clé « voit » même quand elle s'appelle « Poste », I1) ; data-cle reste au JS et aux e2e */
.colonne[data-niveau="aucun"] { --niveau:var(--carte-bord); }
.colonne[data-niveau="lit"] { --niveau:#8a7340; }
.colonne[data-niveau="repond"] { --niveau:var(--gold-700); }
.colonne[data-niveau="poste"] { --niveau:var(--gold-600); }
.colonne[data-niveau="gere"] { --niveau:var(--gold-400); }
.tete-colonne { display:flex; align-items:center; flex-wrap:wrap; gap:2px var(--e-2); padding:var(--e-3) var(--e-3) var(--e-2); }
.tete-colonne h3 { margin:0; font-size:var(--taille-xs); letter-spacing:.16em; color:var(--texte); }
.tete-colonne .nombre { margin-left:auto; min-width:22px; height:20px; padding:0 6px; display:inline-grid; place-items:center;
  font-family:var(--police-titre); font-size:.6875rem; font-weight:700; color:var(--texte-doux);
  background:var(--ink-950); border:1px solid var(--bord); border-radius:var(--r-pilule); }
.tete-colonne .aide-colonne { flex-basis:100%; margin:0; font-size:var(--taille-xs); color:var(--texte-faible); line-height:1.35; }
.liste-cartes { list-style:none; flex:1; display:flex; flex-direction:column; gap:6px; margin:0; padding:2px var(--e-2) var(--e-3); min-height:72px; }
.colonne:not(:has(.carte-role)) .liste-cartes { background:repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,.012) 8px 16px); }

/* Carte de rôle : styles autonomes (le fantôme est rattaché à <body>, §5.3) */
.carte-role { position:relative; display:grid; grid-template-columns:20px 10px minmax(0, 1fr) auto; grid-template-areas:"poignee pastille nom menu" ". . badges menu";
  align-items:center; column-gap:6px; row-gap:3px; min-height:40px; padding:4px 4px 4px 2px;
  color:var(--texte); background:var(--surface-2); border:1px solid var(--carte-bord); border-radius:var(--r-1);
  font-size:var(--taille-s); line-height:1.25; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.35);
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  transition:border-color var(--duree-1), box-shadow var(--duree-1), opacity var(--duree-1); }
.carte-role > .poignee { grid-area:poignee; }
.carte-role > .pastille-role { grid-area:pastille; }
.carte-role .nom-role { grid-area:nom; min-width:0; font-weight:600; overflow-wrap:anywhere; }
.carte-role .badges { grid-area:badges; display:flex; flex-wrap:wrap; gap:3px; }
.carte-role .badges:not(:has(*)) { display:none; }
.carte-role > .menu, .carte-role > .actions-carte { grid-area:menu; align-self:center; }
.carte-role > form:not(.form-geste) { grid-area:menu; }
.carte-role .badge { min-height:18px; padding:0 4px; font-size:.625rem; background:var(--ink-950); color:var(--texte); border-color:var(--carte-bord); }
.carte-role .badge.brouillon { background:var(--ink-950); color:var(--gold-300); border-color:var(--gold-400); }
.carte-role .badge.mention { color:var(--attention); border-color:var(--attention); }
.carte-role .badge.staff { color:var(--gold-200); background:var(--niv-lit-fond); border-color:var(--accent-trait); }
.carte-role .badge.particulier { color:var(--attention); border-color:var(--attention-bord); }
.carte-role .menu > summary { min-height:26px; min-width:26px; padding:0 3px; background:rgba(0,0,0,.22); border-color:transparent; color:inherit; }
.carte-role .menu > summary .texte-menu { display:none; }
.carte-role .menu-contenu { min-width:240px; }
.carte-role form.form-geste { display:none; }
.carte-role form.retirer { margin:0; }
/* « Retirer » (carte BROUILLON) : sur sa propre ligne sous les badges, jamais par-dessus le menu « Changer… » */
.carte-role > form.retirer { grid-area:auto; grid-column:3 / -1; grid-row:3; justify-self:start; }
.carte-role[data-glissable="0"] { border-style:dashed; }
.carte-role.modifie { box-shadow:inset 3px 0 0 var(--gold-400), 0 0 0 1px var(--gold-400), 0 2px 6px rgba(0,0,0,.35); padding-left:6px; }
.carte-role .particulier { cursor:help; }
@media (hover: hover) { .carte-role[data-glissable="1"]:hover { border-color:var(--gold-300); } }
/* Couleur de niveau selon la colonne (§1.6) */
.colonne[data-niveau="aucun"] .carte-role { background:var(--niv-aucun-fond); color:var(--niv-aucun-texte); border-style:dashed; }
.colonne[data-niveau="lit"] .carte-role { background:var(--niv-lit-fond); color:var(--niv-lit-texte); }
.colonne[data-niveau="repond"] .carte-role { background:var(--niv-repond-fond); color:var(--niv-repond-texte); }
.colonne[data-niveau="poste"] .carte-role { background:var(--niv-poste-fond); color:var(--niv-poste-texte); }
.colonne[data-niveau="gere"] .carte-role { background:var(--niv-gere-fond); color:var(--niv-gere-texte); }
.colonne[data-niveau="poste"] .carte-role .poignee, .colonne[data-niveau="gere"] .carte-role .poignee { color:rgba(8,7,6,.6); }
@media (hover: hover) { .colonne[data-niveau="poste"] .carte-role .poignee:hover, .colonne[data-niveau="gere"] .carte-role .poignee:hover { color:var(--ink-950); background:rgba(0,0,0,.12); } }
/* Tableau verrouillé (salon qui suit) ou en lecture seule (protégé) */
[data-verrouille="1"] .colonnes, .lecture-seule .colonnes { opacity:.6; }
[data-verrouille="1"] .carte-role .poignee, .lecture-seule .carte-role .poignee { display:none; }
.ne-glissent-pas { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1) var(--e-3); margin:var(--e-3) 0 0; font-size:var(--taille-s); color:var(--texte-doux); }
.ne-glissent-pas > strong { font-family:var(--police-titre); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-faible); }
.ne-glissent-pas .icone { color:var(--texte-faible); width:14px; height:14px; }
.role-fixe { display:inline-flex; align-items:center; gap:var(--e-1); }
.legende { display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-5); margin:var(--e-2) 0 0; font-size:var(--taille-xs); color:var(--texte-faible); }
.legende .icone { width:14px; height:14px; }

/* Ancienne grille des rôles (lot 1a, pages de création) */
.grille-roles { border-collapse:collapse; width:100%; margin:var(--e-3) 0; font-size:var(--taille-s); }
.grille-roles th, .grille-roles td { padding:var(--e-2) var(--e-3); border-bottom:1px solid var(--bord); text-align:left; }
.grille-roles thead th { font-family:var(--police-titre); font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-doux); }
@media (hover: hover) { .grille-roles tbody tr:hover { background:var(--surface-2); } }
.grille-colonnes td, .grille-colonnes th { text-align:center; }
.grille-colonnes th[scope="row"] { text-align:left; }
.grille-colonnes thead th[class^="niv-col-"] { background:none; border-bottom:3px solid var(--carte-bord); }
.grille-colonnes thead th.niv-col-voit { border-bottom-color:#8a7340; }
.grille-colonnes thead th.niv-col-repondre { border-bottom-color:var(--gold-700); }
.grille-colonnes thead th.niv-col-poster { border-bottom-color:var(--gold-600); }
.grille-colonnes thead th.niv-col-gerer { border-bottom-color:var(--gold-400); }
.radio-colonne { display:inline-grid; place-items:center; min-width:32px; min-height:32px; margin:0; cursor:pointer; }
.radio-colonne input { margin:0; }
.herite { opacity:.55; }
.herite .grille-roles, .herite .plancher { background:var(--surface-2); }
.bloc-avance { border-top:1px solid var(--bord); padding-top:var(--e-2); }

/* Création : types en cartes radio (§2.4) */
.choix-type { display:flex; flex-wrap:wrap; gap:var(--e-2); border:0; padding:0; margin:0; background:none; }
.choix-type label { position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--e-1); width:104px; padding:var(--e-3) var(--e-2); margin:0;
  font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--surface-3); border:1px solid var(--carte-bord); border-radius:var(--r-1); cursor:pointer; }
.choix-type label .icone { width:22px; height:22px; color:var(--accent-texte); }
.choix-type input { position:absolute; opacity:0; width:1px; height:1px; }
.choix-type label:has(input:checked) { border-color:var(--gold-400); background:var(--niv-lit-fond); color:var(--gold-200); }
.choix-type label:has(input:focus-visible) { box-shadow:var(--halo-focus); }
.etapes { list-style:none; margin:0; padding:0; }
.etapes > li { display:grid; grid-template-columns:28px 120px minmax(0, 1fr); gap:var(--e-3) var(--e-4); align-items:start; padding:var(--e-4) 0; border-top:1px solid var(--bord); }
.etapes > li:first-child { border-top:0; }
.etapes .numero-etape { display:grid; place-items:center; width:28px; height:28px; font-family:var(--police-titre); font-weight:700;
  color:var(--ink-950); background:var(--accent); clip-path:polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.etapes .nom-etape { font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-200); padding-top:5px; }
.etapes > li.section-forum { display:none; }   /* .etapes > li (grille) l'emporterait sur une classe seule */
.formulaire-creation:has(input[name="type"][value="forum"]:checked) .etapes > li.section-forum { display:grid; }
@supports not selector(:has(*)) { .etapes > li.section-forum { display:grid; } }
/* Droits : « Suivre » ou « Droits propres » (§2.4) ; le plancher et la grille seulement pour des droits propres */
.choix-suivi { display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-5); border:0; padding:0; margin:0 0 var(--e-3); background:none; }
.choix-suivi label { display:inline-flex; align-items:center; gap:var(--e-2); margin:0; font-weight:600; }
.choix-suivi .note-sans-categorie { display:none; flex-basis:100%; margin:0; }
.formulaire-creation:has(input[name="suivre"][value="1"]:checked):not(:has(#parent_id option[value=""]:checked)) .si-propres { display:none; }
.formulaire-creation:has(#parent_id option[value=""]:checked) .option-suivre { display:none; }
.formulaire-creation:has(#parent_id option[value=""]:checked) .note-sans-categorie { display:block; }
@supports not selector(:has(*)) { .si-propres { display:block; } }

/* ===================== 8. États de glisser (§1.5) ===================== */
/* Source : la place d'origine, pâle et pointillée */
.glisse-source { opacity:.35; outline:1px dashed var(--accent-trait); outline-offset:-1px; }
/* Emplacement : l'élément glissé posé à l'endroit d'insertion (Sortable le déplace dans la liste) */
.glisse-emplacement { opacity:1; outline:0; }
.carte-role.glisse-emplacement { background:rgba(207,155,52,.08) !important; border:1px dashed var(--gold-400) !important; box-shadow:none !important; }
.carte-role.glisse-emplacement > * { visibility:hidden; }
.salon.glisse-emplacement { background:transparent !important; box-shadow:none !important; }
.salon.glisse-emplacement > * { visibility:hidden; }
.salon.glisse-emplacement::before { content:""; position:absolute; left:var(--e-2); right:var(--e-2); top:calc(50% - 1.5px); height:3px;
  background:var(--gold-400); border-radius:2px; box-shadow:0 0 0 1px rgba(8,7,6,.8), 0 0 12px rgba(224,181,78,.55); }
.salon.glisse-emplacement::after { content:""; position:absolute; left:var(--e-2); top:calc(50% - 5px); width:10px; height:10px; border-radius:50%;
  background:var(--gold-400); box-shadow:0 0 0 2px var(--ink-950); }
.jeton-role.glisse-source { opacity:.5; }
/* Fantôme : copie qui suit le pointeur, rattachée à <body> ; « rotate » se compose avec le transform de Sortable */
.glisse-fantome { opacity:.96 !important; box-shadow:var(--ombre-levee) !important; rotate:1.5deg; background:var(--surface-2) !important;
  color:var(--texte) !important; border-style:solid !important; outline:0 !important; cursor:grabbing !important; z-index:1000 !important; }
.glisse-fantome > * { visibility:visible !important; }
.glisse-fantome.salon::before, .glisse-fantome.salon::after { content:none; }
.glisse-fantome .menu, .glisse-fantome form, .glisse-fantome .actions, .glisse-fantome .ligne-acces, .glisse-fantome .depot-acces,
.glisse-fantome .etiquette-zone { display:none !important; }
.salon.glisse-fantome { width:360px !important; max-width:calc(100vw - 32px); }
.salon.glisse-fantome .resume, .salon.glisse-fantome .puces-acces { display:none !important; }   /* une ligne : nom, type, état */
.glisse-fantome.retrait { box-shadow:0 14px 34px rgba(0,0,0,.7), 0 0 0 2px var(--danger) !important; }
body.glisse, body.glisse * { cursor:grabbing !important; }
body.glisse .zone-interdite, body.glisse .zone-interdite * { cursor:not-allowed !important; }
body.glisse { -webkit-user-select:none; user-select:none; }

/* Zones de dépôt */
.zone-permise { outline:2px dashed var(--accent-trait); outline-offset:-2px; background-color:rgba(207,155,52,.06); }
.zone-survol { outline:2px solid var(--gold-400); outline-offset:-2px; background-color:rgba(207,155,52,.14); }
.zone-interdite { outline:2px dashed var(--danger); outline-offset:-2px; background-color:rgba(248,113,113,.05); }
.zone-interdite.zone-survol { outline:2px solid var(--danger); background-color:rgba(248,113,113,.11); }
.salon.zone-permise, .salon.zone-survol, .salon.zone-interdite { z-index:1; }
/* Listes de salons : les lignes sont positionnées et couvriraient le contour ; on le trace par-dessus */
.salons.zone-permise, .salons.zone-survol, .salons.zone-interdite { outline:0; background-color:transparent; }
.salons.zone-permise::after, .salons.zone-survol::after, .salons.zone-interdite::after { content:""; position:absolute; inset:0; z-index:4;
  pointer-events:none; border:2px dashed var(--accent-trait); }
.salons.zone-survol::after { border-style:solid; border-color:var(--gold-400); background:rgba(207,155,52,.07); box-shadow:0 0 22px rgba(224,181,78,.18); }
.salons.zone-interdite::after { border-color:var(--danger); background:rgba(248,113,113,.05); }
.salons.zone-interdite.zone-survol::after { border-style:solid; background:rgba(248,113,113,.10); box-shadow:none; }
.colonne.zone-survol { box-shadow:0 0 0 1px var(--gold-400), 0 0 24px rgba(224,181,78,.2); }
.colonne.zone-survol .liste-cartes { background:none; }
/* Liste vide pendant le glisser : ligne « déposer ici » (§3.3) */
.glisse-salons .salons.zone-permise:not(:has(> li)) { min-height:40px; display:flex; align-items:center; justify-content:center; }
.glisse-salons .salons.zone-permise:not(:has(> li))::before { content:"déposer ici"; color:var(--texte-doux); font-size:.6875rem;
  font-family:var(--police-titre); letter-spacing:.14em; text-transform:uppercase; }
/* Étiquette de zone (posée par gestes.js, visible au survol) : « Déposer : Poste », « Interdit : … » */
.etiquette-zone { position:absolute; z-index:6; display:none; align-items:center; gap:var(--e-1);
  max-width:calc(100% - var(--e-4)); padding:3px var(--e-2); font-family:var(--police-titre); font-size:.6875rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.2; color:var(--ink-950); background:var(--gold-400); border-radius:var(--r-1);
  pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 4px 12px rgba(0,0,0,.5); }
.etiquette-zone .icone { width:13px; height:13px; }
.etiquette-zone.visible { display:inline-flex; }
.etiquette-zone.interdite { color:#fff; background:var(--danger-plein); }
.colonne > .etiquette-zone { left:50%; top:-12px; transform:translateX(-50%); }
.salon > .etiquette-zone, .tete-categorie > .etiquette-zone { right:var(--e-5); top:50%; transform:translateY(-50%); }
.categorie > .etiquette-zone { right:var(--e-5); top:-11px; }
/* Occupé : un geste à la fois (§3.0-5) */
[data-gestes][aria-busy="true"] { cursor:progress; }
[data-gestes][aria-busy="true"] .poignee { cursor:progress; opacity:.5; }

/* ===================== 9. Barre du brouillon, annonces, aperçu (§2.6, §3.0) ===================== */
.barre-brouillon { position:fixed; z-index:45; left:0; right:0; bottom:0; padding:0 var(--e-5);
  background:rgba(13,11,9,.96); border-top:1px solid var(--accent-trait); box-shadow:0 -10px 28px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.barre-brouillon:empty, .barre-brouillon.vide { display:none; }
.barre-ligne, .dernier-geste { max-width:var(--largeur-page); margin:0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2) var(--e-4); }
.barre-ligne { min-height:var(--hauteur-barre); }
.barre-etat { display:flex; align-items:center; gap:var(--e-3); flex:1 1 auto; min-width:0; font-size:var(--taille-s); color:var(--texte-doux); }
.barre-etat strong { font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-200); }
.barre-etat .nombre { color:var(--texte); font-weight:600; }
.point-brouillon { width:10px; height:10px; flex:none; border-radius:50%; background:var(--gold-400); box-shadow:0 0 0 3px rgba(224,181,78,.2), 0 0 10px rgba(224,181,78,.6); }
.barre-brouillon .actions { flex-wrap:nowrap; }
.dernier-geste { min-height:40px; padding:0 0 var(--e-1); border-top:1px dashed var(--bord); font-size:var(--taille-s); color:var(--texte-doux); }
.dernier-geste:empty { display:none; }
.dernier-geste .texte { flex:1 1 auto; min-width:0; }
.dernier-geste .texte strong { color:var(--texte); font-weight:600; }
.dernier-geste form { margin:0; }
.dernier-geste .court { display:none; }

.annonces { position:fixed; z-index:70; right:var(--e-5); bottom:calc(var(--hauteur-barre) + 40px + var(--e-4)); width:min(420px, calc(100vw - 2 * var(--e-4)));
  display:flex; flex-direction:column; gap:var(--e-2); pointer-events:none; }
.annonce { pointer-events:auto; position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2) var(--e-3);
  padding:var(--e-3) var(--e-3) var(--e-3) calc(var(--e-4) + 4px); color:var(--texte); background:var(--surface-2);
  border:1px solid var(--carte-bord); border-radius:var(--r-2); box-shadow:var(--ombre-2); font-size:var(--taille-s); overflow:hidden;
  animation:annonce-entree var(--duree-2) var(--courbe); }
.annonce::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold-400); }
.annonce .texte { flex:1 1 220px; min-width:0; }
.annonce form { margin:0; }
.annonce .fermer { margin-left:auto; }
.annonce.ok::before { background:var(--succes); }
.annonce.info::before { background:var(--info); }
.annonce.avertissement::before { background:var(--attention); }
.annonce.erreur { border-color:var(--danger-bord); background:linear-gradient(90deg, var(--danger-fond), var(--surface-2) 70%); }
.annonce.erreur::before { background:var(--danger); }
/* Aperçu ouvert : les annonces ne recouvrent jamais « Appliquer » (pied du tiroir). Tiroir à droite :
   la pile passe à sa gauche ; feuille plein écran : elle passe en haut, sous la tête et le mini-bandeau. */
body:has(#panneau:not(:empty)) .annonces { right:calc(min(560px, 100vw) + var(--e-4)); }
.annonce.sortie { opacity:0; transform:translateY(6px); transition:opacity var(--duree-2), transform var(--duree-2); }
@keyframes annonce-entree { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Tiroir d'aperçu : à droite (≥ 1100 px), sinon feuille plein écran (§2.6) */
.panneau:empty { display:none; }
.panneau:not(:empty) { position:fixed; z-index:55; top:calc(var(--hauteur-bandeau) + var(--hauteur-entete)); right:0; bottom:0; width:min(560px, 100vw);
  display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain; background:var(--surface);
  border-left:1px solid var(--accent-trait); box-shadow:-18px 0 40px rgba(0,0,0,.6); animation:tiroir-entree var(--duree-2) var(--courbe); }
@keyframes tiroir-entree { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }
.panneau .carte { margin:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.panneau .carte::before { display:none; }
.tete-panneau { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:var(--e-3); padding:var(--e-3) var(--e-5);
  background:var(--ink-850); border-bottom:1px solid var(--bord); }
.tete-panneau h2 { margin:0; flex:1; font-size:var(--taille-s); letter-spacing:.16em; color:var(--accent-texte); }
.panneau .bandeau-mini { position:sticky; top:57px; z-index:2; }
.corps-panneau { flex:1; padding:var(--e-4) var(--e-5) var(--e-5); }
.section-apercu { margin:0 0 var(--e-5); }
.section-apercu > h3 { display:flex; align-items:center; gap:var(--e-2); margin:0 0 var(--e-2); font-size:.625rem; letter-spacing:.18em; color:var(--texte-doux); }
.section-apercu > h3::after { content:""; flex:1; height:1px; background:var(--bord); }
.phrase { margin:0; font-size:var(--taille-m); line-height:1.55; padding:var(--e-3) var(--e-4); background:var(--surface-2); border:1px solid var(--bord); border-left:3px solid var(--accent); border-radius:var(--r-1); }
.alertes-apercu { display:grid; gap:var(--e-2); }
.alertes-apercu .alerte { margin:0; }
.verrous, .deplacements { list-style:none; margin:0; padding:0; }
.verrous li, .deplacements li { display:flex; align-items:center; gap:var(--e-2); padding:var(--e-1) 0; }
.verrous .icone, .deplacements .icone { color:var(--accent-texte); }
.dialogue-page { max-width:620px; margin:var(--e-5) auto; padding:0; overflow:hidden; }
.pied-apercu { position:sticky; bottom:0; padding:var(--e-4) var(--e-5); background:var(--ink-850); border-top:1px solid var(--accent-trait); display:grid; gap:var(--e-3); }
.pied-apercu label { margin:0; font-family:var(--police-titre); font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-doux); }
.pied-apercu textarea, .pied-apercu input[type=text] { max-width:none; }
.pied-apercu .actions { justify-content:flex-end; }
.actions-apercu { display:grid; grid-template-columns:1fr 1fr; gap:var(--e-2); }
.actions-apercu > .principal { grid-column:1 / -1; justify-content:center; }
.actions-apercu > .bouton:not(.principal) { justify-content:center; white-space:normal; text-align:center; padding:var(--e-1) var(--e-2); }
.bouton.abandon { color:var(--texte-doux); }
@media (hover: hover) { .bouton.abandon:hover { color:var(--danger); border-color:var(--danger-bord); background:var(--danger-fond); } }
.bouton.abandon:focus-visible { color:var(--danger); }
/* Suivi « Appliqué » : une rangée de boutons égaux, qui passe à la ligne de façon régulière */
.actions-suivi { display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }
.actions-suivi > .bouton, .actions-suivi > form { flex:1 1 12rem; }
.actions-suivi > form .bouton { width:100%; justify-content:center; }
.actions-suivi > .bouton { justify-content:center; }
/* Détail par profil, replié (dialogue « Que deviennent ses droits ? ») */
.detail-profils { margin:var(--e-2) 0 0; }
.detail-profils > summary { cursor:pointer; color:var(--accent-texte); font-size:var(--taille-xs); }
.detail-profils .detail { display:block; margin-top:var(--e-1); font-size:var(--taille-xs); color:var(--texte-doux); }
.apercu .serveur { color:var(--texte-doux); margin:0 0 var(--e-4); font-size:var(--taille-s); }
.operations { margin:var(--e-1) 0 var(--e-3); padding:0; list-style:none; }
.operations li { display:flex; align-items:center; gap:var(--e-3); margin:0; padding:var(--e-2) 0; border-bottom:1px solid var(--bord); }
.operations li:last-child { border-bottom:0; }
.operations .numero { font-family:var(--police-titre); font-size:var(--taille-xs); color:var(--texte-faible); min-width:2.5ch; text-align:right; font-variant-numeric:tabular-nums; }
.operations li > .icone { color:var(--accent-texte); }
.operations .libelle { flex:1; min-width:0; }
.operations form { margin:0; }
.groupe-brouillon { margin:0 0 var(--e-3); border:1px solid var(--bord); border-radius:var(--r-1); background:var(--surface); box-shadow:var(--ombre-1); }
.groupe-brouillon > h2 { margin:0; padding:var(--e-2) var(--e-4); font-size:.6875rem; letter-spacing:.16em; color:var(--gold-200);
  background:var(--surface-2); border-bottom:1px solid var(--bord); display:flex; align-items:center; gap:var(--e-2); }
.groupe-brouillon > h2 .icone { color:var(--accent-texte); }
.groupe-brouillon .operations { margin:0; padding:0 var(--e-4); }
.groupe-brouillon .operations li { min-height:52px; }
progress { width:100%; max-width:420px; height:10px; appearance:none; -webkit-appearance:none; border:1px solid var(--carte-bord); border-radius:var(--r-pilule);
  background:var(--surface-3); overflow:hidden; }
progress::-webkit-progress-bar { background:var(--surface-3); }
progress::-webkit-progress-value { background:linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
progress::-moz-progress-bar { background:linear-gradient(90deg, var(--gold-600), var(--gold-400)); }

/* ===================== 10. Autres pages ===================== */
/* Tables (effet, simulateur, journal détaillé) */
.defile { position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; }   /* relative : les .cache absolus restent dans le défilement */
table.effets, table.simulation, table.operations-detail { border-collapse:separate; border-spacing:0; width:100%; font-size:var(--taille-s); }
table.effets th, table.effets td, table.simulation th, table.simulation td,
table.operations-detail th, table.operations-detail td { border-bottom:1px solid var(--bord); padding:var(--e-2) var(--e-3); text-align:left; vertical-align:middle; }
table.effets thead th, table.simulation thead th, table.operations-detail thead th {
  background:var(--surface-2); font-family:var(--police-titre); font-size:.6875rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texte-doux); border-bottom:1px solid var(--carte-bord); }
table.simulation tbody th { position:sticky; left:0; background:var(--surface); z-index:1; font-weight:600; }
@media (hover: hover) { table.simulation tbody tr:hover th, table.simulation tbody tr:hover td { background-color:var(--surface-2); } }
table.simulation td.n-aucun { color:var(--texte-faible); }
table.simulation td.n-gere { font-weight:700; }
table.simulation tr.ecart td, table.simulation tr.ecart th { background-color:var(--attention-fond); }
.niveau-cellule { display:inline-flex; align-items:center; min-height:24px; padding:0 var(--e-2); border:1px solid var(--carte-bord); border-radius:var(--r-1);
  font-family:var(--police-titre); font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.passe-a { color:var(--accent-texte); margin:0 var(--e-1); }
.colonnes-sim { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--e-4); }
.case { display:block; margin:var(--e-1) 0; }
/* Simulateur : les rôles à cocher en grille (2 ou 3 par ligne) ; « ou profil type » et sa liste sur toute la largeur */
.colonnes-sim fieldset { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); column-gap:var(--e-4); align-content:start; }
.colonnes-sim fieldset > :not(.case) { grid-column:1 / -1; }
.colonnes-sim fieldset > label:not(.case) { margin-top:var(--e-3); }

/* Journal : frise verticale (§2.7) */
.frise { position:relative; list-style:none; margin:0; padding:0 0 0 var(--e-5); }
.frise::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--accent-trait), var(--bord)); }
.frise:not(:has(.ligne-journal))::before { display:none; }
.ligne-journal { position:relative; display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-3); align-items:center; padding:var(--e-3) var(--e-2);
  border-bottom:1px solid var(--bord); }
.frise > .ligne-journal::before { content:""; position:absolute; left:calc(-1 * var(--e-5) + 3px); top:calc(50% - 5px); width:10px; height:10px;
  background:var(--ink-950); border:2px solid var(--gold-500); transform:rotate(45deg); }
.ligne-journal .date { color:var(--texte-doux); font-variant-numeric:tabular-nums; font-family:var(--police-titre); font-size:var(--taille-xs); min-width:9ch; }
.ligne-journal .auteur { font-weight:600; }
.ligne-journal .raison { color:var(--texte-doux); font-style:italic; }
.ligne-journal .actions { margin-left:auto; }
.etat-echec, .etat-interrompu { color:var(--danger); }
.etat-termine { color:var(--succes); }
.meta { display:grid; grid-template-columns:max-content 1fr; gap:var(--e-1) var(--e-5); margin:0 0 var(--e-4); }
.meta dt, .message-echec dt { font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--texte-doux); }
.meta dd { margin:0; }
.message-echec dd { margin:0 0 var(--e-2) 0; }
details.techniques { margin:var(--e-3) 0; border:1px solid var(--bord); border-radius:var(--r-1); background:var(--ink-850); }
details.techniques > summary { cursor:pointer; padding:var(--e-2) var(--e-4); font-family:var(--police-titre); font-size:var(--taille-xs);
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-doux); }
details.techniques[open] > summary { border-bottom:1px solid var(--bord); }
details.techniques > :not(summary) { padding:var(--e-3) var(--e-4); }
pre { font-family:var(--police-titre); font-size:var(--taille-xs); color:var(--texte-doux); white-space:pre-wrap; word-break:break-all; margin:0; }

/* Connexion (§2.8) et erreur (§2.9) */
.page-centree { display:grid; place-items:center; min-height:calc(100vh - var(--hauteur-bandeau) - var(--hauteur-entete) - 3px - var(--e-7)); }
.carte-connexion { width:min(440px, 100%); text-align:center; padding:var(--e-6) var(--e-6) var(--e-5); margin:0;
  background:linear-gradient(180deg, rgba(207,155,52,.07), transparent 240px), var(--surface); }
.carte-connexion::after { content:""; position:absolute; right:-1px; bottom:-1px; width:32px; height:2px; background:var(--blood-500); }
.logo-connexion { display:block; width:160px; height:160px; margin:0 auto var(--e-3); filter:drop-shadow(0 10px 26px rgba(220,38,38,.28)); }
.carte-connexion h1 { margin:0; font-size:var(--taille-xl); letter-spacing:.22em; color:var(--gold-200); }
.carte-connexion .sous-titre { margin:var(--e-2) 0 var(--e-5); font-family:var(--police-titre); font-weight:700; font-size:var(--taille-xs);
  letter-spacing:.3em; text-transform:uppercase; color:var(--blood-300); }
.carte-connexion p { text-align:left; }
.carte-connexion .bouton.principal { width:100%; min-height:48px; font-size:var(--taille-s); margin:var(--e-2) 0 var(--e-4); }
.carte-connexion .aide { text-align:center; font-size:var(--taille-xs); margin:0; }
.carte-erreur { width:min(560px, 100%); margin:0; }
.code-erreur { font-family:var(--police-titre); font-weight:700; font-size:4rem; line-height:1; color:var(--accent-texte); letter-spacing:.04em; margin:0 0 var(--e-2);
  text-shadow:0 0 30px rgba(207,155,52,.25); }
.code-erreur.serveur { color:var(--danger); text-shadow:0 0 30px rgba(220,38,38,.3); }

/* ===================== 11. Toucher, écrans moyens et téléphone (< 700 px, §2.10) ===================== */
@media (pointer: coarse) {
  .salon { min-height:48px; }
  .carte-role { min-height:48px; }
  .bouton, button.petit, .menu > summary, .jeton-armer { min-height:44px; min-width:44px; }
  .puce-acces button { width:32px; height:32px; }
  .carte-role .menu > summary .texte-menu { display:inline; }
}
@media (max-width: 1099px) {
  .panneau:not(:empty) { width:100vw; top:0; z-index:80; border-left:0; }
  body:has(#panneau:not(:empty)) .annonces { z-index:85; left:var(--e-3); right:var(--e-3); width:auto; top:104px; bottom:auto; }
}
@media (max-width: 1100px) {
  .colonnes { grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 700px) {
  :root { --hauteur-bandeau:28px; --hauteur-entete:56px; }
  .page { padding:var(--e-3) var(--e-4) calc(var(--hauteur-barre) + 104px); }
  .carte { padding:var(--e-4) var(--e-3); }
  h1 { font-size:var(--taille-l); }
  .bandeau { font-size:var(--taille-xs); padding-right:var(--e-3); flex-wrap:nowrap; overflow:hidden; }
  .bandeau .note, .bandeau .id { display:none; }
  .bandeau .court { display:inline; font-family:var(--police-titre); }
  .entete { padding:var(--e-2) var(--e-4); gap:var(--e-2); }
  .marque .logo { width:32px; height:32px; }
  .marque-sous { display:none; }
  .entete .bouton-menu { display:inline-flex; margin-left:auto; }
  .js .navigation:not(.ouverte) { display:none; }
  .navigation { flex-basis:100%; flex-direction:column; align-items:stretch; gap:var(--e-2); padding:var(--e-2) 0; border-top:1px solid var(--bord); }
  .onglets { flex-direction:column; }
  .onglet { border-bottom:0; border-left:2px solid transparent; min-height:44px; }
  .onglet.actif, .onglet[aria-current="page"] { border-left-color:var(--blood-500); background:var(--surface-2); }
  .compte { margin-left:0; padding-top:var(--e-2); border-top:1px solid var(--bord); }
  .tete-page .outils { width:100%; }
  .recherche { max-width:none; }
  .zone-arbre { grid-template-columns:1fr; }
  /* Palette : repliée en tête de l'arbre ; « Ouvrir » la déplie (mode toucher : armer, replier, « Donner ici ») */
  .panneau-palette { position:static; max-height:none; padding:var(--e-2) var(--e-3); }
  .js .panneau-palette:not(.ouverte) > :not(.tete-palette) { display:none; }
  .tete-palette { margin:0; }
  .js .tete-palette .bascule-palette { display:inline-flex; }
  .panneau-palette.ouverte .tete-palette { margin-bottom:var(--e-2); }
  .salon .actions > a.bouton-fiche { display:none; }      /* le nom du salon et le menu [⋯] mènent à la fiche */
  /* Le menu [⋯] reste sur la ligne du nom ; « suit la catégorie » et le résumé passent dessous. */
  .salon:not(.glisse-emplacement)::after { content:""; order:2; flex-basis:100%; height:0; }
  .salon > .suivi, .salon > .badge.ne-suit-plus, .salon > .resume { order:3; }
  .salon > .ligne-acces { order:4; }
  .salon > .resume { font-size:var(--taille-xs); }
  .tete-categorie h2 { flex:1 1 0; min-width:0; }      /* le nom reste à côté de son icône ; les badges passent dessous */
  .etat-salon .sep { display:none; }
  .tete-categorie, .salon { padding-left:var(--e-2); padding-right:var(--e-2); }
  .salon .suivi { font-size:var(--taille-xs); }
  .salon > .ligne-acces { padding-left:var(--e-2); }
  .tete-categorie .resume { flex-basis:100%; order:3; font-size:var(--taille-xs); }
  .tete-categorie > .ligne-acces { order:4; }
  .colonnes { grid-template-columns:1fr; }
  .colonne { min-height:0; }
  .liste-cartes { min-height:48px; }
  .carte-role .menu > summary .texte-menu { display:inline; }
  .carte-role .menu > summary { padding:0 var(--e-2); }
  .tete-fiche h1 { font-size:var(--taille-l); }
  .barre-brouillon { padding:0 var(--e-3); }
  .barre-ligne { flex-wrap:nowrap; gap:var(--e-2); }
  .barre-etat { gap:var(--e-2); }
  .barre-etat strong, .barre-etat .detail { display:none; }
  .barre-etat .nombre { white-space:nowrap; }
  .barre-brouillon .bouton.principal { font-size:.6875rem; letter-spacing:.04em; min-width:0; white-space:normal; text-align:center; }
  .barre-brouillon .actions .secondaire { display:none; }
  .barre-brouillon .bouton { padding:0 var(--e-3); }
  .dernier-geste { min-height:0; padding:0 0 var(--e-2); border-top:0; }
  .dernier-geste .texte, .dernier-geste .long { display:none; }
  .dernier-geste .court { display:inline; }
  .annonces { right:var(--e-3); left:var(--e-3); width:auto; bottom:calc(var(--hauteur-barre) + 60px); }
  .etapes > li { grid-template-columns:28px minmax(0, 1fr); }
  .etapes > li > :last-child { grid-column:1 / -1; }
  .grille-roles thead { display:none; }
  .grille-roles:not(.grille-colonnes), .grille-roles:not(.grille-colonnes) tbody, .grille-roles:not(.grille-colonnes) tr,
  .grille-roles:not(.grille-colonnes) th, .grille-roles:not(.grille-colonnes) td { display:block; width:100%; }
  .grille-roles tr { border-bottom:1px solid var(--bord); padding:var(--e-1) 0; }
  .grille-roles td::before { content:attr(data-etiquette) " : "; color:var(--texte-doux); }
  .meta { grid-template-columns:1fr; }
  .dialogue { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; border:0; }
  .pied-dialogue { position:sticky; bottom:0; }
  .carte-connexion { padding:var(--e-5) var(--e-4); }
}

/* ===================== 12. Mouvement réduit, impression ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0ms !important; animation-iteration-count:1 !important; transition-duration:0ms !important; scroll-behavior:auto !important; }
  .htmx-request .bouton[type="submit"]::after, .htmx-request button.petit[type="submit"]::after, .bouton.htmx-request::after { animation:none; width:100%; opacity:.6; }
  .glisse-fantome { rotate:0deg; }
}
@media print {
  :root { color-scheme:light; }
  body { background:#fff !important; color:#000; }
  .hazard, .entete, .barre-brouillon, .annonces, .panneau-palette, .poignee, .menu, .bouton, button { display:none !important; }
  .bandeau { position:static; background:none; color:#000; border:1px solid #000; }
  .bandeau strong { background:none; }
  .carte, .categorie, .colonne, .panneau:not(:empty) { position:static; background:#fff; color:#000; box-shadow:none; border:1px solid #999; width:auto; }
  h1, h2, h3, a { color:#000; }
  .page { padding:0; max-width:none; }
}

/* ===================== 6 bis. Arborescence en deux panneaux, « comme Discord » =====================
   À gauche nav#arbre (.arbre-serveur) : la liste des salons, collante sous l'en-tête et qui défile
   seule ; à droite section#detail (.panneau-detail) : qui voit, qui écrit, qui gère, et le tableau
   des droits quand on demande « Changer les accès ». Au téléphone : une vue à la fois (.arbo[data-vue]). */
.arbo { display:grid; grid-template-columns:340px minmax(0, 1fr); gap:var(--e-5); align-items:start; }
.zone-arbre.colonne-arbre { display:block; position:sticky; top:calc(var(--hauteur-bandeau) + var(--hauteur-entete) + var(--e-3));
  max-height:calc(100vh - var(--hauteur-bandeau) - var(--hauteur-entete) - var(--hauteur-barre) - var(--e-6));
  overflow:auto; overscroll-behavior:contain; background:var(--surface); border:1px solid var(--bord); border-radius:var(--r-1); }
/* barre du brouillon sur deux lignes (« Dernier geste ») : le pied de l'arbre reste au-dessus */
body:has(#dernier-geste:not(:empty)) .zone-arbre.colonne-arbre {
  max-height:calc(100vh - var(--hauteur-bandeau) - var(--hauteur-entete) - var(--hauteur-barre) - 48px - var(--e-6)); }
.arbre-serveur { min-width:0; }
.arbre-serveur .tete-arbre { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center;
  gap:var(--e-2); padding:var(--e-3); background:var(--surface); border-bottom:1px solid var(--bord); }
.arbre-serveur .nom-serveur { margin:0; font-size:var(--taille-s); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-200);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arbre-serveur .filtre-salons { grid-column:1 / -1; width:100%; min-height:34px; }
.arbre-serveur .categories { list-style:none; margin:0; padding:var(--e-1) 0 var(--e-2); }
.arbre-serveur .categorie { margin:0; padding:0; background:none; border:0; border-radius:0; box-shadow:none; }
.arbre-serveur .tete-categorie { display:flex; flex-wrap:nowrap; align-items:center; gap:2px; padding:var(--e-3) var(--e-2) 2px var(--e-1);
  background:none; border:0; isolation:auto; }
.arbre-serveur .tete-categorie::before, .arbre-serveur .tete-categorie::after { content:none; }
.arbre-serveur .chevron { display:none; place-items:center; width:22px; height:22px; flex:none; padding:0; color:var(--texte-faible);
  background:none; border:0; border-radius:var(--r-1); cursor:pointer; }
.js .arbre-serveur .chevron { display:inline-grid; }
.arbre-serveur .chevron .icone { width:12px; height:12px; transition:transform var(--duree-1); }
/* le chevron du sprite pointe à droite : vers le bas quand la catégorie est dépliée, comme Discord */
.arbre-serveur .chevron[aria-expanded="true"] .icone { transform:rotate(90deg); }
.arbre-serveur .lien-categorie { flex:1; min-width:0; padding:2px var(--e-1); font-family:var(--police-titre); font-weight:700; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--texte-doux); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border-radius:var(--r-1); }
.arbre-serveur a.lien-categorie[aria-current="true"] { color:var(--accent-texte); background:var(--surface-3); box-shadow:inset 3px 0 0 var(--gold-400); }
.arbre-serveur .contenu-categorie[hidden] { display:none; }
.arbre-serveur .salons { padding:0 var(--e-2); }
.arbre-serveur .salon { display:flex; flex-wrap:nowrap; align-items:center; gap:var(--e-1); min-height:34px; margin:1px 0; padding:0 var(--e-1) 0 var(--e-2);
  background:none; border:0; border-radius:var(--r-1); box-shadow:none; }
.arbre-serveur .salons > .salon:first-child { border-top:0; }
.arbre-serveur .lien-salon { display:flex; align-items:center; gap:var(--e-2); flex:1; min-width:0; padding:6px 0; color:var(--texte-doux); text-decoration:none; }
.arbre-serveur .lien-salon > .icone { flex:none; width:16px; height:16px; color:var(--texte-faible); }
.arbre-serveur .lien-salon .nom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; color:inherit; }
@media (hover: hover) {
  .arbre-serveur .salon:hover { background:var(--surface-2); }
  .arbre-serveur .salon:hover .lien-salon, .arbre-serveur a.lien-categorie:hover { color:var(--texte); }
}
.arbre-serveur .salon.choisi { background:var(--surface-3); box-shadow:inset 3px 0 0 var(--gold-400); }
.arbre-serveur .salon.choisi .lien-salon { color:var(--texte); }
.arbre-serveur .salon.choisi .lien-salon > .icone { color:var(--accent-texte); }
.arbre-serveur .salon.modifie, .arbre-serveur .salon.nouveau { box-shadow:inset 3px 0 0 var(--accent-trait); }
.arbre-serveur .lien-salon:focus-visible, .arbre-serveur .lien-categorie:focus-visible, .arbre-serveur .chevron:focus-visible { outline:2px solid var(--gold-400); outline-offset:1px; }
.arbre-serveur .marque { display:inline-grid; place-items:center; flex:none; width:18px; height:18px; color:var(--texte-faible); }
.arbre-serveur .marque .icone { width:13px; height:13px; }
.arbre-serveur .marque.protege { color:var(--gold-300); }
.arbre-serveur .salon > .poignee { flex:none; width:20px; height:26px; opacity:0; transition:opacity var(--duree-1); }
.arbre-serveur .salon:hover > .poignee, .arbre-serveur .salon:focus-within > .poignee, .glisse-salons .arbre-serveur .salon > .poignee { opacity:1; }
.arbre-serveur .contenu-categorie > .separateur-groupe { display:none; padding:var(--e-1) var(--e-2) 0 var(--e-5); }
.arbre-serveur .salon[data-filtre="cache"], .arbre-serveur .categorie[data-filtre="cache"] { display:none; }
.arbre-serveur .filtre-vide { margin:var(--e-3); color:var(--texte-doux); font-size:var(--taille-s); }
.arbre-serveur .pied-arbre { position:sticky; bottom:0; z-index:5; display:flex; gap:var(--e-2); padding:var(--e-2) var(--e-3);
  background:var(--surface); border-top:1px solid var(--bord); }
.arbre-serveur .vide { padding:var(--e-3); color:var(--texte-doux); }
.salon.glisse-fantome .marque { display:none; }
/* Glisser un salon, « comme Discord » : l'arbre ne change pas de forme. Ni cadre, ni « Vocaux », ni
   « Déposer ici » sur toutes les listes : seule la ligne d'insertion or marque l'arrivée. Une zone
   interdite ne se montre (en rouge) qu'au survol. Une liste vide permise garde une fine zone de prise
   (marges négatives : rien ne bouge) et ne dit « Déposer ici » que survolée : elle grandit alors
   vers le bas seulement, pour rester sous le pointeur. */
.arbre-serveur .salons:not(.zone-interdite.zone-survol)::after { content:none; }
.arbre-serveur .tete-categorie { position:relative; }
.glisse-salons .arbre-serveur .salons.zone-permise:not(:has(> li)) { position:relative; z-index:3; display:block; min-height:14px; margin:-7px 0; }
.glisse-salons .arbre-serveur .salons.zone-permise:not(:has(> li))::before { content:none; }
.glisse-salons .arbre-serveur .salons.zone-permise.zone-survol:not(:has(> li)) { display:flex; align-items:center; justify-content:center;
  min-height:34px; margin:-7px var(--e-2) 2px; border:1px dashed var(--gold-400); border-radius:var(--r-1); background:rgba(207,155,52,.08); }
.glisse-salons .arbre-serveur .salons.zone-permise.zone-survol:not(:has(> li))::before { content:"Déposer ici"; color:var(--accent-texte);
  font-family:inherit; font-size:var(--taille-s); letter-spacing:0; text-transform:none; }
.arbre-serveur .etiquette-zone { max-width:75%; font-size:var(--taille-xs); letter-spacing:0; text-transform:none; white-space:normal; }
.arbre-serveur .tete-categorie > .etiquette-zone { right:var(--e-2); }
/* Le fantôme : une ligne compacte (icône et nom), posée sous le pointeur par gestes.js */
.salon.glisse-fantome { width:auto !important; min-width:160px; max-width:280px !important; flex-wrap:nowrap; padding:0 var(--e-3) 0 var(--e-2);
  border:1px solid var(--gold-400) !important; border-radius:var(--r-1); }
.salon.glisse-fantome::after { content:none !important; }
.salon.glisse-fantome > .poignee { display:none; }
.salon.glisse-fantome .lien-salon { display:flex; align-items:center; gap:var(--e-2); min-width:0; padding:6px 0; color:var(--texte); text-decoration:none; }
.salon.glisse-fantome .lien-salon > .icone { flex:none; width:16px; height:16px; color:var(--accent-texte); }
.salon.glisse-fantome .lien-salon .nom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.panneau-detail { position:relative; min-width:0; min-height:320px; padding:var(--e-5); background:var(--surface); border:1px solid var(--bord);
  border-radius:var(--r-1); box-shadow:var(--ombre-1); }
.panneau-detail::before { content:""; position:absolute; left:-1px; top:-1px; width:48px; height:2px; background:var(--accent); }
.panneau-detail .aide-panneau { display:grid; place-items:center; min-height:260px; margin:0; color:var(--texte-doux); text-align:center; }
.panneau-detail .retour-arbre { display:none; align-items:center; gap:var(--e-1); margin:0 0 var(--e-3); color:var(--accent-texte); text-decoration:none; }
.panneau-detail .tete-detail h2 { display:flex; align-items:center; gap:var(--e-2); margin:0; font-size:var(--taille-l); color:var(--texte);
  overflow-wrap:anywhere; }
.panneau-detail .tete-detail h2 .icone { flex:none; width:22px; height:22px; color:var(--accent-texte); }
.panneau-detail .situation { margin:var(--e-1) 0 var(--e-4); color:var(--texte-doux); }
.panneau-detail .situation strong { color:var(--texte); }
.panneau-detail .actions-detail { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); margin:0 0 var(--e-5); }
.panneau-detail .actions-detail .menu > summary { list-style:none; }
.panneau-detail .actions-detail .menu > summary::-webkit-details-marker { display:none; }
.panneau-detail .menu .titre-menu { display:block; padding:var(--e-2) var(--e-3) var(--e-1); font-size:var(--taille-xs); color:var(--texte-faible); }
.panneau-detail .menu .raison { display:block; padding:var(--e-2) var(--e-3); font-size:var(--taille-xs); color:var(--texte-faible); }
.blocs-acces { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--e-3); margin:0 0 var(--e-4); }
.blocs-acces .bloc { min-width:0; padding:var(--e-3); background:var(--surface-2); border:1px solid var(--bord); border-radius:var(--r-1); }
.blocs-acces dt { margin:0 0 var(--e-2); font-family:var(--police-titre); font-size:var(--taille-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-texte); }
.blocs-acces dt .aide { display:block; margin-top:2px; font-family:inherit; font-weight:400; letter-spacing:0; text-transform:none; color:var(--texte-faible); }
.blocs-acces dd { margin:0; }
.pastilles-roles { list-style:none; display:flex; flex-wrap:wrap; gap:var(--e-1); margin:0; padding:0; }
.pastille-acces { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:26px; padding:0 var(--e-2);
  background:var(--surface-3); border:1px solid var(--carte-bord); border-radius:var(--r-pilule); font-size:var(--taille-s); }
.pastille-acces .nom-role { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pastille-acces.tous { color:var(--accent-texte); border-color:var(--accent-trait); }
.blocs-acces .personne { color:var(--texte-faible); font-size:var(--taille-s); }
.panneau-detail .a-part { margin:0 0 var(--e-4); color:var(--texte-doux); font-size:var(--taille-s); }
.zone-acces:empty { display:none; }
.zone-acces { margin:var(--e-4) 0 0; }
.panneau-detail .tableau-droits { margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
.panneau-detail .tableau-droits::before { display:none; }
.panneau-detail .etat-salon.en-clair { display:block; margin:0 0 var(--e-3); }
.panneau-detail .etat-salon.en-clair p { margin:0 0 var(--e-2); }
.panneau-detail .etat-salon.en-clair .actions { display:flex; flex-wrap:wrap; gap:var(--e-2); }
.panneau-detail .colonnes { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
/* Cartes du tableau dans le panneau : une ligne par rôle (nom, marques, menu), pour que la colonne
   « Ne voit pas » reste courte ; « Retirer » d'un changement prévu passe dessous. */
.panneau-detail .liste-cartes { gap:4px; min-height:48px; }
.panneau-detail .carte-role { grid-template-columns:20px minmax(0, 1fr) auto auto; grid-template-areas:"poignee nom badges menu";
  min-height:34px; padding:2px 4px 2px 2px; row-gap:2px; }
.panneau-detail .carte-role:not(:has(> .poignee)) { padding-left:8px; }
.panneau-detail .carte-role .nom-role { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; }
.panneau-detail .carte-role .badges { flex-wrap:nowrap; align-items:center; }
.panneau-detail .carte-role > form.retirer { grid-column:2 / -1; grid-row:2; }
.carte-role .marque-staff { display:inline-grid; place-items:center; width:18px; height:18px; color:currentColor; opacity:.8; cursor:help; }
.carte-role .marque-staff .icone { width:13px; height:13px; }
.carte-role .badge.brouillon.prevu { min-height:16px; padding:0 5px; font-family:inherit; font-size:var(--taille-xs); font-weight:600;
  letter-spacing:0; text-transform:none; border-radius:var(--r-pilule); }
/* Le panneau reste en vue à côté d'un arbre haut (bureau) */
@media (min-width: 701px) {
  .panneau-detail { position:sticky; top:calc(var(--hauteur-bandeau) + var(--hauteur-entete) + var(--e-3)); }
}
.details-techniques { margin:var(--e-5) 0 0; padding:var(--e-3) 0 0; border-top:1px dashed var(--bord); color:var(--texte-doux); font-size:var(--taille-s); }
.details-techniques > summary { cursor:pointer; color:var(--texte-doux); }
.details-techniques ul { margin:var(--e-2) 0 0; padding-left:var(--e-5); }
.details-techniques li { margin:var(--e-1) 0; }

@media (max-width: 1099px) {
  .arbo { grid-template-columns:280px minmax(0, 1fr); gap:var(--e-4); }
}
@media (max-width: 700px) {
  .arbo { grid-template-columns:minmax(0, 1fr); }
  .zone-arbre.colonne-arbre { position:static; max-height:none; overflow:visible; }
  .arbo[data-vue="panneau"] > .colonne-arbre { display:none; }
  .arbo[data-vue="arbre"] > .panneau-detail { display:none; }
  .panneau-detail { padding:var(--e-3); min-height:0; }
  .panneau-detail .retour-arbre { display:inline-flex; }
  /* Les trois boutons sur une ligne : « Changer les accès », « Déplacer… », « ⋯ » compacts */
  .panneau-detail .actions-detail { flex-wrap:nowrap; align-items:stretch; gap:var(--e-1); }
  .panneau-detail .actions-detail > details > summary { height:100%; }
  .panneau-detail .actions-detail > .bouton, .panneau-detail .actions-detail > .menu > summary.bouton,
  .panneau-detail .actions-detail > details > summary { min-width:0; padding-left:var(--e-2); padding-right:var(--e-2); letter-spacing:.04em; white-space:nowrap; }
  .panneau-detail .actions-detail > .bouton.principal { flex:1 1 auto; justify-content:center; }
  .panneau-detail .actions-detail > .menu, .panneau-detail .actions-detail > details { flex:none; }
  .arbre-serveur .tete-arbre, .arbre-serveur .pied-arbre { position:static; }
}
@media (pointer: coarse) {
  .arbre-serveur .salon { min-height:44px; }
  .arbre-serveur .salon > .poignee { opacity:1; }
}
@media (max-width: 700px) {
  .arbre-serveur .salon:not(.glisse-emplacement)::after { content:none; }
}

/* ===================== Section « creation » : nom dans Discord, fraîcheur des formulaires ===================== */
.formulaire-creation .apercu-nom { margin:var(--e-2) 0 0; color:var(--texte-doux); overflow-wrap:anywhere; }
.formulaire-creation .apercu-nom strong { color:var(--accent-texte); font-weight:600; }
.formulaire-creation .nom-trop-long { margin:var(--e-2) 0 0; }
.formulaire-creation .option-style { display:flex; gap:var(--e-2); align-items:flex-start; margin-top:var(--e-2); cursor:pointer; }
.formulaire-creation #aide-nom p { margin:var(--e-1) 0 0; }
.formulaire-creation .si-nom-vocal { display:none; }
.formulaire-creation:has(input[name="type"][value="vocal"]:checked) .si-nom-texte { display:none; }
.formulaire-creation:has(input[name="type"][value="vocal"]:checked) .si-nom-vocal { display:block; }
.formulaire-creation .fraicheur-creation { margin:0 0 var(--e-3); }

/* ===== Agent arborescence : bouton « Appliquer sur Discord », marques « en attente » ===== */
/* Toujours à la même place, au-dessus des deux panneaux. Or = en attente (le rouge reste le danger). */
.appliquer-arbre { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2) var(--e-4); margin:0 0 var(--e-3); }
.appliquer-arbre .bouton-appliquer { flex:none; }
.appliquer-arbre .bouton-appliquer .nombre { font-variant-numeric:tabular-nums; }
.appliquer-arbre .bouton-appliquer[disabled] { opacity:.55; cursor:not-allowed; }
.appliquer-arbre .legende-attente { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1);
  font-size:var(--taille-xs); color:var(--texte-doux); }
.appliquer-arbre .legende-attente.vide { color:var(--texte-faible); }
.marque-attente { display:inline-flex; align-items:center; flex:none; padding:0 6px; height:18px; border:1px solid var(--gold-600);
  border-radius:9px; font-size:.6875rem; font-weight:600; font-style:normal; letter-spacing:.02em; line-height:1; white-space:nowrap;
  color:var(--gold-200); background:rgba(207,155,52,.12); cursor:help; text-decoration:none; }
.marque-attente.nouveau { color:var(--gold-100); background:rgba(207,155,52,.24); }
.marque-attente.supprime { border-style:dashed; }
.appliquer-arbre .marque-attente { cursor:default; }
/* Dans l'arbre : le filet or à gauche, nom en italique (nouveau), barré (supprimé). */
.arbre-serveur .salon.en-attente { box-shadow:inset 3px 0 0 var(--gold-500); }
.arbre-serveur .salon.choisi.en-attente { box-shadow:inset 3px 0 0 var(--gold-400); }
.arbre-serveur .salon.attente-nouveau .lien-salon .nom,
.arbre-serveur .categorie.attente-nouveau > .tete-categorie .lien-categorie { font-style:italic; }
.arbre-serveur .salon.attente-supprime .lien-salon .nom { text-decoration:line-through; color:var(--texte-faible); }
.arbre-serveur .tete-categorie .marque-attente { margin-left:2px; }
.arbre-serveur .compte-attente { display:inline-grid; place-items:center; flex:none; min-width:18px; height:18px; padding:0 5px; margin-left:auto;
  border-radius:9px; font-size:.6875rem; font-weight:700; color:var(--ink-900, #111); background:var(--gold-500); cursor:help; }
/* Panneau de droite : le bandeau en tête d'un objet touché par le brouillon. */
.bandeau-attente { margin:0 0 var(--e-3); padding:var(--e-2) var(--e-3); border:1px solid var(--gold-600); border-left-width:4px;
  border-radius:var(--r-1); background:rgba(207,155,52,.08); color:var(--texte); font-size:var(--taille-s); }
.bandeau-attente p { margin:0; }
.bandeau-attente .lignes-attente { margin:var(--e-1) 0 0; padding-left:var(--e-4); }
.bandeau-attente .lignes-attente li { margin:2px 0; }
.bandeau-attente form { display:block; margin-top:var(--e-2); }
.panneau-attente .aide { color:var(--texte-doux); font-size:var(--taille-s); }
@media (max-width: 700px) {
  .appliquer-arbre { gap:var(--e-1) var(--e-3); }
  .appliquer-arbre .bouton-appliquer { flex:1 1 100%; justify-content:center; }
}
/* ===== fin agent arborescence ===== */

/* ===== espaces de travail (agent espaces) ===== */
.selecteur-espace { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1) var(--e-3); margin:0 0 var(--e-3); }
.menu-espace { position:relative; flex:1 1 180px; min-width:0; }
.menu-espace > summary { display:flex; flex-direction:column; gap:1px; padding:var(--e-2) var(--e-3); min-height:44px; cursor:pointer; list-style:none;
  border:1px solid var(--carte-bord); border-radius:var(--r-2); background:var(--surface-3); }
.menu-espace > summary::-webkit-details-marker { display:none; }
.menu-espace > summary::after { content:"▾"; position:absolute; right:var(--e-3); top:50%; transform:translateY(-50%); color:var(--texte-doux); }
.menu-espace[open] > summary { border-color:var(--bord-fort); }
.menu-espace .etiquette, .carte-espace .etiquette { font-size:.6875rem; text-transform:uppercase; letter-spacing:.04em; color:var(--texte-doux); }
.menu-espace .nom-espace { padding-right:var(--e-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--texte); }
.liste-espaces { list-style:none; margin:var(--e-1) 0 0; padding:var(--e-1); border:1px solid var(--carte-bord); border-radius:var(--r-2);
  background:var(--surface-2); max-height:50vh; overflow:auto; }
.liste-espaces li { margin:0; }
.liste-espaces form { margin:0; }
.liste-espaces .choix-espace, .liste-espaces > li > a { display:flex; justify-content:space-between; align-items:center; gap:var(--e-2); width:100%; min-height:40px;
  padding:var(--e-1) var(--e-3); border:0; border-radius:var(--r-1); background:transparent; color:var(--texte); font:inherit; text-align:left; text-decoration:none; cursor:pointer; }
.liste-espaces .choix-espace:hover, .liste-espaces > li > a:hover { background:var(--surface-3); }
.liste-espaces .choix-espace[aria-current="true"] { box-shadow:inset 3px 0 0 var(--gold-500); background:var(--surface-3); font-weight:600; }
.liste-espaces .choix-espace .nom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selecteur-espace .propositions { font-size:var(--taille-xs); color:var(--accent-texte); }
.selecteur-espace > .aide { flex:1 1 100%; margin:0; font-size:var(--taille-xs); color:var(--texte-doux); }
.nouvel-espace { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); margin:var(--e-4) 0; }
.nouvel-espace input { flex:1 1 220px; min-width:0; }
.cartes-espaces { list-style:none; margin:0 0 var(--e-4); padding:0; display:grid; gap:var(--e-3); grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.carte-espace { padding:var(--e-3) var(--e-4); border:1px solid var(--carte-bord); border-radius:var(--r-2); background:var(--surface); min-width:0; }
.carte-espace.actif { border-color:var(--bord-fort); box-shadow:inset 3px 0 0 var(--gold-500); }
.carte-espace .titre { margin:0 0 var(--e-1); font-weight:600; overflow-wrap:anywhere; }
.carte-espace .aide { margin:0 0 var(--e-2); }
.carte-espace .etiquette.actif { color:var(--gold-200); }
.carte-espace .actions, .tete-espace .actions { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--e-2); }
.carte-espace form, .tete-espace form { margin:0; }
.carte-espace details.plus { flex:1 1 100%; }
.carte-espace details.plus > summary { cursor:pointer; color:var(--texte-doux); font-size:var(--taille-s); min-height:32px; display:flex; align-items:center; }
.carte-espace details.plus[open] form { margin-top:var(--e-2); }
.carte-espace .ligne-form { display:flex; gap:var(--e-2); }
.carte-espace .ligne-form input { flex:1 1 auto; min-width:0; }
.fraicheur { margin:0 0 var(--e-2); font-size:var(--taille-s); }
.fraicheur.ok { color:var(--succes); }
ul.fraicheur.alerte { padding-left:var(--e-4); color:var(--attention); }
.espaces-appliques { margin-top:var(--e-4); }
.espaces-appliques > summary { cursor:pointer; min-height:36px; display:flex; align-items:center; }
.tete-espace { margin-bottom:var(--e-4); }
.tete-espace h1 { margin-bottom:var(--e-1); overflow-wrap:anywhere; }
.bandeau-lecture { margin:var(--e-2) 0; padding:var(--e-2) var(--e-3); border:1px solid var(--info-bord); border-left-width:4px; border-radius:var(--r-1);
  background:var(--info-fond); font-size:var(--taille-s); }
.arbo.lecture .arbre-serveur .lien-salon, .arbo.lecture .arbre-serveur .lien-categorie { cursor:default; color:inherit; text-decoration:none; }
.arbo.lecture .groupe-brouillon h3 { margin:var(--e-3) 0 var(--e-1); font-size:var(--taille-m); }
@media (max-width: 700px) {
  .menu-espace { flex:1 1 100%; }
  .nouvel-espace button { flex:1 1 100%; }
}
/* ===== fin agent espaces ===== */

/* ===== espaces-finitions ===== */
.nouvel-espace input[type=text] { max-width:none; }
.nouvel-espace label { font-weight:600; }
.carte-espace .ligne-form input[type=text] { max-width:none; }
.carte-espace details.plus > summary { list-style:none; gap:var(--e-2); }
.carte-espace details.plus > summary::-webkit-details-marker { display:none; }
.carte-espace details.plus > summary::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform var(--duree-1); }
.carte-espace details.plus[open] > summary::after { transform:rotate(225deg); }
/* ===== fin espaces-finitions ===== */

/* ===== simulateur : « Voir le serveur comme… » ===== */
.sim-grille { display:grid; grid-template-columns:minmax(250px, 340px) minmax(0, 1fr); gap:var(--e-5); align-items:start; }
.sim-choix { min-width:0; padding:var(--e-3) var(--e-4); background:var(--surface); border:1px solid var(--bord); border-radius:var(--r-1); }
.choix-roles > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e-1) var(--e-2); list-style:none; cursor:pointer; padding:var(--e-1) 0; }
.choix-roles > summary::-webkit-details-marker, .salon-detail > summary::-webkit-details-marker, .autres-profils > summary::-webkit-details-marker { display:none; }
.choix-roles > summary { position:relative; padding-right:var(--e-5); }
.choix-roles > summary::after { content:""; position:absolute; right:var(--e-2); top:10px; width:8px; height:8px; border-right:2px solid var(--texte-faible); border-bottom:2px solid var(--texte-faible);
  transform:rotate(45deg); transition:transform var(--duree-1); }
.choix-roles[open] > summary::after { transform:rotate(225deg); top:14px; }
.choix-roles .titre-choix { font-family:var(--police-titre); font-weight:700; font-size:var(--taille-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-200); }
.choix-roles .resume-choix { flex:1 1 100%; min-width:0; color:var(--texte-doux); font-size:var(--taille-s); overflow-wrap:anywhere; }
.choix-roles .sous-titre { margin:var(--e-3) 0 var(--e-1); font-size:var(--taille-xs); font-weight:600; color:var(--texte-faible); letter-spacing:.06em; text-transform:uppercase; }
.choix-rapides { list-style:none; display:flex; flex-wrap:wrap; gap:var(--e-1); margin:0; padding:0; }
.choix-rapides a, .sim-bascule a { display:inline-flex; align-items:center; min-height:30px; padding:0 var(--e-3); color:var(--texte-doux); text-decoration:none;
  background:var(--surface-2); border:1px solid var(--bord); border-radius:var(--r-pilule); font-size:var(--taille-s); }
.choix-rapides a[aria-current="true"], .sim-bascule a[aria-current="true"] { color:var(--accent-texte); border-color:var(--accent-trait); background:var(--surface-3); }
@media (hover: hover) { .choix-rapides a:hover, .sim-bascule a:hover { color:var(--texte); border-color:var(--gold-300); } }
.autres-profils { margin-top:var(--e-2); }
.autres-profils > summary { cursor:pointer; list-style:none; color:var(--texte-faible); font-size:var(--taille-s); padding:var(--e-1) 0; }
.autres-profils > summary::before { content:"+ "; }
.autres-profils[open] > summary::before { content:"– "; }
.autres-profils .choix-rapides { margin-top:var(--e-1); }
.form-roles fieldset { margin:var(--e-2) 0 0; padding:var(--e-2) var(--e-3) var(--e-3); }
.form-roles .case { margin:2px 0; overflow-wrap:anywhere; }
.js .sim-valider { display:none; }
.sim-resultat { min-width:0; }
.sim-phrase { margin:0 0 var(--e-2); font-size:var(--taille-m); color:var(--texte); }
.sim-bascule { display:flex; flex-wrap:wrap; gap:var(--e-1); margin:0 0 var(--e-3); }
.sim-liste { background:var(--surface); border:1px solid var(--bord); border-radius:var(--r-1); }
.sim-arbre .tete-arbre { position:static; }
.sim-arbre .filtre-salons { display:none; }
.js .sim-arbre .filtre-salons { display:block; }
.sim-arbre .salon { align-items:stretch; }
.sim-arbre .salon-detail { flex:1; min-width:0; }
.sim-arbre .salon-detail > summary.lien-salon { cursor:pointer; list-style:none; }
.sim-arbre .salon-detail > summary.lien-salon:focus-visible { outline:2px solid var(--gold-400); outline-offset:1px; }
.sim-arbre .lien-salon .marque-attente { margin-left:var(--e-1); }
.sim-arbre .lien-salon .marque.droit { margin-left:auto; opacity:.6; }
.sim-arbre .lien-salon .marque.droit.droit-gere { color:var(--gold-300); opacity:.9; }
.sim-arbre .pourquoi { margin:0 0 var(--e-2) 24px; padding:var(--e-1) var(--e-2); font-size:var(--taille-s); color:var(--texte-doux);
  border-left:2px solid var(--accent-trait); overflow-wrap:anywhere; }
.sim-arbre .pourquoi strong { color:var(--texte); }
.sim-arbre .salon-detail[open] > summary .nom { color:var(--texte); }
.sim-arbre .lien-categorie { cursor:default; }
.sim-arbre .note-non-gere { margin:0; padding:2px var(--e-2) var(--e-1) 28px; font-size:var(--taille-xs); color:var(--texte-faible); }
.sim-arbre .categorie.non-gere .lien-categorie { color:var(--texte-faible); }
.sim-tableau { margin-top:var(--e-3); }
@media (max-width: 700px) {
  .sim-grille { grid-template-columns:minmax(0, 1fr); gap:var(--e-3); }
  .sim-choix { padding:var(--e-2) var(--e-3); }
  .form-roles fieldset { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); column-gap:var(--e-3); }
  .form-roles fieldset > legend { grid-column:1 / -1; }
  .sim-arbre .pourquoi { margin-left:var(--e-4); }
}
/* ===== fin simulateur ===== */

/* ===== renommer (agent renommer) : bouton crayon du titre, formulaire en place ===== */
.panneau-detail .titre-renommable { display:flex; align-items:center; gap:var(--e-2); min-width:0; }
.panneau-detail .titre-renommable[hidden] { display:none; }
.panneau-detail .titre-renommable h2 { min-width:0; }
.panneau-detail .bouton-renommer { flex:none; min-width:32px; min-height:32px; padding:4px; }
.panneau-detail .bouton-renommer .icone { width:18px; height:18px; }
.form-renommer { display:grid; gap:var(--e-2); margin:0 0 var(--e-4); padding:var(--e-3); background:var(--surface-2);
  border:1px solid var(--bord); border-radius:var(--r-1); }
.form-renommer[hidden] { display:none; }
.form-renommer label[for] { font-weight:600; color:var(--texte); }
.form-renommer input[type="text"] { width:100%; max-width:36rem; min-width:0; }
.form-renommer .apercu-nom { margin:0; color:var(--texte-doux); overflow-wrap:anywhere; }
.form-renommer .apercu-nom strong { color:var(--accent-texte); font-weight:600; }
.form-renommer .option-style { display:flex; gap:var(--e-2); align-items:flex-start; cursor:pointer; }
.form-renommer .alerte { margin:0; }
.form-renommer .actions-renommer { display:flex; flex-wrap:wrap; gap:var(--e-2); }
.marque-attente.renomme { color:var(--gold-100); }
/* ===== fin renommer ===== */