/* Copyright (c) 2024-2026 MYTH TECHNOLOGIES. All rights reserved.
 *
 * Console « Carte & Navigation » — OPS-NAV-CONSOLE-DEDIEE-001, étendue par
 * OPS-NAV-CONSOLE-ADMIN-001.
 *
 * ⚠️ CE N'EST PAS UNE COPIE DE `hospital/app.css`, ET C'EST DÉLIBÉRÉ. Celui-ci fait 698 lignes et
 * porte l'histoire de onze écrans : des surcharges de surcharges, des règles qui ne valent que
 * pour un tableau de bord, un tiroir, une barre latérale. En recopier un extrait aurait importé
 * cette histoire sans le moyen de savoir laquelle de ses couches sert encore ICI.
 *
 * Les VARIABLES et le socle (corps, police, `.ghost`, `.spacer`, `.small`, `.myth-logo`) viennent
 * de `shared/console.css` — celles-là sont bien partagées, et n'ont qu'un exemplaire. Ce fichier
 * ne déclare que ce que CETTE page dessine.
 *
 * 🔴 AUCUNE COULEUR NEUVE N'EST INTRODUITE ICI. Le vocabulaire d'état de cet écran est
 * `h-status good|warn|bad|info`, et il est déjà celui de l'exploitation. « En ajouter une autre
 * forme pour dire la même chose diviserait le vocabulaire de l'écran » est écrit dans `panel.js`,
 * et c'est juste : les trois écrans neufs empruntent ces quatre pastilles, sans exception.
 */

/* Les fonds tramés des pastilles. `color-mix` sur le fond du panneau : la même teinte reste
   lisible en thème clair et en thème sombre sans être déclarée deux fois. */
:root {
  --success-soft: color-mix(in srgb, #18a36f 13%, var(--panel));
  --warning-soft: color-mix(in srgb, #e89a23 14%, var(--panel));
  --danger-soft:  color-mix(in srgb, #df515d 14%, var(--panel));
  --info-soft:    color-mix(in srgb, #4c8fe7 13%, var(--panel));
}

/* ── En-tête ───────────────────────────────────────────────────────────────
 *
 * 🔴 `flex-wrap` N'EST PAS UN DÉTAIL. Sans lui, mesuré le 2026-09-10 à 375 px sur
 * `dev.ops.myth-technologies.com` : le bouton de thème sortait de l'écran, purement et simplement.
 * Un en-tête sur une seule ligne inextensible pousse dehors ce qui ne tient pas — et ce qui ne
 * tient pas est toujours le dernier élément, donc toujours le même.
 */
.r-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.r-header .brand-link {
  display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none;
}
.r-header .brand-link span { display: grid; line-height: 1.25; }
.r-header .brand-link small { color: var(--muted); font-size: .72rem; }
/* L'identité de l'écran, à côté de la marque : cette console n'a qu'une page, donc pas de barre
   latérale pour dire où l'on est. Sans ce repère, deux consoles d'Operations se ressemblent. */
.r-screen {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--accent); font-size: .74rem; font-weight: 700;
}
.r-horodatage { white-space: nowrap; }

/* ── Les onglets ───────────────────────────────────────────────────────────
 *
 * Ce sont de VRAIS liens vers un fragment d'adresse, pas des boutons : l'onglet courant survit
 * donc au rafraîchissement, y compris à celui que l'exploitant vient de demander pour voir bouger
 * un chiffre. Ils défilent horizontalement quand ils ne tiennent pas — quatre onglets sur 375 px
 * ne tiennent pas, et les empiler ferait descendre le contenu sous la ligne de flottaison.
 */
.r-onglets {
  display: flex; gap: 4px; padding: 0 14px; background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.r-onglets::-webkit-scrollbar { display: none; }
.r-onglet {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  /* 44 px de haut : une cible tactile, pas un lien de bureau rétréci. */
  min-height: 44px; padding: 0 13px;
  color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.r-onglet:hover { color: var(--text); }
.r-onglet.actif { color: var(--accent); border-bottom-color: var(--accent); }

.r-main { padding: 20px; max-width: 1180px; margin: 0 auto; }

.icon-button {
  width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0;
  color: var(--text); background: var(--panel); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer;
}
.icon-button:hover { border-color: var(--accent); color: var(--accent); }
.console-link { font-size: .8rem; }

/* `1em` et non une taille fixe : l'icône suit le texte à côté d'elle. Une icône dimensionnée en
   pixels grandit toute seule le jour où on change la police du bouton. */
.h-icon {
  width: 1em; height: 1em; min-width: 14px; min-height: 14px; flex: 0 0 auto;
  display: inline-block; vertical-align: -.125em; stroke-width: 1.5;
}
.icon-button .h-icon { width: 1.05rem; height: 1.05rem; vertical-align: 0; }

/* ── Les tuiles de tête ────────────────────────────────────────────────────
 *
 * Quatre faits qu'on veut voir sans lire un tableau. `auto-fit` + `minmax` : quatre colonnes,
 * puis deux, puis une, sans qu'aucun point de rupture ne soit écrit — la grille tombe quand la
 * place manque, pas quand une largeur devinée est franchie.
 */
.k-rangee {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.k-tuile {
  padding: 13px 15px; border: 1px solid var(--border); background: var(--panel);
  border-radius: 8px;
}
.k-tuile.alerte { border-color: var(--danger); }
.k-tuile p { margin: 0; }
.k-label {
  color: var(--muted); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase;
}
.k-valeur { margin-top: 7px !important; font-size: 1.25rem; line-height: 1.2; }
.k-valeur strong { font-weight: 700; }
.k-valeur .h-status { font-size: .72rem; }
.k-valeur .muted { font-size: .8rem; }
.k-note { margin-top: 5px !important; color: var(--muted); font-size: .72rem; line-height: 1.4; }

/* ── Panneaux et tableaux ──────────────────────────────────────────────── */
.panel {
  margin-bottom: 18px; border: 1px solid var(--border); background: var(--panel);
  border-radius: 8px; overflow: hidden;
}
.panel > header {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
  padding: 15px 17px; border-bottom: 1px solid var(--border);
}
.panel > header > div { flex: 1 1 320px; min-width: 0; }
.panel h2 { margin: 0; font-size: 1rem; }
.panel header p { margin: 5px 0 0; color: var(--muted); font-size: .77rem; line-height: 1.5; }
.panel header p .h-status { margin-right: 4px; }

.grid-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.data-grid { width: 100%; border-collapse: collapse; min-width: 720px; }
.data-grid th {
  height: 38px; padding: 0 14px; color: var(--muted); background: var(--panel-2);
  border-bottom: 1px solid var(--border); text-align: left; font-size: .67rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.data-grid td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  font-size: .81rem; vertical-align: top; line-height: 1.45;
}
.data-grid tr:last-child td { border-bottom: 0; }
.data-grid small { display: block; margin-top: 3px; color: var(--muted); font-size: .72rem; }
.data-grid code {
  font-size: .74rem; overflow-wrap: anywhere;
  background: var(--panel-2); border-radius: 4px; padding: 1px 5px;
}

/* ⚠️ La colonne d'explication NE SE TRONQUE PAS. Elle porte des phrases entières — « le point
   demandé n'a aucune arête exploitable : il sort de la zone servie » — et c'est elle qui dit à
   l'exploitant quoi faire. Une ellipse y couperait précisément l'action. */
.data-grid td.c-label { white-space: normal; overflow-wrap: anywhere; }
.data-grid th.c-state { width: 200px; }
.data-grid td.c-state { white-space: nowrap; }

/* ── L'état, en un seul vocabulaire ────────────────────────────────────── */
.h-status {
  display: inline-flex; align-items: center; min-height: 23px; padding: 0 7px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: .68rem; font-weight: 700; white-space: nowrap;
}
.h-status.good { color: var(--accent-2); border-color: #159364; background: var(--success-soft); }
.h-status.warn { color: var(--warn);     border-color: var(--warn);   background: var(--warning-soft); }
.h-status.bad  { color: var(--danger);   border-color: var(--danger); background: var(--danger-soft); }
.h-status.info { color: var(--accent);   border-color: var(--accent); background: var(--info-soft); }

.muted { color: var(--muted); }
.filter-hint { margin: 0; padding: 12px 16px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.filter-hint code { overflow-wrap: anywhere; }

/* ── Zones servies ─────────────────────────────────────────────────────────
 *
 * Des cartes, et non un tableau : une zone porte deux couples de bornes, une source et une note.
 * Mises en colonnes, ces quatre choses n'ont aucune raison de s'aligner d'une ligne à l'autre —
 * et sur un écran étroit, un tableau de six colonnes est précisément ce qui a rendu cette console
 * illisible.
 */
.z-cartes {
  display: grid; gap: 12px; padding: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.z-carte {
  padding: 14px 15px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2);
}
.z-carte.active { border-color: var(--accent-2); }
.z-carte > header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}
.z-nom { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; }
.z-nom .h-icon { color: var(--accent); }
.z-bornes { margin: 12px 0 0; display: grid; gap: 6px; }
.z-bornes div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.z-bornes dt {
  color: var(--muted); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase;
  min-width: 74px;
}
.z-bornes dd { margin: 0; font-size: .82rem; font-variant-numeric: tabular-nums; }
.z-source { margin: 11px 0 0; color: var(--muted); font-size: .72rem; }
.z-source code { display: block; margin-top: 3px; overflow-wrap: anywhere; color: var(--text); }
.z-note { margin: 9px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }

/* ── Banc d'essai ──────────────────────────────────────────────────────────
 *
 * `.e-tous` reprend le dessin de `.e-jouer` plutôt que celui de `.ghost`. Mesuré à l'œil en thème
 * clair : en `.ghost`, il se lisait comme le lien « Console » de l'en-tête — c'est-à-dire comme
 * une NAVIGATION. Or il déclenche quatre calculs d'itinéraire contre le moteur, et fait monter
 * les compteurs d'exploitation. Un geste qui part vers l'amont doit ressembler à un bouton.
 */
.e-tous {
  flex: 0 0 auto; min-height: 40px; padding: 0 15px; cursor: pointer;
  color: var(--accent); background: var(--panel); border: 1px solid var(--accent);
  border-radius: 7px; font-size: .8rem; font-weight: 700;
}
.e-tous:hover { background: var(--info-soft); }
.e-liste {
  display: grid; gap: 12px; padding: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.e-carte {
  padding: 14px 15px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2);
}
.e-carte > header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.e-carte h3 { margin: 0; font-size: .92rem; }
.e-points { margin: 4px 0 0; color: var(--muted); font-size: .76rem; }
.e-jouer {
  flex: 0 0 auto; min-height: 40px; padding: 0 15px; cursor: pointer;
  color: var(--accent); background: var(--panel); border: 1px solid var(--accent);
  border-radius: 7px; font-size: .8rem; font-weight: 700;
}
.e-jouer:hover:not(:disabled) { background: var(--info-soft); }
.e-jouer:disabled { color: var(--muted); border-color: var(--border); cursor: progress; }
.e-prouve { margin: 11px 0 0; font-size: .78rem; line-height: 1.55; color: var(--muted); }
.e-boite { margin: 9px 0 0; font-size: .76rem; line-height: 1.5; }
.e-boite .h-status { margin-right: 5px; }
.e-resultat { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.e-etat { margin: 0; display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline;
  font-size: .78rem; line-height: 1.5; }
.e-mesures {
  margin: 11px 0 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.e-mesures dt {
  color: var(--muted); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
}
.e-mesures dd { margin: 3px 0 0; font-size: .88rem; font-variant-numeric: tabular-nums; }
.e-motif { margin: 10px 0 0; font-size: .76rem; line-height: 1.5; overflow-wrap: anywhere; }
.e-lecture {
  margin: 11px 0 0; display: flex; gap: 8px; padding: 10px 11px; border-radius: 7px;
  font-size: .76rem; line-height: 1.55;
  border: 1px solid var(--border); background: var(--panel);
}
.e-lecture.warn { border-color: var(--warn); background: var(--warning-soft); }
.e-lecture .h-icon { color: var(--warn); margin-top: 2px; }
.e-mesure-note { margin: 10px 0 0; line-height: 1.5; }

/* ── Les absences ──────────────────────────────────────────────────────── */
.empty-state {
  display: grid; justify-items: center; max-width: 640px; margin: 50px auto;
  padding: 20px; text-align: center;
}
.empty-state .h-icon { width: 1.8rem; height: 1.8rem; color: var(--accent); stroke-width: 1.3; }
.empty-state h2 { margin: 12px 0 5px; font-size: 1rem; }
.empty-state p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.5; }

/* ══ ÉCRANS ÉTROITS ═══════════════════════════════════════════════════════
 *
 * 🔴 CE BLOC REMPLACE UNE RÈGLE QUI RENDAIT LA PAGE ILLISIBLE, ET LA MESURE EST NETTE.
 *
 * Il y avait ici, et c'était tout :
 *
 *     @media (max-width: 720px) { .r-main { padding: 12px; } .data-grid { min-width: 0; } }
 *
 * `min-width: 0` ANNULE le défilement horizontal que `.grid-wrap { overflow-x: auto }` et
 * `min-width: 720px` mettent en place ensemble — sans rien poser à la place. Le tableau à trois
 * colonnes ne défile donc pas : il s'écrase.
 *
 * Mesuré le 2026-09-10 dans un navigateur à 375 × 812 sur `dev.ops.myth-technologies.com` : la
 * colonne « Ce que ça dit » tombait à TROIS CARACTÈRES par ligne — « Le / mot / eur / rép / ond /
 * et / por / te ». C'est la colonne qui dit à l'exploitant quoi faire, et c'est celle que la
 * largeur fixe de `th.c-state` (200 px) sacrifie en premier.
 *
 * ⚠️ ET LA SOLUTION N'EST PAS DE REMETTRE LE DÉFILEMENT. Un tableau de 720 px qu'on fait glisser
 * du doigt cache la moitié de chaque ligne en permanence : on ne peut pas lire un libellé et son
 * explication en même temps, c'est-à-dire qu'on ne peut rien lire du tout.
 *
 * Une ligne devient donc un BLOC : le libellé en tête, la valeur, l'explication en dessous. Les
 * en-têtes de colonne disparaissent — un en-tête simulé aurait exigé un attribut décoratif sur
 * chaque cellule, et la garde d'attributs de cette console refuse (à raison) tout `data-*` que
 * rien n'atteint.
 *
 * ⚠️ LE BALISAGE NE BOUGE PAS D'UN OCTET. `render-matrix.mjs` relit le HTML rendu par expression
 * régulière ancrée sur `<td class="c-label">…</td><td class="c-state">…</td>` : la mise en page
 * étroite se fait entièrement ICI, et pas une ligne de `panel.js` n'a eu à être touchée.
 */
/* Entre 520 et 900 px, `auto-fit` rangeait TROIS tuiles puis laissait la quatrième seule sur sa
   ligne — une grille qui a l'air d'avoir raté quelque chose. Quatre repères se lisent par paires ;
   on l'écrit, plutôt que d'espérer qu'une largeur minimale tombe juste. */
@media (max-width: 900px) {
  .k-rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .r-header { padding: 10px 14px; }
  .r-onglets { padding: 0 8px; }
  .r-main { padding: 12px; }

  .grid-wrap { overflow-x: visible; }
  .data-grid { min-width: 0; display: block; }
  .data-grid thead { display: none; }
  .data-grid tbody, .data-grid tr { display: block; }
  .data-grid tr {
    padding: 12px 14px; border-bottom: 1px solid var(--border);
  }
  .data-grid tr:last-child { border-bottom: 0; }
  .data-grid td { display: block; padding: 0; border-bottom: 0; }

  /* Le libellé porte la ligne : c'est lui qu'on cherche du regard en faisant défiler. */
  .data-grid td.c-label:first-child { font-weight: 700; font-size: .85rem; }
  /* La valeur respire sous son libellé, et cesse d'être `nowrap` : à 375 px, une version de
     moteur `3.8.3-49cd28bc5` en `nowrap` repousse toute la ligne hors de l'écran. */
  .data-grid td.c-state {
    margin-top: 6px; white-space: normal; overflow-wrap: anywhere; font-size: .9rem;
  }
  .data-grid td.c-label + td.c-state + td.c-label {
    margin-top: 7px; color: var(--muted); font-size: .78rem; font-weight: 400;
  }

  .z-cartes, .e-liste { padding: 12px; }
  .panel > header { padding: 13px 14px; }
  .filter-hint { padding: 12px 14px; }
  .empty-state { margin: 32px auto; }
}

/* Sous 520 px, la pastille d'écran répète ce que la marque dit déjà juste à côté — et elle prend
   la place de l'horodatage, qui lui n'est écrit nulle part ailleurs. */
@media (max-width: 520px) {
  .r-screen { display: none; }
  .r-header .brand-link small { display: none; }

  /* Les deux colonnes viennent de la règle « ≤ 900 px » ci-dessus ; ici on ne resserre que la
   * matière.
   *
   * ⚠️ Mesuré à 375 px avant ce lot : empilée en UNE colonne, la rangée de tête occupait environ
   * 400 px — la totalité du premier écran. L'exploitant faisait défiler quatre chiffres avant
   * d'atteindre l'onglet qu'il venait d'ouvrir, y compris quand il l'avait ouvert pour lire autre
   * chose. Une rangée de repères qui repousse le contenu sous la ligne de flottaison cesse d'être
   * un repère. Les notes, elles, restent : c'est la colonne d'explication de cette console, et
   * elle ne se tronque pas. */
  .k-rangee { gap: 8px; }
  .k-tuile { padding: 11px 12px; }
  .k-valeur { font-size: 1.12rem; }
  .e-carte > header { flex-direction: column; align-items: stretch; }
  .e-jouer { width: 100%; }
}