/* =====================================================================
   TOUMA · LA CONSOLE DE PLATEFORME
   ---------------------------------------------------------------------
   POURQUOI CETTE INTERFACE NE RESSEMBLE PAS À L'APPLICATION NATIONALE

   Ce n'est pas une coquetterie. Une personne qui administre Touma passe
   d'un plan à l'autre dans la même journée, avec les mêmes gestes et
   souvent dans deux onglets voisins. Si les deux se ressemblent, elle
   finira par croire qu'elle regarde les Comores alors qu'elle regarde
   les 55 territoires, ou l'inverse. Ce genre de confusion ne produit pas
   une erreur d'affichage, il produit une décision prise sur le mauvais
   objet.

   Le repère est donc STRUCTUREL, pas décoratif : le rail de gauche est
   sombre EN PERMANENCE, y compris en thème clair. Un coup d'oeil
   périphérique suffit à savoir où l'on est, sans rien lire.

   Le reste de la page suit le thème, parce qu'on y lit des tableaux
   pendant des heures et qu'un fond sombre imposé n'est pas un cadeau.

   LES JETONS VIENNENT DE `styles.css`

   Même marque, mêmes bleus, mêmes gris, mêmes rayons. Ce fichier n'en
   redéfinit aucun : il ajoute ce que la console a en propre, préfixé
   `--pc-`. Deux palettes finiraient par diverger, et Touma aurait deux
   bleus.
   ===================================================================== */

:root{
  /* L'OMBRE DU LOGO SUR LE RAIL EST CONSTANTE, ET C'EST VOULU.

     `--pt-logo-ombre`, celle de la porte nationale, suit le thème :
     forte en clair, nulle en sombre, parce qu'elle pose une marque
     argentée sur un fond qui change. Le rail de la console, lui, est
     sombre DANS LES DEUX THÈMES. Y brancher un jeton thématique
     poserait une ombre portée noire sur du bleu nuit en thème clair,
     c'est-à-dire un halo sale autour du logo. */
  --pc-logo-rail:drop-shadow(0 1px 2px rgba(0,0,0,.55));
  --pc-rail:#0B1220;            /* le rail, toujours sombre */
  --pc-rail-2:#131C2E;
  --pc-rail-ink:#C3CEE0;
  --pc-rail-ink-2:#7A879E;
  --pc-rail-actif:#1B2A46;
  --pc-rail-l:224px;
  --pc-haut:56px;
  --pc-gap:18px;
}
:root[data-theme="dark"]{
  --pc-rail:#080D16;
  --pc-rail-2:#0F1725;
  --pc-rail-actif:#1B2A46;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--ui);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-2);text-decoration:none}
button{font-family:inherit}

/* =====================================================================
   LA PORTE
   ---------------------------------------------------------------------
   AUCUN CHOIX DE PAYS ICI, ET C'EST LE POINT.

   La porte nationale commence par un globe et un catalogue de
   territoires, parce qu'on y entre DANS un pays. La console ne mène à
   aucun pays : proposer d'en choisir un serait annoncer une chose qui
   n'arrivera pas.
   ===================================================================== */
.pc-porte{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(31,95,204,.13), transparent 60%),
    var(--ground);
}
.pc-porte-boite{
  width:min(100%,420px);background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-2);padding:32px 28px 26px;
}
/* LA MARQUE DE LA PORTE : LE VRAI LOGO, PAS LE MOT.

   Cette boîte affichait « Touma » en Manrope, à côté d'un sceau. Ça se
   lisait, et ça ne ressemblait à rien : la porte nationale, elle, pose
   le wordmark officiel. Deux portes du même produit ne peuvent pas
   porter deux marques différentes, dont l'une est simplement le nom
   tapé au clavier.

   Le fichier est le MÊME que celui du Gateway, avec la MÊME ombre
   thématique (`--pt-logo-ombre`) : en clair elle redonne un bord aux
   lettres argentées, en sombre elle s'efface. */
/* L'ecran d'attente du demarrage : le logo seul, doucement anime pour
   dire que quelque chose se passe, sans rien affirmer sur la suite. */
.pc-demarrage{animation:pc-respire 1.4s ease-in-out infinite}
@keyframes pc-respire{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pc-demarrage{animation:none;opacity:.7}}

.pc-porte-marque{display:flex;flex-direction:column;align-items:flex-start;
  gap:11px;margin-bottom:26px}
.pc-porte-logo{width:clamp(168px,52%,196px);height:auto;display:block;
  filter:var(--pt-logo-ombre)}
.pc-sceau{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:4px;padding:3px 7px;
}
.pc-porte h1{font-size:19px;margin:0 0 4px;letter-spacing:-.015em}
.pc-porte .pc-sous{color:var(--muted);font-size:13px;margin:0 0 22px}
.pc-champ{margin-bottom:14px}
.pc-champ label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.pc-champ input{
  width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--surface);color:var(--ink);font-size:14px;font-family:inherit;
}
.pc-champ input:focus{outline:2px solid var(--brand-2);outline-offset:1px;border-color:var(--brand-2)}

/* AFFICHER LE MOT DE PASSE, SANS LE TOUCHER.

   Le bouton vit DANS le champ, donc le champ réserve la place à droite :
   sans ce `padding-right`, un mot de passe long passe sous l'icône et on
   ne relit plus ce qu'on vient de taper, ce qui est exactement ce que ce
   bouton sert à permettre. */
.pc-champ-mdp{position:relative}
.pc-champ-mdp input{padding-right:42px}
.pc-oeil{
  position:absolute;right:5px;bottom:5px;width:32px;height:32px;
  display:grid;place-items:center;border:1px solid transparent;border-radius:6px;
  background:none;color:var(--muted);cursor:pointer;padding:0;
}
.pc-oeil:hover{color:var(--ink-2);background:var(--surface-2)}
/* Le focus est VISIBLE. Un bouton qu'on atteint au clavier et qui ne le
   montre pas est un bouton qu'on ne sait pas avoir atteint. */
.pc-oeil:focus-visible{outline:2px solid var(--brand-2);outline-offset:1px;
  color:var(--brand-2)}
.pc-oeil svg{width:17px;height:17px;pointer-events:none}
.pc-oeil .pc-ferme-oeil{display:none}
.pc-oeil[aria-pressed="true"] .pc-ouvre-oeil{display:none}
.pc-oeil[aria-pressed="true"] .pc-ferme-oeil{display:block}
/* L ENCRE DU BOUTON SUIT LE THEME, PARCE QUE SON FOND LE SUIT.

   Elle etait `#fff`, en dur. En thème clair le fond est `#0F3D8A`, un
   bleu profond : blanc dessus, contraste 10,22:1. En thème sombre
   `--brand` devient `#8FB3F5`, un bleu PALE, et le meme blanc tombe a
   2,11:1 -- mesure a l ecran. Le libelle du bouton principal de la
   porte etait presque illisible.

   Le jeton existait deja : la porte nationale pose `--pt-encre-btn`,
   blanc en clair et `#0A111C` en sombre, pour exactement ce fond-la. On
   le reutilise plutot que d en creer un second qui dirait la meme chose.

   Le survol passe par `filter` et non par une couleur en dur : `#0C337A`
   assombrissait le bouton en clair, ce qui est juste, et assombrissait
   aussi le bleu pale en sombre, ce qui l enfoncait au lieu de le lever. */
.pc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:7px;border:1px solid var(--brand);
  background:var(--brand);color:var(--pt-encre-btn,#fff);
  font-weight:650;font-size:13.5px;cursor:pointer;
}
.pc-btn:hover:not(:disabled){filter:brightness(.92)}
:root[data-theme="dark"] .pc-btn:hover:not(:disabled){filter:brightness(1.1)}
.pc-btn:disabled{opacity:.55;cursor:default}
.pc-btn.pc-large{width:100%;padding:11px 16px;margin-top:6px}
.pc-btn.pc-neutre{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.pc-btn.pc-neutre:hover:not(:disabled){background:var(--surface-2);border-color:var(--faint)}
/* Meme raison pour le bouton destructeur : `--crit` passe de `#C8362B`
   a `#F0766E` en sombre, et le blanc n y tient pas davantage. */
.pc-btn.pc-danger{background:var(--crit);border-color:var(--crit);
  color:var(--pt-encre-btn,#fff)}
.pc-btn.pc-petit{padding:5px 10px;font-size:12px;border-radius:6px}

.pc-alerte{
  display:flex;gap:9px;padding:10px 12px;border-radius:7px;font-size:13px;
  background:var(--crit-soft);border:1px solid var(--crit);color:var(--crit);
  margin-bottom:14px;
}
.pc-alerte.pc-info{background:var(--info-soft);border-color:var(--brand-line);color:var(--ink-2)}
.pc-porte-pied{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px}

/* =====================================================================
   LA CHARPENTE
   ===================================================================== */
.pc-app{display:grid;grid-template-columns:var(--pc-rail-l) minmax(0,1fr);min-height:100dvh}

/* ---------------------------------------------------------------- rail */
.pc-rail{
  background:var(--pc-rail);color:var(--pc-rail-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;
  border-right:1px solid rgba(255,255,255,.055);
}
/* LE HAUT DU RAIL EST UNE ZONE DE MARQUE, PAS UNE LIGNE DE TITRE.

   Elle faisait 56 px, la hauteur exacte de la barre du haut, et portait
   le mot « Touma » suivi d'un sceau. Le wordmark officiel et la mention
   du plan ne tiennent pas sur une ligne de 56 px sans que l'un des deux
   devienne illisible.

   Le bloc est donc plus haut que la barre voisine. Ce décalage est
   assumé : le logo appartient au rail, pas à la barre, et l'aligner de
   force aurait coûté la marque. */
.pc-rail-marque{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:15px 18px 13px;border-bottom:1px solid rgba(255,255,255,.055);
  flex-shrink:0;
}
.pc-rail-logo{width:132px;height:auto;display:block;filter:var(--pc-logo-rail)}
/* Le symbole seul, pour le rail réduit. C'est le T du logo, isolé, pas
   une lettre retapée. */
.pc-rail-symbole{width:28px;height:28px;display:none;filter:var(--pc-logo-rail)}
/* LA MENTION DU PLAN RESTE SECONDAIRE. Petite, en capitales espacées,
   dans la teinte sourde du rail : elle situe, elle ne concurrence pas.
   Le sceau bleu qui était là tirait l'oeil plus que la marque. */
.pc-rail-realm{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pc-rail-ink-2);padding-left:2px;
  line-height:1;
}
.pc-nav{flex:1;overflow-y:auto;padding:12px 10px}
.pc-nav-titre{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--pc-rail-ink-2);
  padding:14px 10px 6px;font-weight:700;
}
.pc-nav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  color:var(--pc-rail-ink);font-size:13.5px;font-weight:550;margin-bottom:1px;
  cursor:pointer;
}
.pc-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.pc-nav a.pc-actif{background:var(--pc-rail-actif);color:#fff;font-weight:650}
.pc-nav a svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.pc-nav a.pc-actif svg{opacity:1}
/* UN MODULE FERMÉ RESTE VISIBLE, GRISÉ, AVEC SA RAISON EN INFOBULLE.
   Le masquer ferait croire que la console ne sait pas le faire ; le
   montrer éteint dit « ce droit ne vous est pas accordé », ce qui est
   la vérité et ce qui donne à qui de droit une chose à demander. */
.pc-nav a.pc-ferme{opacity:.34;cursor:not-allowed}
.pc-nav a.pc-ferme:hover{background:transparent;color:var(--pc-rail-ink)}
.pc-rail-pied{
  padding:12px 14px;border-top:1px solid rgba(255,255,255,.055);flex-shrink:0;
  display:flex;align-items:center;gap:10px;
}
.pc-pastille{
  width:30px;height:30px;border-radius:8px;background:var(--pc-rail-actif);color:#9DBEFF;
  display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0;
}
.pc-rail-pied .pc-qui{min-width:0;flex:1}
.pc-rail-pied .pc-qui b{display:block;color:#fff;font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-rail-pied .pc-qui span{display:block;color:var(--pc-rail-ink-2);font-size:11px;
  font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-sortir{
  background:none;border:none;color:var(--pc-rail-ink-2);cursor:pointer;padding:5px;
  border-radius:5px;display:grid;place-items:center;
}
.pc-sortir:hover{background:rgba(255,255,255,.07);color:#fff}

/* ---------------------------------------------------------------- haut */
.pc-corps{display:flex;flex-direction:column;min-width:0}
.pc-haut{
  height:var(--pc-haut);display:flex;align-items:center;gap:14px;padding:0 24px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.pc-fil{display:flex;align-items:baseline;gap:9px;min-width:0;flex:1}
.pc-fil h1{font-size:15.5px;margin:0;font-weight:680;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-fil span{color:var(--muted);font-size:12.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pc-outils{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pc-ico{
  background:none;border:1px solid transparent;color:var(--ink-2);cursor:pointer;
  padding:6px;border-radius:6px;display:grid;place-items:center;
}
.pc-ico:hover{background:var(--surface-2);border-color:var(--line)}
.pc-langue{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:6px 8px}

.pc-vue{padding:var(--pc-gap) 24px 48px;max-width:1560px;width:100%}

/* =====================================================================
   LES BRIQUES
   ===================================================================== */
.pc-carte{
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--sh);overflow:hidden;
}
.pc-carte-haut{
  padding:13px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.pc-carte-haut h2{font-size:13px;margin:0;font-weight:680;letter-spacing:-.005em}
.pc-carte-haut .pc-note{color:var(--muted);font-size:11.5px;font-weight:450}
.pc-carte-corps{padding:16px}
.pc-carte-corps.pc-serre{padding:0}

.pc-grille{display:grid;gap:var(--pc-gap)}
.pc-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pc-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}

/* ---- le chiffre, et d'où il vient ---- */
.pc-mesure{
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:15px 16px;box-shadow:var(--sh);
}
.pc-mesure .pc-etiq{
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:6px;
}
.pc-mesure .pc-val{font-size:27px;font-weight:700;line-height:1.05;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
.pc-mesure .pc-detail{margin-top:7px;font-size:12px;color:var(--ink-2)}
.pc-mesure .pc-source{
  margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.02em;
}

/* ---- tableaux ---- */
.pc-tab-cadre{overflow-x:auto}
table.pc-tab{width:100%;border-collapse:collapse;font-size:13px}
.pc-tab th{
  text-align:left;padding:9px 14px;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
  border-bottom:1px solid var(--line);background:var(--surface-2);
  white-space:nowrap;position:sticky;top:0;
}
.pc-tab td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.pc-tab tbody tr:last-child td{border-bottom:none}
.pc-tab tbody tr.pc-cliquable{cursor:pointer}
.pc-tab tbody tr.pc-cliquable:hover{background:var(--surface-2)}
.pc-tab td.pc-num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px}
.pc-tab td.pc-faible{color:var(--faint)}
.pc-nom{font-weight:600}
.pc-code{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* =====================================================================
   LE CENTRE D'ACTIONS
   ---------------------------------------------------------------------
   LA PREMIERE CHOSE QU'ON VOIT EST UNE PHRASE, PAS UN TABLEAU.

   Un dirigeant qui ouvre la console veut savoir en une seconde s'il
   doit faire quelque chose. La bande du haut repond par oui ou par non,
   avec une couleur qui se lit sans lire.
   ===================================================================== */
.pc-etatgen{
  display:flex;align-items:center;gap:14px;padding:17px 20px;
  border-radius:11px;border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--sh);margin-bottom:var(--pc-gap);
}
.pc-etatgen-pastille{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 4px var(--halo);
}
.pc-etatgen b{display:block;font-size:15.5px;letter-spacing:-.01em;line-height:1.35}
.pc-etatgen span:last-child{color:var(--muted);font-size:12.5px}
.pc-etatgen.pc-ok{--halo:var(--good-soft)}
.pc-etatgen.pc-ok .pc-etatgen-pastille{background:var(--good)}
.pc-etatgen.pc-warn{--halo:var(--warn-soft);border-color:var(--warn)}
.pc-etatgen.pc-warn .pc-etatgen-pastille{background:var(--warn)}
.pc-etatgen.pc-crit{--halo:var(--crit-soft);border-color:var(--crit)}
.pc-etatgen.pc-crit .pc-etatgen-pastille{background:var(--crit)}

.pc-attention{display:grid;gap:10px;margin-bottom:var(--pc-gap)}
.pc-item{
  display:flex;align-items:flex-start;gap:15px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--sh);border-left-width:3px;
}
.pc-item.pc-CRITIQUE{border-left-color:var(--crit)}
.pc-item.pc-ATTENTION{border-left-color:var(--warn)}
.pc-item.pc-INFO{border-left-color:var(--brand-2)}
.pc-item-n{
  font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:36px;text-align:right;line-height:1.25;letter-spacing:-.02em;
}
.pc-item-txt{flex:1;min-width:0}
.pc-item-txt b{display:block;font-size:13.5px;font-weight:650;line-height:1.35}
.pc-item-txt p{margin:4px 0 0;color:var(--ink-2);font-size:12.5px;line-height:1.55;
  max-width:70ch}
.pc-item-detail{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.pc-item-detail i{
  font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted);
  background:var(--surface-3);border-radius:4px;padding:2px 7px;
}
.pc-etat.CRITIQUE{background:var(--crit-soft);color:var(--crit);border-color:var(--crit)}
.pc-etat.ATTENTION{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.pc-etat.INFO{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}

/* ---- actions rapides ---- */
.pc-actions-rapides{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:var(--pc-gap)}
.pc-action{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:8px;
  color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;
}
.pc-action:hover{background:var(--surface-2);border-color:var(--brand-line);color:var(--brand)}
.pc-action svg{width:16px;height:16px;opacity:.75}

/* ---- le verdict d'une ligne de sante ---- */
.pc-verdict{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;
}
.pc-verdict::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pc-verdict.OK{color:var(--good)}
.pc-verdict.ATTENTION{color:var(--warn)}
.pc-verdict.CRITIQUE{color:var(--crit)}

@media (max-width:760px){
  .pc-item{flex-wrap:wrap;gap:10px}
  .pc-item-n{min-width:auto}
  .pc-actions-rapides .pc-action{flex:1 1 calc(50% - 5px);justify-content:center}
}

/* =====================================================================
   LA PAGE PERMISSIONS
   ---------------------------------------------------------------------
   POURQUOI CE N'EST PLUS UN TABLEAU

   C'en était un, et `.pc-tab td{vertical-align:middle}` s'appliquait.
   Sur cette page-là, la première colonne porte un titre, un identifiant
   en monospace et une description de deux à quatre lignes ; les deux
   autres portent une pastille de quelques pixels.

   Le résultat, mesuré : la pastille « Porteurs » de la ligne la plus
   haute flottait à mi-hauteur d'un bloc de 96 px, celle de la ligne
   suivante à mi-hauteur de 62 px. Aucune des deux n'était alignée sur
   l'autre, et rien ne disait d'où venait le décalage : chaque ligne
   était pourtant parfaitement centrée, sur elle-même.

   Une grille règle ça par construction. Les trois colonnes sont
   déclarées UNE fois, pour tout le tableau, et chaque cellule commence
   en haut de sa rangée. Une description plus longue pousse la rangée
   vers le bas ; elle ne déplace jamais l'axe des deux autres colonnes.

   LES SÉPARATEURS SONT PORTÉS PAR LES CELLULES

   Une grille n'a pas de `<tr>` : on ne peut pas border une rangée. Le
   trait est donc posé sous CHAQUE cellule, et comme les cellules d'une
   même rangée ont la même hauteur (`align-items:stretch` par défaut sur
   la rangée), le trait est continu.
   ===================================================================== */
.pc-perms{display:grid;grid-template-columns:minmax(0,1.5fr) 118px minmax(0,1.35fr)}

.pc-perms > .pc-tete{
  padding:9px 16px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:700;border-bottom:1px solid var(--line);
  background:var(--surface-2);white-space:nowrap;
}
/* Les en-têtes des colonnes chiffrées sont alignés sur leurs chiffres,
   pas sur le bord de la colonne. */
.pc-perms > .pc-tete.pc-centre{text-align:center}

.pc-perms > .pc-cell{
  padding:15px 16px;border-bottom:1px solid var(--line);
  /* LE POINT DE DÉPART EST EN HAUT. C'est toute la correction. */
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  min-width:0;
}
.pc-perms > .pc-cell.pc-centre{align-items:center}
.pc-perms > .pc-cell:nth-last-child(-n+3){border-bottom:none}

.pc-perms .pc-perm-titre{font-weight:650;font-size:13.5px;line-height:1.3}
.pc-perms .pc-perm-code{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  /* Un identifiant ne se coupe pas n'importe où : il se coupe entre ses
     segments, ou il déborde. */
  word-break:break-word;line-height:1.4;
}
.pc-perms .pc-perm-desc{
  color:var(--ink-2);font-size:12.5px;line-height:1.55;margin-top:2px;
  max-width:52ch;
}
/* LA LISTE DES FONCTIONS REVIENT À LA LIGNE DANS SA PROPRE ZONE.
   `min-width:0` sur la cellule est ce qui l'y oblige : sans lui, une
   grille laisse une colonne grandir jusqu'à la largeur de son contenu le
   plus long, et c'est la colonne voisine qui rétrécit. */
.pc-perms .pc-perm-fns{
  font-family:var(--mono);font-size:10.5px;line-height:1.75;color:var(--faint);
  word-break:break-word;width:100%;
}
.pc-perms .pc-perm-fns i{display:block;font-style:normal}

.pc-perms-note{
  margin:14px 2px 0;color:var(--muted);font-size:12.5px;max-width:78ch;line-height:1.6;
}

/* Sous 900 px, trois colonnes ne tiennent plus sans que la description
   devienne une colonne de mots. Chaque permission devient une carte, et
   les deux compteurs passent sur une ligne, côte à côte, sous elle. */
@media (max-width:900px){
  .pc-perms{grid-template-columns:minmax(0,1fr)}
  .pc-perms > .pc-tete{display:none}
  .pc-perms > .pc-cell{border-bottom:none;padding:14px 16px 4px}
  .pc-perms > .pc-cell.pc-centre{
    align-items:flex-start;flex-direction:row;gap:9px;padding:4px 16px;
  }
  .pc-perms > .pc-cell.pc-centre::before{
    content:attr(data-etiq);font-size:10.5px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);font-weight:700;
    min-width:104px;padding-top:2px;
  }
  /* LA TROISIEME COLONNE GARDE SON INTITULE, ELLE AUSSI.

     Mesure a 547 px : seule la cellule « Porteurs » recuperait son
     etiquette, parce que la regle ne visait que `.pc-centre`. La
     pastille de la troisieme colonne se retrouvait seule, sans un mot
     pour dire ce qu'elle compte, au-dessus d'une liste de fonctions.

     Ici l'etiquette est un BLOC au-dessus, pas une colonne a gauche :
     ce qui suit est une liste multiligne, et un intitule cale a gauche
     d'un bloc de huit lignes flotterait exactement comme les pastilles
     que toute cette page vient de corriger. */
  .pc-perms > .pc-cell[data-etiq]:not(.pc-centre)::before{
    content:attr(data-etiq);
    font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);font-weight:700;
  }
  .pc-perms > .pc-cell:nth-child(3n+1){border-top:1px solid var(--line)}
  .pc-perms > .pc-cell:nth-child(3n){padding-bottom:15px}
  .pc-perms > .pc-cell:nth-child(-n+3){border-top:none}
}

/* =====================================================================
   LES FORMULAIRES D'ACCÈS ET LES CONFIRMATIONS
   ---------------------------------------------------------------------
   LA DURÉE SE CHOISIT EN UN CLIC.

   « Je présente Touma demain » se traduit par « 24 heures », pas par un
   calendrier. Les six raccourcis couvrent les cas réels, et l'échéance
   calculée s'affiche dessous en toutes lettres : on voit ce qu'on
   vient de choisir avant de valider.
   ===================================================================== */
.pc-form{
  margin-top:12px;padding:15px;border:1px solid var(--brand-line);
  border-radius:9px;background:var(--brand-soft);
}
.pc-form .pc-champ label{font-size:11.5px}
.pc-form select{
  width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--surface);color:var(--ink);font-size:13px;font-family:inherit;
}
.pc-form select:focus{outline:2px solid var(--brand-2);outline-offset:1px}
.pc-form .pc-motif textarea{background:var(--surface)}

.pc-durees{display:flex;gap:5px;flex-wrap:wrap}
.pc-duree{
  padding:6px 11px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600;
  cursor:pointer;
}
.pc-duree:hover{border-color:var(--brand-line);color:var(--brand)}
.pc-duree.pc-actif{
  background:var(--brand);border-color:var(--brand);color:var(--pt-encre-btn,#fff);
}

/* ---- la confirmation ---- */
/* ELLE SE CENTRE, ELLE NE GLISSE PAS DU CÔTÉ.
   Une action qui coupe un accès mérite d'arrêter le regard, pas de
   s'ajouter à la file des panneaux latéraux. */
.pc-voile-centre{align-items:center;justify-content:center;padding:20px}
.pc-modale{
  width:min(100%,470px);background:var(--surface);border-radius:13px;
  box-shadow:var(--sh-2);padding:24px;max-height:90dvh;overflow-y:auto;
}
.pc-modale h2{font-size:17px;margin:0 0 14px;letter-spacing:-.015em}
.pc-impact{
  background:var(--warn-soft);border:1px solid var(--warn);border-radius:8px;
  padding:12px 14px;margin-bottom:14px;
}
.pc-impact b{
  display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--warn);margin-bottom:5px;
}
.pc-impact p{margin:0;font-size:13px;line-height:1.55;color:var(--ink)}

/* ---- en-tete de groupe d'organisations ---- */
/* UN TAS DEVIENT UNE LISTE QUAND ON POSE LES SEPARATIONS.
   Le tri vient du serveur ; ce qui manquait etait la ligne qui dit
   « ici commencent les Comores ». */
.pc-groupe{
  display:flex;align-items:center;gap:9px;margin:0 2px 9px;
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);
}
.pc-groupe svg{width:15px;height:15px;opacity:.6}
.pc-groupe b{
  margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--muted);letter-spacing:0;
}
.pc-groupe em{
  font-style:normal;font-size:10px;letter-spacing:.08em;
  color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn);
  border-radius:4px;padding:2px 7px;
}
.pc-groupe-test{color:var(--muted)}
.pc-groupe-aide{
  margin:0 2px 9px;font-size:12px;color:var(--muted);line-height:1.55;max-width:74ch;
}

/* =====================================================================
   LES CHANTIERS
   ---------------------------------------------------------------------
   UNE CARTE PAR PAYS, ET CINQ FAITS DESSUS.

   Un tableau aurait tenu plus de lignes à l'écran. Il aurait aussi
   réduit « prochaine action » à une colonne étroite, alors que c'est la
   seule information qui se transforme en geste.
   ===================================================================== */
.pc-chantiers{display:grid;gap:12px}
.pc-chantier{
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--sh);padding:16px 18px;
}
.pc-chantier:hover{border-color:var(--brand-line)}
.pc-chantier-haut{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px;
}
.pc-chantier-haut b{font-size:15px;letter-spacing:-.01em}
.pc-chantier-faits{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;
}
.pc-chantier-faits dt{
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:4px;
}
.pc-chantier-faits dd{margin:0;font-size:13px;font-weight:600}
.pc-chantier-suite{
  display:flex;align-items:baseline;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--line);flex-wrap:wrap;
}
.pc-chantier-suite .pc-etiq{
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:700;flex-shrink:0;
}
.pc-chantier-suite b{font-size:13px;font-weight:600}

/* Ce qui manque pour passer au cran suivant. Montré AVANT le bouton,
   pas après le refus : un bouton grisé sans explication oblige à
   deviner. */
.pc-manque{
  background:var(--warn-soft);border:1px solid var(--warn);border-radius:8px;
  padding:11px 13px;margin-bottom:12px;font-size:12.5px;
}
.pc-manque b{
  display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--warn);margin-bottom:6px;
}
.pc-manque > div{margin-top:4px}
.pc-manque .pc-code{margin-left:6px}

.pc-form input[type="text"],.pc-form input[type="date"]{
  width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--surface);color:var(--ink);font-size:13px;font-family:inherit;
}

@media (max-width:760px){
  .pc-chantier-faits{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- pastilles d'état ---- */
.pc-etat{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:20px;
  font-size:11px;font-weight:650;letter-spacing:.01em;white-space:nowrap;
  border:1px solid transparent;
}
.pc-etat::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pc-etat.ACTIVE{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.pc-etat.SHADOW{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.pc-etat.VALIDATION{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.pc-etat.INGESTION{background:var(--orange-soft);color:var(--orange);border-color:var(--orange)}
.pc-etat.DISCOVERY{background:var(--surface-3);color:var(--muted);border-color:var(--line-2)}
.pc-etat.SUSPENDED{background:var(--crit-soft);color:var(--crit);border-color:var(--crit)}
.pc-etat.pc-oui{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.pc-etat.pc-non{background:var(--surface-3);color:var(--muted);border-color:var(--line-2)}

/* ---- LE PLAN, L'ÉTAT ET LA NATURE D'UN COMPTE ----------------------

   Deux comptes du même nom doivent se distinguer sans ouvrir de fiche.
   Trois familles de badges, et pas une de plus :

     le PLAN        où vit ce compte
     l'ÉTAT         où il en est de sa vie
     la NATURE      technique, temporaire

   Le rôle et le pays n'ont PAS de badge de couleur : ils sont écrits en
   texte. Mettre une pastille sur tout ne distingue plus rien, et le
   mandat demande « sobres et cohérents ».                            */
.pc-etat.PLATFORM{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.pc-etat.NATIONAL{background:var(--surface-3);color:var(--ink-2);border-color:var(--line-2)}
.pc-etat.AUCUN{background:transparent;color:var(--muted);border-color:var(--line-2)}
.pc-etat.ACTIF{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.pc-etat.SUSPENDU{background:var(--crit-soft);color:var(--crit);border-color:var(--crit)}
.pc-etat.FERME{background:var(--surface-3);color:var(--muted);border-color:var(--line-2)}
/* Le tiret de la bordure dit « ceci n'est pas quelqu'un » sans couleur
   d'alerte : un compte de recette n'est pas un incident. */
.pc-etat.TECHNIQUE{background:transparent;color:var(--muted);border-style:dashed;
  border-color:var(--line-2)}
.pc-etat.TEMPORAIRE{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
/* Sans pastille : ce n'est pas un état, c'est une étiquette. */
.pc-etat.pc-plat::before{display:none}

/* ---- la zone d'actions d'une fiche --------------------------------
   Les actions importantes sont VISIBLES, les dangereuses SÉPARÉES.
   La séparation est une ligne, pas un menu caché : ce qu'on ne voit
   pas, on ne sait pas qu'on peut le faire.                           */
.pc-actions-adm{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pc-actions-adm .pc-sep{width:100%;height:1px;background:var(--line);margin:4px 0 2px}
.pc-actions-adm .pc-sep-titre{width:100%;font-size:11px;font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* ---- le sélecteur de pays, qui tient avec 54 pays ------------------ */
.pc-choix-pays{position:relative;display:inline-block}
.pc-choix-pays > button{display:inline-flex;align-items:center;gap:6px}
.pc-choix-pays-liste{
  position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:240px;
  max-height:300px;overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--sh-2);padding:6px;
}
.pc-choix-pays-liste input{
  width:100%;padding:7px 9px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px;margin-bottom:5px;
}
.pc-choix-pays-liste button{
  display:block;width:100%;text-align:left;padding:6px 9px;border:0;border-radius:6px;
  background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;
}
.pc-choix-pays-liste button:hover{background:var(--surface-3)}
.pc-choix-pays-liste button.pc-actif{background:var(--brand-soft);color:var(--brand)}
.pc-choix-pays-vide{padding:8px 9px;font-size:12.5px;color:var(--muted)}

/* ---- jauge : elle ne s'affiche que si elle a un dénominateur ---- */
.pc-jauge{height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;min-width:56px}
.pc-jauge i{display:block;height:100%;background:var(--brand-2);border-radius:3px}

/* ---- filtres ---- */
.pc-filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:var(--pc-gap)}
.pc-rech{position:relative;flex:1;min-width:180px;max-width:340px}
.pc-rech input{
  width:100%;padding:8px 12px 8px 32px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--surface);color:var(--ink);font-size:13px;font-family:inherit;
}
.pc-rech svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--muted);pointer-events:none}
/* LA RANGEE D ONGLETS DEFILE, ELLE NE POUSSE PAS LA PAGE.

   Mesure a 467 px : le module Pays porte sept etats, la rangee faisait
   575 px, et c est ELLE qui creait un defilement horizontal de toute la
   page -- pas le tableau, qui defilait deja correctement dans son
   cadre.

   Le symptome trompe : on voit une page trop large sur un module qui
   affiche un grand tableau, et on accuse le tableau. Le coupable etait
   la ligne de filtres au-dessus. */
.pc-onglets{display:flex;gap:2px;background:var(--surface-3);padding:3px;border-radius:8px;
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.pc-onglets::-webkit-scrollbar{display:none}
.pc-onglets button{
  border:none;background:none;padding:5px 11px;border-radius:6px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;
}
.pc-onglets button.pc-actif{background:var(--surface);color:var(--ink);box-shadow:var(--sh)}

/* ---- pagination ---- */
.pc-pages{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);
  flex-wrap:wrap;
}
.pc-pages .pc-boutons{display:flex;gap:6px}

/* ---- états vides et chargement ---- */
/* UN VIDE DIT POURQUOI IL EST VIDE. « Aucune donnée » laisse croire à
   une panne ; « cette table n'existe pas encore » est une information. */
.pc-vide{padding:38px 22px;text-align:center;color:var(--muted)}
.pc-vide b{display:block;color:var(--ink-2);font-size:13.5px;margin-bottom:5px;font-weight:650}
.pc-vide p{margin:0;font-size:12.5px;max-width:460px;margin-inline:auto;line-height:1.55}
.pc-squelette{
  height:11px;border-radius:5px;background:var(--surface-3);
  animation:pc-pulse 1.25s ease-in-out infinite;
}
@keyframes pc-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pc-squelette{animation:none}}

/* ---- fiche latérale ---- */
.pc-voile{
  position:fixed;inset:0;background:rgba(11,18,32,.42);z-index:60;
  display:flex;justify-content:flex-end;
}
.pc-fiche{
  width:min(100%,560px);background:var(--surface);height:100dvh;overflow-y:auto;
  box-shadow:var(--sh-2);display:flex;flex-direction:column;
}
.pc-fiche-haut{
  padding:16px 20px;border-bottom:1px solid var(--line);display:flex;
  align-items:flex-start;justify-content:space-between;gap:12px;
  position:sticky;top:0;background:var(--surface);z-index:2;
}
.pc-fiche-haut h2{font-size:16px;margin:0 0 3px;letter-spacing:-.015em}
.pc-fiche-corps{padding:20px;flex:1}
.pc-bloc{margin-bottom:24px}
.pc-bloc > h3{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:0 0 10px;
}
.pc-paires{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;font-size:13px}
.pc-paires dt{color:var(--muted);font-size:12px}
.pc-paires dd{margin:0;word-break:break-word}
.pc-liste{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pc-liste-item{padding:11px 13px;border-bottom:1px solid var(--line);font-size:12.5px}
.pc-liste-item:last-child{border-bottom:none}
.pc-liste-item b{font-weight:650}
.pc-liste-item .pc-meta{color:var(--muted);font-size:11.5px;margin-top:3px;
  font-family:var(--mono)}

/* ---- le motif obligatoire ---- */
/* IL N'EST PAS DANS UN REPLI. Un acte d'administration se justifie au
   moment où on le décide, pas dans un champ qu'on déplie si on y pense. */
.pc-motif{margin-top:14px}
.pc-motif textarea{
  width:100%;min-height:74px;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:7px;background:var(--surface);color:var(--ink);font-family:inherit;
  font-size:13px;resize:vertical;
}
.pc-motif .pc-compte{font-size:11.5px;color:var(--muted);margin-top:5px;
  display:flex;justify-content:space-between}
.pc-motif .pc-compte.pc-court{color:var(--warn)}

/* =====================================================================
   RESPONSIVE
   ---------------------------------------------------------------------
   Éprouvé à 1920, 1440, 1100, 768 et 390. Le rail passe en icônes à
   1100 puis en barre basse à 760 : une console d'administration se
   consulte depuis un téléphone, rarement pour y faire des gestes, donc
   la lecture prime et les tableaux défilent latéralement plutôt que de
   se replier en cartes illisibles.
   ===================================================================== */
@media (max-width:1400px){ .pc-g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1180px){
  :root{--pc-rail-l:62px}
  /* Le wordmark ne tient pas dans 62 px. On montre le SYMBOLE du logo,
     celui du favicon, et non une initiale dessinée en CSS. */
  .pc-rail-marque{padding:13px 0;align-items:center}
  .pc-rail-logo,.pc-rail-realm{display:none}
  .pc-rail-symbole{display:block}
  .pc-nav a{justify-content:center;padding:10px}
  .pc-nav a span,.pc-nav-titre{display:none}
  .pc-rail-pied{flex-direction:column;padding:10px 6px;gap:7px}
  .pc-rail-pied .pc-qui{display:none}
  .pc-g3,.pc-g21{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){ .pc-g2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){
  .pc-app{grid-template-columns:minmax(0,1fr)}
  .pc-rail{
    position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;
    border-right:none;border-top:1px solid rgba(255,255,255,.08);z-index:50;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .pc-rail-marque,.pc-rail-pied .pc-qui{display:none}
  /* LE RAIL DEFILE, SANS MONTRER QU IL DEFILE. Huit modules ne tiennent
     pas sur 390 px ; la barre de defilement, elle, traversait toute la
     largeur sous le rail et ressemblait a celle de la page. */
  .pc-nav{display:flex;padding:6px;gap:3px;overflow-x:auto;flex:1;
    scrollbar-width:none}
  .pc-nav::-webkit-scrollbar{display:none}
  .pc-nav a{flex-direction:column;gap:3px;padding:7px 9px;min-width:54px}
  .pc-rail-pied{border-top:none;border-left:1px solid rgba(255,255,255,.08);
    flex-direction:row;padding:6px 10px}
  .pc-vue{padding:14px 14px 92px}
  .pc-haut{padding:0 14px;gap:9px}
  .pc-g4{grid-template-columns:minmax(0,1fr)}
  .pc-fiche{width:100%}
  .pc-fil span{display:none}
}
@media (max-width:420px){
  .pc-porte-boite{padding:24px 18px 20px}
  .pc-mesure .pc-val{font-size:23px}
  .pc-rech{max-width:none}
}

@media print{
  .pc-rail,.pc-outils,.pc-filtres,.pc-pages{display:none}
  .pc-app{grid-template-columns:minmax(0,1fr)}
  .pc-carte{box-shadow:none;break-inside:avoid}
}