/* Direction artistique « Devs Quantum Gold & Obsidian » — typographie cinétique.
   Polices locales uniquement (fonctionne hors ligne) : Bahnschrift (télémétrie, titres), Cambria (citations),
   Cascadia Mono / Consolas (données), Segoe UI / Tahoma (arabe). */
:root {
  --obsidian: #050608;
  --obsidian-2: #0b0d11;
  --gold: #D4AF37;
  --gold-soft: rgba(212, 175, 55, .55);
  --gold-faint: rgba(212, 175, 55, .16);
  --ice: #8FB8D8;
  --amber: #E09A3E;
  --text: #ECE9E2;
  --muted: #8C9099;
  --line: rgba(236, 233, 226, .12);
  --danger: #C8553D;
  /* Windows (PC de secours) puis macOS (MacBook Pro du jour J) : aucune police téléchargée */
  --f-display: 'Bahnschrift', 'DIN Alternate', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --f-serif: 'Cambria', 'Georgia', 'Times New Roman', serif;
  --f-mono: 'Cascadia Mono', 'Consolas', 'SF Mono', 'SFMono-Regular', 'Menlo', monospace;
  --f-ar: 'Segoe UI', 'Geeza Pro', 'Tahoma', 'Noto Naskh Arabic', 'Arial', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--obsidian); color: var(--text); font-family: var(--f-display); overflow: hidden; }
body.stage { cursor: none; }
body.stage.show-cursor { cursor: default; }

/* ── Couches de l'écran géant ───────────────────────────────────────────── */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
#ui { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#cine { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 1; pointer-events: none; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 9vh 7vw 8vh; opacity: 0; visibility: hidden; }
.scene.on { visibility: visible; }
.or, em.or { color: var(--gold); font-style: normal; text-shadow: 0 0 18px rgba(212, 175, 55, .35); }
.ice { color: var(--ice); }
.mono { font-family: var(--f-mono); }
.muted { color: var(--muted); }
.serif { font-family: var(--f-serif); }
.ar { font-family: var(--f-ar); direction: rtl; unicode-bidi: isolate; }

/* Bandeau télémétrique (effet Zeigarnik) */
#telemetry { position: fixed; top: 2.2vh; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 1.6vw; font-family: var(--f-mono); font-size: clamp(11px, .95vw, 16px); letter-spacing: .14em; opacity: 0; }
#telemetry .vec { padding: .45em 1em; border: 1px solid var(--gold-faint); color: var(--gold); background: rgba(5, 6, 8, .6); position: relative; white-space: nowrap; }
#telemetry .vec::before { content: ''; position: absolute; left: -1px; top: -1px; width: 6px; height: 6px; border-left: 1px solid var(--gold); border-top: 1px solid var(--gold); }
#telemetry .vec .dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--gold); margin-right: .7em; vertical-align: .05em; box-shadow: 0 0 10px var(--gold); }
#telemetry.sealed .vec { animation: pulse 3.2s ease-in-out infinite; }
#telemetry.sealed .vec:nth-child(2) { animation-delay: .5s; }
#telemetry.sealed .vec:nth-child(3) { animation-delay: 1s; }
@keyframes pulse { 0%, 100% { border-color: var(--gold-faint); box-shadow: none; } 50% { border-color: var(--gold-soft); box-shadow: 0 0 22px rgba(212, 175, 55, .18) inset; } }

/* Pied : acte et orateur */
#actbar { position: fixed; left: 3vw; bottom: 3vh; z-index: 5; font-family: var(--f-mono); font-size: clamp(10px, .8vw, 14px); letter-spacing: .2em; color: var(--muted); text-transform: uppercase; opacity: .0; }
#actbar b { color: var(--gold); font-weight: 400; }
#hudline { position: fixed; right: 3vw; bottom: 3vh; z-index: 5; width: 14vw; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft)); opacity: .0; }

/* Typographie cinétique */
.kicker { font-family: var(--f-mono); font-size: clamp(11px, 1vw, 17px); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 2.4vh; }
.h-giant { font-size: clamp(42px, 6.8vw, 132px); font-weight: 300; letter-spacing: .02em; line-height: 1.02; text-align: center; margin: 0; }
.h-big { font-size: clamp(30px, 4.2vw, 82px); font-weight: 300; line-height: 1.08; text-align: center; margin: 0; }
.h-mid { font-size: clamp(22px, 2.6vw, 48px); font-weight: 300; line-height: 1.2; text-align: center; margin: 0; }
.lede { font-size: clamp(18px, 1.9vw, 34px); font-weight: 300; line-height: 1.38; text-align: center; max-width: 64vw; margin: 2.2vh 0 0; color: var(--text); }
.quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 46px); line-height: 1.32; text-align: center; max-width: 66vw; }
.cite { font-family: var(--f-mono); font-size: clamp(11px, .95vw, 16px); color: var(--muted); letter-spacing: .14em; margin-top: 2.2vh; }
.eq { font-family: var(--f-serif); font-size: clamp(26px, 3.2vw, 60px); letter-spacing: .02em; text-align: center; }
.eq sub, .eq sup { font-size: .55em; }
.word { display: inline-block; will-change: transform, opacity, filter; }

/* Lignes télémétriques dessinées (SVG) */
svg.frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
svg.frame path, svg.frame line, svg.frame rect { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Panneaux */
.panel { position: relative; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(11, 13, 17, .82), rgba(5, 6, 8, .72)); padding: 2.2vh 1.6vw; backdrop-filter: blur(2px); }
.panel::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-right: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); }
.panel h3 { margin: 0 0 1.2vh; font-family: var(--f-mono); font-weight: 400; font-size: clamp(11px, .9vw, 15px); letter-spacing: .24em; color: var(--gold); text-transform: uppercase; }
.panel p { margin: .6vh 0 0; font-size: clamp(13px, 1.1vw, 20px); line-height: 1.4; font-weight: 300; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vw; width: 100%; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4vw; width: 100%; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1vw; width: 100%; }
canvas.chart { width: 100%; height: 100%; display: block; }
.chart-box { position: relative; width: 100%; }
.stat { font-family: var(--f-mono); font-size: clamp(26px, 3vw, 58px); color: var(--gold); letter-spacing: .02em; }
.stat small { font-size: .4em; color: var(--muted); margin-left: .3em; letter-spacing: .1em; }
.label { font-family: var(--f-mono); font-size: clamp(10px, .82vw, 14px); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* Mire (amorçage rétinien) — trois images 2.5D côte à côte, rendues dans le canevas WebGL */
#mire-frame { position: absolute; inset: 14vh 6vw 16vh; }
.mire-label { position: absolute; bottom: 9vh; left: 0; right: 0; text-align: center; font-family: var(--f-mono); letter-spacing: .4em; font-size: clamp(11px, 1vw, 16px); color: var(--muted); }
.countdown { font-family: var(--f-mono); color: var(--gold); font-size: clamp(16px, 1.4vw, 24px); letter-spacing: .3em; }

/* Recueil */
.capture { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; width: 74vw; margin-top: 4vh; }
.capture .box { border: 1px solid var(--line); height: 22vh; position: relative; display: flex; align-items: flex-end; padding: 1.6vh 1.2vw; }
.capture .box .n { position: absolute; top: 1.4vh; left: 1.2vw; font-family: var(--f-mono); color: var(--gold); letter-spacing: .2em; font-size: clamp(11px, .9vw, 15px); }
.capture .box .t { font-size: clamp(16px, 1.5vw, 27px); font-weight: 300; }
.capture .box.lit { border-color: var(--gold-soft); box-shadow: 0 0 40px rgba(212, 175, 55, .08) inset; }
.capture .box.sealed::after { content: 'SCELLÉ'; position: absolute; right: 1.2vw; top: 1.3vh; font-family: var(--f-mono); color: var(--gold); letter-spacing: .3em; font-size: clamp(10px, .8vw, 14px); }

/* Matrice 36 */
.m36 { display: grid; grid-template-columns: 4vw repeat(4, 11.5vh); grid-template-rows: 4vh repeat(4, 11.5vh); gap: .9vh; align-items: center; justify-items: center; }
.m36 .hd { font-family: var(--f-mono); color: var(--muted); font-size: clamp(12px, 1.1vw, 20px); letter-spacing: .2em; }
.m36 .cell { width: 100%; height: 100%; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background: rgba(11, 13, 17, .66); font-family: var(--f-mono); }
.m36 .cell .v { font-size: clamp(22px, 2.6vw, 48px); color: var(--text); }
.m36 .cell .u { font-size: clamp(9px, .7vw, 12px); color: var(--muted); letter-spacing: .2em; }
.m36 .cell .id { position: absolute; top: .5vh; left: .5vw; font-size: clamp(9px, .65vw, 11px); color: var(--muted); }
.m36 .cell.picked { border-color: var(--gold); box-shadow: 0 0 34px rgba(212, 175, 55, .25), 0 0 0 1px var(--gold) inset; }
.m36 .cell.picked .v { color: var(--gold); }
.m36 .cell.dead { opacity: .14; filter: blur(1px); }
.m36 .frag { position: absolute; background: var(--text); opacity: .6; pointer-events: none; }
.m36-side { display: flex; flex-direction: column; gap: 1.4vh; margin-left: 4vw; min-width: 20vw; }
.m36-side .trace { font-family: var(--f-mono); font-size: clamp(14px, 1.4vw, 26px); color: var(--text); min-height: 1.4em; }
.m36-side .trace .plus { color: var(--muted); }
.m36-wrap { display: flex; align-items: center; }
.sum36 { font-family: var(--f-mono); font-size: clamp(80px, 13vw, 250px); color: var(--gold); letter-spacing: -.02em; line-height: 1; text-shadow: 0 0 60px rgba(212, 175, 55, .35); }
.sum36 small { font-size: .22em; letter-spacing: .25em; color: var(--text); margin-left: .4em; }

/* COGNITIVE-TWIN */
.twin-head { position: absolute; top: 8vh; left: 6vw; right: 6vw; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-mono); letter-spacing: .2em; }
.twin-head .name { color: var(--gold); font-size: clamp(14px, 1.3vw, 24px); }
.twin-head .st { color: var(--muted); font-size: clamp(10px, .85vw, 14px); }
.layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1vw; width: 88vw; margin-top: 6vh; }
.layers .panel { height: 46vh; display: flex; flex-direction: column; }
.layers .panel .chart-box { flex: 1; min-height: 0; }
.layers .panel .foot { font-family: var(--f-mono); font-size: clamp(10px, .8vw, 13px); color: var(--muted); letter-spacing: .08em; margin-top: 1vh; }
.vectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4vw; width: 88vw; }
.vector .regime { font-family: var(--f-mono); letter-spacing: .26em; font-size: clamp(10px, .85vw, 14px); color: var(--muted); }
.vector .rowv { display: grid; grid-template-columns: 1.6em 1fr 4.2em; align-items: center; gap: .8vw; margin-top: 1.3vh; font-size: clamp(14px, 1.35vw, 25px); }
.vector .rowv .rk { font-family: var(--f-mono); color: var(--muted); font-size: .75em; }
.vector .rowv .bar { position: relative; height: 2.4vh; background: rgba(236, 233, 226, .05); overflow: hidden; }
.vector .rowv .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(212, 175, 55, .25), var(--gold)); }
.vector .rowv .bar span { position: absolute; left: .6vw; top: 50%; transform: translateY(-50%); font-weight: 400; white-space: nowrap; color: var(--text); text-shadow: 0 0 8px #000, 0 0 3px #000, 0 0 1px #000; }
.vector .rowv .pc { font-family: var(--f-mono); text-align: right; color: var(--gold); }
.vector .cos { margin-top: 2vh; font-family: var(--f-mono); color: var(--text); font-size: clamp(12px, 1.05vw, 19px); }
.vector .cos b { color: var(--gold); font-weight: 400; }
.vector.locked { border-color: var(--gold-soft); box-shadow: 0 0 60px rgba(212, 175, 55, .08) inset; }
.analysis p { margin: 0 0 2.2vh; }
.analysis { max-width: 70vw; font-size: clamp(16px, 1.55vw, 29px); line-height: 1.5; font-weight: 300; white-space: pre-line; }
.terminal { font-family: var(--f-mono); font-size: clamp(11px, .95vw, 16px); color: var(--muted); line-height: 1.6; position: absolute; left: 6vw; bottom: 9vh; text-align: left; }
.terminal .ok { color: var(--gold); }

/* Levée du voile */
#sc-voile { justify-content: flex-start; padding-top: 11vh; }
#sc-voile .h-big { font-size: clamp(26px, 3.4vw, 64px); }
#sc-final .blk1 { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
#sc-final .blk2 { position: absolute; left: 0; right: 0; bottom: 13vh; }
.voile .stamp { font-family: var(--f-mono); letter-spacing: .5em; color: var(--danger); font-size: clamp(12px, 1.1vw, 20px); border: 1px solid var(--danger); padding: .5em 1.2em; }
.flow { display: flex; align-items: center; gap: 1.6vw; margin-top: 5vh; font-family: var(--f-mono); font-size: clamp(12px, 1.05vw, 19px); }
.flow .node { border: 1px solid var(--line); padding: 1.6vh 1.2vw; text-align: center; min-width: 12vw; }
.flow .node b { display: block; color: var(--gold); font-weight: 400; letter-spacing: .2em; font-size: .8em; margin-bottom: .6vh; }
.flow .arrow { color: var(--gold); }
table.real { border-collapse: collapse; font-family: var(--f-mono); font-size: clamp(12px, 1.05vw, 19px); margin-top: 3vh; }
table.real td, table.real th { border-bottom: 1px solid var(--line); padding: 1vh 1.4vw; text-align: left; }
table.real th { color: var(--muted); font-weight: 400; letter-spacing: .14em; font-size: .78em; }
table.real td.g { color: var(--gold); }

/* Infographies bilingues */
.bi { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2vw; align-items: center; width: 82vw; }
.bi .fr { text-align: right; }
.bi .sep { width: 1px; height: 100%; min-height: 10vh; background: var(--gold-soft); }
.bi .ar { text-align: right; }
.bi > .ar:not(.h-mid):not(.lede) { font-size: clamp(18px, 1.9vw, 34px); }
.bi .ar.h-mid { font-size: clamp(24px, 2.8vw, 52px); }
.aate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1vw; width: 86vw; }
.aate .panel { text-align: center; opacity: .25; transition: opacity .6s, border-color .6s; }
.aate .panel.on { opacity: 1; border-color: var(--gold-soft); }
.aate .panel .ar { display: block; color: var(--gold); font-size: clamp(18px, 1.7vw, 32px); margin-top: .8vh; }

/* Aide clavier (écran géant) */
#help { position: fixed; right: 2vw; top: 8vh; z-index: 9; font-family: var(--f-mono); font-size: 12px; color: var(--muted); background: rgba(5, 6, 8, .92); border: 1px solid var(--line); padding: 14px 18px; line-height: 1.8; display: none; }
#help.on { display: block; }
#debug { position: fixed; left: 1vw; top: 1vh; z-index: 9; font-family: var(--f-mono); font-size: 11px; color: var(--muted); display: none; }
#debug.on { display: block; }
#offline { position: fixed; right: 1vw; top: 1vh; z-index: 9; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
#offline.down { background: var(--danger); }

/* ── Interfaces mobiles (/hani, /complice) ─────────────────────────────── */
body.op { overflow: auto; font-family: var(--f-display); background: #07080b; -webkit-tap-highlight-color: transparent; }
body.op main { max-width: 760px; margin: 0 auto; padding: 14px 14px 210px; }
.op h1 { font-family: var(--f-mono); font-weight: 400; font-size: 13px; letter-spacing: .25em; color: var(--gold); margin: 6px 0 12px; text-transform: uppercase; display: flex; justify-content: space-between; }
.op h1 .st { color: var(--muted); }
.op .card { border: 1px solid var(--line); background: #0b0d11; padding: 12px; margin-bottom: 12px; border-radius: 4px; }
.op .card h2 { font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; display: flex; justify-content: space-between; }
.op button { font-family: var(--f-display); font-size: 16px; color: var(--text); background: #12151b; border: 1px solid #2a2f38; border-radius: 6px; padding: 14px 10px; touch-action: manipulation; user-select: none; }
.op button:active { background: #1b2029; }
.op button.gold { border-color: var(--gold-soft); color: var(--gold); }
.op button.big { width: 100%; font-size: 22px; padding: 22px 10px; letter-spacing: .12em; }
.op button.undo { background: #1a1010; border-color: #5a2a22; color: #F0A090; }
.op button.on { background: rgba(212, 175, 55, .15); border-color: var(--gold); color: var(--gold); }
.op .row { display: flex; gap: 8px; }
.op .row > * { flex: 1; }
.op .grid16 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.op .grid16 button { font-family: var(--f-mono); padding: 16px 0; font-size: 18px; }
.op .grid16 button small { display: block; font-size: 10px; color: var(--muted); }
.op .grid16 button.picked { border-color: var(--gold); color: var(--gold); background: rgba(212, 175, 55, .12); }
.op .grid16 button.dead { opacity: .25; }
.op input, .op textarea, .op select { width: 100%; font-size: 18px; padding: 12px; background: #050608; color: var(--text); border: 1px solid #2a2f38; border-radius: 6px; font-family: var(--f-display); }
.op label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.op .prompter { font-size: clamp(22px, 6vw, 34px); line-height: 1.45; color: var(--gold); background: #000; padding: 18px; border-radius: 6px; min-height: 30vh; }
.op .prompter .done { color: #5b5340; }
.op .prompter .cur { color: var(--gold); }
.op .prompter .next { color: #c9bf9f; }
.op .seg { font-size: 17px; line-height: 1.45; padding: 8px 10px; border-left: 2px solid transparent; color: var(--muted); }
.op .seg.cur { border-left-color: var(--gold); color: var(--text); background: rgba(212, 175, 55, .05); }
.op .seg .meta { font-family: var(--f-mono); font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.op .mono { font-family: var(--f-mono); font-size: 12px; }
.op pre { white-space: pre-wrap; word-break: break-word; font-family: var(--f-mono); font-size: 12px; background: #050608; border: 1px solid #1e222a; padding: 10px; border-radius: 4px; max-height: 40vh; overflow: auto; }
.op .pill { display: inline-block; font-family: var(--f-mono); font-size: 11px; padding: 3px 8px; border: 1px solid #2a2f38; border-radius: 99px; color: var(--muted); margin: 2px 4px 2px 0; }
.op .pill.ok { color: #9FD6A0; border-color: #355c38; }
.op .pill.warn { color: #F0C070; border-color: #6a5326; }
.op .pill.err { color: #F0A090; border-color: #5a2a22; }
.op .meter { height: 6px; background: #12151b; border-radius: 3px; overflow: hidden; }
.op .meter i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .08s; }
.op .sticky { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #07080b; border-top: 1px solid var(--line); }
.op .sticky .row { max-width: 760px; margin: 0 auto; }
.op .lock { position: fixed; inset: 0; background: #050608; z-index: 50; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 20px; }
.op .lock input { max-width: 240px; text-align: center; letter-spacing: .5em; font-family: var(--f-mono); }
.op .hidden { display: none !important; }
.op .preview-v { display: grid; grid-template-columns: 1fr 4.5em; gap: 4px 10px; font-size: 16px; }
.op .preview-v .p { font-family: var(--f-mono); color: var(--gold); text-align: right; }
.op .tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.op .tabs button { flex: 1; padding: 10px 4px; font-size: 13px; }

/* Levée du voile : tout tient dans un écran 16:9 */
#sc-voile .stamp { display: inline-block; }
#sc-voile .step + .step { margin-top: 2.6vh !important; }
#sc-voile .flow { margin-top: 2.4vh; }
#sc-voile table.real { margin-top: 1.6vh; }
#sc-voile table.real td, #sc-voile table.real th { padding: .7vh 1.4vw; }

/* ── Scènes cinématographiques (public/js/cine) ────────────────────────── */
.cine-slot { width: 100%; }
.cine-right { position: absolute; right: 4vw; top: 16vh; width: 37vw; display: flex; flex-direction: column; gap: 2vh; }
.bottom-block { position: absolute; left: 0; right: 0; bottom: 7vh; margin: 0 auto; }
#sc-protocoleC .bottom-block { width: 82vw; }
#sc-rupture .bottom-block { bottom: 9vh; display: flex; flex-direction: column; align-items: center; }
#sc-rupture .bottom-block .lede { margin-left: auto; margin-right: auto; }
#telemetry.converged .vec[data-v="1"], #telemetry.converged .vec[data-v="2"] { display: none; }
#telemetry.converged .vec[data-v="3"] { border-color: var(--gold-soft); box-shadow: 0 0 26px rgba(212, 175, 55, .16) inset; }

/* Profil FLUIDE (PC de secours) : aucun flou ni halo CSS coûteux, mêmes animations */
body.profil-fluide .panel { backdrop-filter: none; }
body.profil-fluide .or, body.profil-fluide em.or, body.profil-fluide .sum36 { text-shadow: none; }
body.profil-fluide #telemetry .vec .dot { box-shadow: none; }

/* Bouton de profil (visible quand la souris bouge), notification, préchargement */
#profile-btn { position: fixed; top: 1.6vh; right: 1.6vw; z-index: 12; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--gold); background: rgba(5, 6, 8, .85); border: 1px solid var(--gold-faint); padding: 7px 12px; cursor: pointer; opacity: 0; transition: opacity .4s; pointer-events: none; }
body.peek #profile-btn, body.show-cursor #profile-btn { opacity: 1; pointer-events: auto; }
#toast { position: fixed; top: 7vh; right: 1.6vw; z-index: 12; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--text); background: rgba(5, 6, 8, .92); border: 1px solid var(--line); padding: 8px 12px; opacity: 0; visibility: hidden; }
#preload { position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%); z-index: 12; font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; color: var(--muted); white-space: nowrap; }
#help .net { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; align-items: center; margin-top: 12px; }
#help .net .qr svg { width: 120px; height: 120px; display: block; }
#help .net b { color: var(--gold); font-weight: 400; }

/* ── Cockpit : module Q&R (levée du voile) et réseau ───────────────────── */
.op .qa-bar { max-width: 760px; margin: 0 auto 8px; }
.op .qa-bar button { width: 100%; font-size: 18px; padding: 16px 10px; letter-spacing: .08em; }
.op .qa-bar .qa-note { font-family: var(--f-mono); font-size: 11px; color: var(--muted); margin-top: 6px; text-align: center; letter-spacing: .08em; }
.op .qa-bar.due button { animation: qa-pulse 1.6s ease-in-out infinite; }
.op .qa-bar.late .qa-note { color: #F0A090; }
.op .qa-bar.armed button { background: rgba(212, 175, 55, .3); color: #fff; }
.op .qa-bar.done button { border-color: #355c38; color: #9FD6A0; background: #0f1a10; animation: none; }
@keyframes qa-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .0); } 50% { box-shadow: 0 0 0 6px rgba(212, 175, 55, .25); } }
.op button:disabled { color: #6b6450; border-color: #2a2f38; background: #0d0f13; }
.op .seg.qa { border-left-color: #6a5326; }
.op .seg-head { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--gold); margin: 14px 0 6px; }
.op .net { display: grid; grid-template-columns: 132px 1fr; gap: 10px 12px; align-items: center; }
.op .net svg { width: 132px; height: 132px; display: block; border-radius: 4px; }
.op .net b { color: var(--gold); font-weight: 400; word-break: break-all; }

/* ── Révision 8 : écouteur en cinq blocs, karaoké, bandeau de mode (/hani) ── */
body.op main { padding-bottom: 290px; }
.op .mode-banner { font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; line-height: 1.45; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 4px; background: #0b0d11; color: var(--text); }
.op .mode-banner b { color: var(--gold); font-weight: 400; letter-spacing: .12em; }
.op .mode-banner.lecture { border-color: rgba(159, 214, 160, .5); }
.op .mode-banner.lecture b { color: #9FD6A0; }
.op .mode-banner.manuel { border-color: rgba(143, 184, 216, .6); background: #0a1018; }
.op .mode-banner.manuel b { color: #8FB8D8; }
.op .mode-banner.pret { border-color: var(--gold); background: rgba(212, 175, 55, .12); animation: pulse 1.6s ease-in-out infinite; font-size: 15px; }
.op .mode-banner.hold { border-color: var(--gold-soft); }
.op .mode-banner .armed { color: #F0C070; }
.op .karaoke { max-height: 42vh; overflow-y: auto; font-size: 19px; line-height: 1.75; padding: 4px 2px 40vh; scroll-behavior: smooth; overscroll-behavior: contain; }
.op .karaoke .k-seg { margin: 0 0 12px; }
.op .karaoke .k-id { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); }
.op .karaoke-word { display: inline; padding: 1px 2px; border-radius: 3px; color: #c9c6bf; cursor: pointer; transition: color .12s, background .12s; }
.op .karaoke-word.past { color: #6d717a; }
.op .karaoke-word.on { color: #050608; background: #D4AF37; box-shadow: 0 0 14px rgba(212, 175, 55, .55); }
.op .karaoke-word.dyn { color: var(--gold); border-bottom: 1px dashed var(--gold-soft); }
.op .karaoke-word.dyn.on { color: #050608; }
.op .karaoke .k-pause { font-family: var(--f-mono); font-size: 11px; color: #8C9099; margin: 0 4px; }
.op .karaoke.preview { opacity: .55; }
.op .ear-tip { margin: 6px 0 0; font-size: 11px; }
.op .bloc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.op .bloc-grid button { padding: 12px 2px; font-family: var(--f-mono); font-size: 13px; }
.op .bloc-grid button small { display: block; font-size: 9px; color: var(--muted); }
.op .bloc-grid button.cur { border-color: #9FD6A0; color: #9FD6A0; }
.op .ear-row { margin-bottom: 8px; }
.op .ear-row button { padding: 12px 6px; font-size: 15px; }
.op #segs { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; position: relative; }