/* ============================================================================
   SOCLE POC — portail.css : l'écran « Gestion groupe » de /poc.

   Trois colonnes pleine hauteur : Projets · Calendrier · Équipe. Tout vient des
   jetons du socle (tokens.css, base.css) : aucune couleur n'est posée ici.
   Les cartes sont blanches (--surface) sur fond --n-50 ; le thème sombre suit
   les jetons sans règle propre.
   ========================================================================== */

html, body { margin: 0; background: var(--n-50); }

.portail {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 1560px;
  margin: 0 auto;
  padding: 18px 22px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--n-50);
  color: var(--n-900);
  font-family: var(--police);
}

.portail button, .portail input, .portail select { font-family: inherit; }
.portail :focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }
.portail :focus:not(:focus-visible) { outline: none; }

/* --- en-tête -------------------------------------------------------------- */

.portail-entete {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--filet);
}
.portail-marque {
  flex: none;
  width: 30px; height: 30px;
  border-radius: var(--rv-2);
  display: grid; place-items: center;
  background: var(--a);
  color: var(--n-0);
  font: 600 11px/1 var(--police-titre);
  letter-spacing: .02em;
}
.portail-entete h1 { margin: 0; font: 500 var(--t-18, 18px)/1.2 var(--police-titre); letter-spacing: -.015em; color: var(--n-900); }
/* L'avatar pousse à droite, seul. */
.portail-entete .poc-profil { margin-left: auto; }

/* --- les trois colonnes --------------------------------------------------- */

.zone {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr) 292px;
  gap: 14px;
  margin-top: 14px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.carte {
  background: var(--surface);
  border-radius: var(--rv-3);
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.titre-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--filet);
}
.titre-col h2 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--n-500); }
.titre-col .n { font-size: 11px; color: var(--n-500); font-variant-numeric: tabular-nums; }
.titre-col .n { margin-left: auto; }
.titre-col .n.pres { margin-left: 0; }

.ico-btn {
  margin-left: auto;
  width: 24px; height: 24px;
  border: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--n-100);
  color: var(--n-700);
  cursor: pointer;
  padding: 0;
}
.ico-btn:hover { background: var(--a-100); color: var(--a-600); }
.ico-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.recherche { flex: 0 0 auto; margin: 9px 11px 4px; }
.recherche input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--rv-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--n-200);
  font-size: 12px;
  color: var(--n-900);
}
.recherche input::placeholder { color: var(--n-500); }
.recherche input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--a), var(--focus); }

.scroll { flex: 1; min-height: 0; overflow: auto; padding-bottom: 6px; }
.liste { list-style: none; margin: 0; padding: 0 6px; }

.vide { margin: 0; padding: 14px 12px; font-size: 12px; line-height: 1.5; color: var(--n-500); }
.vide b { display: block; font-weight: 600; color: var(--n-700); margin-bottom: 2px; }

/* --- case à cocher du socle ----------------------------------------------- */

.cb {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 16px; height: 16px;
  margin: 0;
  border-radius: 3px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--n-400);
  display: grid; place-items: center;
  cursor: pointer;
}
.cb:checked, .cb:indeterminate { background: var(--a); box-shadow: none; }
.cb:checked::after {
  content: "";
  width: 8px; height: 4px;
  border-left: 2px solid var(--n-0);
  border-bottom: 2px solid var(--n-0);
  transform: translateY(-1px) rotate(-45deg);
}
.cb:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--n-0); }

/* --- colonne Projets ------------------------------------------------------ */

.tout {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 5px;
  font-size: 11px;
  color: var(--n-600);
  cursor: pointer;
}
.p { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: var(--rv-2); font-size: 12.5px; }
.p.on { background: var(--a-100); }
.p .nom {
  min-width: 0;
  font-weight: 500;
  color: var(--n-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.p:hover .nom, .p .nom:focus-visible { text-decoration-color: var(--n-500); }
.p .cl { margin-left: auto; flex: none; font-size: 11px; color: var(--n-500); font-variant-numeric: tabular-nums; }

/* --- colonne Équipe ------------------------------------------------------- */

.m { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: var(--rv-2); font-size: 12px; }
.m.sel { background: var(--a-100); }
.avatar, .ini {
  flex: none;
  display: grid; place-items: center;
  font-weight: 700;
  background: var(--n-200);
  color: var(--n-700);
}
.avatar { width: 24px; height: 24px; border-radius: 50%; font-size: 9.5px; }
.m-txt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.m-txt .nom, .m-txt .role { max-width: 100%; }
.m-txt:hover .nom, .m-txt:focus-visible .nom { text-decoration: underline; text-underline-offset: 2px; }
.m-txt:focus-visible { outline: none; border-radius: var(--rv-1); box-shadow: var(--focus); }
/* Trois zones fixes : matricule (34 px), identité, charge (60 px). Les appellations
   et les appellations démarrent sur le même axe même sans matricule ; les barres et
   les pourcentages sont alignés à droite sur un axe unique. */
.m .l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; }
.m .l1 .nom { min-width: 0; }
.m .mat { flex: none; width: 34px; font-size: 11px; font-weight: 400; color: var(--n-400); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.m .nom { font-weight: 500; color: var(--n-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m .role { max-width: 100%; padding-left: 40px; font-size: 11px; color: var(--n-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m .chg { flex: none; width: 60px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; cursor: default; }
.m .chg .bar { width: 60px; height: 4px; border-radius: 2px; background: var(--n-200); overflow: hidden; }
.m .chg .bar u { display: block; height: 100%; text-decoration: none; background: var(--ok-500); }
.m .chg b { font-size: 11px; font-weight: 500; color: var(--n-500); font-variant-numeric: tabular-nums; }
.m .chg.haut .bar u { background: var(--warn); }
.m .chg.haut b { color: var(--warn); }
.m .chg.sur .bar u { background: var(--danger-500); }
.m .chg.sur b { color: var(--danger-600); font-weight: 600; }
.m .chg.conge .tag { font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-bg);
  padding: 2px 6px; border-radius: var(--rv-1); line-height: 1.2; white-space: nowrap; }
.m .chg.conge b { font-weight: 400; white-space: nowrap; }
.m .cb { margin-left: 2px; }

/* --- barre d'outils du calendrier ----------------------------------------- */

.barre {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--filet);
}
.seg {
  display: flex;
  background: var(--n-50);
  border-radius: var(--rv-2);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--n-200);
}
.seg[hidden] { display: none; }
.seg button {
  border: 0; background: none;
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--n-600);
  cursor: pointer;
}
.seg button:hover { background: var(--n-100); }
.seg button[aria-pressed="true"] { background: var(--n-900); color: var(--n-0); }
.seg button:focus-visible { outline-offset: -2px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav b { min-width: 124px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--n-900); font-variant-numeric: tabular-nums; }
.nav button {
  width: 26px; height: 26px;
  border: 0; border-radius: var(--rv-2);
  background: none;
  color: var(--n-600);
  font-size: 15px; line-height: 1;
  cursor: pointer;
}
.nav button:hover { background: var(--n-100); color: var(--n-900); }
.nav .auj-btn { width: auto; padding: 0 9px; margin-left: 4px; font-size: 11.5px; box-shadow: inset 0 0 0 1px var(--n-200); }

.esp {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 2px 0;
  font-size: 11.5px; color: var(--n-600);
  cursor: pointer;
}
.switch { flex: none; width: 30px; height: 17px; border-radius: 999px; background: var(--n-300); position: relative; display: block; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--n-0); }
.esp[aria-checked="true"] .switch { background: var(--a); }
.esp[aria-checked="true"] .switch::after { left: auto; right: 2px; }

/* --- corps du calendrier --------------------------------------------------- */

.cal-corps { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.cal-corps:focus-visible { outline-offset: -2px; }

.legende {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 7px 12px;
  border-top: 1px solid var(--filet);
  font-size: 11px;
  color: var(--n-500);
}
.legende i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.legende .aide { margin-left: auto; }

/* --- vue Gantt -------------------------------------------------------------- */

.gt-inner {
  --lab: 172px;
  --cmin: 34px;
  position: relative;
  flex: none;
  min-width: calc(var(--lab) + var(--n) * var(--cmin));
}
.gt-inner.annee { --cmin: 15px; }

.gt-tete {
  position: sticky; top: 0; z-index: 3;
  display: grid; grid-template-columns: var(--lab) 1fr;
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
}
.gt-tete .v { border-right: 1px solid var(--filet); }
.gt-mois, .gt-sem { display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.gt-mois span {
  padding: 4px 2px 2px;
  border-right: 1px solid var(--filet);
  font-size: 11px; font-weight: 600; text-align: center; color: var(--n-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gt-sem button {
  display: flex; flex-direction: column; align-items: center;
  border: 0; border-right: 1px solid var(--filet);
  background: none;
  padding: 3px 0;
  font-size: 9.5px; line-height: 1.3; color: var(--n-500);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.gt-sem button:hover { background: var(--a-100); color: var(--a-600); }
.gt-sem button.auj { color: var(--a-600); font-weight: 700; }
.gt-sem .q { color: var(--n-700); }
.annee .gt-sem button { align-items: flex-start; padding-left: 2px; overflow: visible; white-space: nowrap; }
.annee .gt-sem button.muet span { visibility: hidden; }

.gt-ov { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--lab); right: 0; pointer-events: none; }
.gt-auj { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--a); opacity: .55; }

.gt-l { display: grid; grid-template-columns: var(--lab) 1fr; border-bottom: 1px solid var(--filet); }
.gt-l .lab {
  min-width: 0; min-height: 31px; box-sizing: border-box;
  padding: 7px 10px;
  display: flex; align-items: center; gap: 6px;
  border-right: 1px solid var(--filet);
  font-size: 11.5px; color: var(--n-800);
}
.gt-l .lab b { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-l .ini { width: 17px; height: 17px; border-radius: 3px; font-size: 8px; background: var(--n-150); color: var(--n-600); }
.gt-l .ini.ferie { background: var(--warn-bg); color: var(--warn); }
.gt-l .ini.rdv { background: var(--a-100); color: var(--a-600); }
.gt-l .piste {
  position: relative; min-height: 31px; cursor: cell;
  background-image: linear-gradient(to right, var(--filet) 1px, transparent 1px);
  background-size: calc(100% / var(--n)) 100%;
}
.gt-l.grp { background: var(--n-25); }
.gt-l.grp .lab { min-height: 26px; padding-top: 5px; padding-bottom: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500); }
.gt-l.grp .piste { min-height: 0; cursor: default; background-image: none; }
.g-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-vide { padding: 9px 12px; border-bottom: 1px solid var(--filet); font-size: 11.5px; color: var(--n-500); }
.gt-note { position: absolute; top: 8px; left: 8px; font-size: 11px; color: var(--n-500); white-space: nowrap; pointer-events: none; }

.gbar {
  position: absolute; z-index: 2; top: 10px; height: 11px;
  display: flex; overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--filet);
}
.gbar i { display: block; height: 100%; }
.b-fait { background: var(--etat-fait); }
.b-cours { background: var(--etat-cours); }
.b-faire { background: var(--etat-afaire); }
.b-bloque { background: var(--etat-bloque); }
.b-neutre { background: var(--a-200); }

.et {
  position: absolute; z-index: 2; top: 7px;
  max-width: 132px;
  font-size: 11px; font-weight: 600; color: var(--n-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.et.g { text-align: right; }
/* Étiquette posée SUR la barre : la barre dépasse à gauche comme à droite de la
   fenêtre, il n'y a pas de place à côté. Fond opaque pour rester lisible. */
.et.sur-barre {
  text-align: left; max-width: 120px;
  padding: 0 4px; border-radius: 3px;
  background: var(--n-0); color: var(--n-800);
  box-shadow: 0 0 0 1px var(--filet);
  top: 6px;
}
.et.mut { font-weight: 500; color: var(--n-600); }
.et.fer { font-weight: 500; color: var(--warn); max-width: 190px; }
.et em { font-style: normal; font-weight: 500; font-size: 10px; margin-left: 5px; color: var(--n-500); }

.conge-bar, .ferie-bar, .rdv-bar {
  position: absolute; z-index: 2; top: 12px; height: 7px; min-width: 5px;
  padding: 0; border: 0; border-radius: 3px;
  cursor: pointer;
}
.conge-bar::before, .ferie-bar::before, .rdv-bar::before { content: ""; position: absolute; inset: -7px -2px; }
.conge-bar { background: var(--n-300); }
.conge-bar.demi { background: repeating-linear-gradient(135deg, var(--n-300) 0 3px, var(--n-150) 3px 6px); }
.ferie-bar { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn); }
.rdv-bar { background: var(--a-200); box-shadow: inset 0 0 0 1px var(--a); }
.conge-bar:hover, .rdv-bar:hover { filter: brightness(.92); }

/* --- vue Mois --------------------------------------------------------------- */

.jours { flex: 0 0 auto; display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--filet); }
.jours span { padding: 6px 8px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500); }
/* Les six semaines se partagent la hauteur disponible : pas de barre de
   défilement interne au calendrier (la grille débordait de ~150 px). */
.grille { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.case { min-height: 0; overflow: hidden; padding: 5px 6px 6px; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); cursor: cell; }
.case:nth-child(7n) { border-right: 0; }
.case.we, .case.hors { background: var(--n-25); }
.case.auj { background: var(--a-100); }
.num {
  border: 0; background: none; padding: 0;
  font-size: 11px; font-weight: 600; color: var(--n-700);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.case.hors .num { color: var(--n-500); font-weight: 500; }
.case.auj .num { color: var(--a-600); }

.ev {
  display: flex; gap: 4px; align-items: baseline;
  width: 100%; box-sizing: border-box;
  margin: 4px 0 0; padding: 2px 5px;
  border: 0; border-radius: 3px;
  font-size: 10px; line-height: 1.2; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.ev { cursor: pointer; }
.ev .tag { flex: none; padding: 0 3px; border-radius: 2px; font-size: 8px; font-weight: 700; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.ev .lib { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ev.jalon { background: var(--n-900); color: var(--n-0); }
.ev.jalon .tag { background: color-mix(in srgb, currentColor 22%, transparent); }
.ev.proj { background: var(--a-100); color: var(--a-600); }
.ev.conge { background: var(--n-150); color: var(--n-700); }
.ev.ferie { background: var(--warn-bg); color: var(--warn); }
button.ev:hover { filter: brightness(.95); }
.plus { display: block; margin-top: 3px; padding-left: 5px; font-size: 10px; font-weight: 600; color: var(--n-500); }

/* --- popup d'ajout / édition (poc-pop du socle) ------------------------------- */

.pop-voile { z-index: 100; }
.poc-pop.pop-form { max-width: 396px; text-align: left; }
.pop-form h2 { margin: 0; padding: 16px 18px 3px; font: 600 var(--t-15, 15px)/1.3 var(--police-titre); letter-spacing: -.01em; }
.pop-form .pop-sous { margin: 0; padding: 0 18px 12px; font: var(--t-12, 12px)/1.45 var(--police); color: var(--n-500); }
.choix { display: flex; gap: 6px; padding: 0 18px 12px; }
.radio { position: relative; flex: 1; display: block; }
.radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.radio span {
  display: block; text-align: center;
  padding: 7px 4px;
  border-radius: var(--rv-2);
  box-shadow: inset 0 0 0 1px var(--n-200);
  font-size: 11.5px; color: var(--n-600);
}
.radio input:checked + span { background: var(--a); color: var(--n-0); box-shadow: none; font-weight: 600; }
.radio input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }
.pop-champs { padding: 0 18px; }
.champ { margin: 0 0 10px; padding: 0; border: 0; min-width: 0; }
.champ > label, .champ > legend { display: block; padding: 0; margin-bottom: 4px; font-size: 11px; color: var(--n-600); }
.champ .deux { display: flex; gap: 8px; }
.champ .deux > * { flex: 1; min-width: 0; }
.champ .deux .radio span { padding: 7px 4px; }
.champ input[type="text"], .champ input[type="date"], .champ select {
  width: 100%; box-sizing: border-box;
  padding: 7px 9px;
  border: 0; border-radius: var(--rv-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--n-200);
  font-size: 12px; color: var(--n-900);
}
.champ input:focus, .champ select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--a), var(--focus); }
.champ [aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger-500); }
.pop-note { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--rv-2); background: var(--warn-bg); font-size: 11.5px; line-height: 1.45; color: var(--warn); }
.pop-err { margin: 0 18px 8px; font-size: 11.5px; line-height: 1.4; color: var(--danger-600); }
.pop-pied { display: flex; align-items: center; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--filet); margin-top: 6px; }
.pop-sp { flex: 1; }
.btn { border: 0; border-radius: var(--rv-2); padding: 7px 13px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.btn-pri { background: var(--a); color: var(--n-0); }
.btn-pri:hover { background: var(--a-600); }
.btn-sec { background: var(--surface); color: var(--n-700); font-weight: 500; box-shadow: inset 0 0 0 1px var(--n-200); }
.btn-sec:hover { background: var(--n-100); }
.btn-danger { background: var(--surface); color: var(--danger-600); box-shadow: inset 0 0 0 1px var(--danger-500); }
.btn-danger:hover { background: var(--danger-100); }
.btn[disabled] { opacity: .55; cursor: default; }

.statut {
  position: fixed; z-index: 110; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  padding: 9px 14px;
  border-radius: var(--rv-3);
  background: var(--n-900); color: var(--n-0);
  box-shadow: var(--ombre);
  font-size: 12px; line-height: 1.4;
  opacity: 0; pointer-events: none;
}
.statut.visible { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .statut { transition: opacity .15s ease; }
  .p, .gt-sem button, .seg button, .ico-btn { transition: background-color .12s ease; }
}

/* --- écrans plus étroits ----------------------------------------------------- */

@media (max-width: 1100px) {
  .zone { grid-template-columns: 210px minmax(0, 1fr) 250px; }
}
@media (max-width: 860px) {
  .portail { height: auto; overflow: visible; padding: 14px 14px 20px; }
  .zone { grid-template-columns: minmax(0, 1fr); }
  .carte { max-height: 70vh; }
  .carte.cal { max-height: none; min-height: 560px; }
}


/* --- compteurs d'en-tête et assistant de groupe ---------------------------- */

.portail-entete .poc-profil { margin-left: 12px; }
.cpt { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cpt-btn { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 9px;
  border-radius: 999px; border: 0; background: var(--n-0); box-shadow: inset 0 0 0 1px var(--n-200);
  color: var(--n-700); font: 500 11.5px var(--police); cursor: pointer; }
.cpt-btn:hover { box-shadow: inset 0 0 0 1px var(--marque-300), var(--ombre-2); }
.cpt-btn i { width: 7px; height: 7px; border-radius: 50%; background: var(--n-300); }
.cpt-btn b { font-weight: 600; font-size: 12.5px; color: var(--n-700); font-variant-numeric: tabular-nums; }
.cpt-btn.d i { background: var(--danger-500); } .cpt-btn.d b { color: var(--danger-600); }
.cpt-btn.w i { background: var(--warn); } .cpt-btn.w b { color: var(--warn); }
.cpt-btn.o i { background: var(--ok-500); }
.cpt-btn.vide { color: var(--n-500); }
.cpt-btn.vide i { background: var(--n-300); }
.pa-btn { flex: none; }

.pa { position: fixed; top: 0; right: 0; bottom: 0; width: 404px; max-width: 100vw; background: var(--n-0);
  box-shadow: -1px 0 0 var(--n-200), -18px 0 48px rgba(12, 26, 42, .16);
  display: flex; flex-direction: column; z-index: 80; }
.pa[hidden] { display: none; }
.pa-tete { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 12px;
  border-bottom: 1px solid var(--n-200); }
.pa-tete h2 { margin: 0; font: 500 15px/1.25 var(--police-titre); color: var(--n-900); }
.pa-tete p { margin: 3px 0 0; font-size: 11.5px; color: var(--n-500); }
.pa-x { margin-left: auto; border: 0; background: none; color: var(--n-500); font-size: 15px;
  padding: 2px 4px; cursor: pointer; border-radius: var(--rv-1); }
.pa-onglets { flex: none; display: flex; gap: 2px; padding: 9px 10px; border-bottom: 1px solid var(--n-200); }
.pa-onglets button { flex: 1; height: 28px; padding: 0 2px; border: 0; border-radius: var(--rv-1);
  background: none; color: var(--n-600); font: 500 11px var(--police); cursor: pointer; }
.pa-onglets button[aria-selected="true"] { background: var(--marque-100); color: var(--marque-600); font-weight: 600; }
.pa-corps { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pa-item { width: 100%; text-align: left; border: 0; border-radius: var(--rv-2); background: var(--n-50);
  box-shadow: inset 0 0 0 1px var(--n-200); padding: 10px 11px; cursor: pointer; font-family: var(--police); }
.pa-item:hover { box-shadow: inset 0 0 0 1px var(--marque-300), var(--ombre-2); }
.pa-item .pr { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-500); }
.pa-item .tx { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--n-900); }
.pa-item .mt { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 11.5px; color: var(--n-500); }
.pa-item .tag { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: var(--rv-1); white-space: nowrap; }
.pa-item .tag.bad { background: var(--danger-100); color: var(--danger-600); }
.pa-item .tag.warn { background: var(--warn-bg); color: var(--warn); }
.pa-item .tag.neutre { background: var(--n-100); color: var(--n-600); }
.pa-vide { padding: 14px 4px; font-size: 12px; line-height: 1.5; color: var(--n-500); }
.pa-vide b { display: block; margin-bottom: 3px; font-weight: 600; color: var(--n-700); }
.pa-fil { display: flex; flex-direction: column; gap: 10px; }
.pa-msg { max-width: 92%; padding: 9px 11px; border-radius: var(--rv-3); font-size: 12.5px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.pa-msg.moi { align-self: flex-end; background: var(--marque-100); color: var(--marque-700); }
.pa-msg.hermes { align-self: flex-start; background: var(--n-50); box-shadow: inset 0 0 0 1px var(--n-200); color: var(--n-800); }
.pa-msg .quand { display: block; margin-top: 5px; font-size: 10.5px; color: var(--n-500); }
.pa-compo { flex: none; border-top: 1px solid var(--n-200); padding: 10px 12px 12px; }
.pa-compo textarea { width: 100%; box-sizing: border-box; height: 42px; resize: none; border: 0;
  border-radius: var(--rv-2); background: var(--n-50); box-shadow: inset 0 0 0 1px var(--n-200);
  padding: 8px 9px; font: 12px/1.35 var(--police); color: var(--n-800); }
.pa-compo textarea:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }
.pa-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px;
  font-size: 11px; color: var(--n-500); }
.pa-bas button { flex: none; height: 27px; padding: 0 11px; border: 0; border-radius: var(--rv-1);
  background: var(--marque-500); color: var(--n-0); font: 500 11.5px var(--police); cursor: pointer; }
.pa-bas button[disabled] { opacity: .6; cursor: default; }
.pa-err { margin: 6px 0 0; font-size: 11.5px; color: var(--danger-600); }