/* ==========================================================================
   TOUR DE CONTRÔLE INFONOVICE — feuille de style
   Monde visuel unique et assumé : carte topographique IGN lue de nuit.
   Fond bleu-ardoise, encre sable, bistre des courbes de niveau en accent.
   ========================================================================== */

:root {
  /* Grounds — bleu-ardoise désaturé, jamais noir pur */
  --abyss:      #0A1419;
  --hull:       #10212A;
  --hull-2:     #142934;
  --hull-3:     #1A323E;
  --graticule:  #1B3A44;
  --graticule-soft: #162E37;

  /* Encre — sable de carte topographique */
  --ink:        #E9E3D6;
  --ink-2:      #A9B6B8;
  --ink-3:      #6F8288;
  --ink-4:      #4A5C63;

  /* Accent : bistre IGN (courbes de niveau, routes) */
  --bistre:     #E2703A;
  --bistre-hi:  #FF8B4F;
  --bistre-lo:  #A64F26;
  --bistre-wash: rgba(226, 112, 58, 0.13);

  /* Sémantique — distincte de l'accent */
  --hydro:      #4FB3A6;   /* bon / disponible */
  --hydro-wash: rgba(79, 179, 166, 0.13);
  --amber:      #E0A83C;   /* attention */
  --amber-wash: rgba(224, 168, 60, 0.13);
  --crimson:    #DD5252;   /* critique */
  --crimson-wash: rgba(221, 82, 82, 0.14);
  --violet:     #8E7CC8;   /* revue / arbitrage */
  --violet-wash: rgba(142, 124, 200, 0.14);
  --slate:      #6C9BC0;   /* info */
  --slate-wash: rgba(108, 155, 192, 0.13);

  /* Type */
  --display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Échelle typographique */
  --t-mega: clamp(1.75rem, 3.4vw, 2.9rem);
  --t-xl:   clamp(1.3rem, 2.1vw, 1.75rem);
  --t-lg:   1.0625rem;
  --t-md:   0.9375rem;
  --t-sm:   0.8125rem;
  --t-xs:   0.6875rem;
  --t-micro: 0.625rem;

  /* Rythme */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 18px;
  --r5: 26px; --r6: 38px; --r7: 56px;

  --edge: 1px solid var(--graticule);
  --edge-soft: 1px solid var(--graticule-soft);
  --radius: 3px;
  --radius-lg: 6px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Graticule de fond : une carte, pas un dégradé */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(var(--graticule-soft) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, var(--graticule-soft) 1px, transparent 1px) 0 0 / 96px 100%,
    radial-gradient(ellipse 130% 90% at 50% -10%, #16303C 0%, var(--abyss) 62%);
  opacity: 0.85;
}

::selection { background: var(--bistre); color: #10212A; }

:focus-visible {
  outline: 2px solid var(--bistre-hi);
  outline-offset: 2px;
}

/* ---------- Rails de défilement ---------- */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--graticule) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--graticule); border-radius: 4px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Charpente
   ========================================================================== */

/* Aucun conteneur de charpente n'impose sa largeur de contenu : sans cela une
   barre d'onglets trop longue élargit la page entière. */
.shell, .bridge, .mark, .mark-text, .bridge-right, .helm, .deck, .view,
.cockpit, .spread, .arb, .console, .telem, .instruments,
.rail, .rail-head, .rail-body, .scene, .spread-list, .spread-main,
.arb-queue, .arb-focus, .console-main, .console-side, .thread,
.instrument, .panel, .plot, .metrics, .lanes, .lane, .card, .chit, .prod,
.sheet-head, .sheet-id, .sheet-body, .dossier, .turn, .turn-body { min-width: 0; }

.chit-title, .prod-name, .card-t, .sheet-name, .dossier-q { overflow-wrap: anywhere; }

.shell {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* ---------- Barre d'instruments ---------- */

.bridge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--r5);
  padding: 10px clamp(16px, 2vw, 26px);
  border-bottom: var(--edge);
  background: linear-gradient(180deg, rgba(16,33,42,0.96), rgba(10,20,25,0.88));
  backdrop-filter: blur(8px);
}

.mark { display: flex; align-items: center; gap: 12px; }

.mark-glyph {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
}
.mark-glyph svg { display: block; width: 34px; height: 34px; }

.mark-text { display: flex; flex-direction: column; line-height: 1.05; }
.mark-name {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.mark-sub {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

/* Cadrans de la barre */
.gauges {
  display: flex;
  align-items: stretch;
  gap: 1px;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  border: var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--graticule);
}
.gauge {
  background: var(--hull);
  padding: 7px 13px;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gauge-k {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.gauge-v {
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
.gauge-v.is-alert { color: var(--crimson); }
.gauge-v.is-warn  { color: var(--amber); }
.gauge-v.is-good  { color: var(--hydro); }
.gauge-v.is-accent { color: var(--bistre); }

.bridge-right { display: flex; align-items: center; gap: 12px; }

/* Témoin de source de données */
.feed {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border: var(--edge);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--hull);
  cursor: help;
}
.feed-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
  flex: 0 0 7px;
}
.feed[data-state="live"]   { color: var(--hydro); border-color: rgba(79,179,166,0.4); }
.feed[data-state="live"] .feed-dot { background: var(--hydro); animation: breathe 2.6s ease-in-out infinite; }
.feed[data-state="demo"]   { color: var(--amber); border-color: rgba(224,168,60,0.4); }
.feed[data-state="demo"] .feed-dot { background: var(--amber); }
.feed[data-state="wait"]   { color: var(--ink-3); }
.feed[data-state="wait"] .feed-dot { background: var(--ink-3); animation: breathe 1.2s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: 0.55; box-shadow: 0 0 0 4px rgba(255,255,255,0.04); }
}

/* ---------- Navigation des vues ---------- */

.helm {
  display: flex;
  gap: 1px;
  background: var(--graticule);
  border: var(--edge);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
}
.helm::-webkit-scrollbar { height: 0; }
.helm button { flex: 0 0 auto; }
.helm button {
  appearance: none;
  border: 0;
  background: var(--hull);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 9px 15px;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.helm button:hover { background: var(--hull-3); color: var(--ink); }
.helm button[aria-selected="true"] {
  background: var(--bistre);
  color: #0A1419;
  font-weight: 600;
}
.helm .tally {
  font-variant-numeric: tabular-nums;
  background: var(--crimson);
  color: #fff;
  border-radius: 100px;
  padding: 1px 6px;
  font-size: var(--t-micro);
  font-weight: 600;
}
.helm button[aria-selected="true"] .tally { background: #0A1419; color: var(--bistre-hi); }

/* ---------- Corps ---------- */

.deck { position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; display: none; }
.view.is-on { display: block; }

/* ==========================================================================
   VUE 1 — COCKPIT : carte orbitale + rails
   ========================================================================== */

.cockpit {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr minmax(280px, 330px);
  grid-template-rows: 1fr auto;
  gap: 0;
}

.rail {
  border-right: var(--edge);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(16,33,42,0.42);
}
.rail.rail-right { border-right: 0; border-left: var(--edge); }

.rail-head {
  padding: 11px 15px;
  border-bottom: var(--edge);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}
.rail-title {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rail-note {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rail-body { flex: 1 1 auto; min-height: 0; padding: 11px; display: flex; flex-direction: column; gap: 9px; }

/* Scène orbitale */
.scene {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
}
#orbital { display: block; width: 100%; height: 100%; }

.scene-legend {
  position: absolute;
  left: 16px; bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
}
.scene-legend div { display: flex; align-items: center; gap: 7px; }
.key {
  width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 9px;
  border: 1px solid currentColor;
}
.key.k-agent  { background: var(--bistre); border-color: var(--bistre-hi); }
.key.k-frozen { background: transparent; border-color: var(--ink-4); }
.key.k-prod   { background: var(--slate); border-color: var(--slate); }
.key.k-alert  { background: var(--crimson); border-color: var(--crimson); }

.scene-hint {
  position: absolute;
  right: 16px; bottom: 14px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  pointer-events: none;
}

/* Infobulle du canvas */
.scene-tip {
  position: absolute;
  z-index: 6;
  min-width: 170px;
  max-width: 290px;
  padding: 9px 11px;
  background: rgba(10,20,25,0.96);
  border: 1px solid var(--bistre-lo);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,0.6);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.13s, transform 0.13s;
}
.scene-tip.is-on { opacity: 1; transform: translateY(0); }
.scene-tip h4 {
  margin: 0 0 5px;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-wrap: balance;
}
.scene-tip dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-family: var(--mono);
  font-size: var(--t-micro);
}
.scene-tip dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.scene-tip dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

/* Bandeau de courbes */
.instruments {
  grid-column: 1 / -1;
  border-top: var(--edge);
  background: rgba(16,33,42,0.55);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--graticule);
}
.instrument {
  background: var(--hull);
  padding: 11px 15px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.instrument-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.instrument-k {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.instrument-v {
  font-family: var(--mono);
  font-size: var(--t-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.instrument figure { margin: 0; min-height: 54px; }
.instrument svg { display: block; width: 100%; height: 54px; overflow: visible; }
.instrument-foot {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-4);
  letter-spacing: 0.06em;
}

/* ==========================================================================
   Pièces réutilisées
   ========================================================================== */

/* Fiche compacte (décision, alerte, instruction) */
.chit {
  border: var(--edge);
  border-left: 3px solid var(--ink-4);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--hull);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  appearance: none;
}
.chit:hover { background: var(--hull-3); transform: translateX(2px); }
.chit[data-sev="block"]  { border-left-color: var(--crimson); }
.chit[data-sev="week"]   { border-left-color: var(--amber); }
.chit[data-sev="later"]  { border-left-color: var(--slate); }
.chit[data-sev="crit"]   { border-left-color: var(--crimson); }
.chit[data-sev="warn"]   { border-left-color: var(--amber); }
.chit[data-sev="info"]   { border-left-color: var(--slate); }
.chit[data-sev="done"]   { border-left-color: var(--hydro); opacity: 0.72; }

.chit-top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chit-title {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chit-foot {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-4);
  display: flex;
  gap: 9px;
  align-items: center;
}

/* Pastilles d'état */
.pip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px; }
.pip.p-crit  { color: var(--crimson); background: var(--crimson-wash); border-color: rgba(221,82,82,0.3); }
.pip.p-warn  { color: var(--amber);   background: var(--amber-wash);   border-color: rgba(224,168,60,0.3); }
.pip.p-good  { color: var(--hydro);   background: var(--hydro-wash);   border-color: rgba(79,179,166,0.3); }
.pip.p-info  { color: var(--slate);   background: var(--slate-wash);   border-color: rgba(108,155,192,0.3); }
.pip.p-rev   { color: var(--violet);  background: var(--violet-wash);  border-color: rgba(142,124,200,0.3); }
.pip.p-acc   { color: var(--bistre);  background: var(--bistre-wash);  border-color: rgba(226,112,58,0.32); }
.pip.p-mute  { color: var(--ink-3);   background: rgba(111,130,136,0.1); border-color: var(--graticule); }
.pip.p-flat::before { display: none; }

/* Boutons */
.btn {
  appearance: none;
  border: var(--edge);
  background: var(--hull-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.btn:hover { background: var(--hull-3); border-color: var(--ink-4); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn-key { background: var(--bistre); border-color: var(--bistre); color: #0A1419; font-weight: 600; }
.btn-key:hover { background: var(--bistre-hi); border-color: var(--bistre-hi); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 5px 10px; font-size: var(--t-micro); }

/* Champs */
.field {
  width: 100%;
  background: var(--abyss);
  border: var(--edge);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-sm);
  padding: 9px 11px;
  resize: vertical;
  line-height: 1.5;
}
.field:focus { border-color: var(--bistre-lo); outline: none; }
.field::placeholder { color: var(--ink-4); }
select.field { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 10px; cursor: pointer; }

.field-row { display: flex; gap: 8px; flex-wrap: wrap; }
.field-row > * { flex: 1 1 130px; min-width: 0; }

.label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 5px;
}

/* Journal défilant */
.ticker { display: flex; flex-direction: column; gap: 0; font-family: var(--mono); font-size: var(--t-xs); }
.tick {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 9px;
  padding: 6px 2px;
  border-bottom: var(--edge-soft);
  align-items: baseline;
}
.tick:last-child { border-bottom: 0; }
.tick-t { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.tick-a { color: var(--bistre); text-transform: uppercase; font-size: var(--t-micro); letter-spacing: 0.07em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; }
.tick-x { color: var(--ink-2); line-height: 1.4; }
.tick[data-r="Échec"] .tick-x { color: var(--crimson); }
.tick[data-r="Partiel"] .tick-x { color: var(--amber); }
.tick.is-new { animation: arrive 0.5s ease-out; }
@keyframes arrive {
  from { background: var(--bistre-wash); opacity: 0; transform: translateY(-5px); }
  to   { background: transparent; opacity: 1; transform: none; }
}

/* Barres de charge */
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-family: var(--mono); font-size: var(--t-xs); }
.bar-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-val { color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-track { grid-column: 1 / -1; height: 4px; background: var(--graticule-soft); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--bistre); border-radius: 2px; transition: width 0.7s cubic-bezier(0.22,1,0.36,1); }
.bar-fill.f-good { background: var(--hydro); }
.bar-fill.f-warn { background: var(--amber); }
.bar-fill.f-crit { background: var(--crimson); }
.bar-fill.f-mute { background: var(--ink-4); }

/* État vide */
.void {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--r6) var(--r4);
  gap: 8px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.void svg { opacity: 0.4; }

/* ==========================================================================
   VUE 2 — PRODUITS
   ========================================================================== */

.spread {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  min-height: 0;
}
.spread-list { border-right: var(--edge); display: flex; flex-direction: column; min-height: 0; background: rgba(16,33,42,0.42); }
.spread-main { min-height: 0; display: flex; flex-direction: column; }

.prod {
  border: var(--edge);
  border-radius: var(--radius);
  background: var(--hull);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  appearance: none;
}
.prod:hover { background: var(--hull-3); }
.prod[aria-current="true"] { border-color: var(--bistre); background: var(--bistre-wash); }
.prod-name { font-family: var(--display); font-weight: 600; font-size: var(--t-sm); letter-spacing: 0.02em; color: var(--ink); }
.prod-host { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-4); }
.prod-stats { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.prod-stat { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.prod-stat b { color: var(--ink); font-weight: 600; }
.prod-stat.s-crit b { color: var(--crimson); }
.prod-stat.s-warn b { color: var(--amber); }

/* En-tête de fiche produit */
.sheet-head {
  padding: var(--r4) clamp(18px, 2.4vw, 30px) var(--r3);
  border-bottom: var(--edge);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--r3);
  flex: 0 0 auto;
}
.sheet-id { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sheet-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bistre);
}
.sheet-name {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}
.sheet-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.sheet-link {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--bistre);
  text-decoration: none;
  border-bottom: 1px solid rgba(226,112,58,0.4);
  padding-bottom: 1px;
}
.sheet-link:hover { color: var(--bistre-hi); border-bottom-color: var(--bistre-hi); }

.sheet-body { flex: 1 1 auto; min-height: 0; padding: var(--r4) clamp(18px, 2.4vw, 30px) var(--r6); display: flex; flex-direction: column; gap: var(--r5); }

/* Dans une colonne défilante, un bloc garde sa hauteur propre : sans cela le
   flex écrase les grilles de tuiles jusqu'à leurs bordures. */
.sheet-body > *, .dossier > *, .telem > *, .rail-body > *, .thread > * { flex: 0 0 auto; }

.blurb { max-width: 68ch; color: var(--ink-2); font-size: var(--t-md); line-height: 1.62; margin: 0; }

/* Panneaux */
.panel { display: flex; flex-direction: column; gap: var(--r3); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3); flex-wrap: wrap; border-bottom: var(--edge); padding-bottom: 7px; }
.panel-title {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.panel-aside { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-4); letter-spacing: 0.06em; }

/* Grand graphique de trafic */
.plot { position: relative; }
.plot svg { display: block; width: 100%; height: clamp(170px, 22vh, 240px); overflow: visible; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; background: var(--graticule); border: var(--edge); border-radius: var(--radius); overflow: hidden; }
.metric { background: var(--hull); padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; }
.metric-k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.metric-v { font-family: var(--mono); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.15; }
.metric-d { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-4); }
.metric-v.is-crit { color: var(--crimson); }
.metric-v.is-warn { color: var(--amber); }
.metric-v.is-good { color: var(--hydro); }
.metric-v.is-none { color: var(--ink-4); font-size: var(--t-md); }

/* Kanban / pipeline */
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; align-items: start; }
.lane { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lane-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding-bottom: 6px; border-bottom: 2px solid var(--graticule); }
.lane-head[data-l="En cours"] { border-bottom-color: var(--slate); }
.lane-head[data-l="Revue"]    { border-bottom-color: var(--violet); }
.lane-head[data-l="Bloqué"]   { border-bottom-color: var(--crimson); }
.lane-head[data-l="Terminé"]  { border-bottom-color: var(--hydro); }
.lane-head[data-l="Ready"]    { border-bottom-color: var(--bistre); }
.lane-k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2); }
.lane-n { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.card {
  border: var(--edge);
  border-radius: var(--radius);
  background: var(--hull);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.card-t { font-size: var(--t-xs); line-height: 1.42; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card-m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-4); }
.card-pr { color: var(--bistre); text-decoration: none; }
.card-pr:hover { text-decoration: underline; }

/* Table */
.grid-t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.grid-t th:not(:first-child), .grid-t td:not(:first-child) { padding-left: 16px; }
.grid-t th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 7px 11px 7px 0;
  border-bottom: var(--edge);
  white-space: nowrap;
}
.grid-t td { padding: 9px 11px 9px 0; border-bottom: var(--edge-soft); color: var(--ink-2); vertical-align: top; line-height: 1.45; }
.grid-t td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); padding-right: 0; }
.grid-t tr:hover td { background: rgba(226,112,58,0.045); }
.t-wrap { overflow-x: auto; }

/* ==========================================================================
   VUE 3 — ARBITRAGE
   ========================================================================== */

.arb { height: 100%; display: grid; grid-template-columns: minmax(320px, 400px) 1fr; min-height: 0; }
.arb-queue { border-right: var(--edge); display: flex; flex-direction: column; min-height: 0; background: rgba(16,33,42,0.42); }
.arb-focus { min-height: 0; display: flex; flex-direction: column; }

.dossier { flex: 1 1 auto; min-height: 0; padding: var(--r4) clamp(18px, 2.4vw, 30px) var(--r6); display: flex; flex-direction: column; gap: var(--r4); }
.dossier-q {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  line-height: 1.28;
  color: var(--ink);
  text-wrap: balance;
  max-width: 40ch;
}
.prose { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.68; white-space: pre-wrap; max-width: 74ch; }
.prose.is-quote {
  border-left: 2px solid var(--bistre-lo);
  padding-left: var(--r3);
  color: var(--ink-2);
  background: rgba(226,112,58,0.035);
  padding-block: 10px;
}

.reply { display: flex; flex-direction: column; gap: 10px; border: var(--edge); border-radius: var(--radius); background: var(--hull); padding: var(--r3); }
.reply-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reply-hint { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-4); letter-spacing: 0.05em; }

/* ==========================================================================
   VUE 4 — CONSOLE
   ========================================================================== */

.console { height: 100%; display: grid; grid-template-columns: 1fr minmax(300px, 380px); min-height: 0; }
.console-main { display: flex; flex-direction: column; min-height: 0; }
.console-side { border-left: var(--edge); display: flex; flex-direction: column; min-height: 0; background: rgba(16,33,42,0.42); }

.thread { flex: 1 1 auto; min-height: 0; padding: var(--r4) clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: var(--r4); }
.turn { display: grid; grid-template-columns: auto 1fr; gap: 12px; max-width: 82ch; }
.turn-who {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 0 0 26px;
  border: 1px solid;
}
.turn[data-who="ceo"] .turn-who { background: var(--bistre); border-color: var(--bistre); color: #0A1419; }
.turn[data-who="hq"] .turn-who { background: var(--hull-3); border-color: var(--graticule); color: var(--hydro); }
.turn-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.turn-meta { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.turn-text { color: var(--ink); font-size: var(--t-sm); line-height: 1.66; white-space: pre-wrap; }
.turn[data-who="hq"] .turn-text { color: var(--ink-2); }
.turn-text code { font-family: var(--mono); font-size: 0.92em; background: var(--hull-3); padding: 1px 5px; border-radius: 3px; color: var(--bistre-hi); }

.caret { display: inline-block; width: 7px; height: 1em; background: var(--bistre); vertical-align: text-bottom; animation: blink 1.05s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.composer { flex: 0 0 auto; border-top: var(--edge); padding: var(--r3) clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 9px; background: rgba(10,20,25,0.7); }
.composer-modes { display: flex; gap: 1px; background: var(--graticule); border: var(--edge); border-radius: var(--radius); overflow: hidden; width: fit-content; }
.composer-modes button {
  appearance: none; border: 0; background: var(--hull); color: var(--ink-3);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 13px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.composer-modes button:hover { color: var(--ink); }
.composer-modes button[aria-pressed="true"] { background: var(--bistre); color: #0A1419; font-weight: 600; }
.composer-row { display: flex; gap: 9px; align-items: flex-end; }
.composer-row .field { flex: 1 1 auto; min-height: 46px; max-height: 168px; }
.composer-foot { display: flex; justify-content: space-between; gap: var(--r3); flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   VUE 5 — TÉLÉMÉTRIE
   ========================================================================== */

.telem { height: 100%; overflow-y: auto; padding: var(--r4) clamp(18px, 2.4vw, 30px) var(--r7); display: flex; flex-direction: column; gap: var(--r5); }
.telem-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--r5);
  align-items: start;
}
.telem-grid > .sp-2 { grid-column: span 2; }
.telem-grid > .sp-3 { grid-column: span 3; }
.telem-grid > .sp-4 { grid-column: 1 / -1; }
@media (max-width: 1240px) {
  .telem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telem-grid > .sp-3, .telem-grid > .sp-4 { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .telem-grid { grid-template-columns: minmax(0, 1fr); }
  .telem-grid > .sp-2, .telem-grid > .sp-3, .telem-grid > .sp-4 { grid-column: 1 / -1; }
}

.heat { display: grid; gap: 3px; }
.heat-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 9px; align-items: center; }
.heat-lab { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-cells { display: grid; grid-auto-flow: column; gap: 3px; grid-auto-columns: 1fr; }
.heat-c { height: 15px; border-radius: 2px; background: var(--graticule-soft); }

/* ==========================================================================
   Fenêtre modale
   ========================================================================== */

.veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5,11,14,0.78);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}
.veil[hidden] { display: none; }
.dialog {
  width: min(680px, 100%);
  max-height: min(84vh, 720px);
  background: var(--hull);
  border: var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.66);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dialog-head { padding: var(--r3) var(--r4); border-bottom: var(--edge); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--r3); }
.dialog-body { padding: var(--r4); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: var(--r3); }
.dialog-foot { padding: var(--r3) var(--r4); border-top: var(--edge); display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.x-btn {
  appearance: none; background: transparent; border: var(--edge); color: var(--ink-3);
  width: 28px; height: 28px; border-radius: var(--radius); cursor: pointer; flex: 0 0 28px;
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.x-btn:hover { color: var(--ink); border-color: var(--ink-4); }

/* Bandeau d'annonce */
.flash {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(90px);
  z-index: 60;
  background: var(--hull-3);
  border: 1px solid var(--bistre-lo);
  border-radius: var(--radius);
  padding: 11px 17px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
  opacity: 0;
  max-width: calc(100vw - 32px);
}
.flash.is-on { transform: translateX(-50%) translateY(0); opacity: 1; }
.flash[data-kind="bad"] { border-color: var(--crimson); }
.flash[data-kind="good"] { border-color: var(--hydro); }

/* ==========================================================================
   Écran d'accueil (accès)
   ========================================================================== */

.gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--abyss);
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vw, 48px);
}
.gate[hidden] { display: none; }
.gate-card { width: min(430px, 100%); display: flex; flex-direction: column; gap: var(--r4); text-align: center; }
.gate-glyph { display: grid; place-items: center; }
.gate-glyph svg { width: 76px; height: 76px; }
.gate-title { margin: 0; font-family: var(--display); font-size: var(--t-xl); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.gate-sub { margin: 0; color: var(--ink-3); font-size: var(--t-sm); line-height: 1.6; }
.gate-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.gate-note { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-4); line-height: 1.6; letter-spacing: 0.04em; }
.gate-err { font-family: var(--mono); font-size: var(--t-xs); color: var(--crimson); min-height: 1.2em; }

/* ==========================================================================
   Adaptations d'écran
   ========================================================================== */

/* Les cadrans cèdent la place dans l'ordre inverse de leur utilité */
@media (max-width: 1560px) { .gauge[data-opt="1"] { display: none; } }
@media (max-width: 1400px) { .gauge[data-opt="2"] { display: none; } }
@media (max-width: 1290px) { .gauge[data-opt="3"] { display: none; } }

@media (max-width: 1180px) {
  .cockpit { grid-template-columns: minmax(250px, 290px) 1fr; grid-template-rows: 1fr auto auto; }
  .rail.rail-right { grid-column: 1 / -1; border-left: 0; border-top: var(--edge); max-height: 210px; }
  .instruments { grid-template-columns: repeat(2, 1fr); }
  .gauges { display: none; }
}

@media (max-width: 900px) {
  body { overflow-x: hidden; overflow-y: auto; }
  .shell { height: auto; min-height: 100dvh; }
  .bridge { grid-template-columns: 1fr; gap: var(--r3); }
  .bridge-right { flex-wrap: wrap; }
  .helm { width: 100%; overflow-x: auto; }
  .helm button { flex: 1 0 auto; justify-content: center; }
  .deck { position: static; overflow: visible; }
  .view { position: static; }
  .view.is-on { display: block; }
  .cockpit, .spread, .arb, .console { height: auto; grid-template-columns: 1fr; }
  .scene { height: 62vh; min-height: 380px; }
  .rail, .rail.rail-right { border: 0; border-top: var(--edge); max-height: none; }
  .rail-body { max-height: 340px; overflow-y: auto; }
  .spread-list, .arb-queue, .console-side { border-right: 0; border-left: 0; border-bottom: var(--edge); max-height: 360px; }
  .telem { height: auto; }
  .instruments { grid-template-columns: 1fr; }
  .turn { max-width: none; }
}

@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .lanes { grid-template-columns: 1fr; }
  .heat-row { grid-template-columns: 48px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}