/* ══════════════════════════════════════════════════════════════
   MCR — Broadcast Console (Piste B retenue)
   Feuille de style commune à toutes les maquettes du parcours
   ══════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  --bg:#07090b; --surface:#0d1013; --surface2:#14181c; --border:#22282e; --border2:#2e363e;
  --text:#d9e2e7; --muted:#75828c; --accent:#ffb02e; --accent-soft:#241a06;
  --green:#3aff6e; --amber:#ffb02e; --red:#ff3b3b; --blue:#4da3ff; --glow:1;
}
:root[data-theme="light"] {
  --bg:#dfe3e6; --surface:#eef0f2; --surface2:#e2e6e9; --border:#c3cad0; --border2:#aeb7bf;
  --text:#171d22; --muted:#5c6871; --accent:#b26a00; --accent-soft:#f5e3c0;
  --green:#0d8a35; --amber:#b26a00; --red:#c81e1e; --blue:#1466c0; --glow:0;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Barlow',sans-serif; background:var(--bg); color:var(--text); font-size:13px; }
.mono { font-family:'IBM Plex Mono',monospace; }
h1,h2,h3,.cond { font-family:'Barlow Condensed',sans-serif; letter-spacing:.05em; }
svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:square; flex:none; }
a { color:inherit; }

/* ── Topbar ── */
.topbar { height:50px; display:flex; align-items:center; gap:14px; padding:0 14px; background:var(--surface); border-bottom:2px solid var(--border2); position:sticky; top:0; z-index:10; }
.logo { font-family:'Barlow Condensed'; font-weight:700; font-size:17px; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; gap:9px; text-decoration:none; }
.logo .sq { width:12px; height:12px; background:var(--accent); box-shadow:0 0 calc(8px * var(--glow)) var(--accent); }
.presta-pick { font-family:'IBM Plex Mono'; font-size:12.5px; background:var(--surface2); border:1px solid var(--border2); padding:6px 12px; cursor:pointer; display:flex; gap:8px; align-items:center; color:var(--text); }
.clock { margin-left:auto; font-family:'IBM Plex Mono'; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:12px; }
.tzclock { display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--text); }
.tzclock .fl { font-size:15px; line-height:1; }
.tzclock .t { color:var(--muted); }
#mcr-clock { color:var(--muted); }

/* ── Horloge d'exploitation (T25) — bandeau composable sous la topbar ── */
.opsclock { display:flex; align-items:stretch; background:var(--surface); border-bottom:2px solid var(--border2); overflow-x:auto; }
.opsclock.sticky { position:sticky; top:50px; z-index:9; }   /* collé sous la topbar (50px) */
.opsclock .zone { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid var(--border); }
.opsclock .zone:last-child { border-right:none; }
.opsclock .zlab { font-family:'Barlow Condensed'; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px; }
.opsclock .ztime { font-family:'IBM Plex Mono'; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
.opsclock .ztime small { font-size:1em; }   /* secondes à la MÊME taille que les heures (demande Thomas 19/07/2026) */
.opsclock .zdate { font-family:'IBM Plex Mono'; color:var(--muted); }
.opsclock .zone.ref .zlab { color:var(--accent); }
.opsclock .zone.ref .ztime { color:var(--accent); text-shadow:0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--accent) 45%, transparent); }
.opsclock .zone.elapsed .zlab, .opsclock .zone.elapsed .ztime { color:var(--red); }
.opsclock .zone.elapsed .ztime { text-shadow:0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--red) 40%, transparent); }
.opsclock .zone.countdown .zlab, .opsclock .zone.countdown .ztime { color:var(--blue); }
.opsclock .zone.countdown .ztime { text-shadow:0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--blue) 40%, transparent); }
/* Taille moyenne */
.opsclock.size-m .zone { min-width:150px; padding:8px 14px 10px; }
.opsclock.size-m .ztime { font-size:34px; }
.opsclock.size-m .zlab { font-size:12px; margin-bottom:1px; }
.opsclock.size-m .zdate { font-size:10px; margin-top:4px; }
/* Taille petite : une ligne compacte, sans date */
.opsclock.size-s .zone { min-width:116px; padding:4px 12px 5px; }
.opsclock.size-s .ztime { font-size:20px; }
.opsclock.size-s .zlab { font-size:10px; }
.opsclock.size-s .zdate { display:none; }
.badge-live { font-family:'Barlow Condensed'; background:var(--red); color:#fff; font-weight:700; font-size:13px; letter-spacing:.18em; padding:4px 14px 4px 10px; display:flex; align-items:center; gap:8px; box-shadow:0 0 calc(12px * var(--glow)) color-mix(in srgb, var(--red) 60%, transparent); }
.badge-live i { width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 1.2s infinite; }
.badge-off { font-family:'Barlow Condensed'; background:var(--surface2); border:1px solid var(--border2); color:var(--muted); font-weight:700; font-size:13px; letter-spacing:.18em; padding:4px 14px; }
@keyframes pulse { 50% { opacity:.3; } }
.lang, .theme-btn { font-family:'IBM Plex Mono'; font-size:11.5px; border:1px solid var(--border2); background:var(--surface2); padding:5px 9px; cursor:pointer; color:var(--text); display:flex; align-items:center; gap:5px; }
.lang span { color:var(--muted); }

/* ── Layout ── */
.shell { display:flex; }
.side { width:186px; flex:none; padding:12px 8px; border-right:2px solid var(--border2); background:var(--surface); min-height:calc(100vh - 50px); position:sticky; top:calc(50px + var(--opsclock-h, 0px)); }
.side a { display:flex; align-items:center; gap:10px; padding:8px 11px; color:var(--muted); text-decoration:none; font-family:'Barlow Condensed'; font-size:14.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-left:3px solid transparent; margin-bottom:1px; }
.side a:hover { color:var(--text); background:var(--surface2); }
.side a.on { color:var(--accent); border-left-color:var(--accent); background:var(--accent-soft); }
.side .sep { font-family:'IBM Plex Mono'; font-size:9.5px; color:var(--muted); margin:14px 11px 5px; letter-spacing:.12em; }
.main { flex:1; padding:18px 20px 60px; max-width:1600px; }

/* ── Page head ── */
.phead { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.phead h1 { font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.phead .sub { color:var(--muted); font-family:'IBM Plex Mono'; font-size:11.5px; }
.phead .actions { margin-left:auto; display:flex; gap:8px; }

/* ── Buttons ── */
.btn { font-family:'Barlow Condensed'; font-size:14px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border2); background:var(--surface2); color:var(--text); padding:7px 14px; cursor:pointer; text-decoration:none; }
.btn:hover { border-color:var(--accent); color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#0d1013; }
.btn.primary:hover { filter:brightness(1.1); color:#0d1013; }
.btn.danger { border-color:var(--red); color:var(--red); }
.btn.rec { border-color:var(--red); color:var(--red); box-shadow:inset 0 0 calc(14px * var(--glow)) color-mix(in srgb, var(--red) 12%, transparent); }
.btn.rec i, .btn.danger i.dot { width:8px; height:8px; border-radius:50%; background:var(--red); animation:pulse 1.2s infinite; }
.mini { font-family:'IBM Plex Mono'; font-size:10.5px; padding:4px 8px; border:1px solid var(--border2); background:var(--surface2); color:var(--text); cursor:pointer; }
.mini:hover { border-color:var(--accent); color:var(--accent); }

/* ── Alerts ── */
.alerts { display:flex; align-items:center; gap:10px; border:1px solid var(--amber); background:var(--accent-soft); padding:8px 13px; margin-bottom:16px; font-size:12.5px; }
.alerts.err { border-color:var(--red); background:color-mix(in srgb, var(--red) 10%, var(--surface)); }
.alerts.ok { border-color:var(--green); background:color-mix(in srgb, var(--green) 8%, var(--surface)); }
.alerts .tag { font-family:'Barlow Condensed'; font-weight:700; letter-spacing:.12em; color:var(--amber); }
.alerts.err .tag { color:var(--red); } .alerts.ok .tag { color:var(--green); }
.alerts a { margin-left:auto; color:var(--amber); font-family:'IBM Plex Mono'; font-size:11.5px; text-decoration:none; }

/* ── LEDs, pills, chips ── */
.led { width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
.led.g { background:var(--green); box-shadow:0 0 calc(9px * var(--glow)) var(--green); }
.led.a { background:var(--amber); box-shadow:0 0 calc(9px * var(--glow)) var(--amber); }
.led.r { background:var(--red); box-shadow:0 0 calc(9px * var(--glow)) var(--red); }
.led.b { background:var(--blue); box-shadow:0 0 calc(9px * var(--glow)) var(--blue); }
.led.off { background:var(--border2); }
.pill { font-family:'Barlow Condensed'; font-size:11.5px; font-weight:700; letter-spacing:.12em; padding:2px 9px; border:1px solid var(--border2); color:var(--muted); display:inline-block; }
.pill.live { border-color:var(--red); color:var(--red); }
.pill.deployed { border-color:var(--green); color:var(--green); }
.pill.standby { border-color:var(--blue); color:var(--blue); }
.pill.draft { border-color:var(--border2); color:var(--muted); }
.pill.cloud { border-color:var(--blue); color:var(--blue); }
.pill.local { border-color:var(--muted); color:var(--muted); }
.pill.warn { border-color:var(--amber); color:var(--amber); }
.st { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.st .led { width:7px; height:7px; }

/* ── Cards / panels ── */
.card { background:var(--surface); border:1px solid var(--border2); padding:10px 11px; margin-bottom:8px; }
.card .head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.card .head b { font-family:'Barlow Condensed'; font-size:15px; font-weight:600; letter-spacing:.05em; }
.card .kind { margin-left:auto; font-family:'IBM Plex Mono'; font-size:9.5px; color:var(--muted); }
.panel { background:var(--surface); border:1px solid var(--border2); }
.panel .ph { font-family:'Barlow Condensed'; font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; padding:9px 13px; border-bottom:1px solid var(--border2); gap:9px; }
.panel .ph .cnt { margin-left:auto; font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--muted); text-transform:none; letter-spacing:0; }
.panel .pbody { padding:12px 13px; }

/* ── Metrics ── */
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; margin-bottom:8px; }
.m { display:flex; justify-content:space-between; gap:8px; font-size:11.5px; border-bottom:1px dotted var(--border); padding-bottom:2px; }
.m span { color:var(--muted); } .m b { font-family:'IBM Plex Mono'; font-weight:500; white-space:nowrap; }
.tally { display:flex; gap:5px; margin-bottom:8px; }
.tally div { flex:1; text-align:center; font-family:'Barlow Condensed'; font-size:12px; font-weight:700; letter-spacing:.14em; padding:4px 0; border:1px solid var(--border2); color:var(--muted); }
.tally .on-main { background:color-mix(in srgb, var(--green) 16%, var(--surface)); border-color:var(--green); color:var(--green); box-shadow:0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--green) 35%, transparent); }
.tally .on-bkp { background:color-mix(in srgb, var(--amber) 16%, var(--surface)); border-color:var(--amber); color:var(--amber); box-shadow:0 0 calc(10px * var(--glow)) color-mix(in srgb, var(--amber) 35%, transparent); }
.chip-rec { display:inline-flex; align-items:center; gap:5px; font-family:'Barlow Condensed'; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--red); }
.chip-rec i { width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse 1.2s infinite; }

/* ── KPI tiles ── */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.kpi { background:var(--surface); border:1px solid var(--border2); padding:12px 14px; }
.kpi .lab { font-family:'Barlow Condensed'; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:flex; align-items:center; gap:7px; }
.kpi .val { font-family:'IBM Plex Mono'; font-size:22px; font-weight:600; }
.kpi .det { font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--muted); margin-top:4px; }

/* ── Tables ── */
table { width:100%; border-collapse:collapse; font-size:11.5px; }
th { font-family:'IBM Plex Mono'; text-align:left; padding:6px 13px; color:var(--muted); font-weight:500; font-size:10px; border-bottom:1px solid var(--border2); letter-spacing:.08em; }
td { padding:6px 13px; border-bottom:1px solid var(--border); font-family:'IBM Plex Mono'; }
tr:last-child td { border-bottom:none; }
tr.rowlink { cursor:pointer; }
tr.rowlink:hover td { background:var(--surface2); }

/* ── Tabs ── */
.tabs { display:flex; gap:2px; border-bottom:2px solid var(--border2); margin-bottom:16px; flex-wrap:wrap; }
.tabs button { font-family:'Barlow Condensed'; font-size:14.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); padding:9px 16px; margin-bottom:-2px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.tabs button:hover { color:var(--text); }
.tabs button.on { color:var(--accent); border-bottom-color:var(--accent); }
.tabs button .cnt { font-family:'IBM Plex Mono'; font-size:9.5px; color:var(--muted); text-transform:none; letter-spacing:0; }
.tabpane { display:none; }
.tabpane.on { display:block; }

/* ── Forms ── */
.field { margin-bottom:11px; }
.field label { display:block; font-family:'Barlow Condensed'; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.field input, .field select, .field textarea { width:100%; font-family:'IBM Plex Mono'; font-size:12px; background:var(--bg); border:1px solid var(--border2); color:var(--text); padding:7px 10px; }
.field input:focus, .field select:focus { outline:none; border-color:var(--accent); }
.field .hint { font-family:'IBM Plex Mono'; font-size:10px; color:var(--muted); margin-top:3px; }
.frow { display:flex; gap:10px; } .frow .field { flex:1; }
/* Rangée de choix (radios / cases à cocher) : libellés en casse normale, alignés */
.choices { display:flex; gap:6px 22px; flex-wrap:wrap; align-items:center; padding:2px 0; }
.field .choices label, .choices label { display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0;
  font-family:'IBM Plex Mono'; font-size:12px; font-weight:400; color:var(--text); text-transform:none; letter-spacing:0; }
.choices input[type=radio], .choices input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; margin:0; flex:none; }
.switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; }
.switch .tr { width:34px; height:18px; border:1px solid var(--border2); background:var(--surface2); position:relative; }
.switch .tr::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; background:var(--muted); }
.switch.on .tr { border-color:var(--green); }
.switch.on .tr::after { left:auto; right:2px; background:var(--green); box-shadow:0 0 calc(6px * var(--glow)) var(--green); }

/* ── Deployment steps ── */
.step { display:flex; align-items:flex-start; gap:11px; padding:9px 13px; border-bottom:1px solid var(--border); font-family:'IBM Plex Mono'; font-size:11.5px; }
.step:last-child { border-bottom:none; }
.step .ic { width:18px; height:18px; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:-1px; }
.step.done .ic { color:var(--green); } .step.done { color:var(--muted); }
.step.run .ic { color:var(--amber); }
.step.run .ic i { width:9px; height:9px; border-radius:50%; background:var(--amber); animation:pulse .9s infinite; display:block; }
.step.wait .ic { color:var(--border2); } .step.wait { color:var(--muted); opacity:.65; }
.step.err .ic, .step.err b { color:var(--red); }
.step time { margin-left:auto; color:var(--muted); font-size:10px; flex:none; }

/* ── Go/No-Go checklist ── */
.check { display:flex; align-items:center; gap:11px; padding:8px 13px; border-bottom:1px solid var(--border); font-size:12px; }
.check:last-child { border-bottom:none; }
.check .name { font-weight:600; width:270px; flex:none; }
.check .val { font-family:'IBM Plex Mono'; font-size:11px; color:var(--muted); flex:1; }
.check .acts { display:flex; gap:5px; }

/* ── Sparkline / chart frames ── */
.chart { background:var(--surface); border:1px solid var(--border2); padding:10px 13px; }
.chart h4 { font-family:'Barlow Condensed'; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:flex; gap:10px; align-items:baseline; }
.chart h4 b { color:var(--text); font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0; }
.chart svg.spark { width:100%; height:64px; stroke-width:1.5; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* ── Matrix wiring ── */
.wire { display:grid; grid-template-columns:1fr 26px 1fr auto; align-items:center; gap:8px; padding:7px 13px; border-bottom:1px solid var(--border); font-family:'IBM Plex Mono'; font-size:11px; }
.wire:last-child { border-bottom:none; }
.wire .ep { display:flex; align-items:center; gap:7px; }
.wire .arrow { color:var(--accent); text-align:center; font-weight:700; }
.wire .proto { font-size:9.5px; border:1px solid var(--border2); color:var(--muted); padding:1px 6px; }
.wire:hover { background:var(--surface2); }

/* ── Journal rows ── */
.jrow { display:flex; gap:9px; padding:7px 13px; border-bottom:1px solid var(--border); font-size:11.5px; align-items:baseline; font-family:'IBM Plex Mono'; }
.jrow:last-child { border-bottom:none; }
.jrow time { color:var(--muted); font-size:10.5px; flex:none; }
.jrow .actor { font-size:9px; font-weight:600; padding:1px 5px; background:var(--surface2); border:1px solid var(--border); color:var(--muted); flex:none; }
.jrow b.lvl { font-size:9px; padding:1px 6px; border:1px solid var(--amber); color:var(--amber); flex:none; font-weight:600; }
.jrow b.lvl.err { border-color:var(--red); color:var(--red); }
.jrow b.lvl.ok { border-color:var(--green); color:var(--green); }

/* ── Cost bar ── */
.costbar { position:sticky; bottom:0; background:var(--surface); border-top:2px solid var(--border2); padding:10px 20px; display:flex; align-items:center; gap:18px; font-family:'IBM Plex Mono'; font-size:12px; z-index:5; }
.costbar b { color:var(--accent); font-size:14px; }
.costbar .det { color:var(--muted); font-size:10.5px; }

@media (max-width:1100px){ .kpis{grid-template-columns:1fr 1fr;} .grid2,.grid3{grid-template-columns:1fr;} }

/* ── MON-06 : panneau multiview (Control Room + Live Map) ──────────────────
 * Pleine largeur. La hauteur du cadre est pilotée par --mvh (réglée par les
 * boutons M/L/XL, mémorisée en localStorage) ; l'iframe garde le 16:9 tant
 * qu'elle tient dans cette hauteur, pour que les tuiles du board restent
 * lisibles sans que le panneau ne mange trois écrans. */
.mvpanel .mvbar { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.mvpanel .mvsizes { margin-left:auto; display:flex; gap:4px; }
.mvpanel .mvsizes .mini { padding:3px 9px; }
.mvpanel .mvsizes .mini.on { border-color:var(--accent); color:var(--accent); }
.mvpanel .mvframe { --mvh:56vh; width:100%; height:var(--mvh); min-height:260px;
                    border:1px solid var(--border2); background:#000; }
.mvpanel .mvframe[data-mvsize="m"]  { --mvh:38vh; }
.mvpanel .mvframe[data-mvsize="l"]  { --mvh:56vh; }
.mvpanel .mvframe[data-mvsize="xl"] { --mvh:82vh; }
.mvpanel .mvframe iframe { width:100%; height:100%; border:0; display:block; }
.mvpanel .mvitem + .mvitem { border-top:1px solid var(--border2); }
@media (max-width:1100px){ .mvpanel .mvframe { --mvh:34vh; } }