/* ==========================================================================
   SYSADMIN NEXUS — identité visuelle
   --------------------------------------------------------------------------
   Registre : workstation d'administrateur. Windows Terminal, console NOC,
   UEFI moderne. Aucune ressource externe : la CSP interdit les polices
   distantes et la version portable doit fonctionner hors ligne.
   La pile typographique privilégie donc Cascadia et Segoe UI Variable,
   présentes sur tout Windows moderne — ce qui sert l'ambiance recherchée.
   ========================================================================== */

:root {
  /* --- profondeurs --- */
  --void:        #090b0e;
  --fond:        #0d1117;
  --fond-2:      #11151b;
  --surface:     #141922;
  --surface-2:   #181e27;
  --surface-3:   #1e2530;

  /* --- structure --- */
  --bord:        #202a37;
  --bord-vif:    #2c3a4c;
  --bord-actif:  #38506b;

  /* --- texte --- */
  --txt:         #dce4ee;
  --txt-2:       #8fa2b8;
  --txt-3:       #5d7189;
  --txt-4:       #3f4f63;

  /* --- sémantique : chaque couleur porte un sens --- */
  --info:        #38bdf8;   /* information, action        */
  --info-2:      #00aeef;
  --info-fond:   rgba(56,189,248,.09);
  --ok:          #39ff88;   /* succès, sûr, en ligne      */
  --ok-fond:     rgba(57,255,136,.08);
  --warn:        #f5a524;   /* attention, prudence        */
  --warn-fond:   rgba(245,165,36,.09);
  --crit:        #ff5a52;   /* erreur, destructif         */
  --crit-fond:   rgba(255,90,82,.09);
  --special:     #a78bfa;   /* ponctuel, catégorie rare   */

  --r-xs: 3px;
  --r:    6px;
  --r-lg: 10px;

  --mono: "Cascadia Mono", "Cascadia Code", "JetBrains Mono", "IBM Plex Mono", Consolas, "Courier New", monospace;
  --sans: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;

  --rail: 74px;
  --barre: 26px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fond);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Trame technique de fond : grille fine + halo, très discrets. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(56,189,248,.05), transparent 70%),
    linear-gradient(rgba(56,189,248,.022) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(56,189,248,.022) 1px, transparent 1px) 0 0 / 34px 100%;
}

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(56,189,248,.25); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--bord-vif); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--bord-actif); }

/* ==========================================================================
   Barre supérieure
   ========================================================================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  background: linear-gradient(180deg, var(--void), var(--fond-2));
  border-bottom: 1px solid var(--bord);
}
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.5), transparent);
}

.marque { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.marque .sigil {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ok);
  background: var(--void);
  border: 1px solid var(--bord-vif);
  border-radius: var(--r-xs);
  padding: 3px 7px;
  letter-spacing: 1px;
}
.marque .nom {
  font-family: var(--mono);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 3.5px;
  color: var(--txt);
}
.marque .nom em { font-style: normal; color: var(--info); }
.marque .tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 1.6px;
  color: var(--txt-4);
  text-transform: uppercase;
}

/* --- Command bar : l'élément central --- */
.cmdbar {
  flex: 1;
  max-width: 780px;
  position: relative;
  display: flex;
  align-items: center;
}
.cmdbar .prefix {
  position: absolute; left: 13px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ok);
  pointer-events: none;
}
.cmdbar input {
  width: 100%;
  height: 36px;
  background: var(--void);
  border: 1px solid var(--bord-vif);
  border-radius: var(--r);
  color: var(--txt);
  font-family: var(--mono);
  font-size: 13px;
  padding: 0 84px 0 40px;
}
.cmdbar input::placeholder { color: var(--txt-4); }
.cmdbar input:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 3px rgba(56,189,248,.11);
  background: #05070a;
}
.cmdbar .kbd-hint {
  position: absolute; right: 10px;
  display: flex; gap: 4px;
  pointer-events: none;
}

kbd {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--txt-3);
  background: var(--surface-2);
  border: 1px solid var(--bord-vif);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  padding: 2px 5px;
  white-space: nowrap;
}

/* --- Télémétrie décorative en haut à droite --- */
.telemetrie {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--txt-3);
  white-space: nowrap;
}
.telemetrie .item { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.telemetrie .k { font-size: 8.5px; letter-spacing: 1.2px; color: var(--txt-4); text-transform: uppercase; }
.telemetrie .v { color: var(--txt-2); }
.telemetrie .v.ok { color: var(--ok); }

.led {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
  margin-right: 5px;
  vertical-align: middle;
  animation: pulse 2.6s ease-in-out infinite;
}
.led.warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.led.crit { background: var(--crit); box-shadow: 0 0 6px var(--crit); }
.led.idle { background: var(--txt-4); box-shadow: none; animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .led { animation: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Rail de navigation vertical
   ========================================================================== */
.rail {
  position: fixed;
  top: 56px; bottom: var(--barre); left: 0;
  width: var(--rail);
  z-index: 55;
  background: linear-gradient(180deg, var(--fond-2), var(--void));
  border-right: 1px solid var(--bord);
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.rail button {
  position: relative;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--txt-3);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 9px 2px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: color .12s, background .12s, border-color .12s;
}
.rail button svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.rail button:hover { color: var(--txt); background: rgba(56,189,248,.05); }
.rail button.actif {
  color: var(--info);
  border-left-color: var(--info);
  background: linear-gradient(90deg, rgba(56,189,248,.13), transparent);
}
.rail .separateur { height: 1px; background: var(--bord); margin: 8px 14px; }

/* ==========================================================================
   Zone principale
   ========================================================================== */
main {
  position: relative;
  z-index: 1;
  margin: 56px 0 var(--barre) var(--rail);
  padding: 22px 26px 44px;
  max-width: 1680px;
}

.vue { display: none; }
.vue.on { display: block; animation: entre .16s ease-out; }
@keyframes entre { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* --- Étiquette de module : MODULE 03 / NETWORK --- */
.module-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--txt-4);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.module-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bord), transparent);
}
.module-label b { color: var(--info); font-weight: 600; }

h1.titre-vue {
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -.2px;
}
p.sous-titre-vue {
  margin: 0 0 20px;
  color: var(--txt-2);
  font-size: 13.5px;
  max-width: 760px;
}

h2.section {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--txt-3);
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
h2.section::before {
  content: "";
  width: 3px; height: 13px;
  background: var(--info);
  border-radius: 2px;
}
h2.section::after {
  content: "";
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--bord), transparent);
}

/* ==========================================================================
   Accueil — modules asymétriques
   ========================================================================== */
.salut {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.salut h1 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -.3px; }
.salut .mission { color: var(--txt-3); font-family: var(--mono); font-size: 12.5px; }

.mosaique {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 18px;
}

/* Chaque module a sa propre emprise : rien de régulier. */
.mod {
  position: relative;
  background: linear-gradient(155deg, var(--surface), var(--surface-2) 65%);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  padding: 15px 16px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .14s, transform .14s, box-shadow .14s;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.mod::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--accent-mod, var(--info));
  opacity: .5;
  transition: opacity .14s;
}
.mod:hover {
  border-color: var(--bord-actif);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,.42);
}
.mod:hover::before { opacity: 1; }
.mod .num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--txt-4);
}
.mod .nom {
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--txt);
}
.mod .desc { font-size: 12.5px; color: var(--txt-2); flex: 1; }
.mod .compte {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent-mod, var(--info));
  letter-spacing: .6px;
}

.c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c12 { grid-column: span 12; }

/* --- Panneau console (accueil) --- */
.console-bloc {
  background: var(--void);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.console-bloc .barre-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--txt-3);
}
.console-bloc .corps { padding: 12px 14px; font-family: var(--mono); font-size: 12px; }
.console-ligne { display: flex; gap: 9px; padding: 3px 0; color: var(--txt-2); }
.console-ligne .heure { color: var(--txt-4); }
.console-ligne .fleche { color: var(--ok); }

/* --- Mini rack --- */
.rack { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 11px; }
.rack .u {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: var(--r-xs);
  color: var(--txt-2);
}
.rack .u .etiq { flex: 1; letter-spacing: 1px; }
.rack .u .leds { display: flex; gap: 3px; }

/* ==========================================================================
   Cartes et panneaux techniques
   ========================================================================== */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 11px;
}
.grille.large { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }

/* Sans min-width:0, un bloc de commande large force sa colonne à s'étendre
   et la page entière défile horizontalement au lieu du seul bloc. */
.grille > *, .mosaique > * { min-width: 0; }

.panneau {
  position: relative;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .13s;
}
.panneau > * { min-width: 0; }
.panneau:hover { border-color: var(--bord-vif); }
.panneau.prio {
  border-color: var(--bord-actif);
  background: linear-gradient(150deg, var(--info-fond), var(--surface) 55%);
}
.panneau .entete {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.panneau .nom {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
}
.panneau .desc { font-size: 12.5px; color: var(--txt-2); flex: 1; }
.panneau .note {
  font-size: 12px;
  color: var(--txt-3);
  border-left: 2px solid var(--bord-vif);
  padding-left: 9px;
}
.panneau .note.alerte { border-left-color: var(--warn); color: #d3ab72; }

/* --- Rangée de commande : structure horizontale dense --- */
.rangee {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  margin-bottom: 6px;
  transition: border-color .12s, background .12s;
}
.rangee:hover { border-color: var(--bord-actif); background: var(--surface-2); }
.rangee .principal { flex: 1; min-width: 0; }
.rangee .cmd-inline {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ok);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}
.rangee .sous { font-size: 12px; color: var(--txt-2); margin-top: 2px; }
.rangee .equiv {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--txt-3);
  margin-top: 3px;
}
.rangee .equiv b { color: var(--info); font-weight: 500; }

/* --- Étiquettes --- */
.etiq {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid;
  white-space: nowrap;
  font-weight: 500;
}
.etiq.safe   { color: var(--ok);      border-color: rgba(57,255,136,.3);  background: var(--ok-fond); }
.etiq.caution{ color: var(--warn);    border-color: rgba(245,165,36,.32); background: var(--warn-fond); }
.etiq.destr  { color: var(--crit);    border-color: rgba(255,90,82,.35);  background: var(--crit-fond); }
.etiq.admin  { color: var(--special); border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.08); }
.etiq.info   { color: var(--info);    border-color: rgba(56,189,248,.3);  background: var(--info-fond); }
.etiq.neutre { color: var(--txt-3);   border-color: var(--bord-vif); }

/* Triangle d'avertissement pour les commandes destructrices */
.etiq.destr::before {
  content: "\25B2";
  font-size: 7px;
  margin-right: 4px;
  vertical-align: 1px;
}

/* --- Bloc de commande --- */
pre.cmd {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--void);
  border: 1px solid var(--bord);
  border-left: 2px solid var(--ok);
  border-radius: var(--r-xs);
  padding: 9px 12px;
  color: #a8f0c8;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}
pre.cmd.risque-caution { border-left-color: var(--warn); }
pre.cmd.risque-destructive { border-left-color: var(--crit); color: #f3b8b4; }

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-3);
  border: 1px solid var(--bord-vif);
  color: var(--txt);
  border-radius: var(--r-xs);
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .7px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { background: #253243; border-color: var(--info); color: var(--info); text-decoration: none; }
.btn.primaire { background: rgba(56,189,248,.13); border-color: var(--info); color: #bde9ff; }
.btn.primaire:hover { background: rgba(56,189,248,.24); color: #fff; }
.btn.discret { background: none; border-color: var(--bord); color: var(--txt-3); }
.btn.danger:hover { border-color: var(--crit); color: var(--crit); }
.btn.fait { border-color: var(--ok) !important; color: var(--ok) !important; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- Champs --- */
.champ {
  background: var(--void);
  border: 1px solid var(--bord-vif);
  border-radius: var(--r-xs);
  color: var(--txt);
  padding: 8px 11px;
  font-size: 13px;
  font-family: var(--sans);
  width: 100%;
}
.champ:focus { outline: none; border-color: var(--info); box-shadow: 0 0 0 2px rgba(56,189,248,.1); }
.champ.mono { font-family: var(--mono); font-size: 12.5px; }
textarea.champ { resize: vertical; min-height: 74px; line-height: 1.5; }
select.champ { cursor: pointer; }
label.etiquette {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--txt-4);
  display: block;
  margin-bottom: 4px;
}

/* --- Filtres --- */
.filtres { display: flex; gap: 5px; flex-wrap: wrap; margin: 12px 0; }
.filtres button {
  background: var(--surface);
  border: 1px solid var(--bord);
  color: var(--txt-3);
  border-radius: var(--r-xs);
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .12s;
}
.filtres button:hover { color: var(--txt); border-color: var(--bord-vif); }
.filtres button.on { background: var(--info-fond); border-color: var(--info); color: var(--info); }

/* --- Tableau technique --- */
table.tech { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tech th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--txt-4);
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--bord-vif);
  font-weight: 500;
}
table.tech td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bord);
  color: var(--txt-2);
  vertical-align: top;
}
table.tech tr:hover td { background: var(--surface); }
table.tech td.mono { font-family: var(--mono); color: var(--info); font-size: 12.5px; white-space: nowrap; }
table.tech td.principal { color: var(--txt); }

.tableau-enveloppe { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--r); background: var(--surface); }

/* --- État vide --- */
.vide {
  text-align: center;
  color: var(--txt-3);
  padding: 34px 20px;
  font-size: 13px;
  border: 1px dashed var(--bord-vif);
  border-radius: var(--r);
  background: rgba(20,25,34,.4);
}
.vide b { color: var(--txt-2); font-weight: 500; }

/* ==========================================================================
   Palette de commandes (Ctrl+K)
   ========================================================================== */
.voile {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(5,7,10,.72);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 11vh;
}
.voile.on { display: flex; }

.palette {
  width: min(760px, 92vw);
  background: var(--fond-2);
  border: 1px solid var(--bord-actif);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  overflow: hidden;
  animation: monte .13s ease-out;
}
@keyframes monte { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.palette .saisie-zone {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bord);
  background: var(--void);
}
.palette .saisie-zone .chevron { font-family: var(--mono); color: var(--ok); font-size: 14px; }
.palette input {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--txt);
  font-family: var(--mono);
  font-size: 15px;
}
.palette input::placeholder { color: var(--txt-4); }

.palette .resultats { max-height: 56vh; overflow-y: auto; }

.pres {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.pres.actif { background: var(--info-fond); border-left-color: var(--info); }
.pres .type {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--txt-4);
  border: 1px solid var(--bord-vif);
  border-radius: var(--r-xs);
  padding: 2px 5px;
  min-width: 74px;
  text-align: center;
  flex-shrink: 0;
}
.pres .corps { flex: 1; min-width: 0; }
.pres .t { font-size: 13px; color: var(--txt); }
.pres .t mark { background: rgba(56,189,248,.24); color: #cdefff; border-radius: 2px; padding: 0 1px; }
.pres .s {
  font-size: 11.5px;
  color: var(--txt-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pres .s.mono { font-family: var(--mono); color: var(--txt-3); }

.palette .pied {
  display: flex;
  gap: 16px;
  padding: 7px 16px;
  border-top: 1px solid var(--bord);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--txt-4);
  letter-spacing: .8px;
}
.palette .groupe-titre {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--txt-4);
  padding: 9px 16px 4px;
  border-top: 1px solid var(--bord);
}
.palette .groupe-titre:first-child { border-top: none; }

/* ==========================================================================
   Barre d'état inférieure
   ========================================================================== */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--barre);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--void);
  border-top: 1px solid var(--bord);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--txt-3);
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.statusbar::-webkit-scrollbar { display: none; }
.statusbar .seg {
  padding: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid var(--bord);
}
.statusbar .seg:last-child { border-right: none; }
.statusbar .seg.actif { color: var(--info); }
.statusbar .seg.ok { color: var(--ok); }
.statusbar .pousse { margin-left: auto; border-right: none; }
.statusbar .seg.bouton { cursor: pointer; }
.statusbar .seg.bouton:hover { background: var(--surface-2); color: var(--txt); }

/* ==========================================================================
   Panneau rétractable : terminal, presse-papier, incident
   ========================================================================== */
.tiroir {
  position: fixed;
  left: var(--rail); right: 0;
  bottom: var(--barre);
  height: 300px;
  z-index: 65;
  background: var(--fond-2);
  border-top: 1px solid var(--bord-actif);
  display: none;
  flex-direction: column;
  box-shadow: 0 -10px 30px rgba(0,0,0,.45);
}
.tiroir.on { display: flex; }

.tiroir-onglets {
  display: flex;
  align-items: stretch;
  background: var(--void);
  border-bottom: 1px solid var(--bord);
  flex-shrink: 0;
}
.tiroir-onglets button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--txt-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tiroir-onglets button:hover { color: var(--txt); background: var(--surface); }
.tiroir-onglets button.on { color: var(--info); border-bottom-color: var(--info); background: var(--surface); }
.tiroir-onglets .ferme { font-size: 16px; padding: 0 14px; }

.pastille {
  font-size: 8.5px;
  background: var(--surface-3);
  border: 1px solid var(--bord-vif);
  border-radius: 8px;
  padding: 1px 6px;
  color: var(--txt-2);
}
.pastille.crit { background: var(--crit-fond); border-color: var(--crit); color: var(--crit); }

.tiroir-corps { flex: 1; overflow-y: auto; padding: 10px 14px; }

.terminal-sortie { font-family: var(--mono); font-size: 12.5px; }
.terminal-ligne { padding: 2px 0; display: flex; gap: 8px; align-items: baseline; }
.terminal-ligne .invite { color: var(--ok); flex-shrink: 0; }
.terminal-ligne .txt { color: var(--txt); word-break: break-all; flex: 1; }
.terminal-ligne .btns { display: flex; gap: 4px; opacity: 0; transition: opacity .1s; }
.terminal-ligne:hover .btns { opacity: 1; }
.terminal-ligne .mini {
  background: none; border: 1px solid var(--bord-vif); color: var(--txt-3);
  font-family: var(--mono); font-size: 9px; padding: 1px 6px; border-radius: 3px; cursor: pointer;
}
.terminal-ligne .mini:hover { border-color: var(--info); color: var(--info); }

.terminal-saisie {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--bord);
  padding: 8px 14px;
  background: var(--void);
  flex-shrink: 0;
}
.terminal-saisie .invite { font-family: var(--mono); font-size: 12.5px; color: var(--ok); }
.terminal-saisie input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--txt); font-family: var(--mono); font-size: 12.5px;
}
.terminal-saisie input::placeholder { color: var(--txt-4); }

.presse-ajout { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.presse-ajout .champ { flex: 1; min-width: 160px; }
.presse-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--bord);
  border-radius: var(--r-xs);
  margin-bottom: 5px;
  background: var(--surface);
}
.presse-item .val { font-family: var(--mono); font-size: 12.5px; color: var(--txt); flex: 1; word-break: break-all; }

.incident-entete {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 9px; margin-bottom: 10px;
  border-bottom: 1px solid var(--bord);
  flex-wrap: wrap;
}
.incident-chrono { font-family: var(--mono); font-size: 15px; color: var(--crit); letter-spacing: 1px; }

.chronologie { position: relative; padding-left: 16px; }
.chronologie::before {
  content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px;
  width: 1px; background: var(--bord-vif);
}
.chrono-evt { position: relative; padding: 4px 0; font-size: 12.5px; display: flex; gap: 9px; }
.chrono-evt::before {
  content: ""; position: absolute; left: -15px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--info); border: 2px solid var(--fond-2);
}
.chrono-evt .h { font-family: var(--mono); color: var(--txt-4); flex-shrink: 0; }
.chrono-evt .q { color: var(--txt-2); }

/* ==========================================================================
   Dépannage guidé
   ========================================================================== */
.arbre-carte { cursor: pointer; }
.arbre-carte:hover { border-color: var(--info); }

.etape {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-left: 2px solid var(--info);
  border-radius: var(--r);
  padding: 15px 17px;
  margin-bottom: 10px;
}
.etape .num-etape {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: var(--txt-4);
  margin-bottom: 5px;
}
.etape .question { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.etape .aide-etape { font-size: 12.5px; color: var(--txt-3); margin-bottom: 10px; }
.etape .choix { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.etape .choix button {
  background: var(--surface-3);
  border: 1px solid var(--bord-vif);
  color: var(--txt);
  border-radius: var(--r-xs);
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
  transition: all .12s;
}
.etape .choix button:hover { border-color: var(--info); background: var(--info-fond); color: var(--info); }

.etape.conclusion { border-left-color: var(--ok); }
.etape.conclusion .question { color: var(--ok); }

.fil { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; font-size: 12px; }
.fil .pas {
  font-family: var(--mono); font-size: 10.5px;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-xs); padding: 3px 9px; color: var(--txt-3);
}
.fil .sep { color: var(--txt-4); }

/* ==========================================================================
   Atelier : pipeline et builder
   ========================================================================== */
.pipeline { display: flex; flex-direction: column; gap: 0; margin-top: 12px; }
.pl-etape {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 11px 14px;
  position: relative;
}
.pl-fleche {
  text-align: center;
  color: var(--info);
  font-size: 14px;
  line-height: 1;
  padding: 4px 0;
}
.pl-etape .pl-cmd {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--info);
  font-weight: 600;
}
.pl-etape .pl-role { font-size: 13px; color: var(--txt); margin-top: 2px; }
.pl-etape .pl-detail { font-size: 12.5px; color: var(--txt-3); margin-top: 3px; }
.pl-etape.inconnu { border-style: dashed; }
.pl-params { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.pl-param { font-size: 12px; display: flex; gap: 8px; }
.pl-param code {
  font-family: var(--mono); color: var(--warn);
  background: var(--void); padding: 0 5px; border-radius: 2px; flex-shrink: 0;
}
.pl-param span { color: var(--txt-3); }

/* ==========================================================================
   Boîte à outils
   ========================================================================== */
.depot {
  border: 1px dashed var(--bord-vif);
  border-radius: var(--r);
  padding: 26px 14px;
  text-align: center;
  color: var(--txt-3);
  font-size: 13px;
  cursor: pointer;
  transition: all .13s;
}
.depot:hover, .depot.survol {
  border-color: var(--info);
  background: var(--info-fond);
  color: var(--info);
}

.resultat-large {
  font-family: var(--mono);
  font-size: 17px;
  color: var(--ok);
  background: var(--void);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 13px 15px;
  word-break: break-all;
  letter-spacing: .5px;
}

.jauge { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.jauge span { display: block; height: 100%; transition: width .2s; }

.re-surlignage {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--void); border: 1px solid var(--bord);
  border-radius: var(--r-xs); padding: 10px 12px;
  white-space: pre-wrap; word-break: break-word; line-height: 1.6;
}
.re-surlignage mark { background: rgba(57,255,136,.22); color: var(--ok); border-radius: 2px; padding: 0 1px; }

input[type=range] { accent-color: var(--info); }
input[type=checkbox] { accent-color: var(--info); vertical-align: -2px; }

/* ==========================================================================
   Bascule de langue
   ========================================================================== */
.bascule-langue {
  display: flex;
  border: 1px solid var(--bord-vif);
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--void);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.bascule-langue span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 1px;
  padding: 5px 8px;
  color: var(--txt-4);
  transition: background .12s, color .12s;
}
.bascule-langue span.on { background: var(--info-fond); color: var(--info); }

/* ==========================================================================
   Favoris
   ========================================================================== */
.etoile {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  color: var(--txt-4);
  transition: color .12s, transform .12s;
  flex-shrink: 0;
}
.etoile svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.etoile:hover { color: var(--warn); transform: scale(1.15); }
.etoile.on { color: var(--warn); }
.etoile.on svg { fill: var(--warn); }

.panneau .entete .etoile { margin-left: auto; }

/* ==========================================================================
   Carte réseau
   ========================================================================== */
.carte-reseau {
  background: var(--void);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  padding: 10px;
  overflow-x: auto;
}
.carte-reseau svg { display: block; min-width: 760px; width: 100%; height: auto; }

.n-forme {
  fill: var(--surface-2);
  stroke: var(--bord-vif);
  stroke-width: 1.5;
  transition: fill .13s, stroke .13s;
}
.n-groupe { cursor: pointer; }
.n-groupe:hover .n-forme { fill: var(--surface-3); stroke: var(--info); }
.n-groupe:hover .n-txt { fill: var(--info); }
.n-txt {
  fill: var(--txt-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-anchor: middle;
  pointer-events: none;
  transition: fill .13s;
}
.n-lien { stroke: var(--bord-vif); stroke-width: 1.5; fill: none; }
.n-led { r: 3.2; }
.n-led.ok   { fill: var(--ok);   filter: drop-shadow(0 0 3px var(--ok)); }
.n-led.warn { fill: var(--warn); filter: drop-shadow(0 0 3px var(--warn)); }
.n-led.crit { fill: var(--crit); filter: drop-shadow(0 0 3px var(--crit)); }

@keyframes flux { to { stroke-dashoffset: -14; } }
.n-flux {
  stroke: var(--info);
  stroke-width: 1.5;
  stroke-dasharray: 3 11;
  fill: none;
  opacity: .65;
  animation: flux 1.4s linear infinite;
}

/* ==========================================================================
   Aide-mémoire
   ========================================================================== */
.cheat-etape {
  display: flex;
  gap: 13px;
  padding: 11px 0;
  border-bottom: 1px solid var(--bord);
}
.cheat-etape:last-child { border-bottom: none; }
.cheat-etape .corps { flex: 1; min-width: 0; }
.cheat-etape .t { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.cheat-etape .note { margin-top: 6px; }

/* ==========================================================================
   Mode Focus : ne garder que le contenu utile pendant une intervention
   ========================================================================== */
body.focus .topbar,
body.focus .rail,
body.focus .module-label,
body.focus p.sous-titre-vue,
body.focus #modules,
body.focus .tiroir { display: none !important; }
body.focus main { margin: 0 0 var(--barre) 0; padding: 18px 22px; max-width: 1100px; }
body.focus::before { opacity: .4; }
body.focus .statusbar .seg:not(#sb-focus):not(#sb-vue) { display: none; }
#sb-focus.actif { background: var(--warn); color: var(--void); font-weight: 600; }

/* ==========================================================================
   Message flottant
   ========================================================================== */
#flash {
  position: fixed;
  bottom: calc(var(--barre) + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--surface-3);
  border: 1px solid var(--info);
  border-left-width: 3px;
  color: var(--txt);
  padding: 9px 18px;
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 12px;
  z-index: 300;
  opacity: 0;
  transition: transform .2s, opacity .2s;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  max-width: 90vw;
}
#flash.on { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ==========================================================================
   Sous-réseau : visualisation binaire
   ========================================================================== */
.bits { display: flex; gap: 2px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; margin-top: 8px; }
.bits .octet { display: flex; gap: 1px; }
.bits .octet + .octet::before { content: "."; color: var(--txt-4); align-self: center; margin: 0 3px; }
.bits .b {
  width: 15px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  border: 1px solid var(--bord);
}
.bits .b.reseau { background: rgba(56,189,248,.18); color: var(--info); border-color: rgba(56,189,248,.35); }
.bits .b.hote   { background: rgba(57,255,136,.1);  color: var(--ok);   border-color: rgba(57,255,136,.25); }

.paire { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--bord); font-size: 13px; }
.paire:last-child { border-bottom: none; }
.paire .k { color: var(--txt-3); }
.paire .v { font-family: var(--mono); color: var(--txt); }
.paire .v.accent { color: var(--info); }

/* ==========================================================================
   Fiches parc
   ========================================================================== */
.site { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r); margin-bottom: 9px; overflow: hidden; }
.site > .barre {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer; flex-wrap: wrap;
}
.site > .barre:hover { background: var(--surface-2); }
.site .nom-site { font-weight: 600; font-size: 14px; flex: 1; min-width: 130px; }
.site .compte { font-family: var(--mono); font-size: 11px; color: var(--txt-3); }
.site .contenu { display: none; padding: 0 14px 14px; border-top: 1px solid var(--bord); }
.site.ouvert .contenu { display: block; }
.site .chevron { color: var(--txt-4); transition: transform .14s; font-size: 10px; }
.site.ouvert .chevron { transform: rotate(90deg); }

.equip { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.equip:last-of-type { border-bottom: none; }
.equip .info { flex: 1; min-width: 150px; }
.equip .modele { font-size: 13.5px; }
.equip .meta { font-size: 11.5px; color: var(--txt-3); font-family: var(--mono); word-break: break-all; }

.formulaire {
  background: var(--surface-2);
  border: 1px solid var(--bord-vif);
  border-radius: var(--r);
  padding: 13px;
  margin-top: 11px;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}
.formulaire .pleine { grid-column: 1 / -1; }

/* ==========================================================================
   Blocs d'aide
   ========================================================================== */
.aide {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-left: 2px solid var(--info);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.aide h3 { margin: 0 0 7px; font-size: 13.5px; color: var(--info); font-weight: 600; }
.aide p { margin: 0 0 8px; font-size: 13px; color: var(--txt-2); }
.aide p:last-child { margin-bottom: 0; }
.aide ol, .aide ul { margin: 0 0 6px; padding-left: 19px; color: var(--txt-2); font-size: 13px; }
.aide li { margin-bottom: 4px; }
.aide code {
  font-family: var(--mono);
  background: var(--void);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 12px;
  color: var(--warn);
}

/* ==========================================================================
   Adaptation aux petits écrans
   Desktop-first, mais utilisable en intervention sur téléphone.
   ========================================================================== */
@media (max-width: 1100px) {
  .telemetrie .item:nth-child(n+3) { display: none; }
}

@media (max-width: 860px) {
  :root { --rail: 0px; }
  .topbar { height: 50px; gap: 10px; padding: 0 10px; }
  .marque .nom, .marque .tag { display: none; }
  .telemetrie { display: none; }
  .cmdbar input { padding-right: 14px; font-size: 16px; }
  .cmdbar .kbd-hint { display: none; }

  .rail {
    top: auto; bottom: var(--barre); left: 0; right: 0;
    width: auto; height: 46px;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--bord);
    padding: 0 4px;
    overflow-x: auto;
  }
  .rail button {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 5px 11px;
    flex-shrink: 0;
    font-size: 8px;
  }
  .rail button.actif { border-left-color: transparent; border-bottom-color: var(--info); background: rgba(56,189,248,.09); }
  .rail .separateur { display: none; }

  main { margin: 50px 0 calc(var(--barre) + 46px) 0; padding: 16px 12px 30px; }
  .tiroir { left: 0; bottom: calc(var(--barre) + 46px); height: 46vh; }
  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .c3,.c4,.c5,.c6,.c7,.c8,.c12 { grid-column: span 2; }
  .grille, .grille.large { grid-template-columns: 1fr; }
  .formulaire { grid-template-columns: 1fr; }
  #flash { bottom: calc(var(--barre) + 56px); }
  .statusbar .seg:nth-child(n+4):not(.pousse) { display: none; }
}

/* --------------------------------------------------------------------------
   Impression : on ne sort que la fiche affichée, en noir sur blanc.
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .rail, .statusbar, .actions, .filtres, .voile, .tiroir,
  .module-label, .etoile, #cheat-liste, #arbres-liste { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  main { margin: 0; padding: 0; max-width: none; }
  .vue { display: none !important; }
  .vue.on { display: block !important; }
  .panneau, .site, .rangee, .etape, .cheat-etape {
    border-color: #bbb; background: #fff; break-inside: avoid;
  }
  pre.cmd {
    background: #f4f4f4; color: #000; border-color: #bbb;
    white-space: pre-wrap; word-break: break-word;
  }
  .titre-vue, h2.section, .cheat-etape .t, .panneau .nom { color: #000; }
  .desc, .note, .sous-titre-vue { color: #333; }
  .etiq { border-color: #999; color: #333; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}