/* Copyright (c) 2024-2026 MYTH TECHNOLOGIES. All rights reserved.
   Régie — coordination des sessions. Les jetons viennent de shared/console.css ;
   rien n'est redéfini ici qui y existe déjà. */

.regie-shell { display: grid; grid-template-columns: 208px 1fr; min-height: 100vh; transition: grid-template-columns .15s ease; }
/* OPS-REGIE-LISIBLE-001 — la barre réduite à ses icônes, par défaut : les tableaux d'abord. */
.regie-shell.reduite { grid-template-columns: 56px 1fr; }
.regie-barre { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.regie-tete { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0 0 14px; }
.regie-tete .regie-marque { margin: 0; }
.regie-replier {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--muted); cursor: pointer;
}
.regie-replier:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.regie-replier svg { width: 17px; height: 17px; }
.regie-shell.reduite .regie-barre { padding: 14px 8px; align-items: center; }
.regie-shell.reduite .regie-tete { flex-direction: column; }
.regie-shell.reduite .regie-marque,
.regie-shell.reduite .regie-nav > span,
.regie-shell.reduite .regie-nav-label > span { display: none; }
.regie-shell.reduite .regie-nav-label { margin: 10px 0 4px; width: 24px; border-top: 1px solid var(--border); }
.regie-shell.reduite .regie-nav { justify-content: center; padding: 9px; width: 40px; }

.regie-barre {
  background: var(--panel); border-right: 1px solid var(--border);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
}
.regie-marque {
  font-weight: 600; letter-spacing: .04em; margin: 0 0 14px; padding: 0 10px;
  font-size: 15px; color: var(--text);
}
.regie-nav {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px;
  color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.3;
}
.regie-nav:hover { background: var(--panel-2); color: var(--text); }
.regie-nav.active { background: var(--panel-2); color: var(--text); font-weight: 600; }
.regie-nav svg { width: 17px; height: 17px; flex: 0 0 auto; }
.regie-nav-label {
  margin: 18px 0 4px; padding: 0 10px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* ⚠️ `.regie-corps` est un <main> : console.css le borne à 1180 px et le centre. C'est ce qui
      laissait les tableaux au milieu de l'écran, avec deux marges vides (capture du 2026-10-07). */
.regie-corps { padding: 0 18px 48px; min-width: 0; max-width: none; margin: 0; }
.regie-topbar {
  display: flex; align-items: center; gap: 14px; padding: 18px 0 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap;
}
.regie-topbar h1 { margin: 0; font-size: 21px; line-height: 1.2; }
.regie-topbar .muted { margin: 2px 0 0; font-size: 13px; }
.regie-topbar .menu { display: none; }
.env {
  font-size: 10.5px; letter-spacing: .09em; padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--muted);
}
/* Ne SAIT PAS n'est pas un environnement : ça se voit, ça ne se lit pas comme
   un nom rassurant. Le défaut réparé le 2026-09-07 affichait « PRODUCTION » sur
   `dev` — dans le même gris discret que la vérité. */
.env.env-inconnu { border-color: var(--warn, #b58900); color: var(--warn, #b58900); }

/* ── Bandeau du temps réel ─────────────────────────────────────────────────
   Le point pulse UNIQUEMENT quand la lecture est vivante : une animation qui
   continue pendant une panne dit exactement le contraire de la vérité. */
.bandeau-vivant {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); margin-bottom: 16px; font-size: 13.5px;
}
.bandeau-vivant .point {
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto;
}
.bandeau-vivant.vivant { border-left: 3px solid var(--accent-2); }
.bandeau-vivant.vivant .point { background: var(--accent-2); animation: pouls 2s ease-in-out infinite; }
.bandeau-vivant.degrade { border-left: 3px solid var(--warn); }
.bandeau-vivant.degrade .point { background: var(--warn); }
.bandeau-vivant .spacer, .bandeau-vivant .muted { margin-left: auto; }
@keyframes pouls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .bandeau-vivant.vivant .point { animation: none; }
}

/* ── Compteurs — cliquables, ils filtrent ──────────────────────────────────── */
.kpi-grid {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
}
.kpi {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text); font: inherit; cursor: default;
}
button.kpi { cursor: pointer; }
button.kpi:hover { border-color: var(--accent); }
.kpi.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.kpi > span { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.kpi > strong { font-size: 25px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi > strong small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.kpi > small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.kpi.good > strong { color: var(--accent-2); }
.kpi.warn > strong { color: var(--warn); }
.kpi.bad > strong  { color: var(--danger); }
.kpi.info > strong { color: var(--accent); }

/* ── Filtres ───────────────────────────────────────────────────────────────── */
.board-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.board-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.board-field select {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 9px; font: inherit; min-width: 160px;
}

/* ── Tableaux — hauteur BORNÉE : sans max-height, trente lignes poussent
      la suite hors de vue et on ne sait plus qu'il y a autre chose. ───────── */
.board-scroll {
  max-height: clamp(280px, calc(100vh - 340px), 720px);
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.data-grid { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 13.5px; }
.data-grid th, .data-grid td {
  padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; vertical-align: top;
}
.data-grid th {
  position: sticky; top: 0; z-index: 1; white-space: nowrap; background: var(--panel-2);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.data-grid tbody tr:last-child td { border-bottom: none; }
.data-grid tr.premier { background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
/* ⚠️ Le teint VERT de la tête de file disait « tout va bien » sur une ligne que
      le mécanisme déclarait retirable depuis 111 min. Une ligne immobile garde son
      rang, elle perd le vert : la couleur porte l'information autant que le mot. */
.data-grid tr.premier.immobile { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.data-grid code { font-size: 12.5px; }
.c-id { width: 20%; } .c-label { width: 12%; } .c-code { width: 8%; }
.c-state { width: 11%; } .c-date { width: 11%; } .c-num { width: 9%; } .c-text { width: auto; }
.avant { color: var(--danger); font-weight: 600; }
.apres { color: var(--accent-2); font-weight: 600; }

.pastille {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px;
  border: 1px solid var(--border); white-space: nowrap;
}
.pastille.good { color: var(--accent-2); border-color: var(--accent-2); }
.pastille.warn { color: var(--warn); border-color: var(--warn); }
.pastille.bad  { color: var(--danger); border-color: var(--danger); }
.chip-lecture {
  display: inline-block; padding: 1px 7px; margin: 1px 2px 1px 0; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; white-space: nowrap;
}

/* ── Panneaux, notes, états vides ──────────────────────────────────────────── */
.panel { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin-bottom: 16px; }
.panel-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.panel-head h3 { margin: 0; font-size: 15px; }
.panel .board-scroll { border: none; border-radius: 0 0 8px 8px; }

.note {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--panel); padding: 13px 16px; margin-bottom: 16px; font-size: 13.5px;
}
.note p { margin: 0 0 8px; } .note p:last-child { margin-bottom: 0; }
.note.interdits { border-left-color: var(--warn); }
.note.interdits ul { margin: 6px 0 0; padding-left: 20px; }
.note.interdits li { margin-bottom: 5px; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 44px 24px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted);
}
.empty-state svg { width: 26px; height: 26px; }
.empty-state h2 { margin: 0; font-size: 16px; color: var(--text); }
.empty-state p { margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 1.55; }

/* ── Correction d'un chiffre — le barré est l'information ──────────────────── */
.correction {
  border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: 8px; background: var(--panel); padding: 15px 18px; margin-bottom: 16px;
}
.correction-titre { margin: 0 0 8px; font-weight: 600; }
.correction-chiffres { display: flex; align-items: baseline; gap: 14px; margin: 0 0 10px; }
.correction .ancien {
  font-size: 22px; font-weight: 600; color: var(--muted);
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.correction .nouveau { font-size: 30px; font-weight: 600; color: var(--accent-2); }
.correction p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.correction p:last-child { margin-bottom: 0; }

/* ── Consignes ─────────────────────────────────────────────────────────────── */
.gestes { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 14px; }
.gestes li { display: flex; gap: 12px; }
.gestes .rang {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600;
}
.gestes strong { display: block; margin-bottom: 3px; }
.gestes p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; }
.gestes .motif { color: var(--muted); font-size: 12.5px; }
.regles { display: grid; gap: 14px; padding: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.regles article strong { display: block; margin-bottom: 4px; }
.regles article p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ── Étroit ────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .regie-shell, .regie-shell.reduite { grid-template-columns: 1fr; }
  .regie-replier { display: none; }
  .regie-shell.reduite .regie-barre { padding: 18px 12px; align-items: stretch; }
  .regie-shell.reduite .regie-marque,
  .regie-shell.reduite .regie-nav > span,
  .regie-shell.reduite .regie-nav-label > span { display: revert; }
  .regie-shell.reduite .regie-nav { justify-content: flex-start; width: auto; }
  .regie-barre {
    position: fixed; inset: 0 auto 0 0; width: 232px; height: auto; z-index: 30;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .regie-shell.ouverte .regie-barre { transform: none; }
  .regie-topbar .menu { display: inline-flex; }
  .board-scroll { max-height: none; }
  .data-grid { table-layout: auto; }
}
@media (prefers-reduced-motion: reduce) { .regie-barre, .regie-shell { transition: none; } }

/* ── Défauts et mise en service ─────────────────────────────────────────────
   Restent affichés une fois corrigés : leur point commun — aucun ne rougissait —
   est la question à poser à toute garde suivante. */
.defauts { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 11px; }
.defauts li {
  padding-left: 14px; border-left: 2px solid var(--danger);
}
.defauts strong { display: block; margin-bottom: 2px; font-size: 13.5px; }
.defauts p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.defauts-note {
  margin: 0; padding: 0 16px 14px; font-size: 13px; line-height: 1.55; color: var(--muted);
}
.gestes .geste {
  display: inline-block; margin-bottom: 4px; padding: 3px 8px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--border); font-size: 12.5px;
}

/* ── Avertissement : la Régie n'est pas opérationnelle ──────────────────────
   ORANGE, pas gris. Un écran calme sur un mécanisme mort est exactement la
   panne que cette console existe pour supprimer — elle la reproduisait sur
   elle-même en affichant un état vide qui se lisait « tout va bien ». */
.alerte-panne {
  border: 1px solid var(--warn); border-left: 4px solid var(--warn);
  border-radius: 8px; background: color-mix(in srgb, var(--warn) 9%, var(--panel));
  padding: 16px 18px; margin-bottom: 16px;
}
.alerte-panne > header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.alerte-panne > header > span { font-size: 20px; line-height: 1.2; color: var(--warn); flex: 0 0 auto; }
.alerte-panne strong { color: var(--text); }
/* ⚠️ DEFAUT REEL, vu sur une capture d'ecran de staging le 2026-09-06 : ce
   selecteur etait `> header strong`, un selecteur DESCENDANT. Il visait le
   titre, mais attrapait aussi les deux `<strong>` de la phrase juste en
   dessous, qui passaient en bloc. Le bandeau se lisait alors en morceaux :
   « personne ne publie » sur sa ligne, puis « — et ce n'est », puis
   « pas "personne ne travaille" », puis un point isole en debut de ligne.
   Un message d'alerte illisible est une alerte qu'on n'ecoute pas.
   `> div > strong` ne vise que le titre. */
.alerte-panne > header > div > strong { display: block; font-size: 15.5px; margin-bottom: 4px; }
.alerte-panne p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.alerte-panne ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.alerte-panne li { font-size: 13.5px; }
.alerte-panne li > strong { display: block; margin-bottom: 3px; }
.alerte-panne li > code {
  display: inline-block; margin-bottom: 3px; padding: 2px 7px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--border); font-size: 12.5px;
}
.alerte-panne li > p { font-size: 12.5px; }
.alerte-panne .alerte-pied {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--text);
}

/* ── Mode simulation ────────────────────────────────────────────────────────
   Visuellement DISTINCT du reste : un jeu d'essai qu'on prendrait pour l'état
   réel serait exactement la panne que cette console existe pour supprimer. */
.simu-bandeau {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 14px 17px; margin-bottom: 16px; border-radius: 8px;
  border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.simu-bandeau.on { border-style: solid; }
.simu-bandeau strong { display: block; margin-bottom: 3px; }
.simu-bandeau p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 76ch; }
.simu-liste { margin: 0; padding: 14px 16px 14px 36px; display: grid; gap: 8px; font-size: 13.5px; }
.simu-liste em { font-style: italic; }
.simu-note { margin: 0; padding: 0 16px 14px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.simu-resume {
  border-left: 3px solid var(--accent); padding: 10px 0 10px 16px; margin-bottom: 16px;
}
.simu-resume p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; }
.simu-resume p:last-child { margin-bottom: 0; }
.simu-titre {
  font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--border);
}
/* Le lot en cours, et l'alias sous la session */
.lot { display: inline-block; line-height: 1.45; }
.alias { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* OPS-REGIE-FILE-REELLE-001 — la liste d'alertes de la CI réelle */
.liste-alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.liste-alertes li { display: flex; align-items: baseline; gap: .6rem; line-height: 1.4; }

/* ── OPS-REGIE-LISIBLE-001 — nature des travaux, liens vers la CI, bilan ──────── */
.nature {
  display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11.5px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}
.nature.info { border-color: var(--accent); color: var(--accent); }
.nature.bad  { border-color: var(--danger); color: var(--danger); }
.nature.warn { border-color: var(--warn); color: var(--warn); }
a.lien-ci { color: var(--accent); text-decoration: none; font-weight: 600; }
a.lien-ci:hover { text-decoration: underline; }
.travaux { display: block; line-height: 1.4; white-space: normal; }
.travaux-branche { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-nature { width: 110px; } .c-pr { width: 86px; } .c-court { width: 9%; }
/* CI réelle — runs en file / en cours (QA2 AGENT-PC-0511-22, OPS-REGIE-SOMBRE-TABLEAU-0511-001) :
   les cellules longues passent à la ligne au lieu d'élargir le tableau.
   OPS-REGIE-CI-COLONNES-0511-001 (P1, capture du fondateur) : `overflow-wrap: anywhere` posé sur TOUTES
   les cellules ramenait leur largeur minimale à un caractère ; le navigateur donnait tout à « Travaux »
   et affichait « v / t / c / - … » une lettre par ligne. La coupure au caractère est réservée à Travaux
   (texte libre, branches sans espace) ; ailleurs on coupe aux espaces et après un tiret, jamais dans un
   mot. Les neuf colonnes ne tiennent pas sous ~960 px de CADRE (mesuré : 928 px minimum, cadre de 778 px
   à 1024 px d'écran, barre ouverte) : en dessous, chaque run devient une carte, quelle que soit la
   largeur de l'écran — d'où une requête de CONTENEUR et non de média (la barre se réduit à la main). */
.ci-cadre { container: ci-cadre / inline-size; }
table.data-grid.ci-runs { table-layout: auto; }
table.data-grid.ci-runs th { white-space: nowrap; width: auto; }
table.data-grid.ci-runs td { white-space: nowrap; overflow-wrap: normal; word-break: normal; width: auto; }
table.data-grid.ci-runs td.c-coupe { white-space: normal; }
table.data-grid.ci-runs td[data-l="Projet"] { min-width: 9.5em; }
table.data-grid.ci-runs td[data-l="Depuis"] { min-width: 8.5em; }
table.data-grid.ci-runs td.c-text, table.data-grid.ci-runs th.c-text { white-space: normal; overflow-wrap: anywhere; min-width: 12em; width: 38%; }
table.data-grid.ci-runs .travaux-branche { white-space: normal; overflow-wrap: anywhere; }
table.data-grid.ci-runs .pastille { white-space: nowrap; }
@container ci-cadre (max-width: 959px) {
  table.data-grid.ci-runs thead { display: none; }
  table.data-grid.ci-runs, table.data-grid.ci-runs tbody, table.data-grid.ci-runs tr, table.data-grid.ci-runs td { display: block; width: 100%; min-width: 0; }
  table.data-grid.ci-runs td { white-space: normal; }
  table.data-grid.ci-runs tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  table.data-grid.ci-runs td { padding: 3px 10px; border: 0; }
  table.data-grid.ci-runs td[data-l]::before { content: attr(data-l) " · "; color: var(--muted); font-size: 12px; }
}
.data-grid td.c-num, .data-grid th.c-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-grid .delta-bien { color: var(--accent-2); }
.data-grid .delta-mal { color: var(--danger); }
.kpi .delta-bien { color: var(--accent-2); }
.kpi .delta-mal { color: var(--danger); }

/* La répartition d'une journée : utile, échecs, gaspillage — la longueur se lit avant le chiffre. */
.repartition { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--panel-2); min-width: 80px; }
.repartition > i { display: block; height: 100%; }
.repartition .r-utile { background: var(--accent-2); }
.repartition .r-echecs { background: var(--warn); }
.repartition .r-gaspi { background: var(--danger); }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 10px 16px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Ce qui sert rarement se replie : la page s'ouvre sur ce qu'on exploite. */
details.replie { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin-bottom: 16px; }
details.replie > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; list-style-position: inside;
}
details.replie > summary small { font-weight: 400; color: var(--muted); margin-left: 8px; }
details.replie[open] > summary { border-bottom: 1px solid var(--border); }
details.replie > .contenu { padding: 14px 16px 2px; }
.titre-section { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.vide-court { padding: 12px 16px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.vide-court strong { color: var(--text); }
/* Les tableaux de travail se dimensionnent sur leur contenu : seule la colonne « Travaux » s'étire et
   passe à la ligne. En largeur fixe, les pastilles d'attente étaient coupées. */
.data-grid.auto { table-layout: auto; }
.data-grid.auto th, .data-grid.auto td { white-space: nowrap; width: auto; }
.data-grid.auto td.c-text, .data-grid.auto th.c-text { white-space: normal; width: 100%; min-width: 220px; }

/* ── Échanges des agents (OPS-REGIE-ECHANGES-GARAGE-0111-001, T1) ──────────────────────────────
   ⚠️ Le panneau ne MASQUE pas la Régie : sur un écran large, la Régie lui laisse sa place à droite.
   Sur un téléphone, il passe par-dessus — et se ferme d'un geste. */
.echanges-bouton { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; background: var(--accent-fill); border-color: var(--accent-fill); color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.echanges-bouton svg { width: 24px; height: 24px; }
.echanges-bouton.ouvert { display: none; }
.echanges-badge { position: absolute; top: -6px; right: -10px; background: var(--danger-fill); color: #fff; border-radius: 999px;
  font-size: .66rem; font-weight: 700; padding: 2px 7px; letter-spacing: .02em; }
.echanges-panneau { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(400px, 100vw); display: flex;
  flex-direction: column; background: var(--panel); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0, 0, 0, .18); }
.echanges-entete { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 16px 16px 8px; }
.echanges-entete h2 { margin: 0 0 4px; font-size: 1.05rem; }
.echanges-entete p { margin: 0; font-size: .8rem; }
.echanges-filtres { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 16px 10px; border-bottom: 1px solid var(--border); }
.echanges-filtres label { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--muted); flex: 1 1 140px; }
.echanges-corps { flex: 1; overflow-y: auto; padding: 8px 16px; }
.echanges-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.echange { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.echange-tete { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; }
.echange-sorte { font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.echange-jeton .echange-sorte { color: var(--warn); }
.echange-experience .echange-sorte { color: var(--accent-2); }
.echange-sujet { margin: 6px 0 2px; font-weight: 600; font-size: .9rem; }
.echange-qui { margin: 2px 0 6px; font-size: .78rem; }
.echange-extrait { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; line-height: 1.45; max-height: 16em; overflow-y: auto; }
.echange-suite { margin: 6px 0 0; font-size: .74rem; }
.echange-lien { display: inline-block; margin-top: 6px; font-size: .8rem; color: var(--accent); }
.echanges-etat { padding: 16px 0; font-size: .86rem; }
.echanges-alerte { margin: 8px 0; font-size: .8rem; color: var(--warn); }
.echanges-pied { margin: 0; padding: 8px 16px 12px; font-size: .72rem; border-top: 1px solid var(--border); }
@media (min-width: 1100px) { body.echanges-ouverts .regie-shell { margin-right: 400px; } }

/* Rapports texte publiés : lisibles dans la table sans agrandir le viewport. */
.robot-preuve { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60ch; }
[data-robot-produits] { max-width: 100%; }

/* T3 : rédaction et lecture dans le panneau Échanges existant. */
.echange-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0; }
.echange-actions button { min-height:36px; }
.echange-composeur { display:flex; flex-direction:column; gap:7px; padding:10px 0; border-bottom:1px solid var(--border); }
.echange-composeur label { display:flex; flex-direction:column; gap:3px; font-size:.8rem; }
.echange-composeur input,.echange-composeur textarea { width:100%; min-width:0; box-sizing:border-box; }
.echange-composeur textarea { resize:vertical; max-height:180px; }
.echange-composeur p { margin:0; }

.robot-filtres { display: grid; gap: 8px; min-width: 0; }
.robot-filtres .muted { margin: 0; font-size: 12px; line-height: 1.5; }

/* ── Robot V2 (OPS-REGIE-ROBOT-UI-V2-0411-001) — scopé au module : rien de plus large que l'écran ── */
/* Colonne bornée : une colonne implicite « auto » prendrait la largeur maximale du contenu (2 px de trop à 360 px). */
.robot-v2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.robot-v2 .kpi-grid { margin-bottom: 0; }
.robot-v2 .data-grid.auto td { white-space: normal; overflow-wrap: anywhere; }
/* Une valeur ne se tronque jamais : elle revient à la ligne (« ≥ 241 / Non mesuré »), taille bornée. */
.robot-v2 .kpi > strong { white-space: normal; overflow-wrap: anywhere; font-size: clamp(19px, 1.6vw + 12px, 25px); line-height: 1.15; }
.robot-v2 .kpi > small { margin-top: auto; }
/* À 360 px, un élément de grille ou de flex garde par défaut la largeur de son plus long mot (« PUBLICATION ») : on l'autorise à rétrécir. */
.robot-v2 .kpi, .robot-v2 .robot-filtres-ligne > *, .robot-v2 .robot-segment { min-width: 0; max-width: 100%; }
.robot-v2 .kpi > span, .robot-v2 .kpi > small { overflow-wrap: anywhere; }
.robot-kpis .kpi { min-height: 104px; }
.robot-pile { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--panel-2); }
.robot-pile i { display: block; height: 100%; }
.robot-pile .ok, .robot-run.good { --ton: var(--accent-2); }
.robot-pile .ko, .robot-run.bad { --ton: var(--danger); }
.robot-pile .revoir, .robot-run.warn { --ton: var(--warn); }
.robot-pile .nm, .robot-run.neutral, .robot-run.info { --ton: var(--muted); }
.robot-pile i { background: var(--ton); }
.t-ok { color: var(--accent-2); font-weight: 600; } .t-ko { color: var(--danger); font-weight: 600; }

.robot-diag {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 8px; border: 1px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
}
.robot-diag p { margin: 0; }
.robot-diag-titre { font-weight: 600; }
.robot-diag-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: var(--panel); font-weight: 700; }
.robot-diag-act .bouton, .robot-recherche .bouton, .robot-segment button { min-height: 44px; }

.robot-filtres-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.robot-segment { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.robot-segment button { font: inherit; padding: 0 12px; border: 0; border-right: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.robot-segment button:last-child { border-right: 0; }
.robot-segment button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--accent); font-weight: 600; }
.robot-recherche { display: flex; gap: 6px; flex: 1 1 16rem; min-width: 0; }
.robot-recherche input { flex: 1 1 auto; min-width: 0; min-height: 44px; font: inherit; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); }
.robot-produits select { max-width: 100%; }
.robot-catalogues { margin: 0; font-size: 12px; overflow-wrap: anywhere; }

/* Maquette V2 (OPS-REGIE-ROBOT-V2-MAQUETTE-1111-001) : postes en grille, runs de tous les postes en lignes compactes. */
.robot-v2 h2 { margin: 0; font-size: 15px; }
.robot-bloc-tete { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.robot-bloc-tete .muted { font-size: 12.5px; }
.robot-postes-bloc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; scroll-margin-top: 12px; }
.robot-postes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 12px; }
.robot-masques { margin: 0; font-size: 12.5px; }
.robot-poste, .robot-runs-bloc { padding: 14px 16px; }
.robot-poste > p.muted { margin: 0; font-size: 12.5px; }
.robot-diag-act a.bouton { border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; min-height: 44px; background: var(--panel); color: var(--accent); }
.robot-poste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; align-content: start; }
.robot-poste-tete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.robot-poste-tete h3 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.robot-poste-meta { margin: 0; font-size: 12px; }
.robot-poste h4 { margin: 4px 0 0; font-size: 13px; }
.robot-runs-bloc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.robot-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 14px; align-items: start; }
.robot-deux > * { min-width: 0; margin: 0; }
.robot-pile .decl { --ton: var(--accent); }
.robot-diag-act { display: flex; flex-wrap: wrap; gap: 8px; }
.robot-diag-act .bouton { display: inline-flex; align-items: center; text-decoration: none; }
.robot-pastilles { display: inline-flex; gap: 3px; align-items: center; }
.robot-pastilles i, .robot-legende i { display: block; width: 14px; height: 14px; border-radius: 4px; background: var(--border); flex: 0 0 auto; }
.robot-pastilles i.good, .robot-legende i.good { background: var(--accent-2); }
.robot-pastilles i.bad, .robot-legende i.bad { background: var(--danger); }
.robot-pastilles i.info, .robot-legende i.info { background: var(--accent); }
.robot-pastilles i.neutral, .robot-legende i.neutral { background: var(--muted); }
.robot-pastilles i.absent, .robot-legende i.absent { background: transparent; border: 1.5px dashed var(--muted); }
.robot-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 12px; }
.robot-legende span { display: inline-flex; gap: 6px; align-items: center; }
.robot-run-id, .robot-run-app, .robot-run-fin { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.robot-run-fin { font-variant-numeric: tabular-nums; }
.robot-run-detail { grid-column: 1 / -1; }
.robot-run-detail summary { cursor: pointer; font-size: 12.5px; color: var(--accent); min-height: 24px; }
.robot-run-detail[open] { display: grid; gap: 6px; }
.robot-liste, .robot-runs, .robot-etapes { list-style: none; margin: 0; padding: 0; }
.robot-liste { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.robot-appareil { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.robot-appareil:last-child { border-bottom: 0; }
.robot-nom { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.robot-detail { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.robot-id { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.robot-runs { display: grid; gap: 10px; }
.robot-run { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id verdict" "app app" "etapes etapes" "fin fin" "detail detail"; align-items: center; gap: 6px 12px; padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--ton, var(--border)); border-radius: 8px; background: var(--panel); min-width: 0; }
.robot-run-id { grid-area: id; } .robot-run-app { grid-area: app; } .robot-run .robot-pastilles { grid-area: etapes; }
.robot-run-verdict { grid-area: verdict; justify-self: end; } .robot-run-fin { grid-area: fin; } .robot-run-detail { grid-area: detail; }
/* Assez de place : une ligne par run, comme la maquette (Run · Appareil · Étapes · Verdict · Fin). */
@media (min-width: 1100px) {
  .robot-run { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) auto 7.5rem minmax(0, 1fr); grid-template-areas: "id app etapes verdict fin" "detail detail detail detail detail"; }
  .robot-run-verdict { justify-self: start; }
}
.robot-etapes { display: flex; flex-wrap: wrap; gap: 6px; }
.robot-etapes .etape { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); }
.robot-etapes .etape::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.robot-etapes .etape.good::before { background: var(--accent-2); }
.robot-etapes .etape.bad { border-color: var(--danger); } .robot-etapes .etape.bad::before { background: var(--danger); }
.robot-etapes .etape.info::before { background: var(--accent); }
.robot-etapes .etape.absent { border-style: dashed; color: var(--muted); background: transparent; }
.robot-etapes .etape.absent::before { background: transparent; border: 1.5px dashed var(--muted); }
.robot-cause { color: var(--muted); }
.robot-preuves { display: grid; gap: 4px; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .robot-diag { grid-template-columns: auto minmax(0, 1fr); }
  .robot-diag-act { grid-column: 1 / -1; }
  .robot-v2 .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── OPS-REGIE-TRAVAUX-0411-001 — section Travaux (maquette v2 validée le 04/11) ─────────────────
   Bornée à `.travaux` : jetons de la Régie seulement (clair par défaut, sombre suivi). Rien de plus
   large que l'écran : colonnes fixes, textes tronqués avec titre, grilles qui reviennent à la ligne. */
.travaux { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; max-width: 100%; }
.travaux > * { min-width: 0; }
.travaux .muted { color: var(--muted); font-size: 12.5px; }
.travaux code { font-size: 12px; overflow-wrap: anywhere; }
.travaux .tr-entete { margin: 0; }
.tr-carte { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.tr-carte > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.tr-carte h2, .tr-titre-section h2 { margin: 0; font-size: 15px; }
.tr-titre-section { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tr-l { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tr-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-x { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-note { margin: 0; padding: 10px 16px; font-size: 12.5px; color: var(--muted); }
.tr-absent { color: var(--warn); }
.tr-pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 1px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.tr-pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tr-pastille.good { color: var(--accent-2); } .tr-pastille.warn { color: var(--warn); } .tr-pastille.bad { color: var(--danger); }
.tr-pastille.neutre { color: var(--muted); } .tr-pastille.info, .tr-pastille.cours { color: var(--accent); }
.tr-pastilles { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-barre { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--panel-2); }
.tr-barre i { display: block; height: 100%; }
.tr-barre .good { background: var(--accent-2); } .tr-barre .warn { background: var(--warn); } .tr-barre .accent { background: var(--accent); }
.tr-barre .neutre { background: var(--muted); } .tr-barre .vide { background: var(--panel-2); }
.tr-diag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.tr-diag p { margin: 0; } .tr-t { font-weight: 600; } .tr-d { color: var(--muted); font-size: 13px; }
.tr-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: var(--panel); font-weight: 700; }
.tr-act, .tr-liens { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tr-liens { padding: 10px 16px; }
.tr-btn { border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; color: var(--text); text-decoration: none; background: var(--panel); }
.tr-hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.tr-gens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.tr-gens > div { display: grid; gap: 1px; padding: 8px 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.tr-carte > header > * { min-width: 0; overflow-wrap: anywhere; }
.tr-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tr-kpi { display: grid; grid-template-rows: auto auto 6px 1fr; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); min-width: 0; }
.tr-kpi > span:first-child { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tr-kpi strong { font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-kpi small { font-size: 12px; color: var(--muted); align-self: end; }
.tr-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: 8px; }
.tr-prod { display: grid; gap: 6px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); min-width: 0; cursor: pointer; }
.tr-prod[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.tr-filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.tr-filtres label { display: grid; gap: 2px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); flex: 1 1 9rem; min-width: 0; }
.tr-filtres select, .tr-filtres input { width: 100%; min-width: 0; font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); }
.tr-filtres .tr-q { flex: 2 1 14rem; }
.tr-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tr-seg button { border: 0; border-right: 1px solid var(--border); border-radius: 0; background: var(--panel); color: var(--text); padding: 6px 10px; font-size: 13px; }
.tr-seg button:last-child { border-right: 0; }
.tr-seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); }
.tr-avance > summary { cursor: pointer; padding: 8px 16px; font-size: 13px; color: var(--accent); border-bottom: 1px solid var(--border); }
.tr-avance .tr-filtres { background: var(--panel-2); }
.tr-travail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); align-items: start; }
.tr-gauche { min-width: 0; }
.tr-defile { overflow-x: auto; }
.tr-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tr-table .tr-w1 { width: 44%; } .tr-table .tr-w2 { width: 16%; } .tr-table .tr-w3 { width: 14%; } .tr-table .tr-w4 { width: 26%; }
.tr-table th, .tr-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tr-table th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); }
.tr-ligne { cursor: pointer; }
.tr-ligne:hover { background: var(--panel-2); }
.tr-ligne[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.tr-ligne:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.tr-gp td { font-weight: 600; padding-top: 14px; border-bottom: 2px solid var(--border); }
.tr-gc td { font-size: 12px; color: var(--muted); padding: 6px 12px 6px 24px; background: var(--panel-2); }
.tr-id { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-titre { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-avancement { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; }
.tr-gardes { display: flex; gap: 3px; }
.tr-gardes i { font-style: normal; font-size: 10px; font-weight: 600; width: 22px; text-align: center; padding: 1px 0; border-radius: 4px; border: 1px solid currentColor; }
.tr-gardes .good { color: var(--accent-2); } .tr-gardes .warn { color: var(--warn); } .tr-gardes .bad { color: var(--danger); } .tr-gardes .neutre { color: var(--muted); }
.tr-plus { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; }
.tr-detail { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border-left: 1px solid var(--border); min-width: 0; }
.tr-detail h2 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.tr-detail dl { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 13px; }
.tr-detail dt { color: var(--muted); } .tr-detail dd { margin: 0; overflow-wrap: anywhere; }
.tr-avis { margin: 0; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; border: 1px solid currentColor; }
.tr-avis.warn { color: var(--warn); } .tr-avis.neutre { color: var(--muted); }
.tr-relie { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tr-relie li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 8px; font-size: 12.5px; align-items: baseline; }
.tr-relie b { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.tr-histo { margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--border); display: grid; gap: 8px; font-size: 12.5px; }
.tr-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 12px; }
.tr-liste { margin: 0; padding: 0; list-style: none; }
.tr-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.tr-liste li:last-child { border-bottom: 0; }
.tr-liste .tr-d { grid-column: 1 / -1; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.tr-wf { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.tr-wf caption { caption-side: bottom; text-align: left; }
.tr-wf th, .tr-wf td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: right; font-size: 13px; }
.tr-wf thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); font-weight: 600; }
.tr-wf th:first-child { width: 38%; text-align: left; overflow-wrap: anywhere; }
.tr-wf tbody th, .tr-wf tfoot th { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
.tr-wf tfoot th, .tr-wf tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--border); }
.tr-wf-n.zero { color: var(--muted); }
.tr-wf-nm { color: var(--muted); font-style: italic; }
@media (max-width: 1180px) {
  .tr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-travail, .tr-hub { grid-template-columns: 1fr; }
  .tr-detail { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .tr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-gens { grid-template-columns: minmax(0, 1fr); }
  .tr-seg button { flex: 1 1 auto; }
  .tr-diag { grid-template-columns: auto minmax(0, 1fr); }
  .tr-act { grid-column: 1 / -1; }
  .tr-c-gardes, .tr-c-assigne { display: none; }
  .tr-table .tr-w1 { width: 68%; } .tr-table .tr-w2 { width: 32%; }
}
@media (max-width: 560px) {
  .tr-kpis, .tr-prods, .tr-deux { grid-template-columns: minmax(0, 1fr); }
  .tr-diag { grid-template-columns: minmax(0, 1fr); }
  .tr-ic { display: none; }
  .tr-filtres label, .tr-filtres .tr-q { flex: 1 1 100%; }
  .tr-detail dl { grid-template-columns: minmax(0, 1fr); }
  .tr-relie li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tr-wf th, .tr-wf td { padding: 6px 3px; font-size: 12.5px; }
  .tr-wf thead th { font-size: 10px; letter-spacing: 0; text-transform: none; }
  .tr-wf th:first-child { width: 30%; padding-left: 8px; }
}

/* OPS-QA-CAMPAGNES-CENTRALES-0711-001 — section Campagnes QA : briques de Travaux ; seuls les textes longs reviennent à la ligne. */
.travaux table.data-grid td.cq-texte { white-space: normal; overflow-wrap: anywhere; min-width: 16em; }
.travaux .cq-p { margin: 0 0 6px; }
.cq-etat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px; }
.cq-etat-principal { min-width: 0; }
.cq-etat-principal h2 { margin: 4px 0; font-size: clamp(20px, 3vw, 28px); }
.cq-etat-principal p, .cq-mesures-contenu p { margin: 0; }
.cq-etat-details { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.cq-etat-details .tr-pastille { white-space: normal; }
.cq-mesures-contenu { display: grid; gap: 10px; padding: 12px 16px; }
.cq-mesures-contenu .tr-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); }