/* Salle de contrôle : la chaîne se lit de gauche à droite (IA → hub → pare-feu → sondes → appareils),
   scène 3D en tête avec panneau de détail, puis fiches techniques en tableaux.
   Les quatre familles prennent les couleurs des paires T568B (orange, bleu, vert, marron). */
:root{
  color-scheme: dark;
  --bg:#0b0f15;
  --bg-2:#10161f;
  --surface:#151c28;
  --line:#243042;
  --fg:#e7ecf3;
  --muted:#93a1b6;
  --faint:#5d6b80;
  --orange:#f2913d;
  --blue:#5592f2;
  --green:#45c483;
  --brown:#cf9d6a;
  --red:#f06060;
  --code-bg:#19222f;
  --code-fg:#cfe0ff;
  --font-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html,body{background:var(--bg);color:var(--fg)}
body{
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:20px 56px;
}
.wrap{max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
a{color:var(--blue)}
code,.mono{font-family:var(--font-mono);font-size:.86em}
code{background:var(--code-bg);color:var(--code-fg);padding:1px 5px;border-radius:3px;white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* En-tête */
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 28px}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.6vw,56px);line-height:1;margin:6px 0 0;letter-spacing:.01em;text-wrap:balance}
.lede{max-width:68ch;color:var(--muted);margin:10px 0 0}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:18px;height:4px;border-radius:2px;display:inline-block}

/* Scène + panneau */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.viewport{position:relative;height:clamp(440px,70vh,780px);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-2);touch-action:none}
.viewport canvas{display:block}
.labels{position:absolute;inset:0;pointer-events:none}
.hud{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:3}
.hud button,.chips button{font:500 13px var(--font-body);color:var(--fg);background:rgba(16,22,31,.86);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer}
.hud button:hover,.chips button:hover{border-color:var(--blue)}
.hint{position:absolute;right:10px;bottom:8px;font-size:12px;color:var(--faint);z-index:3;pointer-events:none}
.fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}

.lbl{pointer-events:auto;cursor:pointer;font:500 12.5px/1.25 var(--font-body);color:var(--fg);background:rgba(11,15,21,.8);border:1px solid var(--line);border-left:3px solid var(--c,var(--blue));border-radius:4px;padding:3px 8px 4px;white-space:nowrap;text-align:left;transition:opacity .25s,box-shadow .25s,border-color .25s}
.lbl small{display:block;font:400 10.5px/1.3 var(--font-mono);color:var(--muted)}
.lbl:hover,.lbl.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 18px -4px var(--c)}
.lbl.dim{opacity:.32}
.lbl.gate{border-radius:999px;border-left-width:1px;padding:2px 10px;font-size:11.5px}
.zone{font:600 13px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--c);opacity:.9;white-space:nowrap;pointer-events:none}
.zone small{display:block;font:400 11px var(--font-mono);letter-spacing:0;text-transform:none;color:var(--muted)}
.compact .lbl small{display:none}
.compact .lbl{font-size:11px;padding:2px 6px}
.compact .zone small{display:none}

.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips .k{font-size:12px;color:var(--muted);margin-right:4px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.chips button[aria-pressed="true"]{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange) inset}

.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:18px 18px 20px;max-height:clamp(440px,70vh,780px);overflow:auto;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h2{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:1.05;margin:0;text-wrap:balance}
.panel .kick{font:500 11.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--muted))}
.panel p{margin:0}
.panel dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 12px;margin:0;font-size:13.5px}
.panel dt{color:var(--muted)}
.panel dd{margin:0;min-width:0;overflow-wrap:anywhere}
.panel ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;opacity:.5;transition:opacity .3s,border-color .3s,background .3s;font-size:13.5px}
.steps li::before{content:counter(s);font:600 13px var(--font-mono);color:var(--muted)}
.steps li b{display:block;font-weight:600}
.steps li.done{opacity:.8}
.steps li.now{opacity:1;border-color:var(--c,var(--orange));background:var(--surface)}
.steps li.ko{border-color:var(--red)}
.back{align-self:flex-start;font:500 13px var(--font-body);color:var(--blue);background:none;border:0;padding:0;cursor:pointer}

/* Fiches */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sheet div{background:var(--bg-2);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0;box-shadow:1px 1px 0 var(--line)}
.sheet b{font:600 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sheet span{font-size:15px}
nav.toc{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:10px}
nav.toc a{color:var(--fg);text-decoration:none}
nav.toc a:hover{color:var(--blue)}
section.fiche{display:flex;flex-direction:column;gap:10px;scroll-margin-top:16px}
section.fiche h3{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.05;margin:0;text-wrap:balance}
section.fiche .intro{max-width:80ch;color:var(--muted);margin:0}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
th{text-align:left;font:600 12.5px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;background:var(--surface);position:sticky;top:0}
td{border-top:1px solid var(--line);padding:9px 12px;vertical-align:top}
td:first-child{white-space:nowrap;font-weight:500}
tr.grp td{background:var(--surface);font:600 13px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--muted))}
.foot{color:var(--faint);font-size:13px;max-width:90ch}

@media (max-width:1020px){
  .stage{grid-template-columns:minmax(0,1fr)}
  .panel{max-height:none}
}
@media (max-width:640px){
  .viewport{height:clamp(380px,66vh,560px)}
  .hint{display:none}
  .panel h2{font-size:24px}
  section.fiche h3{font-size:25px}
}
@media (prefers-reduced-motion: reduce){
  .lbl,.steps li{transition:none}
}

/* Étiquettes de la scène */
.lw.right > *{transform:translateX(calc(50% + 6px))}
.lw.left > *{transform:translateX(calc(-50% - 6px))}
.lw.off{visibility:hidden}
.lw.off *{pointer-events:none}
.tag{font:500 11px/1.2 var(--font-mono);color:var(--fg);background:rgba(11,15,21,.9);border:1px solid var(--c);border-radius:3px;padding:2px 6px;white-space:nowrap;pointer-events:none;transform:translateY(-6px)}
.tag code{background:none;padding:0;color:inherit;font-size:inherit}
.cable{font:500 10.5px var(--font-mono);color:var(--c);background:rgba(11,15,21,.72);padding:1px 5px;border-radius:3px;white-space:nowrap;pointer-events:none;opacity:.9}
.cable code{background:none;padding:0;color:inherit}
.compact .cable{display:none}

/* Entrées / sorties d'une étape */
.io{display:flex;flex-direction:column;gap:4px;margin-top:8px;min-width:0}
.io-k{font:600 10.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.io pre{margin:0;font:400 11.5px/1.45 var(--font-mono);color:var(--code-fg);background:var(--code-bg);border:1px solid var(--line);border-radius:5px;padding:8px 10px;white-space:pre-wrap;overflow-wrap:anywhere}

/* Statuts */
.st{display:inline-block;font:600 10.5px/1.5 var(--font-mono);letter-spacing:.02em;padding:0 6px;border-radius:3px;border:1px solid currentColor;white-space:nowrap;vertical-align:1px}
.st-dispo{color:var(--green)}
.st-reel{color:var(--bg);background:var(--green);border-color:var(--green)}
.st-emul{color:var(--blue)}
.st-etude,.st-prevu{color:var(--muted)}
.st-python{color:var(--brown)}
.st-ecrire{color:var(--orange)}
.st-neuf{color:var(--bg);background:var(--orange);border-color:var(--orange)}

.left-col{display:flex;flex-direction:column;gap:12px;min-width:0}
h2.sec{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.05;margin:0;text-wrap:balance}
.block{display:flex;flex-direction:column;gap:12px}
.status-legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px;color:var(--muted);align-items:center}

/* Vue lointaine : les noms seulement */
.far .lbl small,.far .zone small,.far .cable{display:none}
.far .lbl{font-size:12px;padding:2px 7px}

/* Équipements des baies : une ligne, le détail au survol */
.lbl.unit small{display:none}
.lbl.unit:hover small,.lbl.unit.on small{display:block}

.panel p.note{font-size:12.5px;color:var(--muted)}