/* Studio Live — système de design de la Régie.
   Palette : fond #0B0F14, surfaces #111821 / #151D27, bordure #263241, texte #F5F7FA / #9AA7B5,
   or #F3C24F (accent), rouge #E62B2B (LIVE / REC / danger uniquement), vert #27C76F (OK), orange #F0A72F (alerte). */
:root {
  --bg: #071019; --panel: #0e1822; --panel2: #111c27; --line: #263544; --line2: #1a2734;
  --text: #f5f7fa; --muted: #95a3b3; --dim: #66778a;
  --gold: #f3c34f; --gold-ink: #17130a; --red: #f02d32; --green: #24c76a; --warn: #f0a72f;
  --r: 12px; --r-s: 8px;
  --sidew: 188px; --rightw: 352px;
  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13.5px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
button, input, select, textarea { font-family: inherit; }
svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.legacy { display: none !important; }

/* ---------- Barre du haut ---------- */
.topbar { flex: none; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line2); background: #09131c; }
.brand { display: flex; align-items: center; gap: 10px; min-width: calc(var(--sidew) - 16px); }
.brand .logo { color: var(--gold); display: flex; }
.brand .logo svg { width: 30px; height: 30px; stroke-width: 2.4; fill: none; }
.brand b { display: block; font-size: 17px; letter-spacing: .2px; }
.brand small { display: block; color: var(--muted); font-size: 11.5px; margin-top: -2px; }
.topstat { display: flex; gap: 8px; }
.topact { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.topact select { width: auto; min-width: 120px; }
.topact .modeswitch { width: 250px; }

/* ---------- Coque : barre latérale | pages | colonne de contrôle ---------- */
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--sidew) minmax(0, 1fr) var(--rightw); }
.side { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--line2); background: #09131c; overflow-y: auto; }
.side button { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: #c4cfdb; font-size: 13.5px; font-weight: 500; text-align: left; }
.side button svg { width: 20px; height: 20px; }
.side button:hover:not(:disabled) { background: #101c27; border-color: transparent; }
.side button.sel { background: rgba(243,195,79,.12); border-color: rgba(243,195,79,.35); color: var(--gold); font-weight: 700; }
.main { min-width: 0; overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: #263544 transparent; }
.page { display: none; flex-direction: column; gap: 14px; }
body[data-page="studio"] .page[data-page="studio"], body[data-page="camera"] .page[data-page="camera"], body[data-page="audio"] .page[data-page="audio"],
body[data-page="media"] .page[data-page="media"], body[data-page="overlays"] .page[data-page="overlays"], body[data-page="prompter"] .page[data-page="prompter"],
body[data-page="live"] .page[data-page="live"], body[data-page="recordings"] .page[data-page="recordings"], body[data-page="settings"] .page[data-page="settings"], body[data-page="remote"] .page[data-page="remote"], body[data-page="music"] .page[data-page="music"] { display: flex; }
.page:not(.pg-studio) > .card { max-width: 980px; }
.right { min-height: 0; overflow-y: auto; padding: 14px 14px 14px 0; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: #263544 transparent; }

/* La page Studio n'est jamais retirée : le Programme (rendu public) continue, en petit moniteur flottant */
.pg-studio { display: flex; }
body:not([data-page="studio"]) .pg-studio { display: block; height: 0; overflow: visible; }
body:not([data-page="studio"]) .pg-studio > :not(.monitors), body:not([data-page="studio"]) #pvwCard { display: none !important; }
body:not([data-page="studio"]) #pgmCard { position: fixed; z-index: 40; right: calc(var(--rightw) + 22px); bottom: 50px; width: 300px; padding: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
body:not([data-page="studio"]) #pgmCard .mon-t small, body:not([data-page="studio"]) #pgmCard .pgmname, body:not([data-page="studio"]) #pgmCard .pv-r { display: none; }
body:not([data-page="studio"]) #pgmCard .mon-h { margin-bottom: 6px; }
body:not([data-page="studio"]) #pgmCard h2 { font-size: 11px; }
.mon-back { display: none; }
body:not([data-page="studio"]) .mon-back { display: inline-flex; }

/* ---------- Barre d'état ---------- */
.statusbar { flex: none; display: flex; align-items: center; gap: 18px; height: 36px; padding: 0 16px; border-top: 1px solid var(--line2); background: #09131c; color: var(--muted); font-size: 12px; }
.sb-state { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; min-width: 220px; }
.sb-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }
.sb-state.ok i { background: var(--green); box-shadow: 0 0 0 3px rgba(36,199,106,.18); }
.sb-state.warn i { background: var(--warn); }
.sb-state.fail i { background: var(--red); }
.sb-item b { color: var(--text); font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.sb-item b.good { color: var(--green); } .sb-item b.mid { color: var(--warn); } .sb-item b.bad { color: #ff6b6b; }
.statusbar .spacer { flex: 1; }
.sb-tag { color: var(--gold); font-style: italic; letter-spacing: .3px; }

@media (max-width: 1440px) { :root { --sidew: 170px; --rightw: 320px; } }
@media (max-width: 1280px) { :root { --sidew: 64px; } .side button span, .brand div { display: none; } .side button { justify-content: center; padding: 10px; } .brand { min-width: 0; } }
@media (max-width: 1080px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .app { display: flex; flex-direction: column; }
  .side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line2); }
  .side button span { display: none; }
  .main, .right { overflow: visible; padding: 14px; }
  .topact .modeswitch { width: auto; }
  body:not([data-page="studio"]) #pgmCard { right: 14px; bottom: 50px; width: 240px; }
}

/* ---------- Cartes ---------- */
.card { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); padding: 12px 14px; box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 6px 18px rgba(0,0,0,.25); }
.card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-h .spacer, .card-h .hint { margin-left: auto; }
h2 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: #d7dee7; }
h2 { display: flex; align-items: center; }
h2 .ico { color: var(--gold); margin-right: 8px; width: 17px; height: 17px; }
h2 .ico.red { color: var(--red); }
.hint { color: var(--dim); font-size: 11.5px; }
label.sl { display: flex; justify-content: space-between; margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); }
label.sl span { color: var(--text); font-variant-numeric: tabular-nums; }
label.ck { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12.5px; color: #cfd6df; }
.help { color: var(--muted); font-size: 12px; line-height: 1.5; }
.warn { color: var(--warn); font-size: 12px; margin: 6px 0; }
.warn:empty, .help:empty { display: none; }
.row { display: flex; gap: 8px; margin-bottom: 8px; }
.row:last-child { margin-bottom: 0; }

/* ---------- Boutons ---------- */
button { flex: 1; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; font-size: 13px; cursor: pointer; transition: background .12s, border-color .12s; }
button:hover:not(:disabled) { background: #1b2531; border-color: #31404f; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.main { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
button.main:hover:not(:disabled) { background: #f6cd68; border-color: #f6cd68; }
button.icon { flex: none; width: 34px; height: 30px; padding: 0; font-size: 15px; }
button.on { outline: 2px solid var(--gold); outline-offset: -2px; }
.seg { gap: 6px; }
.seg button { padding: 7px 4px; font-size: 12.5px; color: #c6ced8; }
.seg button.sel { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
.modeswitch { background: var(--panel); border: 1px solid var(--line2); border-radius: 999px; padding: 4px; gap: 4px; margin: 0; }
.modeswitch button { border: 0; border-radius: 999px; background: transparent; font-weight: 600; padding: 8px; }
.modeswitch button.sel { background: var(--gold); color: var(--gold-ink); }
button.golive { background: var(--red); border-color: var(--red); color: #fff; font-weight: 800; font-size: 15.5px; padding: 12px 10px; letter-spacing: .3px; }
button.golive:hover:not(:disabled) { background: #f03b3b; border-color: #f03b3b; }
button.golive.on { background: #2a1214; border-color: var(--red); color: #ff8a8a; }
button.rec { background: var(--red); border-color: var(--red); color: #fff; font-weight: 800; font-size: 15px; padding: 11px 10px; }
button.rec:hover:not(:disabled) { background: #f03b3b; }
button.rec.on { background: #2a1214; border-color: var(--red); color: #ff8a8a; }
#camToggle.off { background: #2a1214; border-color: #5e2226; color: #ffb3b3; }

/* ---------- Champs ---------- */
select, input.tx, .drow input[type=text], .drow input[type=password] { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); padding: 7px 9px; font-size: 13px; }
select:focus, input.tx:focus { outline: none; border-color: var(--gold); }
input[type=range] { width: 100%; accent-color: var(--gold); height: 18px; }
input[type=checkbox] { accent-color: var(--gold); }
kbd { background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 11px; color: #cfd6df; }
code { background: var(--panel2); padding: 0 4px; border-radius: 4px; }

/* ---------- Sous-sections repliables ---------- */
details.sub { border-top: 1px solid var(--line2); margin-top: 10px; padding-top: 8px; }
details.sub > summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: #cfd6df; letter-spacing: .3px; display: flex; align-items: center; gap: 6px; }
details.sub > summary::before { content: "›"; color: var(--gold); font-size: 15px; transition: transform .15s; display: inline-block; width: 10px; }
details.sub[open] > summary::before { transform: rotate(90deg); }
details.sub > summary::-webkit-details-marker { display: none; }

/* ---------- Badges d'état ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; padding: 3px 8px; border-radius: 6px; background: #1b2430; color: var(--dim); }
.badge.live, .badge.rec { display: none; }
.badge.live.on { display: inline-flex; background: var(--red); color: #fff; animation: pulse 2.4s ease-in-out infinite; }
.badge.rec.on { display: inline-flex; background: var(--red); color: #fff; }
@keyframes pulse { 50% { opacity: .78; } }
@media (prefers-reduced-motion: reduce) { .badge.live.on { animation: none; } }

/* ---------- Prompteur ---------- */
.script { flex: 1; min-height: 220px; display: flex; flex-direction: column; padding: 10px; }
.script .card-h { margin-bottom: 8px; }
#prompter { position: relative; flex: 1; min-height: 160px; overflow: hidden; background: #000; border-radius: 10px; cursor: ns-resize; }
#scroll { position: absolute; left: 0; right: 0; top: 0; padding: 0 6%; will-change: transform; }
#text { white-space: pre-wrap; line-height: 1.45; font-weight: 600; color: #fff; padding-bottom: 80vh; }
#text .h { color: var(--gold); display: block; }
#marker { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid rgba(243,194,79,.55); pointer-events: none; }
#marker::before { content: "▶"; position: absolute; left: 8px; top: -14px; color: var(--gold); font-size: 20px; }
#fade-top, #fade-bot { position: absolute; left: 0; right: 0; height: 16%; pointer-events: none; }
#fade-top { top: 0; background: linear-gradient(#000, transparent); }
#fade-bot { bottom: 0; background: linear-gradient(transparent, #000); }
#hud { position: absolute; right: 10px; bottom: 8px; color: var(--muted); font-size: 12px; background: rgba(0,0,0,.6); padding: 3px 8px; border-radius: 6px; }
#editor { position: absolute; inset: 0; display: none; background: #0b0f14; }
#editor textarea { width: 100%; height: 100%; background: transparent; color: var(--text); border: 0; outline: 0; resize: none; padding: 20px 6%; font: 20px/1.5 var(--font); }
#prompter.editing #editor { display: block; }
body.full #prompter { position: fixed; inset: 0; z-index: 60; border-radius: 0; }

/* ---------- État du système ---------- */
.reslist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.rs { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px; color: #cfd6df; }
.rs b { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 5px; letter-spacing: .4px; }
.rs b.on { background: rgba(39,199,111,.16); color: var(--green); }
.rs b.off { background: #1b2430; color: var(--dim); }
.rs b.err { background: rgba(230,43,43,.16); color: #ff7b7b; }
.rs small { color: var(--muted); font-size: 10.5px; }

/* ---------- Caméra live ---------- */
#status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 8px 10px; border-radius: var(--r-s); background: var(--panel2); border: 1px solid var(--line2); margin-bottom: 8px; }
#dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); flex: none; }
#status.ok #dot { background: var(--green); box-shadow: 0 0 0 3px rgba(39,199,111,.18); }
#status.old #dot { background: var(--warn); }
#status.old { color: var(--warn); }

/* ---------- Direct ---------- */
.dst { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line2); }
.dst .s-ok { color: var(--green); font-weight: 700; } .dst .s-ko { color: #ff7b7b; font-weight: 700; }
#liveInfo { margin-top: 8px; }
#coverPrev { width: 100%; border-radius: 8px; margin: 8px 0; background: #000; display: block; }

/* ---------- Enregistrement ---------- */
.rec-top { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
#recTime { font-size: 24px; font-weight: 700; flex: 1; letter-spacing: .5px; }
#recSize { color: var(--muted); font-size: 12.5px; }
.lamp { font-weight: 800; font-size: 11.5px; padding: 4px 9px; border-radius: 6px; background: #1b2430; color: var(--dim); letter-spacing: .8px; }
.lamp.on { background: var(--red); color: #fff; }
.recalert { font-size: 12.5px; border-radius: 8px; margin: 6px 0; }
.recalert.warn { padding: 6px 9px; background: rgba(240,167,47,.1); border: 1px solid rgba(240,167,47,.45); color: #f6c785; }
.recalert.crit { padding: 6px 9px; background: rgba(230,43,43,.12); border: 1px solid var(--red); color: #ffb3b3; font-weight: 700; }
.ris { margin: 10px 0 8px; }
.ri { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 3px 0; color: var(--dim); }
.ri.act { color: var(--text); } .ri.act .rn::before { content: "● "; color: var(--red); }
.ri .rn { width: 112px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ri .rv { margin-left: auto; font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; font-size: 11.5px; color: var(--muted); }
.ri .mini { flex: 1; height: 7px; background: #1b2430; border-radius: 3px; overflow: hidden; }
.ri .mini div { height: 100%; width: 0; background: linear-gradient(90deg, var(--green) 70%, var(--warn) 86%, var(--red)); }
#recWrite.bad { color: var(--warn); }
.tks { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; margin: 4px 0 6px; color: #cfd6df; } .tks label { display: flex; align-items: center; gap: 5px; }

/* ---------- Mixeur ---------- */
body.simple .adv, body.simple .mx-adv, body.simple .mx-strip[data-id="browser"]:not(:has(.mx-solo.on)) { display: none !important; }
.mx-strip { background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.mx-strip[data-status="error"], .mx-strip[data-status="lost"] { border-color: rgba(240,167,47,.6); }
.mx-master { border-color: rgba(243,194,79,.35); }
.mx-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 600; font-size: 13px; }
.mx-btns { display: flex; gap: 4px; }
.mx-btns button { flex: none; padding: 3px 8px; font-size: 11.5px; border-radius: 6px; }
.mx-mute.on { background: var(--red); border-color: var(--red); color: #fff; }
.mx-solo.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.mx-mon.on { background: #24486e; border-color: #3a6a9a; color: #fff; }
.mx-meter { position: relative; height: 7px; background: #1b2430; border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
.mx-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--green) 70%, var(--warn) 86%, var(--red)); }
.mx-clip { position: absolute; right: 2px; top: -1px; font-size: 8px; font-weight: 800; color: transparent; padding: 0 3px; border-radius: 3px; }
.mx-clip.on { background: var(--red); color: #fff; }
.mx-row { display: flex; align-items: center; gap: 8px; }
.mx-row input[type=range] { flex: 1; }
.mx-volv { font-size: 11px; color: var(--muted); min-width: 50px; text-align: right; font-variant-numeric: tabular-nums; }
.mx-sig { font-size: 10.5px; min-width: 70px; }
.mx-sig[data-s="sig"] { color: var(--green); } .mx-sig[data-s="nosig"] { color: var(--warn); }
.mx-music { display: flex; gap: 4px; align-items: center; }
.mx-music button { padding: 6px 4px; font-size: 12px; }
.mx-music .mx-load { flex: 2; } .mx-chk { font-size: 12px; display: flex; align-items: center; color: var(--muted); }
.mx-cap { width: 100%; font-size: 12px; }
.mx-duck { font-size: 10.5px; color: var(--dim); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }
.mx-duck.on { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.mx-adv { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 4px; }

/* ---------- Fenêtres ---------- */
.modal { position: fixed; inset: 0; background: rgba(4,7,10,.72); display: flex; align-items: center; justify-content: center; z-index: 80; }
.modal[hidden] { display: none; }
.mbox { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: min(640px, 94vw); max-height: 92vh; overflow-y: auto; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.mbox h3 { margin: 0 0 8px; font-size: 16px; }
.drow { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--panel2); }
.drow .top { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.drow input[type=text], .drow input[type=password] { margin-top: 6px; }
.drow .how { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.45; }

/* ---------- Réglages ---------- */
.settings .row select { flex: 1; }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; color: var(--muted); align-items: center; }
.card.flash { box-shadow: 0 0 0 2px var(--gold); transition: box-shadow .3s; }

/* ---------- Caméras : état Caméra 1 / Caméra 2, réglages rapides, diagnostic ---------- */
.camslots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.cslot { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.cslot .cs-h { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cslot .cs-n { font-weight: 600; font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cslot .cs-t { font-weight: 500; font-size: 11px; color: var(--muted); }
.cslot .cs-s { font-size: 12px; margin-top: 3px; color: var(--muted); }
.cslot.ok .cs-s { color: var(--green); }
.cslot.warn .cs-s { color: var(--warn); }
.cslot.err .cs-s { color: var(--red); }
.cslot.ok { border-color: rgba(39, 199, 111, .35); }
.cslot .cs-r { font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.camswitch { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.camswitch button.sw { width: auto; padding: 6px 10px; }
.camquick { margin-top: 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row2 select { width: 100%; }
.cdiag:empty { display: none; }
.cdiag { display: grid; gap: 6px; margin: 6px 0; font-size: 12px; }
.cdiag .cd { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.cdiag .cd b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdiag .cd .cd-t { color: var(--muted); text-align: right; }
.cdiag .cd.ok span:not(.cd-t) { color: var(--green); }
.cdiag .cd.err span:not(.cd-t) { color: var(--warn); grid-column: 1 / -1; }
.cdiag .cd-help, .cdiag .cd-wait { color: var(--muted); }
.caminfo .ci { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.caminfo .ci span { color: var(--muted); }
.caminfo .ci b { font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Scènes : Program (rouge) / Preview (or), miniatures, menu, TAKE, inspecteur ---------- */
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; }
.tag.tpgm { background: var(--red); color: #fff; }
.tag.tpvw { background: var(--gold); color: var(--gold-ink); }
.tag.twarn { background: rgba(240,167,47,.18); color: var(--warn); }
.pgmtag { margin-left: 8px; }
.pgmname { margin-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.scene { position: relative; cursor: pointer; }
.scene.pgm { border-color: var(--red); box-shadow: 0 0 0 1px rgba(230,43,43,.35); }
.scene.pvw { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(243,194,79,.3); }
.scene.drag { opacity: .45; }
.scene.over { outline: 2px dashed var(--gold); outline-offset: 2px; }
.scene .tag { position: absolute; top: 9px; left: 9px; z-index: 2; }
.scene .tag.twarn { left: auto; right: 34px; }
.scene .scmenu { position: absolute; top: 8px; right: 8px; z-index: 2; width: 22px; height: 20px; padding: 0; border-radius: 6px; font-size: 13px; line-height: 1; background: rgba(11,15,20,.75); border: 1px solid var(--line); color: var(--text); }
.scene .nmrow { display: flex; align-items: center; gap: 6px; }
.scene .nmrow .nm { flex: 1; }
.scene kbd { font: 600 9.5px var(--font); color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.scene .ty { font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -3px; }
.scene .th b.bg { position: absolute; inset: 0; opacity: .9; }
.scene .th i { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scene .th i em { font-style: normal; font-size: 8px; color: rgba(255,255,255,.75); white-space: nowrap; }
.scene .th i.c1 { background: #45586e; } .scene .th i.c2 { background: #5b4f73; }
.scene .th i.scr { background: #2c6e73; } .scene .th i.img { background: #6e5a2c; } .scene .th i.vid { background: #6e2c4c; }
.scene .th i.pipb { box-shadow: 0 0 0 1px rgba(255,255,255,.45); border-radius: 3px; }
.scene .th i.txt { background: none; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.scene .th i.logo { width: 12%; height: 14%; background: var(--gold); border-radius: 2px; }
.scene .th i.logo.tl { left: 3%; top: 5%; } .scene .th i.logo.tr { right: 3%; top: 5%; } .scene .th i.logo.bl { left: 3%; bottom: 5%; } .scene .th i.logo.br { right: 3%; bottom: 5%; }
.scmenu-pop { position: fixed; z-index: 90; display: flex; flex-direction: column; min-width: 180px; padding: 5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.scmenu-pop[hidden] { display: none; }
.scmenu-pop button { text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; }
.scmenu-pop button:hover { background: #1d2733; }
.scmenu-pop button.danger { color: var(--red); }
.sceneinsp { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.sceneinsp .si-h { display: flex; align-items: center; gap: 8px; }
.sceneinsp .si-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sceneinsp .si-row > label { flex: 0 0 96px; color: var(--muted); font-size: 11.5px; }
.sceneinsp .si-row input[type=text] { flex: 1; min-width: 0; }
.sceneinsp .si-row select { flex: 1; min-width: 0; }
.sceneinsp .si-row input[type=range] { flex: 1; min-width: 80px; }
/* Filtres couleur : petites pastilles cliquables */
.filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 4px; }
.filters button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; font-size: 11px; line-height: 1.1; }
.filters button.sel { border-color: var(--gold); color: var(--gold); }
.fsw { width: 34px; height: 22px; border-radius: 6px; display: block; border: 1px solid rgba(255,255,255,.15); }
.f-none { background: linear-gradient(135deg, #c98d6a, #6a8fb5); }
.f-warm { background: linear-gradient(135deg, #f0b06a, #c9784a); }
.f-cinema { background: linear-gradient(135deg, #2f6f78, #e39a55); }
.f-vivid { background: linear-gradient(135deg, #ff5a6a, #3fb6ff); }
.f-soft { background: linear-gradient(135deg, #f3d6d8, #c8cfe0); }
.f-bright { background: linear-gradient(135deg, #fff6e6, #d8e8ff); }
.f-vintage { background: linear-gradient(135deg, #d9b98a, #8a6a4a); }
.f-bw { background: linear-gradient(135deg, #f2f2f2, #2a2a2a); }
.sceneinsp .si-lay { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sceneinsp .si-lay button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; font-size: 11.5px; line-height: 1.15; }
.sceneinsp .si-lay button i { font-style: normal; font-size: 18px; line-height: 1; opacity: .85; }
.sceneinsp .si-prob, .sceneinsp .si-ok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.sceneinsp .si-prob { background: rgba(243,194,79,.10); border: 1px solid rgba(243,194,79,.35); color: #f3d58a; }
.sceneinsp .si-ok { background: rgba(39,199,111,.08); border: 1px solid rgba(39,199,111,.3); color: #9fe3bd; }
.sceneinsp .si-prob button, .sceneinsp .si-ok button { margin-left: auto; }
.sceneinsp .si-more { margin-top: 4px; }
.sceneinsp .si-more > .si-row { margin-top: 8px; }
.sceneinsp .si-row button { width: auto; padding: 5px 9px; }
.sceneinsp .si-seg { flex: 1; display: flex; }
.sceneinsp .si-seg button { flex: 1; padding: 5px 4px; font-size: 11px; }
.sceneinsp .si-n { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.sceneinsp .si-warn { color: var(--warn); font-size: 11.5px; }
.sceneinsp .si-st { color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); padding-top: 6px; }
.mbox.scadd { width: min(640px, 94vw); }
.tplgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.tplgrid .tpl { display: flex; flex-direction: column; gap: 4px; padding: 6px; text-align: left; border-radius: 9px; background: var(--panel2); border: 1.5px solid var(--line2); }
.tplgrid .tpl.sel { border-color: var(--gold); }
.tplgrid .tpl:disabled { opacity: .45; cursor: not-allowed; }
.tplgrid .tpl small { color: var(--warn); font-size: 10px; }
.tplgrid .th { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; background: #0a0e13; overflow: hidden; }
.tplgrid .th i { position: absolute; display: flex; align-items: center; justify-content: center; background: #2c3a4b; border-radius: 3px; font-style: normal; overflow: hidden; }
.tplgrid .th i em { font-style: normal; font-size: 8px; color: rgba(255,255,255,.75); }
.tplgrid .th b.bg { position: absolute; inset: 0; }
.tplgrid .th i.c1 { background: #45586e; } .tplgrid .th i.c2 { background: #5b4f73; } .tplgrid .th i.scr { background: #2c6e73; } .tplgrid .th i.img { background: #6e5a2c; }
.tplgrid .th i.txt { background: none; color: #fff; font-size: 8px; font-weight: 800; }
.tplgrid .th i.t { background: none; color: var(--gold); font-size: 10px; font-weight: 800; inset: 0; }

/* ---------- Bandeaux (lower thirds) ---------- */
.banlist { display: flex; flex-direction: column; gap: 6px; }
.ban { display: flex; align-items: center; gap: 6px; }
.ban .bshow { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; min-width: 0; padding: 7px 10px; border-left: 3px solid var(--line); }
.ban .bshow b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ban .bshow span { font-size: 11.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ban .bshow span:empty { display: none; }
.ban.on .bshow { border-color: var(--red); border-left-color: var(--red); background: #1d1416; }
.ban .icon { flex: none; width: 30px; padding: 6px 0; color: var(--muted); }
.ban .tag { flex: none; }
.banstyle-row { display: flex; gap: 6px; margin-top: 4px; }
.bsty { flex: none; width: 26px; height: 18px; padding: 0; border-radius: 5px; border: 2px solid transparent; }
.bsty.sel { border-color: var(--text); }
.bsty.b-gold { background: linear-gradient(90deg, var(--gold) 0 22%, #0b0f14 22%); }
.bsty.b-light { background: linear-gradient(90deg, var(--gold) 0 22%, #f5f7fa 22%); }
.bsty.b-red { background: linear-gradient(90deg, #fff 0 22%, var(--red) 22%); }
.banform { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.banform[hidden], #secName[hidden] { display: none; }
.banstyle-row .bsl { font-size: 11.5px; color: var(--muted); align-self: center; margin-right: 2px; }

/* ---------- Vérification avant le direct ---------- */
.pfbox { margin-top: 2px; }
.pfsum { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; background: transparent; }
.pfsum .pft { flex: 1; font-weight: 600; }
.pfsum .pfa { color: var(--muted); }
.pfi { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.pf-ok .pfi { background: rgba(39,199,111,.16); color: var(--green); }
.pf-warn .pfi { background: rgba(240,167,47,.16); color: var(--warn); }
.pf-fail .pfi { background: rgba(230,43,43,.18); color: #ff6b6b; }
.pf-wait .pfi { background: var(--panel2); color: var(--muted); }
.pfsum.pf-ok { border-color: rgba(39,199,111,.35); }
.pfsum.pf-warn { border-color: rgba(240,167,47,.4); }
.pfsum.pf-fail { border-color: rgba(230,43,43,.5); }
.pflist { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.pfrow { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line2); }
.pfm { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pfm b { font-size: 12.5px; }
.pfm span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.pffix { flex: none; padding: 5px 8px; font-size: 12px; }
.scene .th i.txt.cd, .tplgrid .th i.txt.cd { color: var(--gold); }

/* ---------- Prompteur : section en cours, textes enregistrés ---------- */
#secName { position: absolute; left: 10px; bottom: 8px; color: var(--gold); font-size: 12px; font-weight: 700; background: rgba(0,0,0,.6); padding: 3px 8px; border-radius: 6px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scriptrow select { flex: 1; min-width: 0; }
.scriptrow .icon { flex: none; width: 34px; padding: 7px 0; }
.tickrow input { flex: 1; min-width: 0; }
.tickrow button { flex: none; }
#tickBtn.onair { background: #2a1214; border-color: var(--red); color: #ff8a8a; }

/* Assistant de démarrage */
.welcome .wbox { width: min(460px, calc(100vw - 32px)); text-align: center; }
.welcome .wico { font-size: 34px; margin: 4px 0 6px; color: var(--gold); font-weight: 800; }
.welcome h3 { margin: 0 0 6px; font-size: 20px; }
.welcome .help { margin: 0 0 12px; }
.welcome .help span { display: block; }
.welcome select { width: 100%; margin-top: 8px; }
.welcome .wlang { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.welcome .wlang button { padding: 12px; font-size: 14px; }
.welcome .wvideo { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; display: block; object-fit: contain; }
.welcome .wmeter { height: 12px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin: 12px 0 6px; }
.welcome .wmeter > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--green, #27C76F), var(--gold)); transition: width .08s; }
.welcome .wbig { width: 100%; padding: 14px; font-size: 15px; }
.welcome .wtips { text-align: left; line-height: 1.7; margin: 6px 0 12px; padding-left: 22px; }
.welcome .wdots { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.welcome .wdots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.welcome .wdots i.on { background: var(--gold); width: 22px; border-radius: 4px; }
.welcome .wdots i.done { background: rgba(243,194,79,.5); }
.welcome .wnav { margin-top: 16px; align-items: center; }
.welcome .link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 4px; }
.welcome .wnav .spacer { flex: 1; }

/* =================== Studio : PREVIEW | PROGRAM, TAKE, scènes, réglages =================== */
.monitors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
body:not(.prep) .monitors { grid-template-columns: minmax(0, 880px); justify-content: center; }
#pvwCard { display: none; }
body.prep #pvwCard { display: block; }
.mon { padding: 10px 12px 12px; }
.mon-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 34px; }
.mon-ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.mon-ico svg { width: 18px; height: 18px; }
.mon-ico.pgm { background: rgba(240,45,50,.16); color: var(--red); }
.mon-ico.pvw { background: rgba(243,195,79,.14); color: var(--gold); }
.mon-t h2 { font-size: 15px; letter-spacing: 1.2px; color: var(--text); }
.mon-t small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.mon-h .spacer { flex: 1; }
.mon-h .pgmname { margin-left: 4px; max-width: 30%; }
.tag.tsrc { background: #1b2a38; color: #cfd8e3; height: 22px; font-size: 10.5px; letter-spacing: .04em; }
.tag.tsrc:empty { display: none; }
.mon .pv-time { background: #0b141d; border: 1px solid var(--line); font-size: 13px; padding: 3px 9px; }
.mon .badge.live.on { font-size: 12.5px; padding: 5px 10px; }
#pv { position: relative; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line2); }
#pv iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.pvbar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 10px; pointer-events: none; font-size: 12px; }
.pv-l:empty { display: none; }
.pv-time:empty { display: none; }
.pv-time { font-variant-numeric: tabular-nums; font-weight: 700; border-radius: 6px; }
.pv-r { font-variant-numeric: tabular-nums; color: #e3e9ef; background: rgba(5,10,15,.72); padding: 3px 9px; border-radius: 6px; font-weight: 600; }
.pvrec { display: none; color: #fff; background: var(--red); border-radius: 6px; padding: 4px 9px; font-weight: 800; font-size: 11.5px; letter-spacing: .6px; }
.pvrec.on { display: inline-block; }
#pvCover, .pvaudio { display: none; }
#pv.audio iframe { display: none; }
#pv.audio #pvCover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
#pv.audio .pvaudio { display: block; position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; color: #c7f5dc; background: rgba(8,40,24,.85); padding: 3px 8px; border-radius: 6px; }
.pvwbox { position: relative; aspect-ratio: 16 / 9; background: #05080b; border: 1.5px solid rgba(243,195,79,.6); border-radius: 10px; overflow: hidden; }
.pvwbox video { width: 100%; height: 100%; object-fit: contain; display: block; }
.pvwempty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 12.5px; color: var(--muted); background: #05080b; }
.pvwempty[hidden] { display: none; }
.qbtn { flex: none; width: 36px; height: 32px; padding: 0; font-size: 15px; }
.qbtn.muted { background: #2a1214; border-color: #5e2226; color: #ff8a8a; }
.qmeter { flex: 1; height: 6px; background: #1b2430; border-radius: 3px; overflow: hidden; }
.qmeter div { height: 100%; width: 0; background: linear-gradient(90deg, var(--green) 70%, var(--warn) 86%, var(--red)); }

/* TAKE : entre Preview et Program */
.takebar { display: none; align-items: flex-end; justify-content: center; gap: 12px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); }
body.prep .takebar { display: flex; }
.takebar .tk-f { width: 170px; }
.takebar .tk-f label.sl { margin: 0 0 4px; }
button.take { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 210px; height: 44px; font-size: 16px; font-weight: 800; letter-spacing: .1em; background: var(--gold); color: var(--gold-ink); border: 0; border-radius: 10px; }
button.take svg { width: 20px; height: 20px; stroke-width: 2.4; fill: none; }
button.take:hover:not(:disabled) { background: #f6cf6c; }
button.take:disabled { background: #2a2717; color: #7d7354; }
.tk-hint { align-self: center; }

/* Scènes : bande horizontale de miniatures */
.scenes .card-h { flex-wrap: wrap; }
.scene-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 152px; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; scrollbar-color: #263544 transparent; }
.scene { flex: none; display: flex; flex-direction: column; gap: 5px; padding: 6px; border-radius: 10px; text-align: left; background: var(--panel2); border: 1.5px solid var(--line2); }
.scene:hover:not(:disabled) { border-color: #3a4a5c; background: #15212d; }
.scene .th { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; background: #0a0e13; overflow: hidden; }
.scene .th i { position: absolute; background: #2c3a4b; border-radius: 3px; }
.scene .th i.t { background: none; color: var(--gold); font-style: normal; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; inset: 0; }
.scene .nm { font-size: 12px; color: #dfe6ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene.add { align-items: center; justify-content: center; border-style: dashed; color: var(--muted); min-height: 110px; }
.seg.swmode { display: inline-flex; gap: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg.swmode button { flex: none; border: 0; border-radius: 6px; padding: 5px 10px; font-size: 12px; background: transparent; }
.seg.swmode button.sel { background: var(--gold); color: var(--gold-ink); }
#addSceneTop { margin-left: 4px; }
.scenes .card-h .hint { margin-left: 8px; margin-right: auto; color: var(--gold); }

/* Réglages de la scène : toujours visibles sur la page Studio */
#inspCard .card-h { margin-bottom: 8px; }
#inspDone { display: none; }
body.editing #inspDone { display: inline-flex; }

/* =================== Colonne de droite =================== */
.golivecard .card-h { margin-bottom: 12px; }
.golivecard h2, .reccard h2, .mixmini h2, .qacard h2 { font-size: 13.5px; letter-spacing: .3px; text-transform: none; color: var(--text); }
button.golive { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; padding: 13px 10px; border-radius: 10px; }
.destchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin: 10px 0 8px; }
.dchip { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; font-size: 11.5px; font-weight: 600; border-radius: 8px; }
.dchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.dchip.ok i { background: var(--green); } .dchip.on i { background: var(--red); box-shadow: 0 0 0 3px rgba(240,45,50,.25); } .dchip.warn i { background: var(--warn); }
.dchip.off { color: var(--dim); }
#liveInfo { margin-top: 6px; }
.reccard .rec-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.reccard #recTime { font-size: 28px; }
.reccard .row { margin-bottom: 0; }
.reccard #recTitle { margin-bottom: 8px; }
.mini-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; font-size: 11.5px; border-radius: 6px; }
.mini-btn.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.mini-btn.link { background: none; border: 0; color: var(--gold); text-decoration: underline; padding: 2px 0; }

/* Mixeur compact */
#mixMini { display: flex; flex-direction: column; gap: 2px; }
.mm-on { display: none; margin-bottom: 6px; }
#mixMini.off .mm-on { display: block; }
#mixMini.off .mm-row { opacity: .45; pointer-events: none; }
.mm-row { display: grid; grid-template-columns: 22px 78px 1fr 56px 30px 30px; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line2); }
.mm-row:last-child { border-bottom: 0; }
.mm-ico { width: 18px; height: 18px; color: #cfd8e3; }
.mm-row[data-id="master"] .mm-ico { color: var(--gold); }
.mm-n { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-meter { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; height: 10px; }
.mm-meter i { background: #1c2a37; border-radius: 1px; }
.mm-meter i.g { background: var(--green); } .mm-meter i.y { background: var(--warn); } .mm-meter i.r { background: var(--red); }
.mm-db { font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.mm-row button { flex: none; height: 26px; padding: 0; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mm-row button svg { width: 15px; height: 15px; }
.mm-m.on { background: var(--red); border-color: var(--red); color: #fff; }
.mm-h.on { background: #24486e; border-color: #3a6a9a; color: #fff; }

/* Actions rapides */
.qagrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.qagrid button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px; font-size: 10.5px; line-height: 1.15; text-align: center; }
.qagrid button svg { width: 19px; height: 19px; }
.qagrid button.on { border-color: var(--gold); color: var(--gold); }
.qamore { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.qamore[hidden] { display: none; }
.qamore button { text-align: left; padding: 7px 10px; font-size: 12.5px; }

/* =================== Pages =================== */
.pg-prompter .script { min-height: calc(100vh - 56px - 36px - 28px - 260px); }
.pg-prompter #prompter { min-height: 360px; }
#coverBox:not([hidden]) + .coverempty { display: none; }
.medialist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.mitem { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; min-width: 0; }
.mth { width: 72px; height: 44px; border-radius: 6px; background: #0a0e13 center / cover no-repeat; flex: none; display: flex; align-items: center; justify-content: center; color: var(--gold); }
.mmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mmeta b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmeta span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmeta .mused { color: var(--dim); }
.mempty { padding: 14px 4px; }

/* champs texte : même style sombre partout */
input[type=text], input[type=password], input[type=number], input[type=search] { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); padding: 7px 9px; font-size: 13px; }
input[type=text]:focus, input[type=password]:focus { outline: none; border-color: var(--gold); }
.scene .tag.tpgm, .scene .tag.tpvw { top: 60px; left: 11px; }
#pgmMini.mon-back { display: none; }
body:not([data-page="studio"]) #pgmMini.mon-back { display: inline-flex; }
body:not(.prep) .monitors { grid-template-columns: minmax(0, 780px); }
button.golive { color: #fff; }
/* Réglages de la scène : l'essentiel à gauche, « Plus d'options » à droite */
.si-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 28px; align-items: start; }
.si-main, .si-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.si-side .si-more { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 1280px) { .si-cols { grid-template-columns: minmax(0, 1fr); } }

/* =================== Finitions premium =================== */
body { font-feature-settings: "cv11", "ss01", "tnum" 0; letter-spacing: -.005em; }
.main { background: radial-gradient(1100px 520px at 28% -8%, rgba(243,195,79,.055), transparent 62%), radial-gradient(900px 500px at 100% 0%, rgba(64,120,200,.05), transparent 60%); }
.card { background: linear-gradient(180deg, #101c28 0%, #0d1721 100%); border-color: #1b2938; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 28px rgba(0,0,0,.32); }
h2 .ico { padding: 5px; width: 27px; height: 27px; border-radius: 8px; background: rgba(243,195,79,.1); }
h2 .ico.red { background: rgba(240,45,50,.12); }
button { transition: background .15s, border-color .15s, transform .12s, box-shadow .2s; }
button:active:not(:disabled) { transform: translateY(1px); }
select, input.tx, input[type=text] { transition: border-color .15s, box-shadow .15s; }
select:focus, input.tx:focus, input[type=text]:focus { box-shadow: 0 0 0 3px rgba(243,195,79,.15); }

/* barre du haut et barre latérale */
.topbar { background: linear-gradient(180deg, #0b1620, #08121b); }
.brand .logo { filter: drop-shadow(0 0 10px rgba(243,195,79,.35)); }
.brand b { font-weight: 800; letter-spacing: -.01em; }
.side { background: linear-gradient(180deg, #0a1520, #08111a); }
.side button { position: relative; color: #a9b7c6; }
.side button svg { color: #8496a9; transition: color .15s; }
.side button:hover:not(:disabled) { color: #e7edf3; } .side button:hover svg { color: #e7edf3; }
.side button.sel { background: linear-gradient(90deg, rgba(243,195,79,.16), rgba(243,195,79,.04)); border-color: rgba(243,195,79,.28); }
.side button.sel svg { color: var(--gold); }
.side button.sel::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); box-shadow: 0 0 10px rgba(243,195,79,.7); }

/* moniteurs : halo d'antenne */
.mon { transition: box-shadow .35s, border-color .35s; }
#pv { box-shadow: 0 8px 26px rgba(0,0,0,.45); transition: box-shadow .35s, border-color .35s; }
body.onair #pgmCard { border-color: rgba(240,45,50,.55); box-shadow: 0 0 0 1px rgba(240,45,50,.35), 0 0 42px rgba(240,45,50,.18), 0 10px 28px rgba(0,0,0,.32); }
body.onair #pv { border-color: rgba(240,45,50,.8); box-shadow: 0 0 0 2px rgba(240,45,50,.55), 0 0 30px rgba(240,45,50,.25); }
body.onair .mon-ico.pgm { background: var(--red); color: #fff; animation: pulse 2.4s ease-in-out infinite; }
body.pvwready .pvwbox { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(243,195,79,.35), 0 0 28px rgba(243,195,79,.14); }
.pvwempty { flex-direction: column; gap: 10px; background: radial-gradient(400px 220px at 50% 45%, rgba(243,195,79,.06), transparent 70%), #05080b; }
.pvwempty::before { content: ""; width: 46px; height: 46px; border-radius: 50%; border: 1.5px dashed rgba(243,195,79,.45);
  background: center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3c34f' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

/* TAKE : respire quand une scène est prête */
button.take:not(:disabled) { background: linear-gradient(180deg, #ffd56a, #efb73a); box-shadow: 0 6px 22px rgba(243,195,79,.32), inset 0 1px 0 rgba(255,255,255,.45); }
body.pvwready button.take { animation: takeglow 2s ease-in-out infinite; }
@keyframes takeglow { 50% { box-shadow: 0 6px 34px rgba(243,195,79,.55), inset 0 1px 0 rgba(255,255,255,.45); } }

/* Go Live / REC : boutons lumineux */
button.golive, button.rec { background: linear-gradient(180deg, #ff4b50, #e0262c); border-color: #ff5a5f; box-shadow: 0 8px 24px rgba(240,45,50,.3), inset 0 1px 0 rgba(255,255,255,.25); letter-spacing: .01em; }
button.golive:hover:not(:disabled), button.rec:hover:not(:disabled) { background: linear-gradient(180deg, #ff5a5f, #e8323a); box-shadow: 0 10px 30px rgba(240,45,50,.42), inset 0 1px 0 rgba(255,255,255,.25); }
button.golive.on, button.rec.on { background: #24100f; border-color: var(--red); color: #ffb0b0; box-shadow: 0 0 0 1px rgba(240,45,50,.4), 0 0 24px rgba(240,45,50,.22); }
.reccard #recTime { font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
body.recording .reccard #recTime { color: #fff; text-shadow: 0 0 18px rgba(240,45,50,.45); }
.dchip { background: #0f1b26; }
.dchip.ok { border-color: rgba(36,199,106,.35); }

/* scènes : survol en relief, miniatures vivantes */
.scene { transition: transform .15s, box-shadow .2s, border-color .2s, background .2s; }
.scene:hover:not(.add) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.4); }
.scene.pgm { box-shadow: 0 0 0 1px rgba(240,45,50,.45), 0 0 22px rgba(240,45,50,.16); }
.scene.pvw { box-shadow: 0 0 0 1px rgba(243,195,79,.45), 0 0 22px rgba(243,195,79,.14); }
.scene .th canvas.lt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.scene .th canvas.lt.on { opacity: 1; }
.scene .th i.lth { overflow: hidden; }
.scene .th i.lth canvas.lt { border-radius: 3px; }
.scene.add { background: transparent; }
.scene.add:hover { border-color: var(--gold); color: var(--gold); }

/* colonne de droite */
.mm-meter i { border-radius: 2px; }
.mm-meter i.g { background: linear-gradient(180deg, #3be08a, #1fb35e); box-shadow: 0 0 6px rgba(36,199,106,.35); }
.qagrid button { background: #0f1b26; }
.qagrid button:hover:not(:disabled) { border-color: rgba(243,195,79,.5); color: var(--gold); }
.statusbar { background: linear-gradient(180deg, #08121b, #070f17); }
.sb-item { padding: 3px 10px; border-radius: 999px; background: #0d1823; border: 1px solid #172433; }
@media (prefers-reduced-motion: reduce) { body.pvwready button.take, body.onair .mon-ico.pgm { animation: none; } .scene:hover:not(.add) { transform: none; } }

/* =================== Comptes connectés =================== */
.autolive-only { display: none; }
body.autolive .autolive-only { display: block; margin-bottom: 10px; }
#accBox { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.acc { border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; background: #0f1b26; }
.acc.ok { border-color: rgba(36,199,106,.35); }
.acc-h { display: flex; align-items: center; gap: 10px; }
.acc-h .spacer { flex: 1; }
.acc-logo { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; color: #fff; flex: none; }
.acc-logo.yt { background: #e62117; } .acc-logo.fb { background: #1877f2; font-size: 20px; }
.acc-t b { display: block; font-size: 14px; }
.acc-s { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.acc-s i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.acc.ok .acc-s i { background: var(--green); } .acc.warn .acc-s i { background: var(--warn); }
.acc .mini-btn.main { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }
.acc-opts { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.acc-opts .si-row { display: flex; align-items: center; gap: 8px; } .acc-opts .si-row label { flex: 0 0 96px; color: var(--muted); font-size: 12px; } .acc-opts select { flex: 1; }
.acc-cfg { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.acc-how { margin: 0; padding-left: 20px; color: #c4cfdb; font-size: 12.5px; line-height: 1.6; }
.acc-red { font-size: 12px; color: var(--muted); } .acc-red code { color: var(--gold); user-select: all; }
textarea.tx { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; font: 13px/1.45 var(--font); resize: vertical; }
textarea.tx:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(243,195,79,.15); }

/* =================== Mes caméras : bibliothèque + rangée sous le PROGRAM =================== */
.cambar { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.cbtn { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 10px; background: #0f1b26; border: 1.5px solid #1f2e3d; font-size: 12.5px; font-weight: 600; max-width: 220px; }
.cbtn .cb-th { width: 52px; height: 30px; border-radius: 6px; background: #1b2a38 center / cover no-repeat; flex: none; }
.cbtn .cb-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbtn.on { border-color: var(--red); background: linear-gradient(180deg, rgba(240,45,50,.16), rgba(240,45,50,.06)); box-shadow: 0 0 0 1px rgba(240,45,50,.35), 0 0 16px rgba(240,45,50,.18); }
.cbtn.on .cb-n::before { content: "● "; color: var(--red); }
.cbtn.wait { border-color: var(--gold); animation: takeglow 1.2s ease-in-out infinite; }
.cbtn.add { border-style: dashed; color: var(--muted); padding: 5px 12px; }
.cbtn.add .cb-plus { font-size: 16px; color: var(--gold); }
body:not([data-page="studio"]) .cambar { display: none; }
.clibs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; }
.clib { display: flex; align-items: center; gap: 10px; padding: 8px; background: #0f1b26; border: 1px solid var(--line2); border-radius: 12px; min-width: 0; }
.clib.in { border-color: rgba(36,199,106,.35); }
.clib-th { width: 96px; height: 54px; border-radius: 8px; background: #0a0e13 center / cover no-repeat; flex: none; display: flex; align-items: center; justify-content: center; color: var(--dim); }
.clib-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.clib-m b { font-size: 13px; } .clib-m span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clib-m .clib-n { padding: 5px 8px; font-weight: 600; }
.clib-ok { color: var(--green); font-size: 12px; font-weight: 700; white-space: nowrap; }
.clib .mini-btn.main { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 700; }

/* fenêtre « Plateformes & clés » : connexion en un clic d'abord */
.dm-quick { margin: 6px 0 12px; padding: 12px; border: 1px solid var(--line2); border-radius: 12px; background: #0f1b26; }
.dm-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dm-acc { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; justify-content: flex-start; padding: 8px 12px; font-weight: 700; }
.dm-acc .acc-logo { width: 28px; height: 28px; font-size: 13px; }
.dm-acc.fb .acc-logo { font-size: 17px; }
.dm-acc.ok { border-color: rgba(36,199,106,.45); color: #9fe3bd; opacity: 1; }
.dm-acc[hidden] { display: none; }
#dmManual { margin-bottom: 8px; }

.ytvis { align-items: center; gap: 8px; } .ytvis label.sl { margin: 0; white-space: nowrap; } .ytvis select { flex: 1; }
.watchlinks { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .watchlinks:empty { display: none; }
.wl { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: #0f1b26; color: var(--text); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.wl:hover { border-color: var(--gold); color: var(--gold); }
.wl .acc-logo { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; } .wl.fb .acc-logo { font-size: 14px; }

/* Détails du direct */
.metabtn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; margin-bottom: 10px; background: #0f1b26; }
body.autolive .metabtn.autolive-only { display: flex; }
.metabtn .mb-th { width: 54px; height: 30px; border-radius: 6px; background: #1b2a38 center / cover no-repeat; flex: none; border: 1px dashed #2c3e50; }
.metabtn .mb-th.on { border: 0; }
.metabtn .mb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .metabtn .mb-t small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metabtn .mb-go { color: var(--gold); font-size: 18px; }
.lmeta { width: min(560px, 94vw); }
.lm-thumb { display: flex; gap: 12px; align-items: flex-start; }
.lm-prev { width: 224px; aspect-ratio: 16 / 9; border-radius: 10px; border: 1.5px dashed #2c3e50; background: #0a0e13 center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 11px; flex: none; }
.lm-prev.on { border: 1px solid var(--line); } .lm-prev.on span { display: none; }
.lm-tbtns { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .lm-tbtns button { flex: none; }
button.link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 2px 0; }

/* =================== Eklezia One : marque commune + menu « Eklezia One ▾ » =================== */
.brand .ek-mark { width: 30px; height: auto; filter: drop-shadow(0 0 8px rgba(243,195,79,.25)); }
.brand b span { color: var(--gold); }
.brand small { letter-spacing: .32em; font-weight: 700; color: var(--gold) !important; font-size: 10.5px !important; margin-top: 1px !important; }
.ekswitch { position: relative; margin-left: 6px; }
.ekswitch > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0f1b26; cursor: pointer; font-weight: 700; font-size: 13px; white-space: nowrap; }
.ekswitch > summary::-webkit-details-marker { display: none; }
.ekswitch > summary b { color: var(--gold); }
.ek-whosum { color: var(--muted); font-weight: 500; } .ek-whosum:empty { display: none; }
.ekpop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 95; width: 290px; padding: 8px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; }
.ek-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 13px; background: none; border: 0; text-align: left; width: 100%; }
a.ek-item:hover, button.ek-item:hover { background: #18263a; }
.ek-item.cur { background: rgba(243,195,79,.08); }
.ek-dot { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ek-dot svg { width: 15px; height: 15px; color: #fff; }
.ek-dot.church { background: linear-gradient(135deg, #6d4bf3, #3b2aa8); } .ek-dot.studio { background: linear-gradient(135deg, #ff3b48, #c8102e); } .ek-dot.hub { background: #24364c; }
.ek-ext { margin-left: auto; color: var(--dim); } .ek-cur { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--gold-ink); background: var(--gold); border-radius: 999px; padding: 1px 8px; }
.ek-sep { height: 1px; background: var(--line2); margin: 4px 6px; }
.ek-out { color: #ff9a9a; }
.ek-signin { width: 100%; margin: 2px 0 6px; padding: 10px; }
.ek-who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--line2); margin-bottom: 4px; }
.ek-who b { display: block; font-size: 13.5px; } .ek-who span { font-size: 11.5px; color: var(--muted); }
.ek-av { width: 34px; height: 34px; border-radius: 50%; background: #3b4a7a; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex: none; }
.ek-warn { margin: 4px 6px; }

/* Accueil de session : une hiérarchie lisible, sans animation de fond coûteuse. */
.studio-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 2px 4px; }
.studio-eyebrow { color:var(--gold); font-size:10px; font-weight:700; letter-spacing:1.8px; }
.studio-intro h1 { font-size:clamp(20px,2vw,28px); line-height:1.2; letter-spacing:-.7px; margin:8px 0; }
.studio-intro p { color:var(--muted); margin:0; }
.studio-intro > button { flex:none; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--text); }
.setup-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.setup-path button { display:flex; align-items:center; gap:12px; text-align:left; padding:14px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(135deg,#152331,#101923); color:var(--text); min-width:0; }
.setup-path button:hover { border-color:var(--gold); background:#192837; }
.setup-num { color:var(--gold); font-size:11px; font-weight:700; }
.setup-path b { display:block; font-size:13px; }
.setup-path small { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.setup-path svg { margin-left:auto; color:var(--muted); }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.welcome .wbox { width:min(540px,calc(100vw - 32px)); padding:28px; border:1px solid #354759; background:linear-gradient(150deg,#182735,#0c151f 70%); border-radius:20px; box-shadow:0 28px 100px #0008; max-height:calc(100vh - 32px); overflow:auto; }
.welcome .wprogress { font-size:11px; color:var(--muted); letter-spacing:2px; margin:8px 0 18px; }
.welcome h3 { font-size:26px; letter-spacing:-.5px; }
.welcome h3:focus { outline:none; }
.welcome .help { line-height:1.65; }
.welcome .wnav { border-top:1px solid var(--line); padding-top:18px; margin-top:24px; }
@media (max-width:1100px) { .studio-intro { align-items:flex-start; flex-direction:column; gap:12px; } .setup-path button { gap:8px; padding:10px; } .setup-path svg { display:none; } }
@media (max-width:700px) { .setup-path { grid-template-columns:1fr; } .studio-intro h1 { font-size:22px; } }

/* Named broadcast designs with readable miniature previews. */
.banstyle-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px; margin-top:10px; }
.bsty { width:auto; height:auto; min-width:0; padding:6px; background:var(--panel,#151b24)!important; border:1px solid var(--line); border-radius:9px; text-align:left; }
.bsty.sel { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.bsty:focus-visible { outline:2px solid var(--text); outline-offset:3px; }
.ban-swatch { display:flex; flex-direction:column; justify-content:center; min-height:52px; padding:8px 10px; border-left:4px solid #f3c24f; border-radius:4px; background:#0b0f14; color:white; overflow:hidden; }
.ban-swatch strong { font-size:12px; line-height:1.5; }
.ban-swatch small { font-size:9px; color:#f3c24f; }
.ban-style-name { display:block; margin-top:6px; font-size:11px; color:var(--text); }
.b-light .ban-swatch { background:#f5f7fa; color:#0b0f14; }.b-light small { color:#4a5563; }
.b-red .ban-swatch { background:#e62b2b; border-color:white; }.b-red small { color:white; }
.b-editorial .ban-swatch { background:#f4f0e8; color:#172335; border-left:0; border-bottom:3px solid #bc8c38; }.b-editorial small { color:#455266; }
.b-sky .ban-swatch { background:linear-gradient(120deg,#112743,#205276); border-color:#63d7ef; }.b-sky small { color:#b5eaf5; }
.b-emerald .ban-swatch { background:#103d33; border:1px solid #d7ba78; }.b-emerald small { color:#d7ba78; }
.b-concert .ban-swatch { background:linear-gradient(120deg,#291747,#683774); border-color:#eb88d5; }.b-concert small { color:#f2c2e8; }
.b-royal .ban-swatch { background:#0f1a3d; border:1px solid #d4af37; }.b-royal small { color:#e9cf7a; }
.b-sunset .ban-swatch { background:linear-gradient(120deg,#3b0d2a,#c2410c); border-color:#ffb347; }.b-sunset small { color:#ffd7a8; }
.b-neon .ban-swatch { background:linear-gradient(120deg,#0a0f1f,#1e1b4b); border-color:#22d3ee; }.b-neon small { color:#a5f3fc; }
/* PROGRAM flottant : repliable (bouton –), place réservée en bas des pages pour que rien ne reste caché dessous,
   bouton « Choisir l'écran » à la taille de la vignette */
body.pgm-fold:not([data-page="studio"]) #pgmCard #pv { display: none; }
body.pgm-fold:not([data-page="studio"]) #pgmCard { width: auto; }
body.pgm-fold:not([data-page="studio"]) #pgmCard .mon-h { margin-bottom: 0; }
body:not([data-page="studio"]) .main { padding-bottom: 260px; }
body.pgm-fold:not([data-page="studio"]) .main { padding-bottom: 70px; }
body:not([data-page="studio"]) #pgmCard .scr-cta { padding: 6px 10px; font-size: 11px; white-space: normal; max-width: 90%; text-align: center; }
.b-dark .ban-swatch { background:#080a0e; border-color:#ffffff; } .b-dark small { color:#aeb7c4; }
.b-minimal .ban-swatch { background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.85); } .b-minimal small { color:rgba(255,255,255,.8); }

/* ---------- Menu en 6 piliers (Design, Micro, Parole, Musique, Enregistrement, Direct) ---------- */
.side .side-gap { flex: 1 1 auto; min-height: 12px; }
.side button { font-size: 14.5px; padding: 12px 14px; }
.ptabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ptabs:empty { display: none; }
.ptabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line2); background: #0f1923; color: #b9c6d4; font-size: 13.5px; font-weight: 600; }
.ptabs button:hover { border-color: rgba(243,195,79,.35); color: #fff; }
.ptabs button.sel { background: rgba(243,195,79,.14); border-color: rgba(243,195,79,.5); color: var(--gold); }
.side button[data-pillar] { gap: 13px; min-height: 54px; }
.side button[data-pillar] svg { flex: none; width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 10px; background: color-mix(in srgb, var(--pc) 16%, transparent); color: var(--pc); }
.side button[data-pillar].sel svg { background: var(--pc); color: #0b0f14; }
.side .pl { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.side .pl b { font-size: 14.5px; font-weight: 700; color: #eef2f7; }
.side .pl small { font-size: 11.5px; font-weight: 500; color: #8394a7; }
.side button[data-pillar].sel { background: color-mix(in srgb, var(--pc) 10%, transparent); border-color: color-mix(in srgb, var(--pc) 40%, transparent); }
.side button[data-pillar].sel .pl b { color: #fff; }
.side [data-pillar="design"] { --pc: #a78bfa; } .side [data-pillar="micro"] { --pc: #f3c24f; } .side [data-pillar="parole"] { --pc: #63d7ef; }
.side [data-pillar="musique"] { --pc: #27c76f; } .side [data-pillar="rec"] { --pc: #ff6b6b; } .side [data-pillar="live"] { --pc: #ff3b3b; }
/* direct en difficulté : alerte rouge bien visible */
#liveWarn.danger { display: block; padding: 12px 14px; border-radius: 10px; background: rgba(230,43,43,.16); border: 1px solid rgba(230,43,43,.6); color: #ffd2d2; font-weight: 700; font-size: 13.5px; line-height: 1.4; }
body.live-stalled #topLive { animation: stallBlink 1s steps(2) infinite; }
@keyframes stallBlink { 50% { opacity: .25; } }

/* ================= Modèle du 14 oct. : tableau de bord ================= */
/* barre du haut : état au centre, Aide, Réglages */
.tp-state { flex: 1 1 auto; max-width: 760px; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line2); background: #0d1822; text-align: left; }
.tp-state i { width: 18px; height: 18px; border-radius: 50%; flex: none; background: #6b7a8c; box-shadow: 0 0 0 4px rgba(107,122,140,.18); }
.tp-state.ok i { background: #27c76f; box-shadow: 0 0 0 4px rgba(39,199,111,.18); } .tp-state.warn i { background: #f3c24f; box-shadow: 0 0 0 4px rgba(243,194,79,.18); } .tp-state.fail i { background: #e62b2b; box-shadow: 0 0 0 4px rgba(230,43,43,.2); }
.tp-state span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .tp-state b { color: #fff; font-size: 14px; } .tp-state small { color: #93a1b3; font-size: 12px; }
.tp-btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line2); background: #0d1822; color: #dfe6ee; font-weight: 600; font-size: 13.5px; }
.tp-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.topact .modeswitch { width: auto; } .topact .modeswitch button { padding: 6px 10px; font-size: 12px; } .topact select { min-width: 100px; height: 40px; }
/* menu : pied (devise + version) */
.side-foot { margin-top: auto; padding: 18px 14px 6px; display: flex; flex-direction: column; gap: 2px; color: #6f7f92; font-size: 15px; font-weight: 600; }
.side-foot small { margin-top: 14px; font-size: 12px; font-weight: 500; color: #56657a; }
.side [data-pillar="home"] { --pc: #f3c24f; }
/* page Tableau de bord */
body[data-page="home"] .page[data-page="home"] { display: flex; }
.home-card { width: 100%; display: flex; flex-direction: column; gap: 22px; padding: 22px 24px 24px; border-radius: 18px; border: 1px solid var(--line2); background: linear-gradient(180deg, #0e1822, #0b131c); }
.home-steps { display: flex; flex-direction: column; gap: 24px; }
.home-steps .qs, .home-steps .lk, .home-steps .pf { margin: 0; }
.home-steps .step { width: 30px; height: 30px; font-size: 15px; background: #1f2b3a; color: #fff; border: 1px solid #33445a; }
.home-steps .qs-h, .home-steps .lk-h, .home-steps .pf-h { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0; text-transform: none; margin-bottom: 12px; }
.home-steps .qs-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body:not(.simple) .home-steps .qs-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-steps .lk-packs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.home-steps .lk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-steps .lk-r { flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: #0f1923; }
.home-steps .lk-r .lk-f { flex-basis: 100%; }
.home-go { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; height: 78px; border-radius: 14px; border: 0; background: linear-gradient(180deg, #ffd24f, #f3b81f); color: #1a1205; box-shadow: 0 10px 30px rgba(243,194,79,.22); }
.home-go svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; }
.home-go span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; } .home-go b { font-size: 26px; font-weight: 800; letter-spacing: .02em; } .home-go small { font-size: 13px; font-weight: 600; opacity: .8; }
.home-go.on { background: linear-gradient(180deg, #f0373b, #c81e22); color: #fff; }
/* colonne de droite du tableau de bord */
.rc-pgmh { display: flex; align-items: center; justify-content: space-between; } .rc-pgmh h2 { margin: 0; font-size: 17px; color: #fff; }
body[data-page="studio"] .rc-pgmh { display: none; }
.hm-only { display: none; } body[data-page="home"] .hm-only { display: block; }
body[data-page="home"] #goLiveCard, body[data-page="home"] #recCard, body[data-page="home"] #mixMiniCard, body[data-page="home"] #qaCard, body[data-page="home"] .rc-actions { display: none !important; }
.hm-only .card-h h2 { font-size: 16px; color: #fff; }
.hm-lv { display: grid; grid-template-columns: 22px 92px 1fr 52px; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: #dfe6ee; }
.hm-lv svg { width: 18px; height: 18px; fill: none; stroke: #c8d2de; stroke-width: 1.8; }
.hm-lv i { height: 10px; border-radius: 5px; background: #1b2633; overflow: hidden; } .hm-lv em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1fbf62 0%, #27c76f 70%, #e5d24a 88%, #f05050 100%); background-size: 220px 100%; transition: width .08s linear; }
.hm-lv b { text-align: right; font-size: 12.5px; color: #9aa8b8; font-weight: 600; }
.hm-audio-on { width: 100%; padding: 12px; border-radius: 10px; }
.hm-pl { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #172230; font-size: 14px; }
.hm-pl:last-child { border-bottom: 0; } .hm-pl b { color: #fff; font-weight: 600; }
.hm-logo { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; }
.hm-st { display: flex; align-items: center; gap: 6px; color: #9aa8b8; font-size: 13px; } .hm-st i { width: 8px; height: 8px; border-radius: 50%; background: #5d6b7c; }
.hm-pl.ok .hm-st i { background: #27c76f; } .hm-pl.ok .hm-st { color: #dfe6ee; } .hm-pl.live .hm-st i { background: #ff3b3b; }
.hm-q { font-size: 12.5px; font-weight: 700; color: #27c76f; } .hm-pl.live .hm-q { color: #ff5a5a; }
.hm-rec { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 4px; border: 0; background: transparent; text-align: left; }
.hm-rec i { width: 44px; height: 44px; border-radius: 50%; flex: none; background: #1b2633; border: 1px solid #33445a; position: relative; }
.hm-rec i::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #6b7a8c; }
.hm-rec.on i::after { background: #ff3b3b; box-shadow: 0 0 12px rgba(255,59,59,.7); }
.hm-rec span { display: flex; flex-direction: column; } .hm-rec b { color: #fff; font-size: 15px; } .hm-rec small { color: #9aa8b8; font-size: 12.5px; }
/* barre du haut : titre de la page, heure */
.tp-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 210px; } .tp-title b { font-size: 21px; color: #fff; font-weight: 800; } .tp-title small { font-size: 12.5px; color: #93a1b3; }
.tp-clock { margin-left: auto; padding-left: 16px; border-left: 1px solid var(--line2); text-align: left; } .tp-clock b { font-size: 14px; } .tp-clock small { font-size: 12px; }
#langTop { display: none; }
#settingsBtn span { display: none; } #settingsBtn { width: 42px; justify-content: center; padding: 0; }
/* le programme posé reste toujours visible (même si on l'avait replié en petit moniteur) */
body.pgm-fold #pgmCard.docked #pv { display: block !important; } #pgmCard.docked #pgmFold { display: none; }
/* colonne de droite : REC + GO LIVE en haut, l'image du public dessous */
.rc-actions { display: grid !important; grid-template-columns: 1fr 1.35fr; gap: 10px; margin: 0 !important; }
.rc-actions button { height: 58px; border-radius: 14px; font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-actions .rec { background: #101a24; border: 1px solid #2a3442; color: #fff; }
.rc-actions .golive { background: linear-gradient(180deg, #ffd24f, #f3b81f); border: 0; color: #1a1205; }
.rc-actions .golive.on { background: linear-gradient(180deg, #f0373b, #c81e22); color: #fff; }
.rc-pgm { flex: none; width: 100%; }
body:not([data-page="studio"]) #pgmCard.docked { position: fixed; right: auto; bottom: auto; z-index: 30; padding: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
@media (max-width: 1500px) { .home-steps .qs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-steps .lk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-script { display: none; } }

/* ===== Tableau de bord : finitions « comme le modèle » ===== */
.home-steps .qs-h, .home-steps .lk-h, .home-steps .pf-h { flex-wrap: wrap; row-gap: 2px; }
.home-steps .qs-h::after, .home-steps .lk-h::after, .home-steps .pf-h::after { flex-basis: 100%; padding-left: 40px; font-size: 13.5px; font-weight: 500; color: #93a1b3; }
.home-steps .qs-h::after { content: var(--sub); } .home-steps .lk-h:first-of-type::after { content: var(--sub); } .home-steps .lk-h:not(:first-of-type)::after { content: var(--sub2); } .home-steps .pf-h::after { content: var(--sub); }
.home-steps .qs-cards button { padding: 12px 8px 12px; gap: 7px; border-radius: 14px; background: #101a25; }
.home-steps .qs-cards button b { font-size: 14px; }
.home-steps .qs-cards button::after { font-size: 11.5px; color: #93a1b3; text-align: center; line-height: 1.2; }
.home-steps [data-show="camera"]::after { content: var(--s-camera); } .home-steps [data-show="screen"]::after { content: var(--s-screen); } .home-steps [data-show="screencam"]::after { content: var(--s-screencam); }
.home-steps [data-show="twocams"]::after { content: var(--s-twocams); } .home-steps [data-show="media"]::after { content: var(--s-media); } .home-steps [data-show="audio"]::after { content: var(--s-audio); }
.home-steps [data-show="side"]::after { content: var(--s-side); } .home-steps [data-show="pip"]::after { content: var(--s-pip); } .home-steps [data-show="starting"]::after { content: var(--s-starting); }
/* styles : vignettes « œuvre d'art » + sous-titre */
.home-steps .lk-packs button { padding: 0 0 10px; gap: 8px; overflow: hidden; border-radius: 14px; background: #101a25; }
.home-steps .lk-packs button b { font-size: 15px; }
.home-steps .lk-packs button::after { margin-top: -6px; font-size: 11.5px; color: #93a1b3; }
.home-steps .lk-packs .lk-sw { max-width: none; width: 100%; border-radius: 0; aspect-ratio: 16 / 5.5; box-shadow: none !important; outline: none !important; }
.home-steps .lk-packs .lk-sw i { display: none; }
:is(.home-steps, #dsLook) [data-pack="clean"] .lk-sw { background: radial-gradient(120% 90% at 20% 110%, #c8ccd4 0 38%, transparent 39%), radial-gradient(140% 80% at 80% 120%, #9aa1ad 0 45%, transparent 46%), linear-gradient(160deg, #f4f5f7, #d9dde3); }
:is(.home-steps, #dsLook) [data-pack="gold"] .lk-sw { background: radial-gradient(110% 70% at 30% 115%, #f6c453 0 30%, #b9781a 44%, transparent 46%), radial-gradient(90% 60% at 85% 0%, rgba(243,194,79,.45), transparent 60%), linear-gradient(160deg, #1b1309, #090705); }
:is(.home-steps, #dsLook) [data-pack="royal"] .lk-sw { background: linear-gradient(#d4af37,#d4af37) 50% 50% / 70% 2px no-repeat, radial-gradient(100% 80% at 50% 120%, rgba(212,175,55,.55), transparent 60%), linear-gradient(160deg, #18265a, #0b1233); }
:is(.home-steps, #dsLook) [data-pack="dark"] .lk-sw { background: radial-gradient(120% 60% at 90% 115%, #2b6cff 0 18%, #12307a 32%, transparent 34%), linear-gradient(160deg, #0b0f1c, #03050a); }
:is(.home-steps, #dsLook) [data-pack="minimal"] .lk-sw { background: radial-gradient(120% 80% at 30% 120%, #a9c8f0 0 36%, transparent 37%), radial-gradient(120% 70% at 85% 115%, #cfdcf2 0 40%, transparent 41%), linear-gradient(160deg, #eef3fb, #c9d8ef); }
:is(.home-steps, #dsLook) [data-pack="sunset"] .lk-sw { background: radial-gradient(90% 70% at 50% 120%, #ffb347 0 25%, #e8562a 45%, transparent 60%), linear-gradient(170deg, #3b0d2a, #7a1f3a 60%, #c2410c); }
:is(.home-steps, #dsLook) [data-pack="emerald"] .lk-sw { background: linear-gradient(#d7ba78,#d7ba78) 8% 12% / 18% 2px no-repeat, linear-gradient(#d7ba78,#d7ba78) 8% 12% / 2px 30% no-repeat, radial-gradient(100% 80% at 70% 120%, rgba(215,186,120,.45), transparent 60%), linear-gradient(160deg, #0f4a3c, #062a22); }
:is(.home-steps, #dsLook) [data-pack="cinema"] .lk-sw { background: linear-gradient(#000 0 16%, transparent 16% 84%, #000 84%), radial-gradient(80% 60% at 50% 50%, #3c4f7a, #121a2c 70%); }
:is(.home-steps, #dsLook) [data-pack="editorial"] .lk-sw { background: linear-gradient(#bc8c38,#bc8c38) 12% 80% / 40% 2px no-repeat, linear-gradient(160deg, #f4f0e8, #e2d8c4); }
:is(.home-steps, #dsLook) [data-pack="creator"] .lk-sw { background: radial-gradient(100% 80% at 20% 110%, #eb88d5 0 30%, transparent 32%), linear-gradient(140deg, #291747, #7c3aed); }
:is(.home-steps, #dsLook) [data-pack="corporate"] .lk-sw { background: linear-gradient(115deg, transparent 55%, rgba(99,215,239,.35) 56% 60%, transparent 61%), linear-gradient(160deg, #205276, #112743); }
:is(.home-steps, #dsLook) [data-pack="neon"] .lk-sw { background: radial-gradient(70% 60% at 50% 110%, rgba(34,211,238,.7), transparent 60%), radial-gradient(60% 50% at 10% 0%, rgba(167,139,250,.6), transparent 60%), linear-gradient(160deg, #0a0f1f, #1e1b4b); }
:is(.home-steps, #dsLook) [data-pack="clean"]::after { content: var(--s-clean); } :is(.home-steps, #dsLook) [data-pack="gold"]::after { content: var(--s-gold); } :is(.home-steps, #dsLook) [data-pack="royal"]::after { content: var(--s-royal); }
:is(.home-steps, #dsLook) [data-pack="dark"]::after { content: var(--s-dark); } :is(.home-steps, #dsLook) [data-pack="minimal"]::after { content: var(--s-minimal); } :is(.home-steps, #dsLook) [data-pack="sunset"]::after { content: var(--s-sunset); }
:is(.home-steps, #dsLook) [data-pack="emerald"]::after { content: var(--s-emerald); } :is(.home-steps, #dsLook) [data-pack="cinema"]::after { content: var(--s-cinema); } :is(.home-steps, #dsLook) [data-pack="editorial"]::after { content: var(--s-editorial); }
:is(.home-steps, #dsLook) [data-pack="creator"]::after { content: var(--s-creator); } :is(.home-steps, #dsLook) [data-pack="corporate"]::after { content: var(--s-corporate); } :is(.home-steps, #dsLook) [data-pack="neon"]::after { content: var(--s-neon); }
/* habillages : tuiles avec icône, comme le modèle */
.home-steps .lk-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.home-steps .lk-r { flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 14px 8px 12px; min-height: 120px; border-bottom: 1px solid var(--line2); text-align: center; }
.home-steps .lk-r::before { content: ""; width: 30px; height: 30px; background: #f3c24f; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.home-steps .lk-n { flex: none; font-size: 14px; } .home-steps .lk-x { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
:is(.home-steps, #dsLook) .lk-r[data-k="logo"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 5 5 5 10a5 5 0 0 1-10 0c0-3 2-4 2-7 1 1 2 2 2 4 1-2 1-5 1-7z'/%3E%3C/svg%3E"); }
:is(.home-steps, #dsLook) .lk-r[data-k="name"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6 8-6s7 2 8 6'/%3E%3C/svg%3E"); }
:is(.home-steps, #dsLook) .lk-r[data-k="live"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='6' width='22' height='12' rx='3'/%3E%3C/svg%3E"); }
:is(.home-steps, #dsLook) .lk-r[data-k="live"]::before { background: #e62b2b; }
:is(.home-steps, #dsLook) .lk-r[data-k="frame"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3C/svg%3E"); }
:is(.home-steps, #dsLook) .lk-r[data-k="qr"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zM5 5v4h4V5zM13 3h8v8h-8zm2 2v4h4V5zM3 13h8v8H3zm2 2v4h4v-4zM13 13h3v3h-3zM18 13h3v3h-3zM13 18h3v3h-3zM18 18h3v3h-3z'/%3E%3C/svg%3E"); }
:is(.home-steps, #dsLook) .lk-r[data-k="ticker"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1'/%3E%3C/svg%3E"); }
/* colonne de droite : titres comme le modèle (pas en capitales), programme sans entête en double */
.rc-pgmh h2, .hm-only .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; }
#pgmCard.docked .mon-h { display: none; }
@media (max-width: 1500px) { .home-steps .lk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Page Design (modèle) ===== */
body[data-page="design"] .page[data-page="design"] { display: flex; }
.pg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 6px 4px 4px; }
.pg-ht h1 { margin: 0; font-size: 34px; font-weight: 800; color: #fff; } .pg-ht p { margin: 6px 0 0; font-size: 15px; color: #c3ccd7; }
body:not([data-page="home"]) .tp-title { visibility: hidden; }
.ds-fmt { display: flex; gap: 10px; } .ds-fmt button { min-width: 170px; height: 52px; border-radius: 12px; border: 1.5px solid #2a3442; background: #0f1923; color: #e6ebf1; font-size: 15px; font-weight: 600; }
.ds-fmt button.sel { border-color: #f3c24f; color: #f3c24f; background: rgba(243,194,79,.08); box-shadow: 0 0 0 1px #f3c24f inset; }
.ds-card { width: 100%; box-sizing: border-box; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line2); background: linear-gradient(180deg, #0e1822, #0b131c); }
#dsLook .lk { display: flex; flex-direction: column; gap: 4px; }
#dsLook .lk-h, .ds-h b { font-size: 18px; font-weight: 700; color: #fff; text-transform: none; letter-spacing: 0; }
#dsLook .step, .ds-h .step { width: 28px; height: 28px; background: #1f2b3a; color: #fff; border: 1px solid #33445a; font-size: 14px; }
#dsLook .lk-h .step { font-size: 0; } #dsLook .lk-h:first-of-type .step::after { content: "1"; font-size: 14px; } #dsLook .lk-h:not(:first-of-type) .step::after { content: "2"; font-size: 14px; }
#dsLook .lk-h { flex-wrap: wrap; row-gap: 2px; margin: 6px 0 12px; } #dsLook .lk-h::after { flex-basis: 100%; padding-left: 38px; font-size: 13.5px; font-weight: 500; color: #93a1b3; }
#dsLook .lk-h:first-of-type::after { content: var(--sub); } #dsLook .lk-h:not(:first-of-type)::after { content: var(--sub2); }
#dsLook .lk-packs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px; margin-bottom: 18px; }
#dsLook .lk-packs button { padding: 0 0 10px; gap: 6px; overflow: hidden; border-radius: 14px; background: #101a25; }
#dsLook .lk-packs button b { font-size: 15px; } #dsLook .lk-packs button::after { margin-top: -4px; font-size: 11.5px; color: #93a1b3; }
#dsLook .lk-packs .lk-sw { max-width: none; width: 100%; border-radius: 0; aspect-ratio: 16 / 6; box-shadow: none !important; outline: none !important; } #dsLook .lk-packs .lk-sw i { display: none; }
#dsLook .lk-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
#dsLook .lk-r { flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px 14px; min-height: 130px; border: 1px solid var(--line2); border-radius: 12px; background: #0f1923; text-align: center; flex-wrap: wrap; }
#dsLook .lk-r .lk-f { flex-basis: 100%; } #dsLook .lk-n { flex: none; font-size: 14px; } #dsLook .lk-x { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
#dsLook .lk-r::before { content: ""; width: 32px; height: 32px; background: #f3c24f; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } #dsLook .lk-r[data-k="live"]::before { background: #e62b2b; }
.ds-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .ds-h > div { display: flex; flex-direction: column; gap: 3px; } .ds-h small { font-size: 13.5px; color: #93a1b3; }
.ds-tabs { display: flex; gap: 8px; margin-bottom: 14px; } .ds-tabs button { padding: 8px 18px; border-radius: 10px; border: 1px solid #2a3442; background: #0f1923; color: #c7d0dc; font-size: 13.5px; font-weight: 600; }
.ds-tabs button.sel { border-color: #f3c24f; color: #f3c24f; background: rgba(243,194,79,.08); }
.ds-bgs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ds-bg { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 108px; padding: 6px 6px 9px; border-radius: 12px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 13px; }
.ds-bg i { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; font-style: normal; font-size: 26px; color: #c7d0dc; }
.ds-bg.sel { border-color: #f3c24f; box-shadow: 0 0 0 1px #f3c24f inset; }
.ds-col { width: 64px; padding: 6px; } .ds-pick { position: relative; cursor: pointer; } .ds-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ds-blur { background: radial-gradient(circle at 50% 45%, #f0c9a8 0 18%, transparent 40%), linear-gradient(160deg, #6a7fa8, #2a3550); filter: blur(1.5px); }
.ds-wide { padding: 14px 22px; border-radius: 12px; font-size: 14px; } .ds-note { font-size: 13px; color: #93a1b3; margin-left: 6px; }
.ds-only { display: none; } body[data-page="design"] .ds-only { display: block; }
body[data-page="design"] #goLiveCard, body[data-page="design"] #recCard, body[data-page="design"] #mixMiniCard, body[data-page="design"] #qaCard, body[data-page="design"] .rc-actions { display: none !important; }
.ds-only .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; color: #fff; }
.ds-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.ds-sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #c7d0dc; }
.ds-sw i { width: 46px; height: 46px; border-radius: 10px; border: 1px solid #33445a; } .ds-sw.set i { box-shadow: 0 0 0 2px #f3c24f; }
.ds-sw input { position: absolute; top: 0; left: 50%; width: 46px; height: 46px; transform: translateX(-50%); opacity: 0; cursor: pointer; }
.ds-lays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.ds-lay { display: flex; flex-direction: column; gap: 7px; padding: 7px; border-radius: 12px; border: 1px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 12.5px; }
.ds-lay i { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; background: linear-gradient(160deg, #4a6aa8, #1b2a4f); }
.ds-lay em { position: absolute; left: 34%; top: 22%; width: 32%; height: 70%; border-radius: 40% 40% 0 0; background: #e9c3a1; }
.ds-l-both { background: linear-gradient(160deg, #eef1f6, #c9d1dd) !important; } .ds-l-both em { left: auto; right: 6%; top: auto; bottom: 8%; width: 30%; height: 38%; border-radius: 4px; background: #4a6aa8; border: 1.5px solid #fff; }
.ds-l-two em { left: 12%; width: 22%; } .ds-l-two b { position: absolute; right: 12%; top: 22%; width: 22%; height: 70%; border-radius: 40% 40% 0 0; background: #c99a7a; }
@media (max-width: 1500px) { #dsLook .lk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ds-fmt button { min-width: 0; padding: 0 14px; } }
/* L'image du public domine sur toutes les pages (demande du user, 14 oct.) : colonne de droite large, le reste plus étroit */
:root { --rightw: clamp(400px, 33vw, 680px); --sidew: 196px; }
.side .pl small { font-size: 11px; } .side button[data-pillar] { padding: 10px 10px; gap: 10px; }
/* ===== Page Microphone (modèle) ===== */
.mc { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.mc svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-head { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--line2); background: linear-gradient(180deg, #0e1822, #0b131c); }
.mc-big svg { width: 54px; height: 54px; color: #f3c24f; stroke-width: 2; } .mc-head > div { flex: 1; } .mc-head h1 { margin: 0; font-size: 30px; color: #fff; font-weight: 800; } .mc-head p { margin: 4px 0 0; color: #c3ccd7; font-size: 15px; }
.mc-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid #2a3442; background: #101a25; color: #e6ebf1; font-size: 14px; font-weight: 600; }
.mc-btn.wide { width: 100%; justify-content: flex-start; padding-left: 20px; }
.mc-card { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line2); background: linear-gradient(180deg, #0e1822, #0b131c); }
.mc-h { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; } .mc-h b { font-size: 18px; color: #fff; } .mc-h small { font-size: 13.5px; color: #93a1b3; }
.mc-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.mc-dev { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; border: 1px solid #2a3442; background: #0f1923; cursor: pointer; }
.mc-devi { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: radial-gradient(circle at 40% 35%, #3a4658, #141b25); } .mc-devi svg { width: 34px; height: 34px; color: #dfe6ee; }
.mc-devt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .mc-devt b { font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-devt small { color: #9aa8b8; }
.mc-devt em { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 8px; font-style: normal; font-size: 12.5px; font-weight: 700; } .mc-devt em.ok { background: rgba(39,199,111,.15); color: #3ddc84; } .mc-devt em.ko { background: rgba(230,43,43,.15); color: #ff7b7b; }
.mc-dev select { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .mc-chev { font-size: 22px; color: #c7d0dc; }
.mc-col { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.mc-meter { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 26px; } .mc-meter i { border-radius: 3px; background: #1d2835; }
.mc-meter i.g { background: #22c55e; } .mc-meter i.y { background: #e5c43a; } .mc-meter i.r { background: #ef4444; }
.mc-scale { display: flex; justify-content: space-between; margin: 6px 0 14px; font-size: 12.5px; color: #8b98a8; }
.mc-diag { margin: -6px 0 12px; font-size: 12px; color: #8b98a8; font-variant-numeric: tabular-nums; } .mc-diag.warn { color: #f3c24f; } .mc-diag.bad { color: #ff6b6b; }
.mc-gain { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 12px; background: #0f1923; border: 1px solid #1f2b39; color: #dfe6ee; font-size: 14px; }
.mc-gain input { flex: 1; accent-color: #f3c24f; } .mc-gain output, .mc-line output { min-width: 64px; padding: 6px 10px; border-radius: 8px; border: 1px solid #2a3442; text-align: center; font-size: 13.5px; color: #fff; }
.mc-btn.auto { height: auto; padding: 12px 16px; text-align: left; } .mc-btn.auto span { display: flex; flex-direction: column; } .mc-btn.auto small { font-size: 11.5px; color: #93a1b3; font-weight: 500; }
.mc-mon { display: flex; flex-direction: column; gap: 12px; } .mc-line { display: flex; align-items: center; gap: 12px; color: #dfe6ee; font-size: 14px; } .mc-line > span, .mc-line > b { flex: 1; } .mc-line input { flex: 1; accent-color: #f3c24f; }
.mc-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid #2a3442; background: #0f1923; color: #dfe6ee; } .mc-opt span { flex: 1; display: flex; flex-direction: column; } .mc-opt small { font-size: 12px; color: #93a1b3; }
.mc-tg { position: relative; flex: none; width: 46px !important; height: 26px; padding: 0; border-radius: 13px; border: 0; background: #2a3442; } .mc-tg i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.mc-tg.on { background: #f3c24f; } .mc-tg.on i { left: 23px; }
.mc-fx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .mc-fxc { padding: 14px; border-radius: 12px; border: 1px solid #2a3442; background: #0f1923; } .mc-fxc .mc-line b { font-size: 13.5px; } .mc-fxc small { display: block; margin-top: 8px; font-size: 12px; color: #93a1b3; }
.mc-start { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .mc-go { padding: 12px 22px; border-radius: 12px; font-weight: 700; }
/* colonne de droite (page Micro) */
.mc-only { display: none; } body[data-page="audio"] .mc-only { display: block; }
body[data-page="audio"] #goLiveCard, body[data-page="audio"] #recCard, body[data-page="audio"] #mixMiniCard, body[data-page="audio"] #qaCard, body[data-page="audio"] .rc-actions { display: none !important; }
.mc-only .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; color: #fff; }
.mc-state { display: flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 99px; background: #101a25; font-size: 12.5px; color: #9aa8b8; } .mc-state i { width: 9px; height: 9px; border-radius: 50%; background: #6b7a8c; } .mc-state.on i { background: #27c76f; } .mc-state.on { color: #dfe6ee; }
.mc-ring { --lv: 0; position: relative; display: flex; align-items: center; justify-content: center; margin: 14px auto 6px; width: 170px; height: 170px; }
.mc-ring b { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; border: 4px solid #27c76f; background: radial-gradient(circle, #13212e, #0b131c); box-shadow: 0 0 calc(10px + var(--lv) * 40px) rgba(39,199,111, calc(.25 + var(--lv) * .5)); transform: scale(calc(1 + var(--lv) * .05)); transition: box-shadow .08s, transform .08s; }
.mc-ring b svg { width: 60px; height: 60px; color: #dfe6ee; }
.mc-w { position: absolute; top: 50%; width: 22px; height: calc(30px + var(--lv) * 50px); transform: translateY(-50%); border: 3px solid #27c76f; border-radius: 50%; opacity: calc(.2 + var(--lv)); }
.mc-w.l { left: -14px; border-right: 0; border-top-color: transparent; border-bottom-color: transparent; } .mc-w.r { right: -14px; border-left: 0; border-top-color: transparent; border-bottom-color: transparent; }
.mc-msg { margin: 6px 0 12px; text-align: center; color: #3ddc84; font-size: 14px; }
.mc-stats { padding: 12px 16px; border-radius: 12px; border: 1px solid #1f2b39; background: #0f1923; } .mc-stats div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; color: #c7d0dc; } .mc-stats div:first-child b { color: #3ddc84; } .mc-stats b { color: #fff; }
.mc-q { margin: 10px 0 0; font-size: 14px; font-weight: 600; } .mc-q.ok { color: #3ddc84; } .mc-q.warn { color: #f3c24f; } .mc-q.bad { color: #ff6b6b; } .mc-q::before { content: "● "; }
.mc-mixr { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: #dfe6ee; } .mc-mixr input { flex: 1; accent-color: #f3c24f; } .mc-mixr svg { width: 26px; height: 26px; }
.mc-mixl { display: flex; justify-content: space-between; font-size: 13px; color: #c7d0dc; margin-top: 4px; } .mc-mixl output { color: #fff; }
.mc-key { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid #2a3442; background: #0f1923; }
.mc-key kbd { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: #1b2633; border: 1px solid #33445a; font-size: 22px; font-weight: 800; color: #fff; font-family: inherit; }
.mc-key span { display: flex; flex-direction: column; } .mc-key b { color: #fff; } .mc-key small { color: #93a1b3; font-size: 12.5px; }
@media (max-width: 1500px) { .mc-row { grid-template-columns: minmax(0, 1fr); } .mc-fx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mc-head .mc-btn { width: auto !important; flex: none; }
/* ===== Page Caméra (modèle) ===== */
.cm { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.cm-ico svg { width: 54px; height: 54px; fill: none; stroke: #f3c24f; stroke-width: 2; stroke-linejoin: round; }
.cm-view { position: relative; } .cm-slot { width: 100%; min-height: 300px; }
.cm-grid { position: absolute; inset: 10px; z-index: 31; pointer-events: none; background: linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(255,255,255,.45) 33.33%, transparent calc(33.33% + 1px), transparent calc(66.66% - 1px), rgba(255,255,255,.45) 66.66%, transparent calc(66.66% + 1px)), linear-gradient(transparent calc(33.33% - 1px), rgba(255,255,255,.45) 33.33%, transparent calc(33.33% + 1px), transparent calc(66.66% - 1px), rgba(255,255,255,.45) 66.66%, transparent calc(66.66% + 1px)); }
body[data-page="camera"] #pgmCard.docked { z-index: 30; }
body[data-page="camera"] .rc-pgmh { display: none; }
.cm-shots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cm-shot { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 9px; border-radius: 12px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 13px; }
.cm-shot i { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 8px; background-color: #1b2633; background-repeat: no-repeat; font-style: normal; font-size: 30px; color: #c7d0dc; }
.cm-shot.sel { border-color: #f3c24f; box-shadow: 0 0 0 1px #f3c24f inset; } .cm-add i { border: 1.5px dashed #33445a; background: transparent; }
.cm-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cm-q { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 12px; border: 1px solid #2a3442; background: #0f1923; color: #e6ebf1; font-size: 13.5px; }
.cm-q svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; } .cm-q.on { border-color: #f3c24f; color: #f3c24f; }
.cm-msg { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: #93a1b3; }
.cm-only { display: none; } body[data-page="camera"] .cm-only { display: block; }
body[data-page="camera"] #goLiveCard, body[data-page="camera"] #recCard, body[data-page="camera"] #mixMiniCard, body[data-page="camera"] #qaCard, body[data-page="camera"] .rc-actions { display: none !important; }
.cm-only .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; color: #fff; }
.cm-src { display: flex; gap: 8px; } .cm-src select { flex: 1; }
.cm-set { display: flex; flex-direction: column; gap: 10px; }
.cm-row, .cm-sl { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; font-size: 14px; color: #dfe6ee; }
.cm-row .mc-tg { justify-self: end; } .cm-sl { grid-template-columns: 150px 1fr 52px; } .cm-sl input { accent-color: #f3c24f; } .cm-sl output { text-align: right; color: #fff; font-size: 13px; }
.ds-key { background: linear-gradient(135deg, #2fbf4a, #1d8a33) !important; }
.cm-key-h { margin-top: 0; }
.cm-phone { width: 100%; margin-top: 10px; padding: 11px; border-radius: 12px; border: 1px dashed #3a4a63; background: #0f1923; color: #e6ebf1; font-weight: 700; font-size: 14px; }
.cm-phone:hover { border-color: #f3c24f; color: #f3c24f; }
.cm-keycard { margin: 0 0 16px; padding: 12px; border-radius: 14px; border: 1px solid rgba(47,191,74,.35); background: linear-gradient(180deg, rgba(47,191,74,.10), rgba(47,191,74,.02)); }
.cm-keycard.on { border-color: #2fbf4a; box-shadow: 0 0 0 1px rgba(47,191,74,.35) inset; }
.cm-keydot { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; background: #2fbf4a; vertical-align: -1px; }
.cm-q[data-q="key"].on { border-color: #2fbf4a; color: #fff; }
.cm-keyc { display: flex; } .cm-keyc button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; } .cm-keyc i { width: 12px; height: 12px; border-radius: 50%; }
.cm-keybg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cm-keybg button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #c6ced8; font-size: 11.5px; min-width: 0; }
.cm-keybg i { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; border: 2px solid transparent; }
.cm-keyimg { display: flex !important; align-items: center; justify-content: center; font-size: 20px; background: #1a2230 center / cover no-repeat; }
.cm-keybg button.sel i { border-color: #f3c24f; } .cm-keybg button.sel { color: #fff; font-weight: 700; }
.cm-keybg span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-tip { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #8d9aab; }
.cm-reset { width: 100%; margin-top: 14px; padding: 12px; border-radius: 12px; border: 1px solid #2a3442; background: #0f1923; color: #e6ebf1; font-weight: 600; }
@media (max-width: 1500px) { .cm-shots, .cm-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.side [data-pillar="camera"] { --pc: #38bdf8; }
/* page Micro : plus de « Type de son » ; le mixeur complet seulement sur « Paramètres avancés » */
body[data-page="audio"]:not(.mx-full) #audioCard { display: none; }
/* mixeur simple : une ligne par source */
.mx2 { display: flex; flex-direction: column; gap: 8px; }
.mx2-r { display: grid; grid-template-columns: 34px minmax(120px, 1.2fr) minmax(80px, 1fr) minmax(120px, 1.4fr) 56px 40px 40px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid #1f2b39; background: #0f1923; }
.mx2-r.out { border-color: rgba(243,194,79,.35); background: rgba(243,194,79,.05); }
.mx2-r.muted .mx2-n, .mx2-r.muted .mx2-v { opacity: .45; }
.mx2-i svg { width: 22px; height: 22px; color: #dfe6ee; } .mx2-n { display: flex; flex-direction: column; min-width: 0; } .mx2-n b { color: #fff; font-size: 14px; } .mx2-n small { color: #8b98a8; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx2-m { height: 10px; border-radius: 5px; background: #1b2633; overflow: hidden; } .mx2-m i { display: block; height: 100%; width: 0; background: #22c55e; transition: width .06s linear; } .mx2-m i.y { background: #e5c43a; } .mx2-m i.r { background: #ef4444; }
.mx2-v { accent-color: #f3c24f; } .mx2-r output { font-size: 13px; color: #fff; text-align: right; }
.mx2-b { width: 40px !important; height: 34px; padding: 0; border-radius: 9px; border: 1px solid #2a3442; background: #101a25; color: #dfe6ee; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mx2-b svg { width: 18px; height: 18px; } .mx2-b.on { background: #f3c24f; color: #1a1205; border-color: #f3c24f; } .mx2-b[data-mxm].on { background: #e62b2b; border-color: #e62b2b; color: #fff; }
.mx2-smart { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.mx2-smart .mc-btn { height: auto; padding: 12px 16px; text-align: left; } .mx2-smart .mc-btn span { display: flex; flex-direction: column; } .mx2-smart .mc-btn small { font-size: 11.5px; color: #93a1b3; font-weight: 500; }
.mc-btn.on { border-color: #f3c24f; color: #f3c24f; }
@media (max-width: 1500px) { .mx2-r { grid-template-columns: 30px 1fr 1fr 48px 36px 36px; } .mx2-m { display: none; } .mx2-smart { grid-template-columns: 1fr; } }
/* ===== Page Téléprompteur (modèle) ===== */
body[data-page="prompter"] .page[data-page="prompter"] { flex-direction: column; gap: 14px; }
.pr-ico svg { width: 54px; height: 54px; fill: none; stroke: #f3c24f; stroke-width: 1.8; stroke-linejoin: round; } .pr-head .mc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pr-head .mc-btn { width: auto !important; flex: none; }
.pr-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0; min-height: 560px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); background: #0b131c; }
body.pr-top .pr-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
body.pr-textonly .pr-main { grid-template-columns: minmax(0, 1fr); } body.pr-textonly .pr-cam { display: none; }
.pr-cam { position: relative; background: #000; } .pr-slot { width: 100%; }
.pr-live { position: absolute; left: 14px; top: 14px; z-index: 32; padding: 6px 12px; border-radius: 8px; background: rgba(0,0,0,.6); color: #3ddc84; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.pr-text { display: flex; flex-direction: column; min-width: 0; background: #0b131c; }
.pr-top .scriptrow, #prTop .scriptrow { display: flex; gap: 8px; padding: 12px; margin: 0; border-bottom: 1px solid #1a2532; }
#prTop .scriptrow select { flex: 1; min-width: 0; } #prTop .scriptrow button { width: auto; }
.pr-text #scriptCard { flex: 1; display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; background: transparent; padding: 0; }
.pr-text #scriptCard > .card-h { display: none; } .pr-text #prompter { border-radius: 0; min-height: 480px; }
body[data-page="prompter"] #promptCtl { display: none; }
#prompter.th-light { background: #f6f7f9; } #prompter.th-light #text { color: #10151c; } #prompter.th-contrast { background: #000; } #prompter.th-contrast #text { color: #ffef5a; }
#prompter.th-light #fade-top, #prompter.th-light #fade-bot { display: none; }
#prompter.g-none #marker { display: none; } #prompter.g-line #marker { border-top: 2px solid rgba(243,194,79,.75); }
#prompter.g-zone #marker { height: calc(var(--zh, 1.5em)); border: 0; background: rgba(243,194,79,.18); border-top: 2px solid rgba(243,194,79,.5); border-bottom: 2px solid rgba(243,194,79,.25); transform: translateY(-20%); min-height: 64px; }
#prompter.black #scroll, #prompter.black #marker { visibility: hidden; }
.pr-bar { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line2); background: linear-gradient(180deg, #0e1822, #0b131c); }
.pr-btns { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pr-btns button { width: auto !important; height: 52px; padding: 0 18px; border-radius: 12px; }
.pr-btns #play { height: 72px; min-width: 72px; border-radius: 50%; background: #f3c24f; color: #1a1205; font-size: 0; position: relative; }
.pr-btns #play::before { content: "▶"; font-size: 28px; } body:has(#play) .pr-btns #play.pausing::before { content: "❚❚"; }
.pr-btns #restart { margin-right: auto; } .pr-btns #prHide { margin-left: auto; }
.pr-speed { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 12px; } .pr-speed .mc-btn { width: 46px !important; padding: 0; justify-content: center; font-size: 22px; }
#prSpeedBox { display: flex; flex-direction: column; align-items: center; gap: 4px; } #prSpeedBox input { width: 100%; accent-color: #f3c24f; } #prSpeedBox output { font-size: 13px; color: #dfe6ee; }
body.pr-ctl-hidden .pr-bar .pr-speed, body.pr-ctl-hidden .pr-btns > :not(#play):not(#prHide) { display: none; }
.pr-only { display: none; } body[data-page="prompter"] .pr-only { display: block; }
body[data-page="prompter"] #goLiveCard, body[data-page="prompter"] #recCard, body[data-page="prompter"] #mixMiniCard, body[data-page="prompter"] #qaCard, body[data-page="prompter"] .rc-actions { display: none !important; }
body[data-page="prompter"]:not(.pr-textonly) .rc-pgmh { display: none; }
.pr-sec { padding: 12px 0; border-bottom: 1px solid #1a2532; } .pr-sec:last-child { border-bottom: 0; } .pr-sec h3 { margin: 0 0 10px; font-size: 15px; color: #fff; font-weight: 700; }
.pr-inl { display: flex; align-items: center; justify-content: space-between; } .pr-inl h3 { margin: 0; }
.pr-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.pr-seg button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 10px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 12px; }
.pr-seg button i { font-style: normal; font-size: 18px; } .pr-seg button.sel { border-color: #f3c24f; color: #f3c24f; box-shadow: 0 0 0 1px #f3c24f inset; }
.pr-rng { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; } .pr-rng input { accent-color: #f3c24f; } .pr-rng .mc-btn { width: auto !important; height: 38px; padding: 0 12px; }
.pr-val { margin: 4px 0 0; text-align: center; font-size: 13px; color: #c7d0dc; }
.pr-keys { display: grid; grid-template-columns: 74px 1fr; gap: 6px 10px; align-items: center; font-size: 13px; color: #c7d0dc; }
.pr-keys kbd { padding: 4px 6px; border-radius: 6px; background: #1b2633; border: 1px solid #33445a; text-align: center; font-family: inherit; color: #fff; }
#prTop .scriptrow .icon { width: 40px !important; min-width: 40px; height: 40px; padding: 0; } .pr-cam { display: flex; align-items: center; } .pr-cam .pr-slot { align-self: center; }

/* REC + GO LIVE toujours en haut de la page */
.tp-go { display: flex; gap: 8px; flex: none; }
.tp-go button { height: 42px; padding: 0 16px; border-radius: 11px; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; width: auto !important; }
.tp-go .rec { background: #101a25; border: 1px solid #2a3442; color: #fff; }
.tp-go .golive { background: linear-gradient(180deg, #ffd24f, #f3b81f); border: 0; color: #1a1205; }
.tp-go .golive.on { background: linear-gradient(180deg, #f0373b, #c81e22); color: #fff; }
.rc-actions { display: none !important; }
.tp-state { max-width: 520px; }
/* panneau Eklezia One : bouton de connexion à taille normale */
.ekpop { display: flex; flex-direction: column; } .ekpop .ek-signin { flex: none !important; height: 44px !important; min-height: 0 !important; aspect-ratio: auto !important; }
.tp-go.row { margin: 0 !important; width: auto; }
.tp-go button { flex: none !important; min-width: max-content; } .topbar .tp-title { flex: none; } .topbar .tp-state { min-width: 0; flex: 1 1 260px; }
/* ===== Page Musique et sons (modèle) ===== */
body[data-page="music"] .page[data-page="music"] { flex-direction: column; gap: 14px; }
body[data-page="music"] #instCard { display: none !important; }
.mu-ico svg { width: 54px; height: 54px; fill: none; stroke: #f3c24f; stroke-width: 2; } .mu-head .mc-btn { width: auto !important; flex: none; } .mu-head .mc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mu-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 14px; border: 1px solid var(--line2); background: #0b131c; }
.mu-tabs button { height: 46px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: #dfe6ee; font-size: 14.5px; font-weight: 600; }
.mu-tabs button.sel { border-color: #f3c24f; color: #f3c24f; background: rgba(243,194,79,.1); box-shadow: inset 0 -3px 0 #f3c24f; }
.mu-body { display: flex; flex-direction: column; gap: 14px; }
.mu-tools { display: flex; gap: 10px; margin-bottom: 12px; } .mu-search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 44px; border-radius: 12px; border: 1px solid #2a3442; background: #0f1923; color: #93a1b3; } .mu-search input { flex: 1; border: 0; background: transparent; color: #fff; outline: none; }
.mu-head2, .mu-row { display: grid; grid-template-columns: 44px minmax(0, 2fr) minmax(0, 1.2fr) 64px 130px 40px 32px 32px; align-items: center; gap: 10px; }
.mu-head2 { padding: 0 10px 8px; font-size: 13px; color: #8b98a8; } .mu-head2 span:last-child { grid-column: span 3; }
.mu-row { padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; font-size: 14px; color: #dfe6ee; }
.mu-row + .mu-row { border-top-color: #172230; } .mu-row.cur { border-color: #f3c24f; background: rgba(243,194,79,.06); }
.mu-th { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: #fff; font-size: 18px; flex: none; }
.mu-t { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mu-a, .mu-d { color: #a3afbf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-ty { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 0; background: transparent; color: #dfe6ee; font-size: 13.5px; text-align: left; width: auto !important; } .mu-ty i { font-style: normal; }
.mu-p { width: 36px !important; height: 32px; padding: 0; border-radius: 8px; border: 0; background: #e8edf3; color: #0b0f14; font-size: 13px; } .mu-p.on, .mu-row.cur .mu-p { background: #f3c24f; color: #1a1205; }
.mu-more { width: 30px !important; height: 30px; padding: 0; border-radius: 8px; border: 0; background: transparent; color: #93a1b3; }
.mu-empty { padding: 18px; text-align: center; color: #93a1b3; }
.mu-qs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mu-q { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid #2a3442; background: #0f1923; color: #dfe6ee; text-align: left; } .mu-q span:not(.mu-th) { display: flex; flex-direction: column; min-width: 0; } .mu-q b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mu-q small { color: #93a1b3; font-size: 12px; }
.mu-q kbd { position: absolute; right: 8px; bottom: 6px; padding: 1px 7px; border-radius: 5px; background: #1b2633; color: #fff; font-family: inherit; font-size: 12px; }
.mu-add { justify-content: center; flex-direction: column; border-style: dashed; font-size: 26px; } .mu-add span { font-size: 13px !important; }
.mu-in .mu-inst { display: flex; align-items: center; gap: 16px; padding: 16px; margin-bottom: 14px; border-radius: 14px; border: 1px solid #2a3442; background: #0f1923; }
.mu-inst.ok { border-color: rgba(39,199,111,.45); } .mu-ib { font-size: 38px; } .mu-inst div { display: flex; flex-direction: column; gap: 3px; } .mu-inst b { color: #fff; font-size: 16px; } .mu-inst small { color: #a3afbf; } .mu-inst em { font-style: normal; color: #3ddc84; font-weight: 700; font-size: 13px; }
.mu-only { display: none; } body[data-page="music"] .mu-only { display: block; }
body[data-page="music"] #goLiveCard, body[data-page="music"] #recCard, body[data-page="music"] #mixMiniCard, body[data-page="music"] #qaCard { display: none !important; }
.mu-only .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; color: #fff; }
.mu-air { padding: 4px 10px; border-radius: 8px; background: #f3c24f; color: #1a1205; font-size: 12px; font-weight: 800; }
.mu-np { display: flex; gap: 14px; align-items: center; } .mu-art { display: flex; align-items: center; justify-content: center; width: 110px; height: 76px; border-radius: 10px; font-size: 34px; color: #fff; flex: none; }
.mu-np div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .mu-np b { color: #fff; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mu-np small { color: #a3afbf; } .mu-tm { align-self: flex-end; font-size: 12.5px; color: #c7d0dc; }
.mu-bar { height: 5px; margin: 12px 0; border-radius: 3px; background: #1b2633; overflow: hidden; } .mu-bar i { display: block; height: 100%; background: #f3c24f; }
.mu-ctl { display: flex; align-items: center; gap: 10px; } .mu-ctl > button { width: 40px !important; height: 40px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: #fff; font-size: 18px; }
.mu-ctl .mu-big { width: 54px !important; height: 54px; border: 2px solid #3b82f6; background: #0f1923; } .mu-vol { display: flex; align-items: center; gap: 8px; flex: 1; } .mu-vol input { flex: 1; accent-color: #f3c24f; } .mu-vol output { font-size: 12.5px; color: #fff; }
.mu-tg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mu-tg3 button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 12px; } .mu-tg3 button.sel { border-color: #f3c24f; color: #f3c24f; }
.mu-eqh { margin-top: 10px; } .mu-eq { width: 100%; height: 90px; margin-top: 8px; border-radius: 8px; background: linear-gradient(180deg, rgba(139,92,246,.08), rgba(14,165,233,.08)); } .mu-eq path { fill: none; stroke: #f3c24f; stroke-width: 2.5; }
@media (max-width: 1500px) { .mu-head2, .mu-row { grid-template-columns: 40px minmax(0, 2fr) 56px 110px 36px 28px 28px; } .mu-a, .mu-head2 span:nth-child(3) { display: none; } .mu-qs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mu-ctl .mu-big { flex: none; width: 54px !important; height: 54px !important; border-radius: 50% !important; } .mu-ctl > button { flex: none; }
body.inst-ui[data-page="music"] #instCard { display: block !important; }  /* tests du moteur MIDI seulement : la carte est retirée de l'interface (demande du user) */
.mu-add small { font-size: 11px !important; color: #93a1b3; text-align: center; } .drag-on { outline: 2px dashed #f3c24f !important; outline-offset: 3px; background: rgba(243,194,79,.08) !important; } .mu-row[draggable] { cursor: grab; }
/* ===== Page Enregistrement & montage (modèle) ===== */
body[data-page="record"] .page[data-page="record"] { display: flex; flex-direction: column; gap: 14px; }
.rp-ico svg { width: 54px; height: 54px; fill: none; stroke: #f3c24f; stroke-width: 2; stroke-linejoin: round; }
.rp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: stretch; }
.rp-ctl svg, .rp-tools svg, .rp-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.rp-ctl .mc-btn { width: auto !important; height: 40px; }
.rp-main { display: flex; align-items: center; gap: 18px; margin: 10px 0 16px; }
.rp-rec { display: flex; align-items: center; gap: 12px; width: auto !important; height: 70px; padding: 0 22px; border-radius: 14px; border: 1px solid #2a3442; background: #101a25; color: #ff4d4f; font-size: 26px; font-weight: 800; }
.rp-rec i { width: 30px; height: 30px; border-radius: 50%; background: #ef4444; } .rp-rec.on { background: rgba(239,68,68,.15); border-color: #ef4444; } .rp-rec.on i { border-radius: 6px; animation: stallBlink 1s steps(2) infinite; }
.rp-time { font-size: 36px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } .rp-main small { color: #a3afbf; font-size: 13px; }
.rp-btns { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 14px; align-items: center; padding-top: 14px; border-top: 1px solid #1a2532; }
.rp-b { display: flex; flex-direction: column; align-items: center; gap: 6px; width: auto !important; padding: 0; border: 0; background: transparent; color: #dfe6ee; font-size: 13px; }
.rp-b svg { width: 52px; height: 52px; padding: 13px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #33445a; background: #0f1923; } .rp-b.gold svg { background: #f3c24f; color: #1a1205; border-color: #f3c24f; } .rp-b:disabled { opacity: .4; }
.rp-lv { display: flex; flex-direction: column; gap: 8px; justify-self: end; } .rp-seg { display: grid; grid-template-columns: repeat(12, 12px); gap: 3px; height: 18px; } .rp-seg i { border-radius: 2px; background: #1d2835; } .rp-seg i.g { background: #22c55e; } .rp-seg i.y { background: #e5c43a; } .rp-seg i.r { background: #ef4444; } .rp-lv small { color: #c7d0dc; font-size: 12.5px; }
.rp-view { position: relative; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line2); } .rp-slot { width: 100%; min-height: 240px; }
.rp-badge { position: absolute; left: 14px; top: 14px; z-index: 32; padding: 6px 12px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 800; } .rp-badge.on { background: #ef4444; }
.rp-lanes canvas { width: 100%; height: 300px; border-radius: 10px; display: block; }
.rp-only { display: none; } body[data-page="record"] .rp-only { display: block; }
body[data-page="record"] #goLiveCard, body[data-page="record"] #recCard, body[data-page="record"] #mixMiniCard, body[data-page="record"] #qaCard { display: none !important; }
body[data-page="record"] .rc-pgmh { display: none; }
.rp-only .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; color: #fff; } .rp-h2 { margin-top: 14px; }
.rp-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.rp-tools button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; border: 1px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 12.5px; }
.rp-go { height: 54px; margin-top: 14px; } .rp-go b { font-size: 17px !important; }
@media (max-width: 1500px) { .rp-top { grid-template-columns: minmax(0, 1fr); } }
.rp-ctl .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; color: #fff; }
/* ===== Page Diffusion en direct (modèle) ===== */
.lv { display: flex; flex-direction: column; gap: 14px; width: 100%; }
body[data-page="live"]:not(.lv-adv) .page[data-page="live"] > :not(.lv) { display: none !important; }
.lv-ico svg { width: 54px; height: 54px; fill: none; stroke: #f3c24f; stroke-width: 2; stroke-linecap: round; }
.lv .mc-head .mc-btn { width: auto !important; flex: none; } .lv .mc-head .mc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lv-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.lv-view { position: relative; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line2); } .lv-slot { width: 100%; min-height: 240px; }
.lv-badge { position: absolute; left: 14px; top: 14px; z-index: 32; padding: 6px 12px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 800; } .lv-badge.on { background: #e62b2b; }
.lv-res { position: absolute; right: 14px; top: 14px; z-index: 32; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12.5px; font-weight: 700; }
.lv-p { display: grid; grid-template-columns: 40px 110px minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #172230; }
.lv-logo { width: 38px !important; height: 38px !important; font-size: 16px !important; border-radius: 9px !important; } .lv-pn { display: flex; flex-direction: column; } .lv-pn b { color: #fff; font-size: 14px; } .lv-pn small { display: flex; align-items: center; gap: 6px; color: #8b98a8; font-size: 12px; } .lv-pn small i { width: 7px; height: 7px; border-radius: 50%; background: #5d6b7c; }
.lv-p.ok .lv-pn small { color: #3ddc84; } .lv-p.ok .lv-pn small i { background: #27c76f; } .lv-p.live .lv-pn small { color: #ff6b6b; } .lv-p.live .lv-pn small i { background: #ff3b3b; }
.lv-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lv-t small { font-size: 11px; color: #6f7f92; } .lv-t input { height: 32px; font-size: 12.5px; } .lv-key { font-size: 12px; color: #93a1b3; }
.lv-conn { height: 34px !important; width: auto !important; font-size: 12.5px !important; } .lv-on { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #c7d0dc; white-space: nowrap; }
.lv-gear { width: 32px !important; height: 32px; padding: 0; border-radius: 8px; border: 0; background: transparent; color: #c7d0dc; font-size: 18px; }
.lv-add { display: flex; gap: 8px; margin-top: 12px; } .lv-add .mc-btn { flex: 1; justify-content: center; width: auto !important; }
.lv-scenes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.lv-sc { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 9px; border-radius: 12px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 12.5px; } .lv-sc.sel { border-color: #f3c24f; box-shadow: 0 0 0 1px #f3c24f inset; }
.lv-th { display: block; aspect-ratio: 16 / 9; border-radius: 8px; background: linear-gradient(160deg, #4a6aa8, #1b2a4f); position: relative; } .lv-th-screen { background: linear-gradient(160deg, #eef1f6, #c9d1dd); } .lv-th-media { background: linear-gradient(160deg, #8a6326, #2a1d0c); }
.lv-th-screencam { background: linear-gradient(160deg, #eef1f6, #c9d1dd); } .lv-th-screencam::after { content: ""; position: absolute; right: 8%; bottom: 10%; width: 32%; height: 38%; border-radius: 3px; background: #4a6aa8; border: 1.5px solid #fff; }
.lv-th-twocams { background: linear-gradient(90deg, #4a6aa8 0 49%, #0b0f14 49% 51%, #6a5aa8 51%); }
.lv-new i { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 8px; border: 1.5px dashed #33445a; font-style: normal; font-size: 26px; }
.lv-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.lv-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lv-tools button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border-radius: 10px; border: 1px solid #2a3442; background: #0f1923; color: #fff; font-size: 13px; text-align: left; } .lv-tools small { color: #8b98a8; font-size: 11.5px; }
.lv-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line2); background: linear-gradient(180deg, #0e1822, #0b131c); }
.lv-bar .mc-btn { width: auto !important; height: 54px; } .lv-go { height: 60px; border-radius: 12px; border: 0; background: linear-gradient(180deg, #f0373b, #c81e22); color: #fff; font-size: 18px; font-weight: 800; } .lv-go.on { background: linear-gradient(180deg, #ff5a5e, #e62b2b); box-shadow: 0 0 24px rgba(230,43,43,.4); }
.lv-both { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #dfe6ee; white-space: nowrap; } .lv-bar .cm-msg { grid-column: 1 / -1; }
.lv-only { display: none; } body[data-page="live"] .lv-only { display: block; }
body[data-page="live"] #goLiveCard, body[data-page="live"] #recCard, body[data-page="live"] #mixMiniCard, body[data-page="live"] #qaCard { display: none !important; }
body[data-page="live"].lv-adv #goLiveCard { display: block !important; }
body[data-page="live"] .rc-pgmh { display: none; }
.lv-only .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; color: #fff; }
.lv-ctabs { display: grid; grid-auto-flow: column; gap: 6px; margin: 8px 0 10px; } .lv-ctabs button { height: 36px; border-radius: 9px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 12.5px; } .lv-ctabs button.sel { border-color: #f3c24f; color: #f3c24f; }
.lv-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; } .lv-m { display: flex; gap: 10px; } .lv-av { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #2a3a52; color: #fff; font-weight: 800; flex: none; }
.lv-m b { color: #8fb4ff; font-size: 13.5px; } .lv-m small { color: #6f7f92; font-size: 11.5px; } .lv-m p { margin: 2px 0 0; color: #e6ebf1; font-size: 13.5px; }
.lv-st { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .lv-st div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 10px; border: 1px solid #2a3442; background: #0f1923; } .lv-st b { color: #fff; font-size: 16px; } .lv-st small { color: #8b98a8; font-size: 11.5px; }
.lv-chart { width: 100%; height: 72px; margin-top: 10px; } .lv-chart polyline { fill: none; stroke: #f3c24f; stroke-width: 2; }
@media (max-width: 1500px) { .lv-top, .lv-row2 { grid-template-columns: minmax(0, 1fr); } .lv-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.lv-p { grid-template-columns: 40px minmax(84px, 0.9fr) minmax(0, 1.4fr) auto 28px; }
.lv-conn { white-space: nowrap; padding: 0 12px !important; justify-self: start; }
.lv-t input { width: 100%; min-width: 0; }

/* direct en difficulté : bandeau rouge visible sur toutes les pages */
.stall-banner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 95; max-width: min(760px, 90vw); padding: 12px 18px; border-radius: 12px; background: #b91c1c; color: #fff; font-weight: 700; font-size: 14px; line-height: 1.4; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.stall-banner[hidden] { display: none; }
.rp-done { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(39,199,111,.4); background: rgba(39,199,111,.07); } .rp-done div { display: flex; flex-direction: column; min-width: 0; } .rp-done b { color: #3ddc84; } .rp-done small { color: #c7d0dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-act { width: auto !important; height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid #2a3442; background: #101a25; color: #fff; font-weight: 700; }
.mu-why { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(243,194,79,.1); border: 1px solid rgba(243,194,79,.4); color: #f6dd9c; font-size: 13px; } .mu-why span { flex: 1; } .mu-why .mini-btn { flex: none; }

/* ===== Page Programme et scènes (modèle du user, 2026-10-14) ===== */
body[data-page="program"] .page[data-page="program"] { display: flex; }
.pg { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.pg-ico svg { width: 54px; height: 54px; fill: none; stroke: #f3c24f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg .mc-head .mc-btn { width: auto !important; flex: none; } .pg-more { padding: 0 14px !important; font-size: 20px !important; }
.pg .mc-btn:disabled { opacity: .45; cursor: default; }
.pg-grid { display: grid; grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.5fr); gap: 14px; align-items: start; }
.pg-mid { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pg-lh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .pg-lh b { color: #fff; font-size: 17px; } .pg-lh #pgCount { color: #93a1b3; font-weight: 600; }
.pg-lh .sp, .pg-row .sp { flex: 1; }
.pg-dot { width: 10px; height: 10px; border-radius: 50%; background: #e62b2b; box-shadow: 0 0 10px rgba(230,43,43,.7); }
.pg-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #2a3442; background: #0f1923; color: #93a1b3; margin-bottom: 12px; }
.pg-search input { flex: 1; height: 38px; border: 0 !important; background: transparent !important; color: #fff; font-size: 14px; outline: none; }
.pg-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 300px); overflow-y: auto; scrollbar-width: thin; }
.pg-sc { display: grid; grid-template-columns: 22px 104px minmax(0, 1fr) 30px; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 12px; border: 1.5px solid #1e2a38; background: #0f1923; cursor: pointer; }
.pg-sc:hover { border-color: #33445a; } .pg-sc.sel { border-color: #f3c24f; box-shadow: 0 0 0 1px #f3c24f inset, 0 0 18px rgba(243,194,79,.18); background: #171a14; }
.pg-sc.pgm .pg-n { color: #f3c24f; } .pg-n { color: #c7d0dc; font-size: 14px; font-weight: 700; text-align: center; }
.pg-nm { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pg-nm b { color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-nm small { display: flex; flex-direction: column; gap: 2px; color: #93a1b3; font-size: 13px; font-variant-numeric: tabular-nums; } .pg-air { font-style: normal; color: #ff6b6b; font-size: 11.5px; font-weight: 700; }
.pg-dots { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #c7d0dc; font-size: 18px; } .pg-dots:hover { background: #1b2735; }
.pg-empty { margin: 8px 0; color: #93a1b3; font-size: 13.5px; }
/* vignettes : mêmes dessins que l'ancienne grille de scènes */
.pg-th { position: relative; aspect-ratio: 16 / 9; border-radius: 7px; background: #0a0e13; overflow: hidden; }
.pg-th b.bg { position: absolute; inset: 0; opacity: .9; }
.pg-th i { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #2c3a4b; border-radius: 3px; font-style: normal; }
.pg-th i em { font-style: normal; font-size: 8px; color: rgba(255,255,255,.75); white-space: nowrap; }
.pg-th i.c1 { background: #45586e; } .pg-th i.c2 { background: #5b4f73; } .pg-th i.scr { background: #2c6e73; } .pg-th i.img { background: #6e5a2c; } .pg-th i.vid { background: #6e2c4c; }
.pg-th i.pipb { box-shadow: 0 0 0 1px rgba(255,255,255,.45); }
.pg-th i.txt { background: none; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .04em; } .pg-th i.txt.cd { color: var(--gold); }
.pg-th i.t { background: none; color: var(--gold); font-size: 10px; font-weight: 700; inset: 0; }
.pg-th i.logo { width: 12%; height: 14%; background: var(--gold); border-radius: 2px; }
.pg-th i.logo.tl { left: 3%; top: 5%; } .pg-th i.logo.tr { right: 3%; top: 5%; } .pg-th i.logo.bl { left: 3%; bottom: 5%; } .pg-th i.logo.br { right: 3%; bottom: 5%; }
.pg-th canvas.lt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; } .pg-th canvas.lt.on { opacity: 1; }
.pg-big { width: 100%; border-radius: 12px; border: 1px solid #2a3442; } .pg-big i.txt { font-size: 15px; } .pg-big i em { font-size: 12px; } .pg-big i.t { font-size: 18px; }
.pg-tag { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 7px; background: #e62b2b; color: #fff; font-size: 11.5px; font-weight: 800; }
/* programme */
.pg-view { position: relative; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line2); }
.pg-time { position: absolute; left: 110px; top: 14px; z-index: 32; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-pbar { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .pg-pn { flex: 1; display: flex; flex-direction: column; min-width: 0; } .pg-pn small { color: #93a1b3; font-size: 12px; } .pg-pn b { color: #fff; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-pbar .mc-btn { width: auto !important; height: 40px; }
/* éditeur */
.pg-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pg-form { display: flex; flex-direction: column; gap: 10px; }
.pg-form label { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 10px; color: #c7d0dc; font-size: 13.5px; }
.pg-form input, .pg-form select { height: 38px; width: 100%; min-width: 0; }
.pg-two { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
.pg-lock { margin: 0; color: #f3c24f; font-size: 12.5px; }
.pg-mini { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #2a3442; background: #101a25; color: #e6ebf1; font-size: 12.5px; white-space: nowrap; }
.pg-mini:disabled { opacity: .45; }
/* sources */
.pg-srcs { display: flex; flex-direction: column; gap: 6px; }
.pg-row { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 8px; border-radius: 10px; border: 1px solid #1e2a38; background: #0f1923; }
.pg-row.off .pg-rn, .pg-row.off .pg-ico { opacity: .4; }
.pg-grip { color: #5d6b7c; cursor: grab; letter-spacing: -2px; font-size: 13px; } .pg-row[draggable="false"] .pg-grip { visibility: hidden; }
.pg-ico { width: 24px; text-align: center; color: #e6ebf1; font-size: 15px; font-weight: 800; } .pg-rn { color: #fff; font-size: 14px; white-space: nowrap; }
.pg-txt { flex: 1; min-width: 80px; height: 32px; font-size: 13px; }
.pg-col { width: 38px; height: 30px; padding: 0; border: 0; background: none; }
.pg-ok { color: #3ddc84; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.pg-ib { width: 34px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #8b98a8; font-size: 15px; } .pg-ib.on { color: #fff; } button.pg-ib:hover { background: #1b2735; } .pg-ib:disabled { opacity: .35; }
.pg-addsrc { height: 36px !important; width: auto !important; font-size: 13px !important; }
.pg-add { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; padding: 10px; border-radius: 12px; border: 1px dashed #33445a; }
.pg-add button { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 9px; border: 1px solid #2a3442; background: #101a25; color: #e6ebf1; font-size: 13px; } .pg-add button:hover { border-color: #f3c24f; }
/* colonne de droite */
.pg-only { display: none; } body[data-page="program"] .pg-only { display: block; }
body[data-page="program"] #goLiveCard, body[data-page="program"] #recCard, body[data-page="program"] #mixMiniCard, body[data-page="program"] #qaCard, body[data-page="program"] .rc-actions { display: none !important; }
body[data-page="program"] .rc-pgmh { display: none; }
.pg-only .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; color: #fff; }
.pg-tr { display: flex; flex-direction: column; gap: 10px; } .pg-tr select { height: 42px; width: 100%; } .pg-tr .sl { margin: 4px 0 -4px; }
.pg-cut { height: 46px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #f6cd5c, #e6ad2a); color: #1a1205; font-size: 15px; font-weight: 800; }
.pg-auto { height: 46px; border-radius: 10px; border: 1px solid #2f4a6e; background: #10203a; color: #fff; font-size: 15px; font-weight: 700; }
.pg-hint { margin: 0; min-height: 16px; color: #f3c24f; font-size: 12.5px; }
.pg-nx { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 8px; margin-bottom: 8px; border-radius: 12px; border: 1.5px solid transparent; background: transparent; color: #dfe6ee; }
.pg-nx .pg-th { width: 100%; } .pg-nx span { font-size: 13.5px; } .pg-nx small { color: #8b98a8; font-size: 12px; }
.pg-nx.now { border-color: #f3c24f; box-shadow: 0 0 16px rgba(243,194,79,.15); } button.pg-nx:not(.now):hover { border-color: #33445a; } .pg-nx.none { opacity: .45; }
@media (max-width: 1400px) { .pg-grid, .pg-ed { grid-template-columns: minmax(0, 1fr); } .pg-list { max-height: 360px; } .pg-add { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ajustements : la colonne de droite est plus étroite ici (transition + suite), la liste et le programme ont la place */
body[data-page="program"] { --rightw: clamp(260px, 19vw, 380px); }
.pg .mc-head { padding: 14px 20px; gap: 14px; } .pg .mc-head h1 { font-size: 26px; white-space: nowrap; } .pg .mc-head p { font-size: 14px; }
.pg .mc-head .mc-btn { height: 42px; padding: 0 14px; gap: 8px; font-size: 13.5px; }
.pg-grid { grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.5fr); }
.pg-sc { grid-template-columns: 20px 96px minmax(0, 1fr) 28px; gap: 10px; }
.pg-ov { position: absolute; left: 12px; top: 12px; z-index: 32; display: flex; gap: 8px; pointer-events: none; }
.pg-badge, .pg-ov .pg-time { position: static; padding: 6px 11px; border-radius: 8px; background: rgba(0,0,0,.65); color: #fff; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pg-badge.on { background: #e62b2b; }
.pg-ed { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .pg-form label { grid-template-columns: 112px minmax(0, 1fr); font-size: 13px; }
.pg-two { grid-template-columns: minmax(0, 1fr) 84px; }
.pg-nx .pg-th { max-width: 260px; } .pg-nx { padding: 6px; margin-bottom: 4px; }
@media (max-width: 1400px) { .pg-grid { grid-template-columns: minmax(0, 1fr); } }
.pg-ico { flex: none; width: 54px; height: 54px; display: flex; } .pg-form label { grid-template-columns: 122px minmax(0, 1fr); }
.side [data-pillar="program"] { --pc: #f3c24f; } .side [data-pillar="program"] svg { fill: none !important; stroke: var(--pc); }

/* ===== Page Annonces et paroles = contenu à l'écran (modèle du user, 2026-10-14) ===== */
body[data-page="onscreen"] .page[data-page="onscreen"] { display: flex; }
body[data-page="onscreen"] { --rightw: clamp(300px, 22vw, 420px); }
.side [data-pillar="onscreen"] { --pc: #63d7ef; } .side [data-pillar="onscreen"] svg { fill: none !important; stroke: var(--pc); }
.os-only { display: none; } body[data-page="onscreen"] .os-only { display: block; }
body[data-page="onscreen"] #goLiveCard, body[data-page="onscreen"] #recCard, body[data-page="onscreen"] #mixMiniCard, body[data-page="onscreen"] #qaCard, body[data-page="onscreen"] .rc-actions, body[data-page="onscreen"] .rc-pgmh, body[data-page="onscreen"] #rcPgmSlot { display: none !important; }
.os-only .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; color: #fff; }
.os-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.os-tab { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 11px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 14px; font-weight: 600; }
.os-tab i { font-style: normal; color: #93a1b3; } .os-tab.sel { border-color: #f3c24f; color: #f3c24f; background: #1c1a10; box-shadow: 0 0 16px rgba(243,194,79,.15); } .os-tab.sel i { color: #f3c24f; }
.os-grid { display: grid; grid-template-columns: minmax(270px, 0.62fr) minmax(0, 1.55fr); gap: 14px; align-items: start; }
.os-mid { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.os-left { display: flex; flex-direction: column; }
.os-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 380px); min-height: 120px; overflow-y: auto; scrollbar-width: thin; }
.os-it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; border: 1.5px solid #1e2a38; background: #0f1923; cursor: pointer; }
.os-it:hover { border-color: #33445a; } .os-it.sel { border-color: #f3c24f; box-shadow: 0 0 0 1px #f3c24f inset; background: #171a14; }
.os-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9px; background: linear-gradient(140deg, #3b4f86, #1b2440); color: #fff; font-size: 18px; font-weight: 800; }
.os-it.air .os-ic { background: linear-gradient(140deg, #e64b2b, #7a1d12); }
.os-nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .os-nm b { color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .os-nm small { color: #93a1b3; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-live { font-style: normal; color: #ff6b6b; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.os-addl { margin-top: 12px; width: 100% !important; justify-content: center; height: 50px !important; }
.os-view { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line2); }
.os-view img, .os-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .os-view img:not([src]), .os-view img[src=""] { visibility: hidden; }
.os-slides { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 8px; align-items: center; margin-top: 12px; }
.os-nav { height: 54px; border-radius: 10px; border: 1px solid #2a3442; background: #101a25; color: #fff; font-size: 15px; }
.os-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.os-sl { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 150px; height: 54px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 12px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.os-sl i { font-style: normal; color: #93a1b3; font-size: 11px; font-weight: 800; } .os-sl.sel { border-color: #f3c24f; } .os-sl.air { background: #3a1612; border-color: #ff6b6b; } .os-sl.air i { color: #ff6b6b; }
.os-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .os-act .mc-btn { width: auto !important; height: 50px; }
.os-go { flex: 1; min-width: 220px; height: 50px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #f6cd5c, #e6ad2a); color: #1a1205; font-size: 16px; font-weight: 800; }
.os-go.on { background: linear-gradient(180deg, #f0373b, #c81e22); color: #fff; box-shadow: 0 0 22px rgba(230,43,43,.35); } .os-go:disabled { opacity: .45; }
.os-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .os-cats button { height: 36px; padding: 0 14px; border-radius: 9px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 13px; } .os-cats button.sel { border-color: #f3c24f; color: #f3c24f; }
.os-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.os-tp { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: #dfe6ee; font-size: 13px; }
.os-tp canvas { width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; border: 2px solid #1e2a38; } .os-tp.sel canvas { border-color: #f3c24f; box-shadow: 0 0 16px rgba(243,194,79,.25); } .os-tp.sel span { color: #f3c24f; font-weight: 700; }
.os-set { display: flex; flex-direction: column; gap: 12px; }
.os-set label { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; color: #c7d0dc; font-size: 13.5px; }
.os-set label:has(input[type=color], .os-sw, b) { grid-template-columns: 92px auto auto minmax(0, 1fr) auto; }
.os-set select { height: 38px; width: 100%; } .os-set input[type=range] { width: 100%; min-width: 60px; accent-color: #f3c24f; } .os-set b { color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.os-set input[type=color] { width: 36px; height: 28px; padding: 0; border: 1px solid #2a3442; border-radius: 7px; background: none; }
.os-lbl { color: #93a1b3; font-size: 12px; } .os-note { color: #93a1b3; font-size: 12px; grid-column: 3 / -1; }
.os-sw { position: relative; display: inline-block; width: 44px; height: 24px; } .os-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.os-sw i { position: absolute; inset: 0; border-radius: 12px; background: #2a3442; transition: background .15s; } .os-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.os-sw input:checked + i { background: #f3c24f; } .os-sw input:checked + i::after { left: 23px; }
.os-al { display: flex; gap: 6px; } .os-al button { width: 42px; height: 36px; border-radius: 8px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; font-size: 16px; } .os-al button.sel { border-color: #f3c24f; color: #f3c24f; }
.os-reset { align-self: flex-start; }
.os-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .os-quick button { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid #2a3442; background: #101a25; color: #e6ebf1; font-size: 13px; text-align: left; } .os-quick button:hover { border-color: #f3c24f; }
.os-cd { display: flex; flex-direction: column; gap: 10px; } .os-cd input { height: 40px; }
.os-mins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .os-mins button { height: 42px; border-radius: 9px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; } .os-mins button.sel { border-color: #f3c24f; color: #f3c24f; }
.os-cdl { margin: 6px 0 0; color: #ff6b6b; font-size: 14px; } .os-cdl b { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
#osModal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); } #osModal[hidden] { display: none; }
.os-mbox { width: min(640px, 92vw); display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 16px; border: 1px solid #2a3442; background: #0e1822; }
.os-mbox h3 { margin: 0 0 4px; color: #fff; font-size: 18px; } .os-mbox input { height: 42px; } .os-mbox textarea { min-height: 120px; font-size: 14px; line-height: 1.45; resize: vertical; }
.os-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 10px; border: 1.5px dashed #33445a; color: #93a1b3; font-size: 13px; } .os-drop small { flex-basis: 100%; color: #6f7f92; font-size: 12px; }
.os-mbtn { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } .os-mbtn .mc-btn { width: auto !important; } .os-mbtn .os-go { flex: none; min-width: 160px; }
@media (max-width: 1400px) { .os-grid { grid-template-columns: minmax(0, 1fr); } .os-list { max-height: 320px; } }
/* format du direct dans Programme et scènes */
.pg-fmt .pf { margin: 0; } .pg-fmt .pf-h { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 0; text-transform: none; margin-bottom: 10px; } .pg-fmt .pf-h .step { display: none; }
.os-tab { white-space: nowrap; flex: 1 1 auto; justify-content: center; } .os-addl span { white-space: nowrap; }
.os-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.os-mode { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #2a3442; background: #0f1923; color: #dfe6ee; text-align: left; }
.os-mode span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .os-mode b { font-size: 14.5px; color: #fff; } .os-mode small { font-size: 12px; color: #93a1b3; }
.os-mode.sel { border-color: #f3c24f; background: #1c1a10; box-shadow: 0 0 16px rgba(243,194,79,.15); } .os-mode.sel b { color: #f3c24f; }
.os-mi { flex: none; position: relative; width: 54px; height: 32px; border-radius: 6px; overflow: hidden; }
.os-mi-full { background: linear-gradient(135deg, #3b1d8a, #0b0a2e 60%, #0e5a6e); } .os-mi-full::after { content: ""; position: absolute; left: 12px; right: 12px; top: 11px; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 6px 0 #fff; }
.os-mi-split { background: linear-gradient(135deg, #3b1d8a, #0b0a2e); } .os-mi-split::before { content: ""; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 24px; border-radius: 3px; background: #4a6aa8; } .os-mi-split::after { content: ""; position: absolute; left: 31px; right: 4px; top: 12px; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 5px 0 #fff; }
.os-mi-over { background: linear-gradient(160deg, #4a6aa8, #1b2a4f); } .os-mi-over::after { content: ""; position: absolute; left: 6px; right: 14px; bottom: 5px; height: 7px; border-radius: 2px; background: rgba(0,0,0,.6); border-left: 3px solid #f3c24f; }
.os-decos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.os-dc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #dfe6ee; font-size: 12px; }
.os-dc canvas { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; border: 2px solid #1e2a38; } .os-dc.sel canvas { border-color: #f3c24f; } .os-dc.sel span { color: #f3c24f; font-weight: 700; }
/* « Type de son » retiré de l'écran (demande du user, 14 oct. : « j'ai pas besoin de tout cela ») — le mixeur simple de la page Micro suffit */
#apBox { display: none !important; }
body.ap-ui #apBox { display: block !important; }   /* tests seulement */
.pause-banner { background: linear-gradient(90deg, #6b4a00, #a87400) !important; }
/* éléments de la version mobile (js/mobile.js) : cachés sur ordinateur, montrés par css/mobile.css */
#mNav, #mMore, #mHeadR, #mPgmSlot, #mHome, #pgmCard .m-ov { display: none; }
/* écrans tactiles (tablettes, téléphones, écrans tactiles) : cibles plus grandes, aucun survol nécessaire */
@media (hover: none) and (pointer: coarse) { button, select, .mini-btn { min-height: 38px; } input[type=range] { height: 28px; } }

body[data-page="karaoke"] .page[data-page="karaoke"] { display:flex;flex-direction:column;gap:16px;min-width:0; }
#kaPreview{background:linear-gradient(145deg,#101c34,#050a13);border:1px solid #40516b;border-radius:16px;padding:24px;text-align:center;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:12px;overflow-wrap:anywhere}#kaLine{color:#f3c24f;font-size:clamp(22px,3vw,42px);line-height:1.4;white-space:pre-wrap;margin:0}#kaNext{color:#bccadd;white-space:pre-wrap}#kaClock{font-variant-numeric:tabular-nums;color:#bccadd}