/* ============================================================
   Bebsolo SPA — feuille de styles principale.
   Consomme exclusivement les tokens définis dans tokens.css
   (PD1 — source unique de couleurs). Aucun hex en dur ici.
   ============================================================ */

/* LES SYMBOLES DE SECOURS (2026-08-25). Sur le téléphone de Roméo (Android,
   Chrome), Claude Code affichait « ▯▯ bypass permissions » au lieu de « ⏵⏵ »,
   et le bouton « Fichiers » un carré vide à la place de son icône : aucune
   police d'Android n'a ces glyphes, alors que Windows les a (Segoe UI Symbol,
   Cascadia). Trois polices libres, SOUS-ENSEMBLÉES aux seuls blocs de
   symboles et à plages DISJOINTES, portent une même famille « Bebsolo
   Symboles » placée en fin de pile, juste avant la famille générique : elles
   ne fournissent que ce qui manque, jamais les lettres. Sources et licences :
   assets/fonts/LICENCES.txt. Fabrication : le script est dans l'historique du
   commit qui les a posées. */
@font-face {
  font-family: "Bebsolo Symboles";
  src: url("fonts/bebsolo-symboles-mono.woff2") format("woff2");
  font-display: swap;
  /* DejaVu Sans Mono — chasse fixe : cadres, blocs, flèches, formes. */
  unicode-range: U+2190-21FF, U+2300-2306, U+2308-2315, U+2318-2319, U+231C-2321, U+2325-2328, U+232B, U+2335-237A, U+237D, U+2380-2383, U+2388-238B, U+2395, U+239B-23AE, U+23CE-23CF, U+2423, U+2500-262F, U+2638-268B, U+2690-269C, U+26A0-26A1, U+26B0-26B1, U+2701-2704, U+2706-2709, U+270C-2727, U+2729-274B, U+274D, U+274F-2752, U+2756, U+2758-275E, U+2761-2775, U+2794, U+2798-27AF, U+27B1-27BE, U+27F5-27F7, U+2B05-2B0D, U+2B12-2B1A;
}
@font-face {
  font-family: "Bebsolo Symboles";
  src: url("fonts/bebsolo-symboles-2.woff2") format("woff2");
  font-display: swap;
  /* Noto Sans Symbols 2 — ⏵ ⏺ ✳, braille des indicateurs d'attente, pictogrammes. */
  unicode-range: U+2316, U+231A-231B, U+2324, U+237B, U+237E-237F, U+2394, U+23E9-23EA, U+23ED-23EF, U+23F1-2422, U+2424-2426, U+2630-2637, U+268C-268F, U+269E-269F, U+26AA-26AC, U+26BD-26CD, U+26CF-26E1, U+2700, U+270B, U+2753, U+2757, U+275F-2760, U+2800-28FF, U+2B00-2B04, U+2B1B-2B2F, U+2B4D-2B73, U+2B76-2B95, U+2B97-2BFD, U+2BFF, U+1F5C0-1F5FA;
}
@font-face {
  font-family: "Bebsolo Symboles";
  src: url("fonts/bebsolo-symboles-1.woff2") format("woff2");
  font-display: swap;
  /* Noto Sans Symbols — ⎿ des résultats d'outils, chiffres cerclés, le reste. */
  unicode-range: U+2307, U+2317, U+2322-2323, U+2329-232A, U+232C-2334, U+237C, U+2384-2387, U+238C-2393, U+2396-239A, U+23AF, U+23BE-23CD, U+23D0-23DB, U+23E2-23E8, U+2460-24FF, U+269D, U+26A2-26A9, U+26AD-26AF, U+26B2-26BC, U+26CE, U+26E2-26FF, U+2776-2793, U+2921-2922;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--mst-bg-app);
  color: var(--mst-text-primary);
  font-family: var(--mst-font-sans);
  font-size: var(--mst-fs-body);
  line-height: var(--mst-lh-body);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--mst-accent);
  text-decoration: none;
}
a:hover { color: var(--mst-accent-hover); }

/* ---------- Layout ---------- */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  /* `wrap` : sous ~700px de large (mobile), brand + onglets + langue +
     exposition + bouton « Redémarrer » ne tiennent pas sur une ligne. Sans
     retour à la ligne, la partie droite (dont le bouton « Redémarrer »)
     déborde hors du viewport et n'est atteignable qu'au prix d'un
     défilement horizontal — mesuré à 390px : bouton à x=618 pour un
     viewport de 390. */
  flex-wrap: wrap;
  gap: var(--mst-sp-4);
  padding: var(--mst-sp-3) var(--mst-sp-5);
  background: var(--mst-bg-surface);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Bannière de statut de redémarrage — premier enfant de #app sur TOUTE route
   (voir dashboard.js:mountRestartBanner). #app est le seul parent commun de
   tous les en-têtes de route (topbar, mission-header, tout en-tête futur) :
   la bannière est placée AVANT ces en-têtes dans le même flux, et sticky en
   haut du viewport pour rester visible pendant le défilement.

   Coordination des offsets sticky (règle `~ *` ci-dessous) — être sticky au
   même `top: 0` que l'en-tête de route NE SUFFIT PAS : « la bannière précède
   l'en-tête dans le flux » n'est vrai qu'à scrollY = 0. Dès que l'en-tête
   atteint son propre seuil sticky, il se fige AU MÊME `top: 0` que la
   bannière, donc exactement sous elle : navigation et bouton « Redémarrer »
   deviennent invisibles et non cliquables au moment précis où un redémarrage
   a échoué.

   `#restart-status-banner ~ *` corrige ça sans jamais coder en dur une
   hauteur ni un nom de classe d'en-tête : tout frère SUIVANT la bannière se
   fige sous elle, à `--bb-restart-banner-h` — la hauteur RÉELLEMENT rendue,
   mesurée et republiée par dashboard.js à chaque changement de taille. Aucune
   valeur de gabarit n'est écrite ici : la bannière n'a pas la même hauteur
   selon la largeur de l'écran et la longueur du motif, et un chiffre inscrit
   dans un commentaire ne serait vérifié par personne. La règle est sans effet
   sur un frère NON positionné — `top` n'est pris en compte que par un élément
   positionné — donc inoffensive pour tout le reste de la page.

   Portée délibérée : cette règle DÉCALE ce qui est déjà collant, elle ne
   rend RIEN collant. La bannière ne doit épingler aucun élément qui ne
   l'était pas de lui-même, et surtout pas « le premier frère » : ce frère
   n'est pas une abstraction, c'est l'en-tête concret de la route affichée —
   .topbar sur le dashboard, collante par conception, mais .mission-header sur
   une mission, un en-tête volontairement NON collant dont la hauteur est
   celle d'un titre, de fils d'Ariane, de pastilles et d'une barre de
   progression. L'épingler portait la pile collante d'une page mission à plus
   du tiers de l'écran, et capturait au hit-test les commandes situées
   dessous — jusqu'au bouton « Envoyer la directive », par lequel l'opérateur
   répond à un agent qui attend un arbitrage. Un élément à rendre collant se
   désigne donc par un sélecteur explicite, jamais par sa position dans la
   fratrie. Hors redémarrage en cours ou échoué, chaque route garde de toute
   façon exactement son comportement de défilement d'origine : la variable
   retombe à 0px au démontage de la bannière. */
.restart-status-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
/* Hauteur bornée du bandeau — c'est elle qui fixe la part d'écran figée.
   Un motif d'échec est long par nature (« nouveau cockpit n a jamais répondu
   … il est LAISSÉ VIVANT … ») ; laissé libre de se replier, il occupait
   plusieurs lignes en permanence sur un écran étroit, et capturait au
   hit-test autant de commandes juste dessous. Le texte est donc borné à deux
   lignes et le bouton reste sur la première.

   Ce que ce repli COÛTE, et comment il est rendu : sur un écran de téléphone,
   deux lignes ne montrent qu'une petite part du message. Le reste n'est pas
   « accessible ailleurs » de façon utilisable — l'attribut `title` n'ouvre
   d'infobulle qu'au survol, et un écran tactile n'a pas de survol
   (`hover: none`, `pointer: coarse`) ; `GET /health` et
   `cockpit-restart-echec.log` demandent un outil et un clavier, pas un doigt.
   Le motif tronqué est donc porté par un BOUTON qui le déplie sur place
   (`.restart-status-banner__reason`, cf. dashboard.js) : c'est cette
   affordance-là, et elle seule, qui rend le message lisible en entier sur
   téléphone — l'intégralité du motif est atteignable d'un appui puis d'un
   défilement dans le bandeau, quelle que soit la largeur.

   Aucune hauteur ni aucun pourcentage n'est cité ici, et c'est délibéré : un
   chiffre inscrit en commentaire est une assertion que rien n'exécute. Ceux
   de ce bandeau ont menti trois lots de suite. Les mesures vivent dans le
   journal de mission, avec leurs conditions ; le code, lui, ne porte que ce
   qu'il applique. */
.restart-status-banner > span {
  /* base 0 (et non `auto`) : avec `flex-wrap: wrap`, un texte long garde une
     taille de base égale à sa largeur naturelle et pousse le bouton sur une
     seconde rangée — le bandeau fait alors deux rangées au lieu d'une. */
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Affordance de révélation au toucher — le motif d'échec est un bouton.
   Un vrai `<button>` et non un `div` cliquable : focus clavier, activation à
   Entrée/Espace, rôle annoncé aux lecteurs d'écran et `aria-expanded` sans
   rien à réimplémenter.

   `min-height: 44px` porte la cible tactile au format confortable au doigt
   (WCAG 2.5.5) y compris quand le motif tient sur une seule ligne. Ce
   plancher COÛTE quelques pixels de bandeau gelé en PERMANENCE, même replié
   et même quand le texte n'en a pas besoin : c'est un choix assumé, pas un
   oubli — une cible qu'on rate au doigt sur un téléphone rend l'affordance
   inutilisable, et cette affordance est la seule voie vers le motif complet.
   La valeur `44px` est épinglée par
   `test_the_failure_reason_is_revealed_by_a_real_touch_affordance`
   (tests/test_lot4_restart.py) — c'est ce test, pas ce commentaire, qui fait
   foi si la valeur change. */
.restart-status-banner__reason {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 2px 22px 2px 0;  /* réserve la gouttière du chevron */
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, .25);
}
.restart-status-banner__reason:focus-visible {
  outline: 0;
  box-shadow: var(--mst-focus-ring);
  border-radius: var(--mst-radius-sm);
}
.restart-status-banner__text {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* Déplié : le texte n'est plus tronqué, et ce qui dépasse défile DANS le
   bandeau. La borne n'est pas une fraction du viewport mais le budget
   `--bb-reason-max-h` que dashboard.js publie — ce qui reste de la part
   d'écran que la pile collante a le droit de figer, une fois retirées la
   hauteur MESURÉE de l'en-tête de route épinglé sous le bandeau et celle de
   l'habillage du bandeau lui-même. Borner le seul bloc de texte laissait ces
   deux-là hors du compte : le texte tenait sa limite pendant que la pile,
   elle, mangeait la moitié de l'écran.

   `overscroll-behavior: contain` empêche ce défilement interne de se
   propager à la page dessous une fois arrivé en bout de course. */
.restart-status-banner.is-expanded .restart-status-banner__text {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  max-height: var(--bb-reason-max-h, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Le chevron est posé DANS la gouttière réservée, en absolu : il ne prend
   aucune hauteur. C'est délibéré — une étiquette « voir le motif complet » sur
   sa propre ligne épaissit le bandeau en permanence, c'est-à-dire reprend
   d'une main le budget d'écran que le bornage à deux lignes venait de gagner.
   L'intitulé complet de l'action n'est pas perdu : il est porté par
   l'`aria-label` du bouton (lecteurs d'écran) et par son `title` (survol, là
   où le survol existe). */
.restart-status-banner__more {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  line-height: 1;
  opacity: .9;
}
/* Rien de plus à voir (le message tient à l'écran, cf. `data-tronque` mesuré
   après rendu par dashboard.js) : pas d'invitation à déplier. Une affordance
   qui promet un contenu inexistant cesse vite d'être crue. */
.restart-status-banner[data-tronque="non"]:not(.is-expanded) .restart-status-banner__more {
  display: none;
}
.restart-status-banner > .btn {
  flex: 0 0 auto;
}
#app > #restart-status-banner ~ * {
  top: var(--bb-restart-banner-h, 0px);
}
.restart-status-banner--failed {
  background: #5c1e1e;
  color: #fff;
}
.restart-status-banner--pending {
  background: var(--mst-bg-surface-2);
  color: var(--mst-text-primary);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
}

.topbar__brand {
  font-size: var(--mst-fs-display);
  font-weight: var(--mst-fw-bold);
  letter-spacing: 0.5px;
}

.topbar__tabs {
  display: flex;
  gap: var(--mst-sp-1);
  margin-left: var(--mst-sp-4);
}

.tab {
  padding: var(--mst-sp-2) var(--mst-sp-3);
  background: transparent;
  border: 0;
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-title);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--mst-motion-fast) var(--mst-easing),
              border-color var(--mst-motion-fast) var(--mst-easing);
}
.tab:hover { color: var(--mst-text-primary); }
.tab.is-active {
  color: var(--mst-text-primary);
  border-bottom-color: var(--mst-accent);
}
.tab:focus-visible { outline: 0; box-shadow: var(--mst-focus-ring); border-radius: var(--mst-radius-sm); }

/* Badge de rôle de device dans le tableau Admin > Appareils. */
.device-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--mst-fs-micro);
  font-weight: var(--mst-fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid var(--mst-border);
}
.device-role-badge[data-role="host"]  { color: #f5c542; border-color: #f5c542; }
.device-role-badge[data-role="admin"] { color: #4a90e2; border-color: #4a90e2; }
.device-role-badge[data-role="user"]  { color: var(--mst-text-secondary); }

/* Sélecteur de langue — bouton compact dans la topbar tabs.
   Cycle FR → EN → LV → FR au clic. */
.topbar__locale {
  margin-left: var(--mst-sp-3);
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
  font-weight: var(--mst-fw-bold);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all var(--mst-motion-fast) var(--mst-easing);
}
.topbar__locale:hover {
  color: var(--mst-text-primary);
  border-color: var(--mst-accent);
}
.topbar__locale:focus-visible { outline: 0; box-shadow: var(--mst-focus-ring); }

.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--mst-sp-4);
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
}

/* Lot 4 S4b — bouton « Redémarrer » discret, à droite du header. */
.topbar__restart {
  display: inline-flex;
  align-items: center;
  gap: var(--mst-sp-1);
  padding: 2px var(--mst-sp-2);
  border: 1px solid var(--mst-text-muted);
  border-radius: var(--mst-radius-sm);
  background: transparent;
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
  cursor: pointer;
}
.topbar__restart:hover {
  color: var(--mst-text-primary);
  border-color: var(--mst-text-secondary);
}

.exposure {
  display: inline-flex;
  align-items: center;
  gap: var(--mst-sp-1);
}
.exposure__dot {
  width: 10px; height: 10px;
  border-radius: var(--mst-radius-pill);
  background: var(--mst-net-local);
  display: inline-block;
}
.exposure[data-state="remote"] .exposure__dot { background: var(--mst-net-remote); }
.exposure[data-state="remote"] { color: var(--mst-net-remote); }

.mission-selector {
  display: flex;
  gap: var(--mst-sp-1);
  padding: var(--mst-sp-2) var(--mst-sp-5);
  background: var(--mst-bg-surface);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  overflow-x: auto;
}
.mission-selector__chip {
  padding: var(--mst-sp-1) var(--mst-sp-3);
  background: var(--mst-bg-surface-2);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-pill);
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--mst-sp-1);
}
.mission-selector__chip.is-active {
  border-color: var(--mst-accent);
  color: var(--mst-text-primary);
  background: var(--mst-accent-bg);
}
.mission-selector__chip[data-attention="true"]::before {
  content: "⚠";
  color: var(--mst-sem-arbitration);
}

.main {
  flex: 1;
  padding: var(--mst-sp-5);
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Boutons ---------- */

.btn {
  height: var(--mst-row-h);
  padding: 0 var(--mst-sp-4);
  border-radius: var(--mst-radius-sm);
  border: var(--mst-border-w) solid var(--mst-border);
  background: var(--mst-bg-surface-2);
  color: var(--mst-text-primary);
  cursor: pointer;
  font-size: var(--mst-fs-body);
  display: inline-flex;
  align-items: center;
  gap: var(--mst-sp-1);
  transition: background var(--mst-motion-fast) var(--mst-easing),
              border-color var(--mst-motion-fast) var(--mst-easing);
}
.btn:hover {
  background: var(--mst-bg-surface);
  border-color: var(--mst-border-strong);
}
.btn:focus-visible { outline: 0; box-shadow: var(--mst-focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--mst-bg-surface-2);
  color: var(--mst-text-muted);
  cursor: not-allowed;
}

.btn--primary {
  background: var(--mst-accent);
  color: var(--mst-text-on-accent);
  border-color: var(--mst-accent);
}
.btn--primary:hover {
  background: var(--mst-accent-hover);
  border-color: var(--mst-accent-hover);
}
.btn--primary:disabled {
  background: var(--mst-bg-surface-2);
  color: var(--mst-text-muted);
  border-color: var(--mst-border);
}

.btn--danger {
  background: transparent;
  color: var(--mst-sem-escalation);
  border-color: var(--mst-sem-escalation);
}
.btn--danger:hover {
  background: var(--mst-sem-escalation-bg);
}

/* ---------- Cartes de mission ---------- */

.dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mst-sp-3);
  margin-bottom: var(--mst-sp-5);
}
.dashboard__title { font-size: var(--mst-fs-display); margin: 0; }
.dashboard__compte { color: var(--mst-text-secondary); font-weight: normal; }
/* Recherche de missions (2026-09-12), juste avant « Lancer une mission ». */
.dashboard__actions {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  /* JAMAIS DE RETOUR À LA LIGNE (Roméo, 2026-09-12, capture à l'appui) : la
     recherche se place À GAUCHE du bouton, pas au-dessus. Elle se rétrécit
     quand la place manque — c'est le champ qui cède, pas la ligne. */
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;                /* sans ça, le bloc déborde sur un téléphone */
  justify-content: flex-end;
}
.dashboard__recherche {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 22rem;
  padding: var(--mst-sp-2) var(--mst-sp-3);
  background: var(--mst-bg-inset);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  color: var(--mst-text-primary);
  font-size: var(--mst-fs-body);
}
.dashboard__actions .btn {
  flex: 0 0 auto;              /* le bouton garde sa taille, le champ cède */
  white-space: nowrap;
}
.dashboard__recherche:focus {
  outline: 0;
  border-color: var(--mst-accent);
  box-shadow: var(--mst-focus-ring);
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--mst-sp-4);
}

.mission-card {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-4);
  cursor: pointer;
  transition: background var(--mst-motion-fast) var(--mst-easing),
              border-color var(--mst-motion-fast) var(--mst-easing);
}
.mission-card:hover {
  background: var(--mst-bg-surface-2);
  border-color: var(--mst-border-strong);
}
.mission-card[data-attention="true"] {
  border-left: 3px solid var(--mst-sem-arbitration);
}

.mission-card__head {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  margin-bottom: var(--mst-sp-2);
}
.mission-card__state {
  display: inline-flex;
  align-items: center;
  gap: var(--mst-sp-1);
  text-transform: uppercase;
  font-weight: var(--mst-fw-medium);
  font-size: var(--mst-fs-micro);
}
.mission-card__title {
  font-size: var(--mst-fs-title);
  font-weight: var(--mst-fw-medium);
  margin: 0 0 var(--mst-sp-3) 0;
  color: var(--mst-text-primary);
}
.mission-card__progress {
  height: 6px;
  background: var(--mst-border);
  border-radius: var(--mst-radius-pill);
  overflow: hidden;
  margin-bottom: var(--mst-sp-1);
}
.mission-card__progress > span {
  display: block;
  height: 100%;
  background: var(--mst-accent);
}
.mission-card__meta {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  display: flex;
  justify-content: space-between;
  gap: var(--mst-sp-2);
}
.mission-card__alert {
  color: var(--mst-sem-arbitration);
  font-weight: var(--mst-fw-medium);
}
/* Bouton Supprimer sur la carte mission — décalé à droite dans la rangée head */
.mission-card__delete {
  margin-left: auto;
  padding: 2px 8px;
  font-size: var(--mst-fs-micro);
  opacity: 0;
  transition: opacity var(--mst-motion-fast) var(--mst-easing);
  pointer-events: none;
}
.mission-card:hover .mission-card__delete {
  opacity: 1;
  pointer-events: auto;
}

/* Étoile favori — affichée en début de tête de carte, toujours visible
   pour les favoris, atténuée pour les autres (révélée au hover). */
.mission-card__fav {
  background: transparent;
  border: 0;
  padding: 0 4px;
  margin-right: 4px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--mst-text-muted);
  transition: color var(--mst-motion-fast) var(--mst-easing),
              opacity var(--mst-motion-fast) var(--mst-easing);
  opacity: 0.4;
}
.mission-card__fav[data-favorite="true"] {
  color: #f5c542;       /* doré */
  opacity: 1;
}
.mission-card:hover .mission-card__fav { opacity: 1; }
.mission-card__fav:hover { color: #f5c542; }

/* Liseré gauche doré pour les missions favorites (signal visuel renforcé). */
.mission-card[data-favorite="true"] {
  box-shadow: inset 3px 0 0 0 #f5c542;
}

/* Cursor pointer sur la 1ère ligne d'un message (toggle déplier/replier). */
.message__summary { cursor: pointer; }

/* Tableau de stats dans la modale de suppression */
.delete-mission-stats td {
  padding: 2px 12px 2px 0;
  vertical-align: top;
}
.delete-mission-stats td:first-child {
  color: var(--mst-text-muted);
  white-space: nowrap;
  font-weight: var(--mst-fw-medium);
}

/* ---------- Pastilles d'état ---------- */

.dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: var(--mst-radius-pill);
}
.dot[data-state="RUNNING"]        { background: var(--mst-state-session-running); }
.dot[data-state="PAUSED"]         { background: var(--mst-state-session-paused); }
.dot[data-state="AWAITING_HUMAN"] { background: var(--mst-state-session-awaiting_human); }
.dot[data-state="STOPPED"]        { background: var(--mst-state-session-stopped); }

/* ---------- Modale ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--mst-sp-5);
}
.modal {
  background: var(--mst-bg-surface);
  border-radius: var(--mst-radius-md);
  border: var(--mst-border-w) solid var(--mst-border);
  box-shadow: var(--mst-elevation-modal);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: var(--mst-sp-5);
}
.modal__title {
  margin: 0 0 var(--mst-sp-4) 0;
  font-size: var(--mst-fs-display);
}
.modal__close {
  float: right;
  background: transparent;
  border: 0;
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-title);
  cursor: pointer;
}
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--mst-sp-2);
  margin-top: var(--mst-sp-5);
  padding-top: var(--mst-sp-4);
  border-top: var(--mst-border-w) solid var(--mst-border);
}

/* ---------- Formulaires ---------- */

.field { margin-bottom: var(--mst-sp-4); }
.field__label {
  display: block;
  margin-bottom: var(--mst-sp-1);
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
  font-weight: var(--mst-fw-medium);
}
.field input[type="text"],
.field textarea,
.field input[type="number"] {
  width: 100%;
  padding: var(--mst-sp-2) var(--mst-sp-3);
  background: var(--mst-bg-inset);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  color: var(--mst-text-primary);
  font-size: var(--mst-fs-body);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--mst-accent);
  box-shadow: var(--mst-focus-ring);
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mst-sp-2);
}
.mode-card {
  padding: var(--mst-sp-3);
  background: var(--mst-bg-surface-2);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  cursor: pointer;
  transition: background var(--mst-motion-fast) var(--mst-easing),
              border-color var(--mst-motion-fast) var(--mst-easing);
}
.mode-card:hover { border-color: var(--mst-border-strong); }
.mode-card.is-selected {
  background: var(--mst-accent-bg);
  border: 2px solid var(--mst-accent);
  padding: calc(var(--mst-sp-3) - 1px);
}
.mode-card__title {
  font-weight: var(--mst-fw-medium);
  margin-bottom: var(--mst-sp-1);
  display: flex;
  align-items: center;
  gap: var(--mst-sp-1);
}
.mode-card__sub {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  line-height: var(--mst-lh-meta);
}

.casting-box {
  padding: var(--mst-sp-3);
  background: var(--mst-bg-surface-2);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
}
.casting-box label { display: flex; gap: var(--mst-sp-2); align-items: flex-start; cursor: pointer; }
.casting-box__hint {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  margin-top: var(--mst-sp-1);
  padding-left: 26px;
}

/* ---------- Page mission — en-tête ---------- */

.mission-header {
  background: var(--mst-bg-surface);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  padding: var(--mst-sp-3) var(--mst-sp-5);
}
.mission-header__crumbs {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  margin-bottom: var(--mst-sp-2);
}
.mission-header__crumbs a { color: var(--mst-accent); cursor: pointer; }
.mission-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-3);
  margin-bottom: var(--mst-sp-3);
}
.mission-header__title {
  font-size: var(--mst-fs-display);
  margin: 0;
}
.mission-header__chip {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  padding: var(--mst-sp-1) var(--mst-sp-2);
  background: var(--mst-bg-surface-2);
  border-radius: var(--mst-radius-pill);
  border: var(--mst-border-w) solid var(--mst-border);
}
/* Badge MODE — J4-2b. Couleur sémantique distincte selon DryRun/SDK. */
.mission-header__chip--runtime {
  font-weight: 600;
  letter-spacing: 0.03em;
}
.mission-header__chip--runtime[data-runtime="sdk"] {
  color: var(--mst-sem-go);
  border-color: var(--mst-sem-go);
  background: var(--mst-bg-surface-2);
}
/* J4-9 — runtime ``claude_cli`` (claude -p via abonnement Pro/Max).
   Couleur sémantique distincte : on emprunte le ton "phase" (bleu/violet)
   pour bien le séparer visuellement du SDK API (vert "go") et du
   DryRun (gris). Le mode est central dans la promesse "tu utilises ton
   abonnement, pas de carte bancaire" — il mérite sa propre teinte. */
.mission-header__chip--runtime[data-runtime="claude_cli"] {
  color: var(--mst-sem-phase, var(--mst-sem-go));
  border-color: var(--mst-sem-phase, var(--mst-sem-go));
  background: var(--mst-bg-surface-2);
}
.mission-header__chip--runtime[data-runtime="dry_run"] {
  color: var(--mst-text-muted);
  border-color: var(--mst-border);
  background: var(--mst-bg-surface-2);
}
.mission-header__actions {
  display: flex;
  gap: var(--mst-sp-2);
  margin-left: auto;
}
.mission-header__progress-row {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-3);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}
.mission-header__progress {
  flex: 1;
  height: 4px;
  background: var(--mst-border);
  border-radius: var(--mst-radius-pill);
  overflow: hidden;
  max-width: 320px;
}
.mission-header__progress > span {
  display: block; height: 100%;
  background: var(--mst-accent);
}

.tabs-row {
  display: flex;
  gap: var(--mst-sp-1);
  padding: 0 var(--mst-sp-5);
  background: var(--mst-bg-surface);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
}

/* ---------- Onglet Messages ---------- */

.messages-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  padding: var(--mst-sp-3) var(--mst-sp-5);
  flex-wrap: wrap;
  background: var(--mst-bg-app);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--mst-sp-1);
  padding: 2px var(--mst-sp-2);
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-pill);
  font-size: var(--mst-fs-micro);
  color: var(--mst-text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
/* Correctif B — filtre actif : fond accentué + bordure épaisse + texte fort */
.filter-pill.is-active {
  color: var(--mst-accent);
  background: var(--mst-accent-bg);
  border-width: 2px;
  border-color: var(--mst-accent);
  font-weight: var(--mst-fw-bold);
}
.filter-pill--clear {
  color: var(--mst-text-muted);
  border-style: dashed;
}

/* Correctif C — bouton plier/déplier global */
.messages-toolbar__count {
  margin-left: auto;
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
}
.messages-expand-all {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  font-size: var(--mst-fs-micro);
  color: var(--mst-text-secondary);
  cursor: pointer;
  padding: 2px var(--mst-sp-2);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.messages-expand-all:hover {
  background: var(--mst-accent-bg);
  color: var(--mst-accent);
  border-color: var(--mst-accent);
}

/* Correctif A — placeholder liste vide */
.messages-empty {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-muted);
  font-style: italic;
  padding: var(--mst-sp-4) var(--mst-sp-3);
  text-align: center;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Padding interne réduit pour que la zone soit plus large visuellement,
     comme demandé par Roméo (capture box verte plus généreuse). */
  padding: var(--mst-sp-2) var(--mst-sp-2);
  /* Marges externes : zone qui prend toute la largeur dispo, avec une
     petite marge horizontale pour respirer côté bordure. */
  margin: var(--mst-sp-2) var(--mst-sp-3);
  /* Scroll interne : la liste tient sur ~1 écran et défile sans pousser
     les onglets ni la bannière hors champ. */
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  border: 1px solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  background: var(--mst-bg-deep, var(--mst-bg-surface));
}

/* Note : le scroll Monitoring est défini plus bas (ligne ~844) avec un
   layout 2 colonnes scrollant indépendamment (chef à gauche, agents à
   droite). On garde juste un wrapper compact ici. */
.monitoring-wrap {
  margin: var(--mst-sp-2) var(--mst-sp-3);
  border: 1px solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  overflow: hidden;
}

.message {
  display: grid;
  grid-template-columns: 4px max-content max-content max-content 1fr auto;
  gap: var(--mst-sp-3);
  padding: var(--mst-sp-2) var(--mst-sp-3);
  background: var(--mst-bg-surface);
  align-items: start;
  position: relative;
}
.message__body {
  text-align: left;
  word-break: break-word;
}
.message__liseré {
  width: 3px;
  height: 100%;
  background: var(--mst-sem-task);
  border-radius: var(--mst-radius-pill);
}
.message[data-actionable="true"] {
  background: var(--mst-sem-arbitration-bg);
}
.message[data-type="escalation"][data-actionable="true"] {
  background: var(--mst-sem-escalation-bg);
}
.message__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mst-sp-1);
  padding: 2px var(--mst-sp-2);
  border-radius: var(--mst-radius-sm);
  font-size: var(--mst-fs-micro);
  font-weight: var(--mst-fw-bold);
  letter-spacing: 0.5px;
}
.message__time {
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
  font-family: var(--mst-font-mono);
}
.message__author {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  /* Lot 4 S4a — nom d'agent sur une ligne, modèle en dessous (cf. Monitoring). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.message__author-tag {
  display: inline-block;
  border-left: 3px solid var(--mst-text-muted);
  padding: 0 var(--mst-sp-1) 0 var(--mst-sp-1);
  color: var(--mst-text-primary);
  font-weight: var(--mst-fw-medium);
}
/* Lot 3 (#27) — modèle réel sous l'auteur d'un message.
   Lot 4 S4a — passe en block sous le nom (plus inline à sa suite). */
.message__author-model {
  display: block;
  margin-left: 0;
  font-family: var(--mst-font-mono, monospace);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-muted);
}
.message__body {
  font-size: var(--mst-fs-body);
  line-height: var(--mst-lh-body);
}
.message__summary { color: var(--mst-text-primary); }
.message__detail {
  margin-top: var(--mst-sp-2);
  padding-top: var(--mst-sp-2);
  border-top: var(--mst-border-w) dashed var(--mst-border);
  font-size: var(--mst-fs-body);
  color: var(--mst-text-secondary);
  white-space: pre-wrap;
}
.message__toggle {
  background: transparent;
  border: 0;
  color: var(--mst-text-secondary);
  cursor: pointer;
  font-size: var(--mst-fs-title);
  padding: 0 var(--mst-sp-1);
}

.banner-new {
  position: sticky;
  top: 0;
  margin: var(--mst-sp-2) 0;
  text-align: center;
  background: var(--mst-accent-bg);
  color: var(--mst-accent);
  padding: var(--mst-sp-2);
  border-radius: var(--mst-radius-sm);
  cursor: pointer;
  font-size: var(--mst-fs-meta);
  font-weight: var(--mst-fw-medium);
  display: none;
}
.banner-new.is-visible { display: block; }

/* ---------- Onglet Tâches (refonte 2 colonnes) ---------- */

.tasks-2col {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--mst-sp-3);
  padding: var(--mst-sp-3);
  /* Hauteur DÉFINIE (pas seulement max-height) — indispensable pour que le
     `max-height: 100%` des colonnes ci-dessous se résolve et déclenche leur
     `overflow-y: auto`. Avec un simple max-height, la hauteur du parent reste
     `auto`, le % des enfants ne se résout pas, les colonnes débordent et sont
     coupées par `overflow: hidden` → aucune barre de défilement (le contenu du
     bas devenait invisible). Même mécanique que l'onglet Monitoring. */
  height: calc(100vh - 240px);
  overflow: hidden;
}
.tasks-2col__left, .tasks-2col__right {
  background: var(--mst-bg-surface);
  border: 1px solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-3);
  overflow-y: auto;
  max-height: 100%;
}
.tasks-2col__heading {
  margin: 0 0 var(--mst-sp-2) 0;
  font-size: var(--mst-fs-body);
  color: var(--mst-text-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mst-border);
  padding-bottom: var(--mst-sp-2);
}
.tasks-2col__subheading {
  margin: var(--mst-sp-3) 0 var(--mst-sp-1) 0;
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.phase-card {
  background: var(--mst-bg-surface-2);
  border-left: 3px solid var(--mst-text-muted);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-2);
  margin-bottom: var(--mst-sp-2);
}
.phase-card[data-state="current"] { border-left-color: var(--mst-sem-phase); }
.phase-card[data-state="done"] { border-left-color: var(--mst-state-done); opacity: 0.7; }
.phase-card__head { display: flex; gap: var(--mst-sp-2); align-items: center; }
.phase-card__glyph { font-size: 14px; }
.phase-card__title { font-size: var(--mst-fs-body); color: var(--mst-text-primary); }
.phase-card__meta { font-size: var(--mst-fs-micro); color: var(--mst-text-muted); margin-top: 2px; font-family: var(--mst-font-mono); }
.lot-mini {
  display: flex; gap: var(--mst-sp-2); align-items: center;
  padding: var(--mst-sp-1) var(--mst-sp-2);
  background: var(--mst-bg-surface-2);
  border-radius: var(--mst-radius-sm);
  margin-bottom: var(--mst-sp-1);
  font-size: var(--mst-fs-meta);
}
.lot-mini__code { color: var(--mst-text-muted); font-family: var(--mst-font-mono); }
.lot-mini__title { flex: 1; color: var(--mst-text-primary); }
.lot-mini__progress { color: var(--mst-text-secondary); }

.task-table__head, .task-table__row {
  display: grid;
  grid-template-columns: 110px 1fr 140px 80px;
  gap: var(--mst-sp-2);
  align-items: center;
  padding: var(--mst-sp-1) var(--mst-sp-2);
}
.task-table__head {
  font-size: var(--mst-fs-micro);
  color: var(--mst-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--mst-border);
  margin-bottom: var(--mst-sp-1);
}
.task-table__row {
  border-bottom: 1px solid transparent;
  font-size: var(--mst-fs-body);
}
.task-table__row:hover { background: var(--mst-bg-surface-2); }
.task-table__col--status { font-family: var(--mst-font-mono); font-size: var(--mst-fs-meta); }
.task-table__row[data-status="done"] .task-table__col--status { color: var(--mst-state-done); }
.task-table__row[data-status="in_progress"] .task-table__col--status { color: var(--mst-state-in_progress); }
.task-table__row[data-status="open"] .task-table__col--status { color: var(--mst-state-open); }
.task-table__row[data-status="blocked"] .task-table__col--status { color: var(--mst-state-blocked); }
.task-table__col--title { color: var(--mst-text-primary); word-break: break-word; }
.task-table__col--agent { color: var(--mst-text-secondary); font-size: var(--mst-fs-meta); }
.task-table__col--time { color: var(--mst-text-muted); font-size: var(--mst-fs-meta); font-family: var(--mst-font-mono); }
.empty--inline { padding: var(--mst-sp-2); font-style: italic; }

/* Ancien style conservé pour compatibilité (encore utilisé ailleurs) */
.tasks {
  padding: var(--mst-sp-3) var(--mst-sp-5) var(--mst-sp-5) var(--mst-sp-5);
}
.lot {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  margin-bottom: var(--mst-sp-3);
  overflow: hidden;
}
.lot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mst-sp-2) var(--mst-sp-4);
  background: var(--mst-bg-surface-2);
  cursor: pointer;
}
.lot__title { font-weight: var(--mst-fw-medium); display: flex; align-items: center; gap: var(--mst-sp-2); }
.lot__progress { font-size: var(--mst-fs-meta); color: var(--mst-text-secondary); }
.lot__tasks { padding: var(--mst-sp-2) var(--mst-sp-3); }
.task-row {
  display: grid;
  grid-template-columns: 20px 1fr 180px 90px;
  gap: var(--mst-sp-2);
  padding: var(--mst-sp-1) var(--mst-sp-2);
  align-items: center;
  font-size: var(--mst-fs-body);
}
.task-row:hover { background: var(--mst-bg-surface-2); }
.task-row__glyph { font-size: 16px; text-align: center; }
.task-row__title { color: var(--mst-text-primary); }
.task-row__agent { color: var(--mst-text-secondary); font-size: var(--mst-fs-meta); }
.task-row__status { color: var(--mst-text-muted); font-size: var(--mst-fs-micro); text-transform: uppercase; }
.task-row__cause {
  grid-column: 2 / -1;
  color: var(--mst-text-muted);
  font-size: var(--mst-fs-meta);
  padding-left: var(--mst-sp-2);
  border-left: 3px solid var(--mst-sem-escalation);
}

/* ---------- Onglet Monitoring (bandes horizontales — J2-5 §6.5) ---------- */

.monitoring {
  display: grid;
  grid-template-columns: 340px 1fr;
  background: var(--mst-bg-app);
  /* Hauteur fixée à 1 viewport (moins l'en-tête + onglets) — les 2 zones
     scrollent indépendamment, plus besoin de descendre la page. */
  height: calc(100vh - 240px);
  overflow: hidden;
  gap: var(--mst-sp-2);
}

.monitoring__chef {
  background: var(--mst-bg-surface);
  border-right: var(--mst-border-w) solid var(--mst-border);
  padding: var(--mst-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-2);
  border-left: 3px solid var(--mst-accent);
  /* Scroll interne propre à la colonne CHEF */
  overflow-y: auto;
  max-height: 100%;
}
.monitoring__chef-head {
  font-weight: var(--mst-fw-bold);
  font-size: var(--mst-fs-title);
  letter-spacing: 0.5px;
}
.monitoring__chef-meta {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}
.monitoring__chef-stream {
  font-family: var(--mst-font-mono);
  font-size: var(--mst-fs-mono);
  line-height: var(--mst-lh-mono);
  color: var(--mst-text-primary);
  white-space: pre-wrap;
  flex: 1;
}
.monitoring__chef-stream > div { margin: var(--mst-sp-1) 0; }
/* J5-L — entrées et séparateurs du flux chef de projet */
.monitoring__chef-entry { margin: var(--mst-sp-1) 0; }
.monitoring__chef-sep {
  border: none;
  border-top: 1px solid var(--mst-border);
  margin: var(--mst-sp-2) 0;
  opacity: 0.6;
}

.monitoring__agents {
  background: var(--mst-bg-app);
  /* PAS de cartes, PAS de cadres : juste des bandes séparées par filets. */
  /* Scroll interne propre à la colonne AGENTS — indépendant du chef. */
  overflow-y: auto;
  max-height: 100%;
  padding: var(--mst-sp-2);
}

.agent-band {
  padding: var(--mst-sp-3) var(--mst-sp-4);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  /* Régularité PD5 : toujours la même structure */
}
.agent-band:last-child { border-bottom: 0; }

.agent-band__row1 {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-3);
  font-family: var(--mst-font-mono);
  font-size: var(--mst-fs-mono);
  color: var(--mst-text-secondary);
  flex-wrap: wrap;
}
.agent-band__row1 .model { color: var(--mst-text-secondary); }
.agent-band__row1 .perm { color: var(--mst-text-muted); font-size: var(--mst-fs-meta); }
.agent-band__row1 .pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--mst-radius-pill);
}
.agent-band__row1 .pulse[data-state="active"]  { background: var(--mst-sem-launch); }
.agent-band__row1 .pulse[data-state="waiting"] { background: var(--mst-text-muted); }
.agent-band__row1 .pulse[data-state="blocked"] { background: var(--mst-sem-escalation); }
.agent-band__row1 .tag {
  margin-left: auto;
  /* Lot 4 S4a-bis (directive #47) — nom d'agent sur une ligne, modèle réel
     empilé en dessous dans le badge (miroir du panneau STRATEGIST). */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 0 var(--mst-sp-2);
  font-family: var(--mst-font-sans);
  font-size: var(--mst-fs-micro);
  font-weight: var(--mst-fw-medium);
  border-left: 3px solid var(--mst-text-primary);
  color: var(--mst-text-primary);
}
.agent-band__row1 .tag__name {
  display: inline-flex;
  align-items: center;
  gap: var(--mst-sp-1);
}
.agent-band__row1 .tag__model {
  font-family: var(--mst-font-mono, monospace);
  font-weight: var(--mst-fw-regular, normal);
  color: var(--mst-text-muted);
}
.agent-band__row2 {
  font-size: var(--mst-fs-body);
  line-height: var(--mst-lh-body);
  color: var(--mst-text-primary);
  margin-top: var(--mst-sp-1);
}
.agent-band__row2--waiting {
  color: var(--mst-text-muted);
  font-style: italic;
}
.agent-band__row3 {
  font-family: var(--mst-font-mono);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  margin-top: var(--mst-sp-1);
}

/* Live strip — flux des hooks Claude Code (PreToolUse, PostToolUse, …).
   3 lignes max sous chaque bande agent, façon terminal. */
.live-strip {
  margin-top: var(--mst-sp-2);
  padding: var(--mst-sp-1) var(--mst-sp-2);
  background: var(--mst-bg-subtle, #1a1a1a);
  border: 1px solid var(--mst-border);
  border-radius: 4px;
  font-family: var(--mst-font-mono);
  font-size: 11px;
  color: var(--mst-text-secondary);
  max-height: 90px;
  min-height: 72px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Bloque la compression flex quand le parent (.monitoring__chef) scrolle. */
  flex: 0 0 auto;
}
.live-strip:empty::before {
  content: "▸ en attente d'activité…";
  color: var(--mst-text-muted);
  font-style: italic;
}
.live-strip__line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-strip--strategist {
  margin: var(--mst-sp-2) 0;
}

/* Boutons compacts pour barres d'action (paste/joindre/etc.). */
.btn--sm {
  padding: 4px 10px;
  font-size: var(--mst-fs-meta);
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--mst-border);
  color: var(--mst-text-primary);
}
.btn--ghost:hover {
  background: var(--mst-bg-subtle, rgba(255,255,255,0.05));
}
.field__actions {
  display: flex;
  gap: var(--mst-sp-2);
  align-items: center;
  margin-top: var(--mst-sp-1);
  flex-wrap: wrap;
}

/* Zone de dépôt (drag & drop de pièces jointes). Feedback de survol quand
   des fichiers sont glissés au-dessus — cf. makeDropzone() (components.js). */
.is-dragover {
  outline: 2px dashed var(--mst-accent, #4f8cff);
  outline-offset: 2px;
  background: var(--mst-accent-bg, rgba(79,140,255,0.08));
  border-radius: var(--mst-radius-sm, 6px);
  transition: background 0.12s ease, outline-color 0.12s ease;
}

/* Liste cumulative des pièces jointes — chips supprimables (fileChips(),
   components.js). Chaque chip = un fichier ajouté (par bouton, glisser-déposer
   ou collage) ; cliquer dessus le retire individuellement. */
.file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mst-sp-2, 8px);
  margin-top: var(--mst-sp-2, 8px);
  width: 100%;
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 8px;
  font-size: var(--mst-fs-meta, 12px);
  line-height: 1.4;
  color: var(--mst-text-primary, #e6e6e6);
  background: var(--mst-accent-bg, rgba(79,140,255,0.10));
  border: 1px solid var(--mst-accent, #4f8cff);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.file-chip:hover {
  background: var(--mst-sem-error-bg, rgba(255,90,90,0.14));
  border-color: var(--mst-sem-error, #ff5a5a);
}
.file-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.file-chip__size {
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.file-chip__x {
  font-weight: var(--mst-fw-bold, 700);
  line-height: 1;
  opacity: 0.7;
}
.file-chip:hover .file-chip__x { opacity: 1; color: var(--mst-sem-error, #ff5a5a); }

/* TokenBar */
.tokenbar {
  display: inline-flex;
  align-items: center;
  gap: var(--mst-sp-2);
  font-family: var(--mst-font-mono);
  font-size: var(--mst-fs-mono);
}
.tokenbar__fill { letter-spacing: 0.4px; }
.tokenbar__value { font-weight: var(--mst-fw-medium); }
.tokenbar[data-threshold="calm"]   .tokenbar__fill,
.tokenbar[data-threshold="calm"]   .tokenbar__value { color: var(--mst-tokenbar-calm); }
.tokenbar[data-threshold="warn"]   .tokenbar__fill,
.tokenbar[data-threshold="warn"]   .tokenbar__value { color: var(--mst-tokenbar-warn); }
.tokenbar[data-threshold="danger"] .tokenbar__fill,
.tokenbar[data-threshold="danger"] .tokenbar__value { color: var(--mst-tokenbar-danger); }
.tokenbar[data-threshold="over"]   .tokenbar__fill,
.tokenbar[data-threshold="over"]   .tokenbar__value { color: var(--mst-tokenbar-over); }

/* ---------- Onglet Fichiers ---------- */

.files {
  padding: var(--mst-sp-4) var(--mst-sp-5);
  position: relative;
  min-height: 12rem;          /* une cible de dépôt même quand la liste est vide */
}
.files__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mst-sp-2);
  margin-bottom: var(--mst-sp-3);
}
.files__depots {
  display: flex;
  gap: var(--mst-sp-2);
}
/* Glisser-déposer (2026-09-12) : la zone n'apparaît que pendant le survol. */
.files__zone-depot { display: none; }
.files--depot .files__zone-depot {
  display: flex;
  position: absolute;
  inset: var(--mst-sp-2);
  z-index: 5;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--mst-accent);
  border-radius: var(--mst-radius-md);
  background: var(--mst-accent-bg);
  color: var(--mst-text-primary);
  font-size: var(--mst-fs-body);
  font-weight: 600;
  opacity: 0.94;
  pointer-events: none;        /* le dépôt reste reçu par la section */
}
.files__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  overflow: hidden;
}
.files__table th,
.files__table td {
  padding: var(--mst-sp-2) var(--mst-sp-3);
  text-align: left;
  font-size: var(--mst-fs-body);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
}
.files__table th {
  background: var(--mst-bg-surface-2);
  color: var(--mst-text-secondary);
  font-weight: var(--mst-fw-medium);
  font-size: var(--mst-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.files__table tr:hover td { background: var(--mst-bg-surface-2); }
.files__table .files__actions {
  display: flex;
  gap: var(--mst-sp-1);
  justify-content: flex-end;
}
.icon-btn {
  background: transparent;
  border: var(--mst-border-w) solid var(--mst-border);
  color: var(--mst-text-primary);
  padding: 0 var(--mst-sp-2);
  height: 28px;
  border-radius: var(--mst-radius-sm);
  cursor: pointer;
  font-size: var(--mst-fs-meta);
}
.icon-btn:hover { background: var(--mst-bg-surface-2); }
.icon-btn--danger { color: var(--mst-sem-escalation); border-color: var(--mst-sem-escalation); }

/* Badges source de fichier (mission vs upload opérateur) */
.files__badge {
  display: inline-block;
  padding: 1px var(--mst-sp-1);
  border-radius: var(--mst-radius-sm);
  font-size: var(--mst-fs-meta);
  font-weight: var(--mst-fw-medium);
  letter-spacing: 0.3px;
  vertical-align: middle;
}
.files__badge--mission {
  background: var(--mst-sem-milestone-bg);
  color: var(--mst-sem-milestone);
  border: 1px solid var(--mst-sem-milestone);
}
.files__badge--upload {
  background: var(--mst-sem-task-bg);
  color: var(--mst-sem-task);
  border: 1px solid var(--mst-sem-task);
}

/* Cycle de vie d'un livrable (évolution 2 du 2026-08-07).
   Le badge est pointillé tant que le livrable peut encore bouger : c'est ce
   qui distingue, d'un coup d'œil, ce qu'on peut encore infléchir de ce qui est
   arrêté. Un livrable « final » n'a pas de badge — pas de bruit sur l'état
   normal. */
.files__badge--brouillon,
.files__badge--en_revue,
.files__badge--revise {
  border-style: dashed;
  border-width: 1px;
}
.files__badge--brouillon {
  background: var(--mst-sem-question-bg, transparent);
  color: var(--mst-sem-question, var(--mst-text-secondary));
  border-color: var(--mst-sem-question, var(--mst-border));
}
.files__badge--en_revue {
  background: var(--mst-sem-escalation-bg, transparent);
  color: var(--mst-sem-escalation, var(--mst-text-secondary));
  border-color: var(--mst-sem-escalation, var(--mst-border));
}
.files__badge--revise {
  background: var(--mst-sem-milestone-bg, transparent);
  color: var(--mst-sem-milestone, var(--mst-text-secondary));
  border-color: var(--mst-sem-milestone, var(--mst-border));
}

/* Dialogue de remarque + historique des versions */
.modal--remarque .remarque__corps,
.modal--remarque .remarque__cible {
  width: 100%;
  margin-top: var(--mst-sp-2);
  padding: var(--mst-sp-2);
  background: var(--mst-bg-surface-2);
  color: var(--mst-text-primary);
  border: 1px solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  font-family: inherit;
  font-size: var(--mst-fs-body);
}
.modal--remarque .remarque__bloquante {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-1);
  margin-top: var(--mst-sp-2);
  font-size: var(--mst-fs-meta);
}
.modal__hint {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  margin: var(--mst-sp-1) 0 0;
}
.modal__hint--warn { color: var(--mst-sem-escalation, var(--mst-text-secondary)); }

.modal--versions .versions__corps {
  max-height: 50vh;
  overflow-y: auto;
  margin-top: var(--mst-sp-2);
}
.versions__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mst-sp-2);
  align-items: baseline;
  padding: var(--mst-sp-1) 0;
  border-bottom: 1px solid var(--mst-border);
  font-size: var(--mst-fs-meta);
}
.versions__num { font-weight: var(--mst-fw-medium); min-width: 2.5em; }
.versions__jalon { color: var(--mst-text-primary); }
.versions__date, .versions__auteur { color: var(--mst-text-secondary); }
.versions__cause {
  flex-basis: 100%;
  color: var(--mst-sem-escalation, var(--mst-text-secondary));
}

/* ---------- Onglet Branches (évolutions 1 et 3 du 2026-08-07) ----------
   Ce qu'il doit rendre lisible d'un coup d'œil : ce qui avance EN MÊME TEMPS,
   ce qui attend quoi, et ce qui se passe ENTRE les agents. */
.branches__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mst-sp-2);
  margin-bottom: var(--mst-sp-3);
}
.branches__hint,
.branches__resume {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}
.branches__resume { margin-bottom: var(--mst-sp-2); }

.branche {
  padding: var(--mst-sp-2);
  margin-bottom: var(--mst-sp-2);
  background: var(--mst-bg-surface-1);
  border: 1px solid var(--mst-border);
  border-left: 3px solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
}
/* Seules les branches qui DEMANDENT quelque chose se signalent : une unité
   qui avance normalement n'a pas à attirer l'œil. */
.branche--en-cours   { border-left-color: var(--mst-sem-task, var(--mst-border)); }
.branche--validée    { border-left-color: var(--mst-sem-milestone, var(--mst-border)); }
.branche--suspendue,
.branche--bloquée    { border-left-color: var(--mst-sem-escalation, var(--mst-border)); }

.branche__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mst-sp-2);
}
.branche__pastille { font-size: 1.1em; }
.branche__titre { flex: 1 1 auto; }
.branche__critique {
  padding: 1px var(--mst-sp-1);
  border: 1px solid var(--mst-sem-escalation, var(--mst-border));
  border-radius: var(--mst-radius-sm);
  color: var(--mst-sem-escalation, var(--mst-text-secondary));
  font-size: var(--mst-fs-meta);
}
.branche__instance,
.branche__etat,
.branche__deps,
.branche__perimetre,
.branche__livrables {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}
.branche__deps,
.branche__perimetre,
.branche__livrables { margin-top: var(--mst-sp-1); }

.branche__chaine {
  margin: var(--mst-sp-2) 0 0;
  padding-left: var(--mst-sp-3);
  border-left: 1px dashed var(--mst-border);
  list-style: none;
}
.chaine__pas {
  display: flex;
  gap: var(--mst-sp-2);
  padding: 2px 0;
  font-size: var(--mst-fs-meta);
}
.chaine__heure { color: var(--mst-text-secondary); font-variant-numeric: tabular-nums; }
.chaine__pas--error_routed .chaine__texte,
.chaine__pas--escalated .chaine__texte {
  color: var(--mst-sem-escalation, var(--mst-text-primary));
}
.chaine__pas--milestone_detected .chaine__texte,
.chaine__pas--control_assigned .chaine__texte {
  color: var(--mst-sem-milestone, var(--mst-text-primary));
}

/* Légende source */
.files__legend {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-1);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}

/* Highlight temporaire d'une ligne de fichier (naviguée depuis Messages) */
@keyframes files-row-highlight {
  0%   { background: var(--mst-sem-milestone-bg); }
  100% { background: transparent; }
}
.files__row--highlight td {
  animation: files-row-highlight 2s ease-out forwards;
}

/* Intertitre de groupe dans la liste des fichiers.
   « À lire » d'abord, le reste ensuite — cf. `lignesDeFichiers` dans
   mission.js. Discret : c'est un repère, pas un titre de section. */
.files__groupe td {
  padding-top: var(--mst-sp-3);
  color: var(--mst-text-muted);
  font-size: var(--mst-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: var(--mst-border-w) solid var(--mst-border);
}
.files__groupe:first-child td { padding-top: 0; }

/* Un document que Roméo doit ouvrir : son nom porte le poids, pas une
   couleur de fond — la ligne reste lisible quel que soit le thème. */
.files__row--livrable .files__cell--name {
  font-weight: 600;
}

/* ---------- Modale de prévisualisation de fichier ---------- */

.file-preview-overlay .modal {
  max-width: 860px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.file-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mst-sp-3) var(--mst-sp-5);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  background: var(--mst-bg-surface-2);
  gap: var(--mst-sp-3);
  flex-shrink: 0;
}

.file-preview__name {
  font-weight: var(--mst-fw-medium);
  font-size: var(--mst-fs-body);
  color: var(--mst-text-primary);
  word-break: break-all;
  flex: 1;
}

.file-preview__header-actions {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  flex-shrink: 0;
}

.file-preview__body {
  overflow: auto;
  flex: 1;
  padding: var(--mst-sp-5);
}

.file-preview__loading {
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-body);
  text-align: center;
  padding: var(--mst-sp-5);
}

/* Rendu Markdown */
.file-preview__markdown {
  font-size: var(--mst-fs-body);
  line-height: 1.65;
  color: var(--mst-text-primary);
}
.file-preview__markdown h1,
.file-preview__markdown .file-preview__h1 { font-size: 1.5em; margin: 0.75em 0 0.4em; border-bottom: var(--mst-border-w) solid var(--mst-border); padding-bottom: 0.2em; }
.file-preview__markdown h2,
.file-preview__markdown .file-preview__h2 { font-size: 1.25em; margin: 0.75em 0 0.3em; }
.file-preview__markdown h3,
.file-preview__markdown .file-preview__h3 { font-size: 1.1em; margin: 0.6em 0 0.25em; }
.file-preview__markdown h4,
.file-preview__markdown .file-preview__h4,
.file-preview__markdown h5,
.file-preview__markdown .file-preview__h5,
.file-preview__markdown h6,
.file-preview__markdown .file-preview__h6 { font-size: 1em; margin: 0.5em 0 0.2em; }
.file-preview__markdown .file-preview__p { margin: 0 0 0.5em; }
.file-preview__markdown ul,
.file-preview__markdown ol { margin: 0.4em 0 0.4em 1.6em; }
.file-preview__markdown li { margin-bottom: 0.2em; }
.file-preview__markdown hr { border: none; border-top: var(--mst-border-w) solid var(--mst-border); margin: 1em 0; }
.file-preview__markdown a { color: var(--mst-accent); }

/* Bloc de code dans le rendu Markdown ou texte brut */
.file-preview__code {
  background: var(--mst-bg-surface-2);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-3) var(--mst-sp-4);
  overflow-x: auto;
  white-space: pre;
  font-size: var(--mst-fs-meta);
  font-family: var(--mst-font-mono, ui-monospace, "Cascadia Code", "Fira Code", monospace);
  line-height: 1.5;
  color: var(--mst-text-primary);
  margin: var(--mst-sp-2) 0;
}
.file-preview__inline-code {
  font-family: var(--mst-font-mono, ui-monospace, monospace);
  font-size: 0.88em;
  background: var(--mst-bg-surface-2);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: 0 3px;
}

/* Image */
.file-preview__image-wrap {
  display: flex;
  justify-content: center;
  padding: var(--mst-sp-2);
}
.file-preview__image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--mst-radius-sm);
  object-fit: contain;
}

/* Bureautique (.xlsx/.docx/.pptx/.csv) — rendu HTML backend (T7) */
.file-preview__office {
  padding: var(--mst-sp-2) var(--mst-sp-3);
  overflow-x: auto;
}
.file-preview__sheet-title {
  font-size: 1.05em;
  margin: var(--mst-sp-4) 0 var(--mst-sp-2);
  padding-bottom: 0.2em;
  border-bottom: var(--mst-border-w) solid var(--mst-border);
}
.file-preview__sheet-title:first-child { margin-top: 0; }
.file-preview__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--mst-sp-4);
  font-size: 0.92em;
}
.file-preview__table th,
.file-preview__table td {
  border: var(--mst-border-w) solid var(--mst-border);
  padding: var(--mst-sp-1, 4px) var(--mst-sp-2);
  text-align: left;
  vertical-align: top;
}
.file-preview__table th {
  background: var(--mst-bg-surface-2);
  font-weight: 600;
}
.file-preview__slide-lines {
  margin: 0 0 var(--mst-sp-4) 1.4em;
}
.file-preview__slide-lines li { margin-bottom: 0.2em; }
.file-preview__p--muted { color: var(--mst-text-secondary); font-style: italic; }
.file-preview__truncated { margin-top: var(--mst-sp-3); }

/* Binaire non prévisualisable */
.file-preview__unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mst-sp-4);
  padding: var(--mst-sp-6);
  color: var(--mst-text-secondary);
  text-align: center;
}

/* ---------- Vue Rôles du dashboard ---------- */

.roles-view {
  padding: var(--mst-sp-4) var(--mst-sp-5);
}

.roles-view__header {
  margin-bottom: var(--mst-sp-4);
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--mst-sp-3);
  margin-top: var(--mst-sp-3);
}

.role-card {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-3) var(--mst-sp-4);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.role-card:hover {
  background: var(--mst-bg-surface-2);
  border-color: var(--mst-accent);
}
.role-card__name {
  font-weight: var(--mst-fw-medium);
  font-size: var(--mst-fs-body);
  color: var(--mst-text-primary);
  margin-bottom: var(--mst-sp-1);
}
.role-card__meta {
  display: flex;
  gap: var(--mst-sp-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--mst-sp-2);
}
.role-card__kind {
  font-size: var(--mst-fs-meta);
  padding: 1px var(--mst-sp-1);
  border-radius: var(--mst-radius-sm);
  font-weight: var(--mst-fw-medium);
}
.role-card__kind--core {
  background: var(--mst-sem-launch-bg);
  color: var(--mst-sem-launch);
  border: 1px solid var(--mst-sem-launch);
}
.role-card__kind--recruited {
  background: var(--mst-sem-phase-bg);
  color: var(--mst-sem-phase);
  border: 1px solid var(--mst-sem-phase);
}
.role-card__model {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  font-family: var(--mst-font-mono, monospace);
}
.role-card__summary {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Carte de rôle cliquable — onglet Rôles d'une mission. */
.role-card--clickable { cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.role-card--clickable:hover { border-color: var(--mst-accent, var(--mst-text-primary)); }
.role-card--clickable:active { transform: scale(0.995); }
.role-card--clickable:focus-visible {
  outline: 2px solid var(--mst-accent, var(--mst-text-primary));
  outline-offset: 2px;
}
/* Le nom d'un expert recruté peut rester long malgré le plafond côté moteur :
   il se replie plutôt que de pousser le bouton de fermeture hors du cadre. */
.role-detail__title {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Modale de carte de rôle */
.role-detail__modal {
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.role-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mst-sp-3) var(--mst-sp-5);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  background: var(--mst-bg-surface-2);
  gap: var(--mst-sp-3);
  flex-shrink: 0;
}
.role-detail__body {
  /* Défilement VERTICAL uniquement. Une carte de rôle est de la prose : la
     lire en zigzag (haut→bas ET gauche→droite) la rend impraticable. Le
     `white-space: pre` de `.file-preview__code` est légitime pour un aperçu de
     code source — où replier une ligne falsifierait l'indentation — mais pas
     ici, où les blocs sont des schémas JSON noyés dans du texte. On neutralise
     donc ce comportement DANS CETTE MODALE seulement. */
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  flex: 1;
  padding: var(--mst-sp-5);
}
.role-detail__body .file-preview__code {
  white-space: pre-wrap;
  overflow-x: hidden;
  word-break: break-word;
}
.role-detail__body .file-preview__inline-code { overflow-wrap: anywhere; }

/* Lien « voir dans Fichiers » dans les messages LIVRAISON */
.message__delivery-link {
  display: inline-block;
  margin-top: var(--mst-sp-1);
  margin-left: 0;
  padding: 2px var(--mst-sp-2);
  background: var(--mst-sem-milestone-bg);
  color: var(--mst-sem-milestone);
  border: 1px solid var(--mst-sem-milestone);
  border-radius: var(--mst-radius-sm);
  font-size: var(--mst-fs-meta);
  cursor: pointer;
  transition: opacity 0.15s;
}
.message__delivery-link:hover { opacity: 0.8; }

/* ---------- Administration ---------- */

.admin {
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-4);
}
.admin__panel {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-5);
}
.admin__panel h2 { margin: 0 0 var(--mst-sp-3) 0; font-size: var(--mst-fs-title); }
.admin__row {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-3);
}
/* Inputs des panels admin — fond blanc, texte foncé pour la lisibilité.
   Sans ça l'opérateur ne voyait pas son nom (texte clair sur fond clair). */
.admin__panel input[type="text"],
.admin__panel input[type="number"],
.admin__panel input:not([type]) {
  color: #111;
  background: #fff;
  border: 1px solid var(--mst-border);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: var(--mst-fs-body);
  min-width: 200px;
}
.admin__panel input::placeholder { color: #888; }

/* Compteurs tokens — mission card + header de page mission. */
.mission-card__tokens {
  font-family: var(--mst-font-mono);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  border: 1px solid var(--mst-border);
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.mission-header__tokens {
  margin-left: var(--mst-sp-3);
  font-family: var(--mst-font-mono);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  border: 1px solid var(--mst-border);
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.mission-header__cost {
  margin-left: var(--mst-sp-2);
  font-family: var(--mst-font-mono);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  border: 1px solid var(--mst-border);
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}

/* Séparateur de date dans Messages / Monitoring / Tâches —
   utile pour les missions multi-jours. */
.date-separator {
  display: flex;
  align-items: center;
  margin: var(--mst-sp-3) 0;
  text-transform: capitalize;
}
.date-separator::before,
.date-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mst-border);
}
.date-separator__label {
  padding: 0 var(--mst-sp-3);
  font-size: var(--mst-fs-meta);
  font-weight: var(--mst-fw-bold);
  color: var(--mst-text-secondary);
  letter-spacing: 0.3px;
}
.pairing-code {
  font-family: var(--mst-font-mono);
  font-size: 28px;
  letter-spacing: 6px;
  color: var(--mst-accent);
  background: var(--mst-bg-inset);
  padding: var(--mst-sp-3) var(--mst-sp-5);
  border-radius: var(--mst-radius-md);
  border: var(--mst-border-w) solid var(--mst-border);
  display: inline-block;
}
.pairing-ttl { color: var(--mst-text-secondary); margin-left: var(--mst-sp-3); font-family: var(--mst-font-mono); }
.pairing-ttl[data-warn="true"] { color: var(--mst-tokenbar-warn); }
.devices-table { width: 100%; border-collapse: collapse; }
.devices-table th, .devices-table td {
  padding: var(--mst-sp-2);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  text-align: left;
  font-size: var(--mst-fs-body);
}
.devices-table th { color: var(--mst-text-secondary); font-size: var(--mst-fs-meta); }
.devices-table__ip { font-family: var(--mst-font-mono, ui-monospace, monospace); }
.devices-table__soi { color: var(--mst-accent); font-size: var(--mst-fs-meta); }
.toggle-switch {
  position: relative;
  width: 44px; height: 24px;
  background: var(--mst-border);
  border-radius: var(--mst-radius-pill);
  cursor: pointer;
  transition: background var(--mst-motion-fast) var(--mst-easing);
}
.toggle-switch[data-state="remote"] { background: var(--mst-net-remote); }
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: var(--mst-text-primary);
  border-radius: var(--mst-radius-pill);
  transition: left var(--mst-motion-fast) var(--mst-easing);
}
.toggle-switch[data-state="remote"]::after { left: 23px; }

/* ---------- Utilitaires ---------- */

.empty {
  padding: var(--mst-sp-6);
  text-align: center;
  color: var(--mst-text-muted);
  font-style: italic;
}

.notice {
  padding: var(--mst-sp-2) var(--mst-sp-3);
  border-radius: var(--mst-radius-sm);
  font-size: var(--mst-fs-meta);
  margin-bottom: var(--mst-sp-3);
}
.notice--info  { background: var(--mst-accent-bg); color: var(--mst-text-primary); }
.notice--warn  { background: var(--mst-sem-arbitration-bg); color: var(--mst-sem-arbitration); }
.notice--error { background: var(--mst-sem-escalation-bg); color: var(--mst-sem-escalation); }

.hidden { display: none !important; }

.toast {
  position: fixed;
  bottom: var(--mst-sp-5);
  right: var(--mst-sp-5);
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-left: 3px solid var(--mst-accent);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-3) var(--mst-sp-4);
  font-size: var(--mst-fs-body);
  box-shadow: var(--mst-elevation-modal);
  z-index: 200;
  max-width: 400px;
}
.toast[data-kind="error"] { border-left-color: var(--mst-sem-escalation); }
.toast[data-kind="success"] { border-left-color: var(--mst-state-done); }

/* ---------- J5-C — Bannière persistante "checkpoint humain" ---------- */
/*
 * Affichée quand la session est en AWAITING_HUMAN. Persiste à travers les
 * 4 onglets de la page de mission (Messages, Tâches, Monitoring, Fichiers)
 * et survit au F5 (l'état AWAITING_HUMAN est en base, pas en mémoire).
 * Couleur sémantique ambre (token arbitration) — cohérente avec la dot de
 * l'en-tête, le filtre escalation et la palette Android.
 *
 * Choix d'implementation : in-flow (pas une modale), placée juste sous
 * l'en-tête de mission. Une modale capturerait le focus et bloquerait la
 * navigation entre onglets — ce qu'on veut éviter (l'opérateur peut
 * vouloir regarder le journal ou les fichiers avant de répondre).
 */
.mission-banner {
  background: var(--mst-sem-arbitration-bg);
  border: var(--mst-border-w) solid var(--mst-sem-arbitration);
  border-left-width: 4px;
  border-radius: var(--mst-radius-sm);
  margin: var(--mst-sp-3) var(--mst-sp-5) 0;
  padding: var(--mst-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-3);
}
.mission-banner__header {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  font-weight: 600;
  color: var(--mst-sem-arbitration);
  font-size: var(--mst-fs-title);
}
.mission-banner__icon {
  font-size: 18px;
}
.mission-banner__title { flex: 1; }
.mission-banner__waited {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  font-weight: 400;
}
.mission-banner__question {
  color: var(--mst-text-primary);
  font-size: var(--mst-fs-body);
  white-space: pre-wrap;
  line-height: 1.4;
}
.mission-banner__form {
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-2);
}
.mission-banner__textarea {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-2) var(--mst-sp-3);
  font-family: inherit;
  font-size: var(--mst-fs-body);
  color: var(--mst-text-primary);
  min-height: 80px;
  resize: vertical;
}
.mission-banner__textarea:focus {
  outline: none;
  border-color: var(--mst-sem-arbitration);
}
.mission-banner__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--mst-sp-2);
}
.mission-banner__submit {
  background: var(--mst-sem-arbitration);
  color: var(--mst-text-on-accent);
  border: 0;
  padding: var(--mst-sp-2) var(--mst-sp-4);
  border-radius: var(--mst-radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.mission-banner__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mission-banner__hint {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}

/* Bannière STOPPED contextuelle (max-turns / rate-limit / abort) avec
   bouton « Continuer ». Style proche de mission-banner mais ton neutre. */
.mission-banner-stopped {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-left: 3px solid var(--mst-accent);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-3) var(--mst-sp-4);
  margin: var(--mst-sp-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-2);
}
.mission-banner-stopped[data-key="abort"]      { border-left-color: var(--mst-sem-escalation, #c33); }
.mission-banner-stopped[data-key="rate-limit"] { border-left-color: var(--mst-sem-arbitration, #d99500); }
.mission-banner-stopped[data-key="max-turns"]  { border-left-color: var(--mst-accent, #4a90e2); }
.mission-banner-stopped__head {
  display: flex; align-items: center; gap: var(--mst-sp-2);
  font-weight: var(--mst-fw-bold);
  font-size: var(--mst-fs-title);
}
.mission-banner-stopped__icon { font-size: 18px; }
.mission-banner-stopped__msg {
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-body);
  line-height: 1.45;
}
.mission-banner-stopped__actions {
  display: flex; gap: var(--mst-sp-2); justify-content: flex-end;
}
.mission-banner-stopped__cta {
  background: var(--mst-accent, #4a90e2);
  color: white;
  border: 0;
  padding: 6px 14px;
  border-radius: var(--mst-radius-sm);
  font-size: var(--mst-fs-body);
  font-weight: var(--mst-fw-bold);
  cursor: pointer;
}
.mission-banner-stopped__cta:hover:not(:disabled) { filter: brightness(1.1); }
.mission-banner-stopped__cta:disabled { opacity: 0.6; cursor: wait; }

/* J5-I — Bannière permanente "mode En direct avec les agents".
 * Style discret (info) — différent de mission-banner (alerte ambre).
 * Bordure bleue/secondaire, fond léger, plus compact. */
.mission-banner-attached {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-left: 3px solid var(--mst-accent);
  border-radius: var(--mst-radius-sm);
  margin: var(--mst-sp-3) var(--mst-sp-5) 0;
  padding: var(--mst-sp-3) var(--mst-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-2);
}
.mission-banner-attached__header {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  font-size: var(--mst-fs-body);
}
.mission-banner-attached__icon {
  color: var(--mst-accent);
  font-size: 10px;
}
.mission-banner-attached__title {
  flex: 1;
  color: var(--mst-text-primary);
}
.mission-banner-attached__toggle {
  background: transparent;
  border: var(--mst-border-w) solid var(--mst-border);
  color: var(--mst-text-primary);
  padding: 4px 10px;
  border-radius: var(--mst-radius-sm);
  cursor: pointer;
  font-size: var(--mst-fs-meta);
}
.mission-banner-attached__toggle:hover {
  background: var(--mst-bg-elev);
}
.mission-banner-attached__form {
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-2);
}
.mission-banner-attached__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--mst-sp-2);
}
.mission-banner-attached__submit {
  background: var(--mst-accent);
  color: var(--mst-text-on-accent);
  border: 0;
  padding: var(--mst-sp-2) var(--mst-sp-4);
  border-radius: var(--mst-radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.mission-banner-attached__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Badge sur les cartes de mission du dashboard (R1) — point ambre +
 * libellé "en attente" — réutilise la dot existante mais ajoute un
 * indicateur de priorité visuel. */
.mission-card[data-attention="awaiting_human"] {
  border-left: 3px solid var(--mst-sem-arbitration);
}
.mission-card__attention {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--mst-sem-arbitration-bg);
  color: var(--mst-sem-arbitration);
  border-radius: var(--mst-radius-pill);
  font-size: var(--mst-fs-meta);
  font-weight: 600;
}

/* ---- Onglet Rôles (page mission) ---------------------------------------- */
.roles-tab {
  padding: 20px 24px;
}
.roles-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.role-card {
  background: var(--mst-bg-card, #1c1f24);
  border: 1px solid var(--mst-border, #2a2f36);
  border-radius: var(--mst-radius, 8px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.role-card__title {
  font-weight: 600;
  font-size: var(--mst-fs-body, 14px);
  color: var(--mst-text, #e6e8eb);
}
.role-card__role {
  font-size: var(--mst-fs-meta, 12px);
  color: var(--mst-text-secondary, #a0a4ab);
  font-style: italic;
}
.role-card__summary {
  font-size: var(--mst-fs-meta, 12px);
  color: var(--mst-text-secondary, #a0a4ab);
  line-height: 1.4;
}
.role-card__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: var(--mst-fs-meta, 12px);
  margin: 8px 0 0 0;
}
.role-card__meta dt { color: var(--mst-text-secondary, #a0a4ab); }
.role-card__meta dd { margin: 0; color: var(--mst-text, #e6e8eb); }
.role-kind-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: var(--mst-radius-pill, 999px);
  font-size: var(--mst-fs-meta, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.role-kind--decisional { color: #f5c542; }
.role-kind--routine    { color: #4a90e2; }
.role-kind--reviewer   { color: #66bb6a; }
.role-kind--expert     { color: #ab47bc; }

/* ---- T2 — Pensée vive diffusée : chevron + overlay full ---------------- */
.transcript-full__toggle {
  margin-left: 8px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid var(--mst-border, #2a2f36);
  border-radius: var(--mst-radius-pill, 999px);
  color: var(--mst-text-secondary, #a0a4ab);
  font-size: var(--mst-fs-meta, 11px);
  cursor: pointer;
}
.transcript-full__toggle:hover {
  color: var(--mst-text, #e6e8eb);
  border-color: var(--mst-text-secondary, #a0a4ab);
}
.transcript-full__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px;
  z-index: 1000;
  overflow-y: auto;
}
.transcript-full__body {
  background: var(--mst-bg-card, #1c1f24);
  border: 1px solid var(--mst-border, #2a2f36);
  border-radius: var(--mst-radius, 8px);
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}
.transcript-full__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--mst-border, #2a2f36);
  position: sticky;
  top: 0;
  background: var(--mst-bg-card, #1c1f24);
  z-index: 1;
}
.transcript-full__ts {
  margin-left: auto;
  color: var(--mst-text-secondary, #a0a4ab);
  font-size: var(--mst-fs-meta, 12px);
}
.transcript-full__close {
  background: transparent;
  border: none;
  color: var(--mst-text-secondary, #a0a4ab);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.transcript-full__close:hover { color: var(--mst-text, #e6e8eb); }
.transcript-full__block {
  padding: 12px 20px;
  border-bottom: 1px solid var(--mst-border, #2a2f36);
}
.transcript-full__block:last-child { border-bottom: none; }
.transcript-full__block--thinking { background: rgba(245, 197, 66, 0.04); }
.transcript-full__block--text { background: rgba(74, 144, 226, 0.04); }
.transcript-full__label {
  font-size: var(--mst-fs-meta, 12px);
  color: var(--mst-text-secondary, #a0a4ab);
  margin-bottom: 6px;
  font-weight: 600;
}
.transcript-full__text {
  margin: 0;
  font-family: var(--mst-font-mono, ui-monospace, "Consolas", monospace);
  font-size: var(--mst-fs-body, 13px);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--mst-text, #e6e8eb);
  line-height: 1.5;
}

/* ---- UX Phase 2 : D1 Pari, D2 Live view (ex-Cellule de crise), D5/D7/D8 ---- */

/* --- D1 Pari --- */
.pari-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px; z-index: 1000; overflow-y: auto;
}
.pari-body {
  background: var(--mst-bg-card, #1c1f24);
  border: 1px solid var(--mst-border, #2a2f36);
  border-radius: var(--mst-radius, 8px);
  width: 90%; max-width: 700px; padding: 0;
}
.pari-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--mst-border, #2a2f36);
  position: sticky; top: 0; background: var(--mst-bg-card, #1c1f24); z-index: 1;
}
.pari-title { margin: 0; font-size: var(--mst-fs-h3, 18px); color: var(--mst-text, #e6e8eb); }
.pari-close {
  background: transparent; border: none; color: var(--mst-text-secondary, #a0a4ab);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.pari-section { padding: 16px 24px; border-bottom: 1px solid var(--mst-border, #2a2f36); }
.pari-section h3 { margin: 0 0 8px; font-size: var(--mst-fs-meta, 12px); color: var(--mst-text-secondary, #a0a4ab); text-transform: uppercase; letter-spacing: 0.04em; }
.pari-summary { margin: 0; color: var(--mst-text, #e6e8eb); line-height: 1.5; }
.pari-budget { margin: 0; font-family: var(--mst-font-mono, monospace); color: var(--mst-text, #e6e8eb); }
.pari-deliv { margin: 0; padding-left: 20px; }
.pari-deliv li { margin: 4px 0; }
.pari-tier {
  display: inline-block; padding: 2px 10px;
  border-radius: var(--mst-radius-pill, 999px); font-weight: 600;
  border: 1px solid currentColor;
}
.pari-tier--T0 { color: #f57c5a; }
.pari-tier--T1 { color: #4a90e2; }
.pari-tier--T2 { color: #66bb6a; }
.pari-tier--T3 { color: #f5c542; }
.pari-sign { background: rgba(74, 144, 226, 0.04); }
.pari-sign__strategist { margin: 8px 0 0; font-size: var(--mst-fs-meta, 12px); color: var(--mst-text-secondary, #a0a4ab); }
.pari-empty { padding: 24px; }
.pari-empty__hint { font-size: var(--mst-fs-meta, 12px); color: var(--mst-text-secondary, #a0a4ab); }
.pari-editor { padding: 16px 24px; }
.pari-editor summary { cursor: pointer; color: var(--mst-text-secondary, #a0a4ab); margin-bottom: 12px; }
.pari-form { display: flex; flex-direction: column; gap: 8px; }
.pari-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--mst-fs-meta, 12px); color: var(--mst-text-secondary, #a0a4ab); }
.pari-form textarea, .pari-form input, .pari-form select {
  background: var(--mst-bg, #0f1115); color: var(--mst-text, #e6e8eb);
  border: 1px solid var(--mst-border, #2a2f36); border-radius: 4px; padding: 6px 10px;
  font-family: inherit;
}
.pari-save { padding: 8px 16px; background: var(--mst-accent, #4a90e2); color: white; border: none; border-radius: 4px; cursor: pointer; align-self: flex-end; }
.pari-error { padding: 24px; color: #f5c542; }

/* --- D2 Live view (ex-« Cellule de crise ») --- */
.crisis-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: flex; flex-direction: column; z-index: 1100; padding: 0;
}
.crisis-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--mst-border, #2a2f36);
  background: var(--mst-bg-card, #1c1f24);
}
.crisis-head h2 { margin: 0; color: var(--mst-text, #e6e8eb); font-size: var(--mst-fs-h3, 18px); }
.crisis-close {
  background: transparent; border: none; color: var(--mst-text-secondary, #a0a4ab);
  font-size: 20px; cursor: pointer; padding: 4px 12px;
}
.crisis-list {
  flex: 1; overflow-y: auto; padding: 16px 24px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--mst-bg, #0f1115);
}
.crisis-block {
  border: 1px solid var(--mst-border, #2a2f36);
  border-radius: var(--mst-radius, 8px);
  padding: 12px 16px;
}
.crisis-block--thinking { background: rgba(245, 197, 66, 0.06); border-color: rgba(245, 197, 66, 0.3); }
.crisis-block--text { background: rgba(74, 144, 226, 0.06); border-color: rgba(74, 144, 226, 0.3); }
.crisis-block__head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; font-size: var(--mst-fs-meta, 12px); }
.crisis-block__type { color: var(--mst-text-secondary, #a0a4ab); }
.crisis-block__ts { margin-left: auto; color: var(--mst-text-secondary, #a0a4ab); }
.crisis-block__text { margin: 0; font-family: var(--mst-font-mono, monospace); white-space: pre-wrap; word-break: break-word; color: var(--mst-text, #e6e8eb); line-height: 1.5; font-size: var(--mst-fs-body, 13px); }
.crisis-block__trunc { margin-top: 6px; font-size: var(--mst-fs-meta, 11px); color: var(--mst-text-secondary, #a0a4ab); font-style: italic; }
.crisis-error { padding: 16px; color: #f57c5a; text-align: center; }

/* --- D7 Sablier --- */
.sablier {
  display: flex; gap: 16px; align-items: center;
  padding: 6px 12px; background: var(--mst-bg-card, #1c1f24);
  border: 1px solid var(--mst-border, #2a2f36); border-radius: var(--mst-radius-pill, 999px);
  font-size: var(--mst-fs-meta, 12px);
}
.sablier__mission, .sablier__quota { display: flex; gap: 6px; align-items: center; }
.sablier__label { color: var(--mst-text-secondary, #a0a4ab); }
.sablier__value { color: var(--mst-text, #e6e8eb); font-family: var(--mst-font-mono, monospace); }
.sablier__quota--warn .sablier__value { color: #f5c542; }
.sablier__quota--critical .sablier__value { color: #f57c5a; font-weight: 600; }
.sablier__error { color: #f57c5a; font-style: italic; }

/* --- T11 Bouton dictée --- */
.btn--icon {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--mst-border, #2a2f36);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.btn--icon:hover { background: var(--mst-bg, #0f1115); }
.btn--recording {
  color: #f57c5a;
  border-color: #f57c5a;
  animation: pulse-recording 1.2s ease-in-out infinite;
}
@keyframes pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 124, 90, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(245, 124, 90, 0); }
}

/* --- Onglet Live view (ex-« Cellule de crise »), T2 in-page --- */
/* --- D3 Replay narré --- */
.narrative-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px; z-index: 1000; overflow-y: auto;
}
.narrative-body {
  background: var(--mst-bg-card, #1c1f24);
  border: 1px solid var(--mst-border, #2a2f36); border-radius: var(--mst-radius, 8px);
  width: 90%; max-width: 800px; padding: 0;
}
.narrative-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--mst-border, #2a2f36); position: sticky; top: 0; background: var(--mst-bg-card, #1c1f24); z-index: 1; }
.narrative-head h2 { margin: 0; font-size: var(--mst-fs-h3, 18px); color: var(--mst-text, #e6e8eb); }
.narrative-actions { display: flex; gap: 8px; }
.narrative-actions button { background: transparent; border: 1px solid var(--mst-border, #2a2f36); border-radius: 4px; padding: 4px 12px; color: var(--mst-text, #e6e8eb); cursor: pointer; font-size: var(--mst-fs-meta, 12px); }
.narrative-actions button:hover { background: var(--mst-bg, #0f1115); }
.narrative-speak--playing { color: #f57c5a; border-color: #f57c5a; }
.narrative-loading, .narrative-prompt, .narrative-error { padding: 24px; color: var(--mst-text-secondary, #a0a4ab); }
.narrative-prompt p { margin: 0 0 12px; }
.narrative-prompt__cost { font-size: var(--mst-fs-meta, 12px); }
.narrative-go { padding: 8px 20px; background: var(--mst-accent, #4a90e2); color: white; border: none; border-radius: 4px; cursor: pointer; }
.narrative-cache-badge { padding: 8px 24px; background: rgba(102, 187, 106, 0.06); color: #66bb6a; font-size: var(--mst-fs-meta, 11px); border-bottom: 1px solid var(--mst-border, #2a2f36); }
.narrative-text { padding: 24px; color: var(--mst-text, #e6e8eb); line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-size: var(--mst-fs-body, 14px); }
.narrative-text h2 { margin-top: 24px; font-size: var(--mst-fs-h3, 16px); color: var(--mst-text, #e6e8eb); }

/* --- D5 Constellation --- */
.constellation-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 40px; z-index: 1000;
}
.constellation-body {
  background: var(--mst-bg-card, #1c1f24);
  border: 1px solid var(--mst-border, #2a2f36); border-radius: var(--mst-radius, 8px);
  width: 90%; max-width: 600px;
}
.constellation-head { display: flex; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--mst-border, #2a2f36); }
.constellation-head h2 { margin: 0; font-size: var(--mst-fs-h3, 18px); color: var(--mst-text, #e6e8eb); }
.constellation-close { background: transparent; border: none; color: var(--mst-text-secondary, #a0a4ab); cursor: pointer; font-size: 18px; }
.constellation-loading, .constellation-empty { padding: 24px; color: var(--mst-text-secondary, #a0a4ab); }
.constellation-empty p { margin: 0 0 12px; }
.constellation-empty__hint { font-size: var(--mst-fs-meta, 12px); }
.constellation-empty code { background: var(--mst-bg, #0f1115); padding: 2px 6px; border-radius: 3px; font-family: var(--mst-font-mono, monospace); }

/* --- D8 Plateau admin --- */

/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ========================================================================== */
/* Onglet Terminal (2026-08-05)                                               */
/* ========================================================================== */
/* Conçu pour de LONGUES sessions : fond sombre constant sur la zone de
   terminal (indépendant du thème clair/sombre du reste, comme un vrai
   terminal), contrastes doux, aucune animation sur la zone de texte. */

/* Le terminal occupe la PAGE — sans constante devinee.
   `calc(100vh - 104px)` reservait 104 px pour le bandeau et les marges ; la
   somme reelle en fait 111 (63 de bandeau + 24 + 24 de marges de `.main`). Sept
   pixels de trop, et les consequences n'ont rien de cosmetique : la page
   debordait, donc c'est la PAGE qui recevait la barre de defilement — celle que
   Romeo voyait a droite sans qu'elle fasse jamais defiler la console — et la
   derniere ligne du terminal passait sous le bord.
   On ne corrige donc pas la constante : on la SUPPRIME. `.main` est deja un
   element flex en colonne dans `#app` ; il suffit qu'il le soit aussi pour son
   contenu, et l'onglet prend exactement la place restante, quelle que soit la
   hauteur du bandeau demain. */
.main--terminal {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.terminal-tab {
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-2);
  flex: 1;
  min-height: 440px;
}

.term-barre {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-3);
  flex-wrap: wrap;
}
.term-colonnes { display: flex; gap: var(--mst-sp-1); margin-left: auto; }

.term-btn {
  padding: 4px var(--mst-sp-3);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  background: var(--mst-bg-surface);
  color: var(--mst-text-primary);
  cursor: pointer;
  font-size: var(--mst-fs-meta);
  transition: border-color 0.15s, background 0.15s;
}
.term-btn:hover { border-color: var(--mst-text-primary); }
/* L'icône d'un bouton est un SVG en ligne, pas un caractère : un pictogramme
   Unicode dépend des polices de l'appareil (le 🗀 de « Fichiers » était un
   carré vide sur Android), un tracé se dessine partout. */
.term-btn__ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.35em; }
.term-btn__ico svg { display: block; width: 100%; height: 100%; }
.term-btn.is-active { background: var(--mst-bg-surface-2); font-weight: 600; }
.term-btn--primaire { background: var(--mst-bg-surface-2); font-weight: 600; }
.term-btn--danger:hover { border-color: #d9534f; color: #d9534f; }

/* ---------- Panneau « copier à la main » ----------
   Le chemin de copie des postes distants (page en http:// = contexte NON
   sécurisé, où `navigator.clipboard` n'existe pas). Le texte y est présenté
   dans un vrai champ, présélectionné, et c'est le Ctrl+C de l'utilisateur qui
   copie — aucune API n'intervient, donc rien ne peut la refuser. */
.copie-manuelle { max-width: 860px; }
.copie-manuelle__aide {
  margin: 0 0 var(--mst-sp-3) 0;
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
}
.copie-manuelle__zone {
  width: 100%;
  /* Assez haut pour qu'un écran de console tienne d'un coup d'œil, et borné en
     `vh` pour qu'un long historique ne pousse pas les boutons hors de vue. */
  height: min(52vh, 420px);
  resize: vertical;
  padding: var(--mst-sp-3);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  background: #0d1117;              /* le fond de la console : on copie ce qu'on y voyait */
  color: #d5d9e0;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", Consolas, monospace;
  font-size: var(--mst-fs-meta);
  line-height: 1.45;
  /* Pas de repli : une ligne de console coupée à l'affichage se recollerait
     mal à l'œil, et la sélection à la souris deviendrait trompeuse. */
  white-space: pre;
  overflow: auto;
}
.copie-manuelle__zone::selection { background: #2d5a9e; color: #ffffff; }
.copie-manuelle__mesure {
  margin: var(--mst-sp-2) 0 0 0;
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
}

/* Grille 1 / 2 / 3 colonnes — pilotée en JS par grid-template-columns. */
.term-grille {
  display: grid;
  gap: var(--mst-sp-3);
  flex: 1;
  min-height: 0;          /* sans ça, une colonne longue déborde la grille */
}
.term-colonne {
  display: flex;
  flex-direction: column;
  min-width: 0;           /* autorise le rétrécissement sous le contenu */
  min-height: 0;
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  overflow: hidden;
}
/* Colonne REPLIÉE — une autre est agrandie.
   `display: none` et rien d'autre : la colonne reste dans le document, donc
   son terminal reste vivant, connecté, avec son historique. La retirer du DOM
   la ferait détruire, et « agrandir » deviendrait « fermer les autres ». */
.term-colonne.est-repliee { display: none; }
.term-colonne__entete {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  padding: var(--mst-sp-2);
  background: var(--mst-bg-surface-2);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
}
.term-colonne__corps { flex: 1; min-height: 0; display: flex; }
.term-select {
  flex: 1;
  min-width: 0;
  padding: 3px var(--mst-sp-2);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  background: var(--mst-bg-surface);
  color: var(--mst-text-primary);
}

.term-panneau {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
.term-panneau__entete {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  padding: var(--mst-sp-2);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  flex-wrap: wrap;
}
.term-panneau__titre { font-weight: 600; }
/* Le répertoire de travail est affiché en permanence : quand trois terminaux
   sont côte à côte, « où suis-je » est la première question. */
.term-panneau__cwd {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary, #8b949e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
  direction: rtl;         /* tronque à GAUCHE : la fin du chemin est utile */
  text-align: left;
}
.term-panneau__actions { display: flex; gap: var(--mst-sp-1); margin-left: auto; }

/* Zone du terminal : fond sombre constant, défilement VERTICAL seulement —
   xterm gère lui-même le retour à la ligne et la barre de défilement.

   AUCUNE MARGE INTERIEURE ICI, et c'est un point de fond. L'extension `fit`
   mesure la hauteur du PARENT du terminal par `getComputedStyle().height` :
   sur un element en `border-box`, Chrome renvoie la hauteur BORDURE COMPRISE,
   marge interieure incluse. Les 8 px de marge haut + bas etaient donc comptes
   deux fois, `fit` proposait une ligne de trop, et cette ligne — la derniere,
   celle qui porte l'invite et l'etat de Claude Code — passait sous le bord,
   coupee en deux par `overflow: hidden`.
   La respiration passe donc sur `.xterm` lui-meme : `fit` retranche
   explicitement la marge interieure de CET element-la, donc le calcul redevient
   exact. Mesure au navigateur, fenetre de 1400x900 : avant, un terminal de
   660 px dans un cadre qui n'en offrait que 646 — d'ou la ligne coupee ; apres,
   646 px de terminal dans 655 px de cadre, rien ne depasse. */
.term-panneau__ecran {
  flex: 1;
  min-height: 120px;
  background: #0d1117;
  padding: 0;
  overflow: hidden;
}
.term-panneau__ecran .xterm { padding: var(--mst-sp-2); }

/* Barre de defilement VISIBLE a droite du terminal.

   xterm v6 ne se sert PAS du defilement natif du navigateur : il dessine sa
   propre glissiere (heritee de VS Code) et la fait disparaitre par opacite des
   qu'on ne la survole plus. D'ou une zone de terminal ou rien n'indiquait qu'il
   existait 5 000 lignes au-dessus. On la maintient affichee ; sa couleur, elle,
   vient du theme passe a xterm (cf. `scrollbarSlider*` dans terminal.js).

   S'y ajoute un RAIL. Sans lui, seul le curseur est peint : sur un terminal a
   peine rempli, il occupe presque toute la hauteur et se confond avec le bord,
   et sur une longue session il devient un trait de deux centimetres perdu dans
   le noir. Le rail dit ou la barre commence et ou elle finit — c'est lui qui la
   fait lire comme une barre de defilement, et non comme un reflet. */
.term-panneau__ecran .xterm .xterm-scrollable-element > .scrollbar {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.term-panneau__ecran .xterm .xterm-scrollable-element > .invisible {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.term-panneau__ecran .xterm .xterm-scrollable-element > .invisible.fade {
  transition: none !important;
}
.term-panneau__ecran .xterm .xterm-scrollable-element > .scrollbar.vertical {
  background: rgba(255, 255, 255, 0.07);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* La SECONDE barre, blanche, derriere la bonne — on la retire.
   `.xterm-viewport` porte `overflow-y: scroll` (feuille de style de xterm) :
   c'est le conteneur qui defile REELLEMENT, et la glissiere heritee de VS Code
   n'est qu'un habillage pose par-dessus. Un navigateur qui dessine des barres
   classiques — Chrome et Edge sous Windows — en peint donc une native, blanche
   et flechee, a cote de celle qu'on voit fonctionner. Deux barres pour un seul
   defilement, dont une qu'on n'a pas dessinee.
   On la masque sans toucher au defilement : masquer une barre n'empeche ni la
   molette, ni le clavier, ni la glissiere de xterm. Et `color-scheme: dark`
   couvre ce qui resterait de chrome natif dans ce cadre : ici le fond est noir
   quel que soit le theme du reste de Bebsolo.
   (Un navigateur a barres en surimpression, comme celui des verifications
   automatiques, n'en peignait aucune : ce defaut ne se voyait que sur la
   machine de Romeo — d'ou sa capture d'ecran, qui l'a tranche.) */
.term-panneau__ecran .xterm { color-scheme: dark; }
.term-panneau__ecran .xterm .xterm-viewport { scrollbar-width: none; }
.term-panneau__ecran .xterm .xterm-viewport::-webkit-scrollbar { display: none; }

/* Ecran SECONDAIRE (Claude Code, vim, htop…) : pas de glissiere.
   Mesure sur un lancement reel de `claude` : `ESC [ ?1049h`, suivi de la prise
   de la souris. Cet ecran n'a pas d'historique — c'est sa definition — donc il
   n'y a rien a faire defiler et le defilement appartient a l'application. Une
   barre pleine hauteur et inerte promettrait le contraire ; elle disparait, et
   revient avec l'historique du shell des qu'on quitte le programme. */
.term-panneau__ecran.est-ecran-alterne .xterm .xterm-scrollable-element > .scrollbar {
  display: none !important;
}
.term-panneau__ecran .xterm .xterm-scrollable-element > .scrollbar > .slider {
  border-radius: 7px;
}

/* Bandeau d'état — la réponse visuelle à « aucune ambiguïté ». */
.term-panneau__etat {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  padding: 4px var(--mst-sp-2);
  border-top: var(--mst-border-w) solid var(--mst-border);
  background: var(--mst-bg-surface-2);
  font-size: var(--mst-fs-meta);
  min-height: 26px;
  flex-wrap: wrap;
}
.term-etat {
  padding: 1px var(--mst-sp-2);
  border-radius: var(--mst-radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
}
/* Une couleur PAR ÉTAT, jamais deux états de la même teinte : c'est ce qui
   rend la distinction lisible d'un coup d'œil, sans lire le libellé. */
.etat--attente     { background: #3d3d3d; color: #d0d0d0; border-color: #555; }
.etat--cours       { background: #123b63; color: #7cc4ff; border-color: #1f6feb; }
.etat--terminee    { background: #123d24; color: #7ee787; border-color: #238636; }
.etat--interrompue { background: #4a3a10; color: #e3b341; border-color: #9e6a03; }
.etat--erreur      { background: #4d1f1f; color: #ff7b72; border-color: #da3633; }
.term-etat--file       { background: #3d3d3d; color: #d0d0d0; }
.term-etat--connexion  { color: var(--mst-text-secondary, #8b949e); font-weight: 400; }
.term-etat--coupe      { background: #4a3a10; color: #e3b341; }
/* Repli HTTP : le terminal FONCTIONNE, plus lentement. Ni vert (tout
   va bien) ni rouge (panne) — un avertissement, qui est la verite. */
.term-etat--repli      { background: #3a2f10; color: #d29922; }
/* Barre d'etat muette : elle disparait au lieu de reserver une rangee vide.
   Chaque rangee de chrome est prise sur la hauteur du terminal. */
.term-panneau__etat.est-vide { display: none; }
.term-etat--erreur     { background: #4d1f1f; color: #ff7b72; }
.term-etat--fini       { color: var(--mst-text-secondary, #8b949e); font-weight: 400; }
.term-etat__note { color: var(--mst-text-secondary, #8b949e); font-weight: 400; }

/* Sous 900 px, les colonnes s'empilent : trois terminaux côte à côte sur un
   téléphone ne seraient lisibles dans aucune. */
@media (max-width: 900px) {
  .term-grille { grid-template-columns: 1fr !important; }
  /* Sur telephone la page DOIT defiler : trois terminaux empiles ne tiennent
     pas dans une hauteur d'ecran. On rend donc a l'onglet sa hauteur naturelle,
     sinon la colonne serait comprimee et son contenu rogne. */
  .main--terminal { display: block; }
  .terminal-tab { height: auto; flex: none; }
  .term-colonne { min-height: 60vh; }
}

/* --- Onglet Terminal : fichiers, pièces jointes, gestion ------------------ */

/* Onglet Fichiers : quand il est ouvert, il PREND la place du terminal.
   En bandeau de 30 vh, une liste de fichiers ne se consulte pas, elle se
   devine — et c'est justement la consultation qui etait demandee. */
.term-fichiers {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--mst-sp-2);
  background: var(--mst-bg-surface);
}
.term-fichiers__liste { display: flex; flex-direction: column; gap: 2px; }
.term-fichier {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  padding: 2px var(--mst-sp-2);
  font-size: var(--mst-fs-meta);
  border-radius: var(--mst-radius-sm);
  /* LE REPLI, ET IL VIENT D'UNE MESURE (2026-09-18). En ajoutant la date, la
     ligne à 360 px — le téléphone — ne laissait plus RIEN au nom : mesuré à
     0 px de large, avec la taille repliée sur deux lignes et 3 px de
     débordement. Un fichier sans nom n'est plus un fichier. Avec le repli et
     un plancher de 12ch sur le nom : 114 px pour le nom, aucun débordement,
     et les boutons passent sur une seconde rangée — ce qui agrandit au
     passage des cibles tactiles. À 520 et 900 px, la ligne reste unique et
     inchangée (34 px de haut dans les deux cas, avant comme après). */
  flex-wrap: wrap;
}
.term-fichier:hover { background: var(--mst-bg-surface-2); }
/* L'ORIGINE d'abord, et d'une couleur différente : Roméo doit distinguer d'un
   coup d'œil ce qu'il a envoyé de ce que le terminal a produit. */
.term-fichier__origine {
  flex: 0 0 auto;
  min-width: 7ch;
  text-align: center;
  padding: 0 4px;
  border-radius: var(--mst-radius-sm);
  background: #123d24;
  color: #7ee787;
  font-size: 11px;
}
.term-fichier__origine--entrant { background: #123b63; color: #7cc4ff; }
.term-fichier__nom {
  /* 12ch de plancher : c'est ce qui empêche la date de manger tout le nom sur
     un téléphone (cf. `flex-wrap` ci-dessus). */
  flex: 1 1 12ch;
  min-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* C'est un bouton : il ouvre le fichier. On lui retire l'apparence de
     bouton mais pas les signes qu'on peut cliquer dessus. */
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.term-fichier__nom:hover { text-decoration: underline; }
.term-fichier__taille { color: var(--mst-text-secondary, #8b949e); }
/* La DATE de dernière modification. `nowrap` et chiffres à largeur fixe : une
   colonne de dates qui se replie ou qui danse d'une ligne à l'autre ne se lit
   plus en balayant la liste, ce qui est le seul usage qu'on en a. Le nom, lui,
   a déjà son ellipsis et son infobulle : c'est lui qui cède la place. */
.term-fichier__date {
  flex: 0 0 auto;
  color: var(--mst-text-secondary, #8b949e);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Barre de depot de l'onglet Fichiers. Le depot vit desormais la ou l'on VOIT
   les fichiers : un bouton « Joindre » sous une console laissait croire que le
   fichier accompagnait une commande, alors qu'il ne fait que se poser dans le
   dossier de la conversation. */
.term-depot {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  padding: var(--mst-sp-2);
  margin-bottom: var(--mst-sp-2);
  border: 1px dashed var(--mst-border);
  border-radius: var(--mst-radius-md);
}
.term-depot.est-survolee { border-color: #6ea8fe; background: var(--mst-bg-surface-2); }
/* La barre prend le focus a l'ouverture de l'onglet, pour que Ctrl+V y arrive.
   Elle doit donc le MONTRER : un collage qui atterrit dans un endroit qu'on
   n'avait pas designe se lit comme un collage perdu. */
.term-depot:focus,
.term-depot:focus-visible { outline: none; border-color: #6ea8fe; border-style: solid; }
.term-depot__aide { font-size: var(--mst-fs-meta); color: var(--mst-text-secondary, #8b949e); }

/* Vue « Toutes les conversations ». */
.term-gestion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--mst-sp-2);
  overflow-y: auto;
}
.term-gestion__ligne {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  padding: var(--mst-sp-2);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  background: var(--mst-bg-surface);
}
.term-gestion__ligne:hover { border-color: var(--mst-text-primary); }
.term-gestion__titre {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 0;
  background: none;
  color: var(--mst-text-primary);
  font-weight: 600;
  font-size: var(--mst-fs-body, 14px);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.term-gestion__cwd {
  color: var(--mst-text-secondary, #8b949e);
  font-size: var(--mst-fs-meta);
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}
@media (max-width: 900px) {
  .term-gestion__cwd { display: none; }
}

/* =====================================================================
   Onglet OUTILS — cadre générique d'outils métier (outils.js).
   Aucune règle ici ne cible un outil nommé : les classes qualifient une
   FORME (card, atelier, composer…), jamais un identifiant d'outil.
   ===================================================================== */

.outils-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--mst-sp-4);
}

.outil-card {
  display: flex;
  gap: var(--mst-sp-3);
  align-items: flex-start;
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-4);
  cursor: pointer;
  transition: background var(--mst-motion-fast) var(--mst-easing),
              border-color var(--mst-motion-fast) var(--mst-easing);
}
.outil-card:hover {
  background: var(--mst-bg-surface-2);
  border-color: var(--mst-border-strong);
}
.outil-card[data-statut="en_construction"] { opacity: 0.7; }
.outil-card__icon { font-size: 28px; line-height: 1; }
.outil-card__body { flex: 1; min-width: 0; }
.outil-card__title {
  font-size: var(--mst-fs-title);
  font-weight: var(--mst-fw-medium);
  margin: 0 0 var(--mst-sp-1) 0;
  color: var(--mst-text-primary);
}
.outil-card__desc {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  margin: 0 0 var(--mst-sp-2) 0;
}
.outil-card__statut {
  display: inline-block;
  padding: 2px var(--mst-sp-2);
  border-radius: var(--mst-radius-pill);
  font-size: var(--mst-fs-micro);
  font-weight: var(--mst-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: var(--mst-border-w) solid var(--mst-border);
  color: var(--mst-text-secondary);
  white-space: nowrap;
}
.outil-card__statut[data-statut="pret"] {
  color: var(--mst-sem-go, #3fb950);
  border-color: var(--mst-sem-go, #3fb950);
}
.outil-card__statut[data-statut="connexion_requise"] {
  color: var(--mst-sem-arbitration);
  border-color: var(--mst-sem-arbitration);
}
.outil-card__statut[data-statut="en_construction"] {
  color: var(--mst-text-muted);
  border-color: var(--mst-border);
}

.outil-badge {
  display: inline-block;
  padding: 2px var(--mst-sp-2);
  border-radius: var(--mst-radius-sm);
  font-size: var(--mst-fs-micro);
  font-weight: var(--mst-fw-medium);
  margin-bottom: var(--mst-sp-2);
}
.outil-badge--readonly {
  color: var(--mst-accent);
  background: var(--mst-accent-bg);
}

/* -- En-tête de l'atelier -- */
.outil-atelier__header {
  display: flex;
  align-items: flex-start;
  gap: var(--mst-sp-3);
  margin-bottom: var(--mst-sp-4);
}
.outil-atelier__icon { font-size: 26px; line-height: 1.3; }
.outil-atelier__titles { flex: 1; min-width: 0; }
.outil-atelier__desc {
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-body);
  margin: var(--mst-sp-1) 0 0 0;
}
.outil-atelier__hint {
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
  margin: 0 0 var(--mst-sp-3) 0;
}

/* -- Parcours de configuration d'un connecteur -- */
.outil-atelier__connecteur {
  max-width: 520px;
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-4);
}
.outil-atelier__form {
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-3);
  margin-bottom: var(--mst-sp-4);
}
.outil-atelier__field {
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-1);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}
.outil-atelier__input {
  background: var(--mst-bg-app);
  color: var(--mst-text-primary);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-2) var(--mst-sp-3);
  font-family: inherit;
  font-size: var(--mst-fs-body);
}
.outil-atelier__required { color: var(--mst-sem-arbitration); }

/* La fiche d'une commande d'administration (§2.8) : les champs déclarés par
   l'outil, rendus en modale. Une fiche décrit un objet — elle porte donc
   volontiers vingt champs, là où un panneau de réglages en porte trois. Deux
   colonnes dès qu'il y a la place, et un pied qui reste visible : sans lui,
   « Enregistrer » se retrouve à trente champs de défilement du dernier champ
   rempli. */
.modal--fiche { max-width: 880px; }
.modal--fiche .outil-atelier__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--mst-sp-3) var(--mst-sp-4);
  max-height: 62vh;
  overflow-y: auto;
  padding-right: var(--mst-sp-2);
}
.modal--fiche .outil-atelier__field textarea.outil-atelier__input { min-height: 4.5em; }
.modal--fiche .modal__footer {
  position: sticky;
  bottom: calc(-1 * var(--mst-sp-5));
  background: var(--mst-bg-surface);
  margin-bottom: calc(-1 * var(--mst-sp-5));
  padding-bottom: var(--mst-sp-4);
}
.outil-atelier__missing {
  color: var(--mst-sem-arbitration);
  font-weight: var(--mst-fw-medium);
}
.outil-atelier__actions {
  display: flex;
  gap: var(--mst-sp-2);
}

/* -- Disposition de l'espace de travail -- */
.outil-atelier__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--mst-sp-4);
  align-items: start;
}
@media (max-width: 900px) {
  .outil-atelier__layout { grid-template-columns: 1fr; }
}
.outil-atelier__side {
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-4);
}
.outil-atelier__connecteur-statut {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-3);
}
.outil-atelier__connecteur-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mst-sp-2);
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}
.outil-atelier__connecteur-corps { margin-top: var(--mst-sp-3); }

.outil-atelier__consignes,
.outil-atelier__sessions {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-3);
}
.outil-atelier__consignes h2,
.outil-atelier__sessions h2 {
  margin: 0 0 var(--mst-sp-2) 0;
  font-size: var(--mst-fs-title);
}
.outil-atelier__consignes-textarea {
  width: 100%;
  min-height: 90px;
  background: var(--mst-bg-app);
  color: var(--mst-text-primary);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-2);
  font-family: inherit;
  font-size: var(--mst-fs-meta);
  resize: vertical;
  margin-bottom: var(--mst-sp-2);
  box-sizing: border-box;
}
.outil-atelier__main {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-4);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

/* -- Historique des sessions -- */
.outil-sessions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-1);
}
.outil-sessions-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mst-sp-2);
  padding: var(--mst-sp-2);
  border-radius: var(--mst-radius-sm);
  cursor: pointer;
  border: var(--mst-border-w) solid transparent;
}
.outil-sessions-list__item:hover { background: var(--mst-bg-surface-2); }
.outil-sessions-list__item.is-active {
  background: var(--mst-accent-bg);
  border-color: var(--mst-accent);
}
.outil-sessions-list__main { min-width: 0; overflow: hidden; }
.outil-sessions-list__title {
  display: block;
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.outil-sessions-list__meta {
  display: block;
  font-size: var(--mst-fs-micro);
  color: var(--mst-text-muted);
}
.outil-sessions-list__actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--mst-motion-fast) var(--mst-easing);
}
.outil-sessions-list__item:hover .outil-sessions-list__actions { opacity: 1; }
.outil-sessions-list__icon-btn {
  background: transparent;
  border: 0;
  color: var(--mst-text-secondary);
  cursor: pointer;
  font-size: var(--mst-fs-meta);
  padding: 2px 4px;
}
.outil-sessions-list__icon-btn:hover { color: var(--mst-text-primary); }
.outil-sessions-list__rename-input {
  width: 100%;
  background: var(--mst-bg-app);
  color: var(--mst-text-primary);
  border: var(--mst-border-w) solid var(--mst-accent);
  border-radius: var(--mst-radius-sm);
  padding: 2px var(--mst-sp-1);
  font-size: var(--mst-fs-meta);
}

/* -- Fil de conversation -- */
.outil-conversation__header {
  margin-bottom: var(--mst-sp-3);
  color: var(--mst-text-primary);
}
/* Dictée — la barre qui PROUVE que le micro écoute.
   Le témoin de niveau n'est pas décoratif : c'est la seule réponse visuelle au
   doute « est-ce que l'outil capte vraiment ce que je dis ». */
.outil-dictee {
  margin-bottom: var(--mst-sp-2);
  padding: var(--mst-sp-2) var(--mst-sp-3);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  background: var(--mst-bg-surface-2);
}
.outil-dictee[hidden] { display: none; }
.outil-dictee__barre {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  flex-wrap: wrap;
}
.outil-dictee__jauge {
  flex: 1;
  min-width: 80px;
  height: 6px;
  border-radius: var(--mst-radius-pill);
  background: var(--mst-bg-surface);
  overflow: hidden;
}
.outil-dictee__niveau {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--mst-accent);
  transition: width 60ms linear;
}
.outil-dictee__etat {
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
}
.outil-dictee__aide {
  margin: var(--mst-sp-2) 0 0;
  color: var(--mst-text-muted);
  font-size: var(--mst-fs-meta);
}
.outil-dictee__bouton--actif {
  border-color: var(--mst-accent);
  color: var(--mst-accent);
}
/* Pendant l'enregistrement, le cadre entier respire — visible du coin de
   l'œil quand on regarde ses notes plutôt que l'écran. */
.outil-dictee--enregistre {
  border-color: var(--mst-accent);
  animation: outil-dictee-pulse 2s ease-in-out infinite;
}
@keyframes outil-dictee-pulse {
  0%, 100% { border-color: var(--mst-accent); }
  50% { border-color: var(--mst-border); }
}
@media (prefers-reduced-motion: reduce) {
  .outil-dictee--enregistre { animation: none; }
  .outil-dictee__niveau { transition: none; }
}

/* Documents de la conversation — replié par défaut, sous l'en-tête. */
.outil-documents {
  margin-bottom: var(--mst-sp-3);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-2) var(--mst-sp-3);
  background: var(--mst-bg-surface-2);
}
.outil-documents__resume {
  cursor: pointer;
  color: var(--mst-text-secondary);
  font-size: var(--mst-fs-meta);
  user-select: none;
}
.outil-documents__vide {
  margin: var(--mst-sp-2) 0 0;
  color: var(--mst-text-muted);
  font-size: var(--mst-fs-meta);
}
.outil-documents__list {
  list-style: none;
  margin: var(--mst-sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.outil-documents__item {
  display: flex;
  align-items: baseline;
  gap: var(--mst-sp-2);
  flex-wrap: wrap;
}
/* Le nom est un bouton : c'est lui qui déclenche la récupération, laquelle
   passe par un appel authentifié et non par une navigation. */
.outil-documents__nom {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--mst-accent);
  font: inherit;
  text-align: left;
  word-break: break-all;
}
.outil-documents__nom:hover {
  text-decoration: underline;
}
.outil-documents__meta {
  color: var(--mst-text-muted);
  font-size: var(--mst-fs-meta);
}

.outil-conversation__thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-3);
  margin-bottom: var(--mst-sp-4);
  overflow-y: auto;
}
.outil-msg {
  max-width: 80%;
  padding: var(--mst-sp-2) var(--mst-sp-3);
  border-radius: var(--mst-radius-md);
  background: var(--mst-bg-surface-2);
  border: var(--mst-border-w) solid var(--mst-border);
}
.outil-msg--operateur {
  align-self: flex-end;
  background: var(--mst-accent-bg);
  border-color: var(--mst-accent);
}
.outil-msg--outil { align-self: flex-start; }
.outil-msg--erreur {
  border-color: var(--mst-sem-escalation);
  background: var(--mst-sem-escalation-bg);
}
.outil-msg__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--mst-sp-3);
  font-size: var(--mst-fs-micro);
  color: var(--mst-text-secondary);
  margin-bottom: var(--mst-sp-1);
}
.outil-msg__role { font-weight: var(--mst-fw-medium); }
.outil-msg__time { font-family: var(--mst-font-mono, monospace); }
.outil-msg__body {
  font-size: var(--mst-fs-body);
  line-height: var(--mst-lh-body);
  color: var(--mst-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
/* Livrables produits par le tour, rattachés à la bulle de réponse */
.outil-msg__fichiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mst-sp-2);
  margin-top: var(--mst-sp-2);
  padding-top: var(--mst-sp-2);
  border-top: var(--mst-border-w) solid var(--mst-border);
}
.outil-msg__fichier {
  background: var(--mst-bg-surface-2);
  border: var(--mst-border-w) solid var(--mst-accent);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-1) var(--mst-sp-2);
  cursor: pointer;
  color: var(--mst-accent);
  font: inherit;
  font-size: var(--mst-fs-meta);
  word-break: break-all;
}
.outil-msg__fichier:hover { text-decoration: underline; }

/* -- Composer : zone d'entrée dont la forme vient du manifeste -- */
.outil-composer {
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-2);
  border-top: var(--mst-border-w) solid var(--mst-border);
  padding-top: var(--mst-sp-3);
}
.outil-composer__champs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mst-sp-3);
  margin-bottom: var(--mst-sp-1);
}
.outil-composer__champ-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--mst-fs-micro);
  color: var(--mst-text-secondary);
}
.outil-composer__champ {
  background: var(--mst-bg-app);
  color: var(--mst-text-primary);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: 4px var(--mst-sp-2);
  font-family: inherit;
  font-size: var(--mst-fs-meta);
}
.outil-composer__textarea {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-2) var(--mst-sp-3);
  font-family: inherit;
  font-size: var(--mst-fs-body);
  color: var(--mst-text-primary);
  min-height: 72px;
  resize: vertical;
}
.outil-composer__textarea:focus {
  outline: none;
  border-color: var(--mst-accent);
}
.outil-composer__dropzone {
  border: 1px dashed var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-2);
}
.outil-composer__dropzone.is-dragover {
  border-color: var(--mst-accent);
  background: var(--mst-accent-bg);
}
.outil-composer__attach-row {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
  flex-wrap: wrap;
}
.outil-composer__hint {
  color: var(--mst-text-muted);
  font-size: var(--mst-fs-micro);
}
.outil-composer__actions {
  display: flex;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
   Onglet CHECK — état de santé de la plateforme (2026-08-16).

   Une seule règle visuelle gouverne cet écran : ce qui dit qu'un correctif a
   ÉCHOUÉ doit se voir avant ce qui dit qu'un travail reste à faire. Une
   récidive et une dette de contrôle sont donc les deux seuls éléments qui
   portent une couleur d'alerte ; tout le reste est neutre.
   --------------------------------------------------------------------------- */
.check { display: flex; flex-direction: column; gap: 1.25rem; }
.check__entete { display: flex; align-items: center; gap: .75rem; }
.check__carte {
  border: 1px solid var(--border, #2a2a35);
  border-radius: 10px; padding: 1rem 1.15rem;
  background: var(--surface, #16161d);
}
.check__carte-tete {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem;
}
.check__carte-tete h2 { margin: 0; font-size: 1.05rem; flex: 0 0 auto; }
.check__carte-tete .btn { margin-left: auto; }
.check__pastille {
  font-size: .78rem; font-weight: 600; padding: .12rem .55rem;
  border-radius: 999px; letter-spacing: .02em;
}
.check__pastille.is-ok { background: #14361f; color: #7ee2a8; }
.check__pastille.is-ko { background: #3a1c1c; color: #ff9d9d; }
.check__aide { color: var(--muted, #9aa0ad); font-size: .88rem; margin: .25rem 0 .75rem; }
.check__alerte { color: #ff9d9d; font-weight: 600; }
.check__dette { color: #ffcf8b; font-weight: 600; }
.check__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.check__table th {
  text-align: left; font-weight: 600; color: var(--muted, #9aa0ad);
  border-bottom: 1px solid var(--border, #2a2a35); padding: .35rem .5rem;
}
.check__table td { padding: .35rem .5rem; border-bottom: 1px solid #1f1f27; }
.check__table tr.is-recidive td { background: #2a1414; }
.check__gravite {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .08rem .45rem; border-radius: 4px; background: #23232c;
}
.check__gravite.is-bloquant { background: #3a1c1c; color: #ff9d9d; }
.check__gravite.is-serieux  { background: #3a2f14; color: #ffcf8b; }
.check__gravite.is-signal   { background: #1c2a3a; color: #8fc3ff; }
.check__code { color: #8fc3ff; }
.check__marques { color: #ff9d9d; font-size: .8rem; font-weight: 600; }
.check__constat { padding: .5rem 0; border-bottom: 1px solid #1f1f27; }
.check__constat-tete { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.check__resume { flex: 1 1 20rem; }
.check__detail { color: var(--muted, #9aa0ad); font-size: .86rem; }
.check__detail pre { white-space: pre-wrap; margin: .35rem 0 0; }
.check__formulaire { display: flex; flex-direction: column; margin-bottom: 1rem; }
/* Les champs reprennent la convention .field du reste de l'application —
   fond encastré, bordure et texte du thème. La première version posait une
   classe .input qui n'existait pas : les champs sortaient blancs, et le texte
   qu'on y tapait était illisible. */
.check__aide-champ {
  color: var(--mst-text-secondary); font-size: var(--mst-fs-meta);
  margin-top: .25rem;
}
.check__anomalie { padding: .6rem 0; border-bottom: 1px solid #1f1f27; }
.check__anomalie.is-dette { border-left: 3px solid #ffcf8b; padding-left: .6rem; }
.check__actions { display: flex; gap: .5rem; margin-top: .5rem; }

.check__sous-titre {
  margin: 1.25rem 0 .25rem; font-size: .95rem;
  color: var(--mst-text-secondary);
}

/* --- Check : chronométrage des missions (P5, 2026-08-18) ------------------ */
.check__tableau { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.check__tableau th {
  text-align: left; font-weight: 600; opacity: 0.65;
  padding: 4px 10px 4px 0; border-bottom: 1px solid var(--bordure, #444);
}
.check__tableau td {
  padding: 5px 10px 5px 0; border-bottom: 1px solid var(--bordure-faible, #333);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.check__tableau td:first-child { white-space: normal; }

/* --- Outils : administration déclarée (§2.8 du contrat, 2026-08-28) ---------
   Un panneau générique — réglages, commandes, état — rendu depuis la
   déclaration d'un outil. Les statuts colorés sont des JETONS conventionnels
   du contrat (ok, attente, en_cours, erreur, ignore), pas les états d'un outil
   particulier. */
.outil-atelier__administration {
  background: var(--mst-bg-surface);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-md);
  padding: var(--mst-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--mst-sp-2);
}
.outil-atelier__administration h2 {
  margin: 0;
  font-size: var(--mst-fs-title);
}
.outil-administration__resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--mst-sp-2);
}
.outil-administration__tuile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--mst-sp-2);
  background: var(--mst-bg-app);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  min-width: 0;
}
.outil-administration__tuile-valeur {
  font-size: var(--mst-fs-title);
  font-weight: var(--mst-fw-medium);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.outil-administration__tuile-libelle {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}
.outil-administration__message,
.outil-administration__en-cours {
  margin: 0;
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
}
.outil-administration__en-cours { color: var(--mst-text-primary); }
.outil-administration__resultats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--mst-fs-meta);
}
.outil-administration__resultat { display: flex; flex-direction: column; }
.outil-administration__resultat.is-erreur .outil-administration__resultat-tete {
  color: var(--mst-sem-arbitration);
}
.outil-administration__resultat-message {
  color: var(--mst-text-secondary);
  white-space: pre-wrap;
}
.outil-administration__commandes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mst-sp-2);
}
.outil-administration__reglages summary { cursor: pointer; }
.outil-administration__reglage-aide {
  display: block;
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  margin-top: 2px;
}
.outil-administration__etat { display: flex; flex-direction: column; gap: var(--mst-sp-3); }
.outil-administration__barre {
  display: flex;
  align-items: center;
  gap: var(--mst-sp-2);
}
.outil-administration__filtre {
  flex: 1;
  min-width: 0;
  background: var(--mst-bg-app);
  color: var(--mst-text-primary);
  border: var(--mst-border-w) solid var(--mst-border);
  border-radius: var(--mst-radius-sm);
  padding: var(--mst-sp-2);
  font-family: inherit;
  font-size: var(--mst-fs-meta);
}
.outil-administration__compte {
  font-size: var(--mst-fs-meta);
  color: var(--mst-text-secondary);
  font-variant-numeric: tabular-nums;
}
.outil-administration__table-wrap { overflow-x: auto; }
.outil-administration__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mst-fs-meta);
}
.outil-administration__table th {
  text-align: left;
  font-weight: var(--mst-fw-medium);
  color: var(--mst-text-secondary);
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  padding: 4px 8px 4px 0;
  white-space: nowrap;
}
.outil-administration__table td {
  padding: 5px 8px 5px 0;
  border-bottom: var(--mst-border-w) solid var(--mst-border);
  vertical-align: top;
}
.outil-administration__cell-libelle { max-width: 320px; overflow-wrap: anywhere; }
.outil-administration__cell-detail {
  color: var(--mst-text-secondary);
  max-width: 420px;
  overflow-wrap: anywhere;
}
.outil-administration__cell-maj {
  white-space: nowrap;
  font-family: var(--mst-font-mono, monospace);
  color: var(--mst-text-secondary);
}
.outil-administration__cell-actions { white-space: nowrap; }
.outil-administration__statut {
  display: inline-block;
  font-size: 0.74rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mst-bg-surface-2);
  color: var(--mst-text-secondary);
  white-space: nowrap;
}
.outil-administration__statut[data-statut="ok"] { background: #14361f; color: #7ee2a8; }
.outil-administration__statut[data-statut="attente"] { background: #3a2f14; color: #ffcf8b; }
.outil-administration__statut[data-statut="en_cours"] { background: #1c2a3a; color: #8fc3ff; }
.outil-administration__statut[data-statut="erreur"] { background: #3a1c1c; color: #ff9d9d; }
.outil-administration__statut[data-statut="ignore"] { opacity: 0.6; }