/* =============================================================================
   La régie — stream.noxelstudio.com
   -----------------------------------------------------------------------------
   Le langage du back-office de noxelstudio.com (refonte d'octobre 2026) :
   police système, surfaces sombres, cartes arrondies, aplats plutôt que
   filets, très peu de texte. Demande du 2026-10-17 : la première version, au
   langage de la maquette Noxel Live (surtitres espacés, titres à formule,
   phrases d'explication), « faisait trop IA ».

   Seul le DÉCOR vient de la page musique : le ciel étoilé derrière tout, et
   le trait du direct en tête du volet Direct. Il garde la couleur du morceau
   du soir (--acc) ; l'interface, elle, reste en noir et blanc comme l'admin.
   Les widgets d'OBS ne lisent pas cette feuille.
   ============================================================================= */

:root {
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --bg:#0b0b0a; --surface:#161615; --surface-2:#1c1c1b; --surface-3:#262624;
  --fill:rgba(243,243,241,.065); --fill-2:rgba(243,243,241,.1);
  --line:#262624; --line-strong:#3b3a37;
  --ink:#f3f3f1; --ink-2:#b5b4ae; --dim:#8c8b85;
  --accent-fill:#f3f3f1; --accent-ink:#0b0b0a;
  --danger:#ff5242; --danger-soft:#2a1513; --ok:#4cc28a; --ok-soft:#14261d;
  --r-sm:9px; --r:13px; --r-lg:18px;
  --sh-3:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(243,243,241,.06);
  --ease:cubic-bezier(.2,.9,.15,1); --spring:cubic-bezier(.34,1.3,.5,1);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--bg); color-scheme:dark; }
body { margin:0; min-height:100vh; min-height:100svh; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; appearance:none; background:none; border:0; padding:0; }
input, select, textarea { font:inherit; color:inherit; }
h1, h2, h3, p, ol, ul { margin:0; }
ol, ul { padding:0; list-style:none; }
img { display:block; max-width:100%; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* le décor : le ciel de la page musique, derrière tout */
.ciel { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.85; }

/* ---------- texte ---------- */
.lbl { font-size:12.5px; color:var(--dim); }
.display { font-weight:720; letter-spacing:-.03em; line-height:1; }
.thin { font-weight:300; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.note { font-size:13px; color:var(--dim); line-height:1.5; max-width:70ch; }
.brand { font-weight:650; font-size:15px; letter-spacing:-.01em; }
.head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; padding-top:clamp(4px, 2vh, 18px); }
.head h1 { font-size:32px; font-weight:720; letter-spacing:-.025em; line-height:1.1; }

/* ---------- boutons : des aplats ---------- */
.w-round { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 15px; border-radius:var(--r-sm);
  background:var(--fill); color:var(--ink); font-weight:600; font-size:14px; white-space:nowrap; transition:background .16s, opacity .16s, transform .16s var(--ease); }
.w-round:hover { background:var(--fill-2); }
.w-round:active { transform:scale(.98); }
.w-round.sm { height:32px; padding:0 12px; font-size:13px; border-radius:8px; }
.w-round.plein, .w-round[aria-pressed="true"] { background:var(--accent-fill); color:var(--accent-ink); }
.w-round.plein:hover { opacity:.88; }
.w-round.danger { background:var(--danger-soft); color:var(--danger); }
.w-round[disabled] { opacity:.4; pointer-events:none; }
.w-round.busy { opacity:.5; }
.vu { display:flex; align-items:center; gap:2px; height:12px; }
.vu i { width:2px; height:100%; border-radius:1px; background:currentColor; transform:scaleY(.2); transition:transform .4s var(--ease); }
[aria-pressed="true"] .vu i { animation:rVu 1.1s ease-in-out infinite alternate; }
.vu i:nth-child(2) { animation-duration:.73s; animation-delay:-.3s; } .vu i:nth-child(3) { animation-duration:1.37s; animation-delay:-.8s; }
.vu i:nth-child(4) { animation-duration:.89s; animation-delay:-.5s; } .vu i:nth-child(5) { animation-duration:1.21s; animation-delay:-.1s; }
@keyframes rVu { from { transform:scaleY(.2); } to { transform:scaleY(1); } }
.acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ico { position:relative; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:8px; color:var(--dim); transition:background .16s, color .16s; }
.ico:hover { background:var(--fill); color:var(--ink); }
.ico svg { width:17px; height:17px; }

/* ---------- la porte ---------- */
.porte { position:relative; z-index:1; min-height:100vh; min-height:100svh; display:grid; place-content:center; padding:40px 16px; }
.porte .carte { display:grid; justify-items:center; gap:12px; width:min(380px, 100%); padding:34px 30px 30px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-3); text-align:center; }
.porte img { width:52px; height:auto; border-radius:12px; }
.porte h1 { font-size:24px; font-weight:700; letter-spacing:-.02em; }
.porte p { color:var(--dim); font-size:14px; }
.porte .w-round { width:100%; margin-top:6px; }

/* =============================================================================
   La coque : une barre latérale courte, une colonne
   ============================================================================= */
.app { position:relative; z-index:1; display:grid; grid-template-columns:236px minmax(0, 1fr); min-height:100vh; }
.rail { position:sticky; top:0; height:100dvh; overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; gap:14px; padding:18px 12px 14px;
  background:rgba(11,11,10,.82); backdrop-filter:blur(12px); box-shadow:inset -1px 0 0 var(--line); }
.marque { display:flex; align-items:center; gap:10px; padding:4px 8px 10px; }
.marque img { border-radius:8px; }
.onglets { display:grid; gap:2px; }
.onglets button { display:flex; align-items:center; gap:11px; height:38px; padding:0 10px; border-radius:var(--r-sm); text-align:left;
  font-size:14.5px; color:var(--ink); transition:background .16s; }
.onglets button svg { width:20px; height:20px; color:var(--ink-2); }
.onglets button:hover { background:var(--fill); }
.onglets button[aria-selected="true"] { background:var(--fill-2); }
.onglets button[aria-selected="true"] svg { color:var(--ink); }
.rail-pied { margin-top:auto; display:grid; gap:10px; padding:0 8px; }
/* le compte : une pastille au pied du rail, qui mène au back-office */
.qui { display:flex; align-items:center; gap:10px; min-width:0; padding:7px 10px 7px 7px; margin:0 -8px; border-radius:12px; color:var(--dim); transition:background .16s, color .16s; }
.qui:hover { background:var(--fill); color:var(--ink); }
.qui-av { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; font-size:13px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4);
  background:linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #0b0b0a)); }
.qui-txt { flex:1; display:grid; min-width:0; line-height:1.25; }
.qui-txt b { font-size:12.5px; font-weight:560; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qui-txt small { font-size:11.5px; }
.qui > svg { width:14px; height:14px; opacity:0; transition:opacity .16s; }
.qui:hover > svg { opacity:1; }
/* un lien de widget porte sa clé : toujours flouté, à l'écran comme en partage */
code.flou, code.clair { transition:filter .35s var(--ease); }
code.flou { filter:blur(4.5px); user-select:none; -webkit-user-select:none; cursor:pointer; }
code.clair { user-select:all; -webkit-user-select:all; color:var(--ink); }
/* survolé, il dit qu'un clic le montre */
.tuile-lien, .diffusion-lien { position:relative; }
:is(.tuile-lien, .diffusion-lien):has(code.flou:hover)::after { content:"Cliquer pour afficher"; position:absolute; left:10px; top:50%; translate:0 -50%; height:24px; padding:0 10px;
  display:grid; place-items:center; border-radius:999px; background:rgba(11,11,10,.82); box-shadow:0 0 0 1px var(--line-strong); font-size:12px; font-weight:600; color:var(--ink);
  pointer-events:none; animation:rConfirme .25s var(--spring); }

main { min-width:0; padding:26px clamp(16px, 3.4vw, 48px) 110px; }
.vue { display:grid; gap:22px; max-width:1240px; margin-inline:auto; animation:rVue .35s var(--ease); }
@keyframes rVue { from { opacity:0; transform:translateY(6px); } }

/* =============================================================================
   Direct
   -----------------------------------------------------------------------------
   Le plateau d'abord (en direct ou non, combien regardent, sous quel titre),
   la régie ensuite (les sources, la scène, le bot), puis les chiffres, la
   courbe et l'activité côte à côte, et les directs passés.
   ============================================================================= */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* --- le plateau --- */
.plateau { position:relative; z-index:2; display:grid; gap:34px; padding:22px 26px 26px; min-height:min(42vh, 360px); align-content:space-between; border-radius:28px;
  background:radial-gradient(120% 90% at 85% 110%, rgba(255,255,255,.05), transparent 60%), rgba(18,18,17,.82);
  box-shadow:0 0 0 1px var(--line), 0 40px 90px -40px rgba(0,0,0,.9); transition:box-shadow .6s var(--ease); animation:rgEntre .6s var(--spring) backwards; }
.plateau::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .8s var(--ease);
  background:radial-gradient(80% 70% at 88% 100%, rgba(255,82,66,.16), transparent 65%); }
.plateau.on { box-shadow:0 0 0 1px rgba(255,82,66,.35), 0 40px 90px -40px rgba(0,0,0,.9); }
.plateau.on::before { opacity:1; }
.hero-sig { position:absolute; left:0; width:100%; top:22%; height:50%; pointer-events:none; }
.plateau-haut, .plateau-corps { position:relative; }
.plateau-haut { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.chaine { display:flex; align-items:center; gap:11px; min-width:0; }
.chaine > div { display:grid; min-width:0; line-height:1.3; }
.chaine b { font-size:14.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chaine span { font-size:12.5px; color:var(--dim); }
.chaine-av { display:grid; place-items:center; flex:none; width:38px; height:38px; overflow:hidden; border-radius:50%; background:var(--fill-2); color:var(--ink-2); box-shadow:0 0 0 2px rgba(255,255,255,.08); }
.chaine-av img { width:100%; height:100%; object-fit:cover; }
.chaine-av svg { width:18px; height:18px; }
.plateau.on .chaine-av { box-shadow:0 0 0 2px var(--danger), 0 0 0 5px rgba(255,82,66,.18); }
.statut { display:inline-flex; align-items:center; gap:8px; flex:none; height:32px; padding:0 13px; border-radius:999px; background:var(--fill); font-size:13px; font-weight:650; color:var(--ink-2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.statut i { position:relative; width:8px; height:8px; border-radius:50%; background:var(--dim); }
.statut.on { background:var(--danger); color:#fff; box-shadow:0 8px 24px -8px rgba(255,82,66,.7); }
.statut.on i { background:#fff; }
.statut.on i::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px #fff; animation:rOnde 1.6s var(--ease) infinite; }
@keyframes rRespire { 0%, 100% { opacity:.45 } 50% { opacity:1 } }

.plateau-corps { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:28px; align-items:end; }
.plateau-txt { display:grid; gap:12px; justify-items:start; min-width:0; }
.titre-direct { position:relative; display:flex; align-items:center; width:100%; max-width:860px; margin-left:-12px; border-radius:16px; transition:background .2s, box-shadow .2s; cursor:text; }
.titre-direct input { flex:1; min-width:0; height:58px; padding:0 48px 0 12px; border:0; background:transparent; color:var(--ink);
  font-size:clamp(24px, 3vw, 36px); font-weight:720; letter-spacing:-.03em; text-overflow:ellipsis; text-shadow:0 2px 24px rgba(11,11,10,.8); }
.titre-direct input::placeholder { color:var(--dim); }
.titre-direct input:focus { outline:0; }
.titre-direct > svg { position:absolute; right:16px; width:18px; height:18px; color:var(--dim); opacity:0; transition:opacity .2s; pointer-events:none; }
.titre-direct:hover { background:rgba(255,255,255,.04); }
.titre-direct:hover > svg { opacity:1; }
.titre-direct:focus-within { background:rgba(11,11,10,.55); box-shadow:0 0 0 2px var(--ink); }
.titre-direct:focus-within > svg { opacity:0; }
.titre-direct:has(input:disabled) { pointer-events:none; }
.categorie { position:relative; display:flex; align-items:center; gap:8px; height:36px; padding:0 4px 0 12px; border-radius:999px; background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:box-shadow .2s, background .2s; }
.categorie > svg { width:17px; height:17px; color:var(--ink-2); }
.categorie input { width:260px; max-width:52vw; height:100%; padding:0 10px 0 0; border:0; background:transparent; color:var(--ink); font-size:14px; font-weight:560; }
.categorie input::placeholder { color:var(--dim); }
.categorie input:focus { outline:0; }
.categorie:hover { background:rgba(255,255,255,.1); }
.categorie:focus-within { box-shadow:0 0 0 2px var(--ink); }
.suggest { position:absolute; z-index:5; left:0; min-width:100%; top:44px; padding:4px; border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-3); }
.suggest button { display:flex; align-items:center; gap:10px; width:100%; padding:5px 8px; border-radius:8px; text-align:left; font-size:13.5px; }
.suggest button:hover, .suggest button:focus-visible { background:var(--fill); }
.suggest img { width:26px; height:36px; object-fit:cover; border-radius:4px; }

.viewers { display:grid; justify-items:end; gap:6px; text-align:right; }
.viewers .thin { font-size:clamp(64px, 8.4vw, 116px); font-weight:220; letter-spacing:-.045em; text-shadow:0 2px 30px rgba(11,11,10,.9); transition:color .6s var(--ease); }
.plateau:not(.on) .viewers .thin { color:var(--dim); }
.viewers-lbl { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:560; color:var(--ink-2); }
.viewers-lbl svg { width:16px; height:16px; }
.plateau.on .viewers-lbl svg { color:var(--danger); }

/* --- la régie : quatre tuiles d'état, chacune mène à son volet --- */
.regie { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.regie-t { position:relative; display:flex; align-items:center; gap:12px; min-width:0; padding:13px 14px; border-radius:18px; text-align:left; background:rgba(22,22,21,.92);
  box-shadow:0 0 0 1px var(--line); transition:transform .3s var(--spring), background .2s, box-shadow .3s; animation:rgEntre .6s var(--spring) backwards; }
.regie-t:nth-child(2) { animation-delay:.05s; } .regie-t:nth-child(3) { animation-delay:.1s; } .regie-t:nth-child(4) { animation-delay:.15s; }
.regie-t:hover { transform:translateY(-2px); background:rgba(30,30,28,.95); }
.regie-ic { position:relative; display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:13px; background:var(--fill-2); color:var(--ink-2); transition:background .3s, color .3s; }
.regie-ic svg { width:20px; height:20px; }
.regie-ic i { position:absolute; right:-3px; top:-3px; width:11px; height:11px; border-radius:50%; background:var(--line-strong); box-shadow:0 0 0 3px #161615; }
.regie-txt { flex:1; display:grid; min-width:0; line-height:1.3; }
.regie-txt small { font-size:12px; font-weight:600; color:var(--dim); }
.regie-txt b { font-size:14.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.regie-txt span { font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.regie-go { width:16px; height:16px; color:var(--dim); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .3s var(--spring); }
.regie-t:hover .regie-go { opacity:1; transform:none; }
.regie-t.ok .regie-ic { background:var(--accent-fill); color:var(--accent-ink); }
.regie-t.ok .regie-ic i { background:var(--ok); }
.regie-t.live { box-shadow:0 0 0 1px rgba(255,82,66,.4); }
.regie-t.live .regie-ic { background:var(--danger); color:#fff; }
.regie-t.live .regie-ic i { background:#fff; animation:rRespire 1.6s ease-in-out infinite; }
.regie-t.warn .regie-ic { background:rgba(244,178,62,.16); color:#f4c56e; }
.regie-t.warn .regie-ic i { background:#f4b23e; }
.regie-t.off .regie-txt b { color:var(--ink-2); }

/* --- les chiffres --- */
.kpis { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.kpi { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:6px 10px; align-content:start; align-items:center; padding:15px 16px 14px; min-width:0; border-radius:20px;
  background:rgba(22,22,21,.92); box-shadow:0 0 0 1px var(--line); animation:rgEntre .6s var(--spring) .1s backwards; }
.kpi-ic { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--fill-2); color:var(--ink-2); }
.kpi-ic svg { width:15px; height:15px; stroke-width:1.9; }
.kpi b { grid-column:1 / -1; margin-top:6px; font-size:32px; font-weight:720; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.kpi em { grid-column:1 / -1; font-style:normal; font-size:12.5px; color:var(--dim); min-height:1.2em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi em.plus { color:var(--ok); font-weight:600; }

/* --- la courbe et l'activité --- */
.direct-grille { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:16px; align-items:stretch; }
.direct-grille .rg { align-content:start; }
.direct-grille .rg:first-child { grid-template-rows:auto minmax(280px, 1fr) auto; }
.courbe { position:relative; min-height:280px; margin:0 -4px; }
.courbe canvas { width:100%; height:100%; display:block; }
.courbe-legende { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--dim); }
.courbe-legende span { display:inline-flex; align-items:center; gap:7px; }
.leg-trait { width:16px; height:2px; border-radius:1px; background:var(--ink); box-shadow:0 0 6px rgba(255,255,255,.5); }
.leg-evt { width:2px; height:10px; border-radius:1px; background:rgba(236,230,220,.6); }
.leg-evt.chaud { background:#ffa765; }
.bulle { position:absolute; z-index:2; pointer-events:none; min-width:120px; padding:9px 12px; border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-3);
  font-size:12.5px; line-height:1.5; color:var(--ink-2); white-space:nowrap; transform:translate(-50%, calc(-100% - 14px)); }
.bulle b { display:block; font-size:20px; font-weight:700; color:var(--ink); }
.bulle i { font-style:normal; color:var(--ink); font-weight:600; }
select { height:34px; padding:0 30px 0 11px; border:0; border-radius:var(--r-sm); appearance:none;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238c8b85' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center / 10px;
  box-shadow:0 0 0 1px var(--line); font-size:13.5px; }


/* les filtres : le segment du back-office, avec leur compte */
.filtres { display:flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:12px; background:var(--fill); }
.puce { display:inline-flex; align-items:center; gap:6px; flex:none; height:30px; padding:0 10px; border-radius:9px; font-size:13px; font-weight:560; color:var(--ink-2); transition:background .16s, color .16s; }
.puce svg { width:14px; height:14px; }
.puce em { font-style:normal; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:var(--fill-2); font-size:11px; font-weight:650; font-variant-numeric:tabular-nums; }
.puce:hover { color:var(--ink); }
.puce[aria-checked="true"] { background:var(--surface-3); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.puce[aria-checked="true"] em { background:var(--accent-fill); color:var(--accent-ink); }
.evts { display:grid; gap:4px; align-content:start; max-height:392px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.evt { display:grid; grid-template-columns:36px minmax(0, 1fr) auto auto; gap:12px; align-items:center; padding:9px 10px; border-radius:var(--r); background:var(--fill); }
.evt.neuf { animation:rNeuf 1.4s var(--ease); }
@keyframes rNeuf { from { background:var(--fill-2); transform:translateY(-6px); opacity:0; } 30% { opacity:1; transform:none; } }
.evt-ic { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--accent-fill); color:var(--accent-ink); }
.evt-ic svg { width:18px; height:18px; stroke-width:1.9; }
.evt-txt { display:grid; gap:1px; min-width:0; }
.evt-txt b { font-size:14.5px; font-weight:620; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt-txt span { font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt-txt span em { font-style:normal; font-size:11.5px; font-weight:600; padding:1px 6px; margin-left:6px; border-radius:6px; background:var(--fill-2); color:var(--ink-2); }
.evt time { font-size:12.5px; color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vide { padding:28px 10px; color:var(--dim); font-size:13.5px; text-align:center; }

.evt [data-rejoue] { opacity:0; transition:opacity .16s; }
.evt:hover [data-rejoue], .evt [data-rejoue]:focus-visible { opacity:1; }
.evt.valide { position:relative; }
.evts .vide, .directs .vide { display:grid; justify-items:center; gap:4px; padding:34px 16px; }
.evts .vide svg, .directs .vide svg { width:26px; height:26px; margin-bottom:6px; color:var(--dim); }
.evts .vide b, .directs .vide b { color:var(--ink-2); font-size:14px; font-weight:620; }
.evts .vide span, .directs .vide span { font-size:12.5px; }

/* --- les directs passés : la date en pavé, le pic en barre --- */
.directs { display:grid; gap:4px; }
.direct-l { display:grid; grid-template-columns:46px minmax(0, 1fr) 150px repeat(3, 64px); gap:14px; align-items:center; width:100%; padding:8px 12px 8px 8px; border-radius:14px; text-align:left;
  transition:background .16s, box-shadow .25s; }
.direct-l:hover { background:var(--fill); }
.direct-l.choisi { background:var(--fill-2); box-shadow:inset 0 0 0 1px var(--line-strong); }
.direct-date { display:grid; place-items:center; align-content:center; width:46px; height:46px; border-radius:12px; background:var(--fill-2); line-height:1; }
.direct-date b { font-size:18px; font-weight:720; letter-spacing:-.02em; }
.direct-date small { font-size:10.5px; font-weight:650; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.direct-l.choisi .direct-date { background:var(--accent-fill); color:var(--accent-ink); }
.direct-l.choisi .direct-date small { color:rgba(11,11,10,.55); }
.direct-txt { display:grid; min-width:0; line-height:1.35; }
.direct-txt b { font-size:14.5px; font-weight:620; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.direct-txt span { font-size:12.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.direct-pic { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:6px; align-items:center; font-variant-numeric:tabular-nums; }
.direct-pic i { height:6px; border-radius:3px; background:var(--fill-2); position:relative; overflow:hidden; }
.direct-pic i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--ink-2); transform-origin:left; transform:scaleX(var(--p)); transition:transform .6s var(--ease); }
.direct-l.choisi .direct-pic i::after { background:var(--ink); }
.direct-pic b { font-size:13.5px; font-weight:650; }
.direct-pic small { font-size:11.5px; color:var(--dim); }
.direct-n { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.direct-n svg { width:14px; height:14px; color:var(--dim); }

select { height:34px; padding:0 30px 0 11px; border:0; border-radius:var(--r-sm); appearance:none;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238c8b85' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center / 10px;
  box-shadow:0 0 0 1px var(--line); font-size:13.5px; }


/* ---------- les champs ---------- */
.champs { display:grid; gap:14px; }
.champs--2 { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; }
.champ { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px 12px; align-items:center; }
.champ > span { grid-column:1 / -1; font-size:13px; color:var(--ink-2); font-weight:500; }
.champ:has(output) > span { grid-column:1; }
.champ:has(output) output { grid-column:2; grid-row:1; font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums; }
.champ input[type="text"], .champ input[type="url"], .champ input[type="number"], .champ textarea, .champ select, .minuteurs input, .minuteurs textarea, .merci input[type="text"], .duree input, .dire input {
  grid-column:1 / -1; width:100%; min-height:38px; padding:8px 11px; border:0; border-radius:var(--r-sm); background:var(--surface-2); box-shadow:0 0 0 1px var(--line); color:var(--ink); font-size:14px; }
.champ select { grid-column:1 / -1; height:38px; padding-right:30px; }
.champ input:focus, .champ textarea:focus, .champ select:focus, .minuteurs input:focus, .minuteurs textarea:focus, .merci input:focus, .duree input:focus, .dire input:focus { outline:0; box-shadow:0 0 0 2px var(--ink); }
.champ textarea { resize:vertical; min-height:70px; line-height:1.45; }
input[type="range"] { grid-column:1 / -1; width:100%; height:22px; margin:0; appearance:none; background:none; cursor:pointer; }
input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(90deg, var(--ink) var(--v, 50%), var(--fill-2) 0); }
input[type="range"]::-moz-range-track { height:4px; border-radius:2px; background:var(--fill-2); }
input[type="range"]::-moz-range-progress { height:4px; border-radius:2px; background:var(--ink); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:18px; height:18px; margin-top:-7px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.5); }
input[type="range"]::-moz-range-thumb { width:18px; height:18px; border:0; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.5); }

/* l'interrupteur : celui du back-office */
.bascule { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; align-items:center; cursor:pointer; font-size:14px; color:var(--ink); }
.bascule input { position:absolute; opacity:0; pointer-events:none; }
.bascule small { display:block; font-size:12.5px; color:var(--dim); line-height:1.35; margin-top:1px; }
.sw { position:relative; width:40px; height:24px; border-radius:12px; background:var(--fill-2); transition:background .2s var(--ease); }
.sw::after { content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .3s var(--spring); }
.bascule input:checked + .sw { background:var(--ok); }
.bascule input:checked + .sw::after { transform:translateX(16px); }
.bascule input:focus-visible + .sw { outline:2px solid var(--ink); outline-offset:2px; }

/* =============================================================================
   Alertes — le moniteur et sa console, le pavé d'essais, les sept alertes en
   cartes, la file à droite
   ============================================================================= */
.studio.studio--alertes { grid-template-columns:minmax(0, 1fr) 360px; }
.file { position:sticky; top:20px; }
.options--une { grid-template-columns:minmax(0, 1fr); }
.file .champs { padding:4px 2px 0; }
.file:has([data-c="alertes.son"]:not(:checked)) .champ--volume { opacity:.35; pointer-events:none; }
.champ--volume { transition:opacity .3s var(--ease); }

.pastille-pause { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; font-size:12.5px; font-weight:650;
  background:rgba(244,178,62,.18); color:#f4c56e; box-shadow:inset 0 0 0 1px rgba(244,178,62,.3); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); animation:rConfirme .3s var(--spring); }
.pastille-pause svg { width:12px; height:12px; stroke-width:3; }
.console-son { display:grid; place-items:center; flex:none; width:44px; height:38px; border-radius:11px; background:rgba(255,255,255,.08); color:var(--ink-2); transition:background .16s, color .16s; }
.console-son:hover { background:rgba(255,255,255,.13); }
.console-son[aria-pressed="true"] { background:var(--accent-fill); color:var(--accent-ink); }
.console-son .vu { height:14px; gap:2.5px; }
.console-son .vu i { width:2.5px; }
.console-timer.passe svg { animation:rPasse .45s var(--ease); }
@keyframes rPasse { 40% { transform:translateX(5px); opacity:0; } 41% { transform:translateX(-5px); } }

/* le pavé : une touche par alerte, qui se coche quand l'essai est parti */
.pave { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:8px; }
.touche { position:relative; display:flex; align-items:center; gap:10px; min-height:50px; padding:7px 12px 7px 7px; border-radius:14px; background:var(--fill); font-size:13.5px; font-weight:600;
  color:var(--ink); text-align:left; transition:background .2s, transform .25s var(--spring), box-shadow .3s var(--ease); }
.touche:hover { background:var(--fill-2); transform:translateY(-2px); }
.touche:active { transform:scale(.97); }
.touche > span:nth-child(2) { flex:1; min-width:0; line-height:1.2; }
.touche-ic { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px; background:var(--accent-fill); color:var(--accent-ink); transition:background .25s, color .25s; }
.touche-ic svg { width:17px; height:17px; stroke-width:1.9; }
.touche-ok { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--ok); color:#06120b; opacity:0; transform:scale(.4); transition:opacity .2s, transform .35s var(--spring); }
.touche-ok svg { width:12px; height:12px; stroke-width:3; }
.touche.partie { box-shadow:inset 0 0 0 1.5px var(--ok); animation:rPart2 .5s var(--spring); }
.touche.partie .touche-ic { background:var(--ok); color:#06120b; }
.touche.partie .touche-ok { opacity:1; transform:none; }
.touche.partie .touche-ok svg { stroke-dasharray:24; stroke-dashoffset:24; animation:rTrace .35s var(--ease) .1s forwards; }
@keyframes rPart2 { 30% { transform:scale(.96); } }
.ico.partie { color:var(--ok); background:var(--ok-soft); }

/* les sept alertes : une carte chacune, ouverte pour régler ses textes */
.types { display:grid; gap:8px; }
.type { position:relative; border-radius:16px; background:var(--fill); transition:background .2s, opacity .3s; }
.type:hover, .type.ouvert { background:var(--fill-2); }
.type-head { display:grid; grid-template-columns:36px minmax(0, 1fr) auto auto auto; gap:12px; align-items:center; padding:9px 8px 9px 10px; }
.type-head .bascule { gap:0; }
.type-head > button.ouvre { display:block; min-width:0; text-align:left; cursor:pointer; }
.type-nom { font-size:14.5px; font-weight:640; }
.type-ex { display:block; font-size:12.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.type .evt-ic { transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.type:has(.bascule input:checked) .evt-ic { box-shadow:0 6px 18px -8px rgba(255,255,255,.5); }
.type:has(.bascule input:checked) .evt-ic svg { animation:rAllume .5s var(--spring); }
.type.off .evt-ic { background:var(--fill-2); color:var(--dim); }
.type.off .type-nom { color:var(--ink-2); }
.type-chev { width:16px; height:16px; color:var(--dim); transition:transform .35s var(--spring); }
.type.ouvert .type-chev { transform:rotate(180deg); color:var(--ink); }
.type-corps { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.type.ouvert .type-corps { grid-template-rows:1fr; }
.type-corps > div { overflow:hidden; }
.type-corps .champs { padding:6px 14px 16px 58px; }

/* =============================================================================
   Tchat — le widget et ses réglages à gauche, le vrai tchat à droite
   ============================================================================= */
.studio.studio--tchat { grid-template-columns:minmax(0, 1fr) 400px; }
.moniteur.moniteur--alpha::before { background:conic-gradient(from 90deg at 50% 50%, #151514 25%, #0e0e0d 0 50%, #151514 0 75%, #0e0e0d 0) 0 0 / 22px 22px; }
.segments--console { display:flex; gap:2px; padding:3px; border-radius:11px; background:rgba(255,255,255,.08); }
.segments--console button { width:38px; height:32px; display:grid; place-items:center; border-radius:8px; color:var(--ink-2); transition:background .16s, color .16s; }
.segments--console button[aria-checked="true"] { background:rgba(255,255,255,.16); color:#fff; }
.segments--console svg { width:17px; height:17px; }
.tchat-regl { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:16px; align-items:start; }
.tchat-regl .rg:nth-child(2) { grid-column:1 / -1; order:3; }

/* les options en tuiles : une icône, un mot, l'interrupteur */
.options { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px; }
.option { position:relative; display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:10px; align-items:center; padding:10px; border-radius:14px; background:var(--fill);
  cursor:pointer; transition:background .2s, box-shadow .25s; }
.option:hover { background:var(--fill-2); }
.option input { position:absolute; opacity:0; pointer-events:none; }
.option:has(input:checked) { box-shadow:inset 0 0 0 1px rgba(76,194,138,.4); }
.option-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--surface-3); color:var(--ink-2); transition:background .25s, color .25s; }
.option:has(input:checked) .option-ic { background:var(--ok-soft); color:var(--ok); }
.option-ic svg { width:17px; height:17px; }
.option-txt { display:grid; min-width:0; }
.option-txt b { font-size:13.5px; font-weight:620; }
.option-txt small { font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.option input:checked ~ .sw { background:var(--ok); }
.option input:checked ~ .sw::after { transform:translateX(16px); }
.option input:focus-visible ~ .sw { outline:2px solid var(--ink); outline-offset:2px; }

/* les comptes masqués : des pastilles et un champ, dans une même boîte */
.pastilles { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:46px; padding:6px; border-radius:12px; background:var(--surface-2); box-shadow:0 0 0 1px var(--line); cursor:text; }
.pastilles:focus-within { box-shadow:0 0 0 2px var(--ink); }
.pastille { display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 4px 0 11px; border-radius:999px; background:var(--fill-2); font:500 13px ui-monospace, "SF Mono", Menlo, monospace;
  animation:rConfirme .3s var(--spring); }
.pastille-x { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:var(--dim); font-size:16px; line-height:1; transition:background .16s, color .16s; }
.pastille-x:hover { background:var(--danger); color:#fff; }
.pastilles input { flex:1; min-width:120px; height:30px; padding:0 6px; border:0; background:transparent; color:var(--ink); font:13px ui-monospace, "SF Mono", Menlo, monospace; }
.pastilles input:focus { outline:0; }

/* le tchat en direct */
.direct-tchat { position:sticky; top:20px; display:grid; grid-template-rows:auto minmax(0, 1fr) auto; height:calc(100vh - 60px); max-height:880px; border-radius:22px;
  background:rgba(22,22,21,.92); box-shadow:0 0 0 1px var(--line), 0 20px 50px -30px rgba(0,0,0,.8); overflow:hidden; animation:rgEntre .6s var(--spring) .1s backwards; }
.dt-tete { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px 12px; box-shadow:inset 0 -1px 0 var(--line); }
.dt-tete h3 { font-size:16px; font-weight:680; }
.dt-tete p { font-size:12.5px; color:var(--dim); }
.dt-compte { width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--fill-2); box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--ok); }
.dt-compte:empty { box-shadow:none; }
.dt-compte img { width:100%; height:100%; object-fit:cover; }
.dt-fil { position:relative; min-height:0; }
.fil { display:flex; flex-direction:column; gap:2px; height:100%; overflow:auto; padding:12px 10px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.fil > :first-child { margin-top:auto; }
.msg { display:grid; grid-template-columns:30px minmax(0, 1fr); gap:10px; padding:6px 8px; border-radius:12px; animation:rMsg .45s var(--spring); transition:background .16s, opacity .3s; }
@keyframes rMsg { from { opacity:0; transform:translateY(8px); } }
.msg:hover { background:var(--fill); }
.msg.moi { background:rgba(255,255,255,.04); }
.msg-av { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--surface-3); font-size:13px; font-weight:700; color:var(--ink-2);
  box-shadow:inset 0 0 0 1.5px var(--c, transparent); }
.msg-corps { min-width:0; }
.msg-tete { display:flex; align-items:center; gap:6px; min-width:0; }
.msg-tete b { font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-tete time { margin-left:auto; font-size:11px; color:var(--dim); opacity:0; transition:opacity .16s; }
.msg:hover time { opacity:1; }
.badge { flex:none; font-style:normal; font-size:10.5px; font-weight:650; padding:1px 6px; border-radius:6px; background:var(--fill-2); color:var(--ink-2); }
.badge.chaine { background:var(--danger-soft); color:var(--danger); }
.badge.modo { background:var(--ok-soft); color:var(--ok); }
.badge.vip { background:rgba(227,161,60,.14); color:#e3a13c; }
.msg-corps p { font-size:14px; line-height:1.45; overflow-wrap:anywhere; color:var(--ink); }
.msg-corps p img { height:1.6em; display:inline; vertical-align:-.4em; margin:0 1px; }
.msg.parti { opacity:.3; }
.msg.parti p { text-decoration:line-through; }
.msg-sys { display:flex; align-items:center; gap:8px; margin:4px 8px; padding:7px 10px; border-radius:10px; background:var(--ok-soft); color:var(--ok); font-size:12.5px; font-weight:550;
  animation:rMsg .45s var(--spring); }
.msg-sys svg { width:15px; height:15px; flex:none; }
.fil > .vide { display:grid; justify-items:center; gap:10px; padding:40px 10px; }
.fil > .vide svg { width:28px; height:28px; opacity:.5; }
.fil-bas { position:absolute; left:50%; bottom:10px; translate:-50% 0; display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px 0 10px; border-radius:999px;
  background:var(--accent-fill); color:var(--accent-ink); font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.5); animation:rPop .3s var(--spring); }
.fil-bas svg { width:15px; height:15px; stroke-width:2.2; }
.dire { position:relative; display:flex; align-items:center; gap:8px; margin:10px; padding:5px 5px 5px 14px; border-radius:16px; background:var(--surface-2); box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .2s; }
.dire:focus-within { box-shadow:0 0 0 2px var(--ink); }
.dire input { flex:1; min-width:0; height:36px; border:0; background:transparent; color:var(--ink); font-size:14px; }
.dire input:focus { outline:0; }
.dire-compte { font-size:11.5px; color:var(--dim); font-variant-numeric:tabular-nums; }
.dire-go { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:11px; background:var(--fill-2); color:var(--dim); transition:background .2s, color .2s, transform .3s var(--spring); }
.dire.pret .dire-go { background:var(--accent-fill); color:var(--accent-ink); }
.dire-go:active { transform:scale(.92); }
.dire.part .dire-go svg { animation:rPart .4s var(--ease); }
@keyframes rPart { 50% { transform:translate(6px, -6px); opacity:0; } 51% { transform:translate(-6px, 6px); } }
.dire-go svg { width:17px; height:17px; }

/* ---------- le bot ---------- */
/* ---------- le bot : la carte d'état, les commandes en cartes ---------- */
.rg-tete .bascule--grand { flex:none; }
.bascule--grand .sw { width:52px; height:30px; border-radius:15px; }
.bascule--grand .sw::after { width:24px; height:24px; }
.bascule--grand input:checked + .sw::after { transform:translateX(22px); }
.rg-ic--bot { background:var(--fill-2); color:var(--ink-2); transition:background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.rg--bot.actif .rg-ic--bot { background:var(--ok); color:#06120b; box-shadow:0 0 22px -4px var(--ok); }
.rg--bot.actif .rg-ic--bot svg { animation:rRespire 2.4s ease-in-out infinite; }
.bot-chiffres { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.bot-chiffres > div { display:grid; gap:2px; padding:12px 14px; border-radius:14px; background:var(--fill); }
.bot-chiffres b { font-size:26px; font-weight:720; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.bot-chiffres span { font-size:12px; color:var(--dim); }
.rg-tete > .w-round svg { width:15px; height:15px; }

/* les variables : des pastilles qu'on clique pour les poser dans la réponse */
.variables { display:flex; flex-wrap:wrap; gap:6px; }
.variables button { height:28px; padding:0 10px; border-radius:8px; background:var(--fill); font:500 12.5px ui-monospace, "SF Mono", Menlo, monospace; color:var(--ink-2);
  transition:background .16s, color .16s, transform .25s var(--spring); }
.variables button:hover { background:var(--fill-2); color:var(--ink); transform:translateY(-1px); }
.variables button.pose { animation:rPose .5s var(--spring); }
@keyframes rPose { 40% { background:var(--ok); color:#06120b; transform:scale(1.08); } }

.cmds { display:grid; gap:8px; }
.cmd { position:relative; display:grid; grid-template-columns:170px minmax(0, 1fr) auto; gap:6px 10px; align-items:center; padding:8px; border-radius:16px; background:var(--fill);
  transition:background .2s, opacity .3s; }
.cmd:hover { background:var(--fill-2); }
.cmd.off { opacity:.5; }
.cmd.neuve { animation:rgEntre .5s var(--spring); }
.cmd-nom { display:flex; align-items:center; height:38px; padding-left:12px; border-radius:10px; background:var(--surface-3); }
.cmd-nom span { font:700 14px ui-monospace, "SF Mono", Menlo, monospace; color:var(--ok); }
.cmd-nom input { flex:1; min-width:0; height:100%; padding:0 10px 0 2px; border:0; background:transparent; font:600 14px ui-monospace, "SF Mono", Menlo, monospace; color:var(--ink); }
.cmd-nom:focus-within { box-shadow:0 0 0 2px var(--ink); }
.cmd-nom input:focus { outline:0; }
.cmd-rep { min-width:0; height:38px; padding:0 12px; border:0; border-radius:10px; background:transparent; font-size:14px; color:var(--ink); transition:background .16s; }
.cmd-rep:hover { background:var(--surface-2); }
.cmd-rep:focus { outline:0; background:var(--surface-2); box-shadow:0 0 0 2px var(--ink); }
.cmd-meta { display:flex; align-items:center; gap:6px; }
.cmd-delai { display:flex; align-items:center; gap:4px; height:34px; padding:0 8px; border-radius:9px; background:var(--surface-2); color:var(--dim); font-size:12.5px; }
.cmd-delai svg { width:14px; height:14px; }
.cmd-delai input { width:34px; border:0; background:transparent; color:var(--ink); font-size:13.5px; text-align:right; -moz-appearance:textfield; }
.cmd-delai input::-webkit-inner-spin-button { display:none; }
.cmd-delai input:focus { outline:0; }
.cmd-delai:focus-within { box-shadow:0 0 0 2px var(--ink); }
.cmd-meta select { height:34px; }
.cmd-usages { min-width:34px; height:26px; display:grid; place-items:center; padding:0 7px; border-radius:999px; background:var(--surface-3); font-size:12px; font-weight:650; color:var(--ink-2); font-variant-numeric:tabular-nums; }
/* les alias : d'autres noms pour la même réponse, en pastilles sous la carte */
.cmd-alias { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:30px; padding:0 4px 2px 12px; cursor:text; }
.cmd-alias-tete { display:inline-flex; align-items:center; gap:6px; margin-right:4px; font-size:12px; font-weight:600; color:var(--dim); cursor:default; }
.cmd-alias-tete svg { width:13px; height:13px; }
.alias { display:inline-flex; align-items:center; height:26px; padding:0 3px 0 10px; border-radius:999px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line);
  font:600 12.5px ui-monospace, "SF Mono", Menlo, monospace; color:var(--ink); cursor:default; animation:rAlias .4s var(--spring); }
.alias i { font-style:normal; color:var(--ok); margin-right:1px; }
.alias-x { display:grid; place-items:center; width:20px; height:20px; margin-left:4px; border-radius:50%; color:var(--dim); font-size:15px; line-height:1; transition:background .16s, color .16s; }
.alias-x:hover { background:var(--danger); color:#fff; }
.alias.part { animation:rAliasPart .2s var(--ease) forwards; }
@keyframes rAlias { from { opacity:0; transform:scale(.5); } }
@keyframes rAliasPart { to { opacity:0; transform:scale(.5); } }
.alias-txt { width:124px; height:26px; padding:0 10px; border:0; border-radius:999px; background:transparent; font:500 12.5px ui-monospace, "SF Mono", Menlo, monospace; color:var(--ink);
  transition:background .16s, box-shadow .16s; }
.alias-txt::placeholder { color:var(--dim); }
.alias-txt:hover { background:var(--surface-2); }
.alias-txt:focus { outline:0; background:var(--surface-2); box-shadow:0 0 0 1.5px var(--ink); }
.cmd-alias.refus { animation:rRefus .42s var(--ease); border-radius:10px; }

.minuteurs { display:grid; gap:8px; }
.minuteur { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px 12px; align-items:center; padding:12px; border-radius:16px; background:var(--fill); transition:opacity .3s; }
.minuteur.off { opacity:.5; }
.minuteur textarea { grid-column:1 / -1; resize:vertical; min-height:52px; }
.minuteur .regl { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--dim); }
.minuteur .regl svg { width:15px; height:15px; }
.minuteur .regl input { width:56px; min-height:30px; padding:3px 8px; text-align:center; }
.mercis { display:grid; gap:8px; }
.merci { position:relative; display:grid; grid-template-columns:36px minmax(0, 1fr); gap:12px; align-items:start; padding:10px; border-radius:16px; background:var(--fill); }
.merci-corps { display:grid; gap:8px; min-width:0; }
/* l'icône s'allume avec l'interrupteur : éteinte, le remerciement dort */
.merci .evt-ic { background:var(--fill-2); color:var(--dim); transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.merci:has(.bascule input:checked) .evt-ic { background:var(--accent-fill); color:var(--accent-ink); box-shadow:0 6px 18px -8px rgba(255,255,255,.5); }
.merci:has(.bascule input:checked) .evt-ic svg { animation:rAllume .5s var(--spring); }
@keyframes rAllume { 40% { transform:scale(1.25) rotate(-8deg); } }
.merci--raid { align-items:center; }

/* =============================================================================
   Scènes — une régie d'image
   -----------------------------------------------------------------------------
   Le moniteur en grand (le vrai widget), une console de verre posée dessus
   (antenne, plan, timer), les plans en pellicule dessous, l'inspecteur à
   droite. Rouge = antenne, et rien d'autre ne l'est.
   ============================================================================= */
.vue--large { max-width:1500px; }
.studio { display:grid; grid-template-columns:minmax(0, 1fr) 348px; gap:20px; align-items:start; }
.studio-main { display:grid; gap:18px; min-width:0; }

/* --- le moniteur --- */
/* l'image en 16:9, la console dessous dans le même cadre : posée dessus, elle en cachait le bas (2026-10-17) */
.moniteur { position:relative; padding-top:56.25%; overflow:hidden; border-radius:20px; background:rgba(22,22,21,.92);
  box-shadow:0 0 0 1px var(--line), 0 30px 80px -20px rgba(0,0,0,.7); transition:box-shadow .5s var(--ease); }
.moniteur::before { content:""; position:absolute; inset:0 0 auto; aspect-ratio:16 / 9; background:#050606; }
.moniteur iframe { position:absolute; left:0; top:0; width:100%; aspect-ratio:16 / 9; border:0; }
.moniteur.live { box-shadow:0 0 0 2px var(--danger), 0 0 0 8px rgba(255,82,66,.1), 0 30px 80px -20px rgba(0,0,0,.7); }
.moniteur.depot::after, .inspecteur.depot::after { content:"Déposer pour importer"; position:absolute; inset:0; z-index:3; display:grid; place-items:center; border-radius:inherit;
  background:rgba(11,11,10,.72); backdrop-filter:blur(6px); box-shadow:inset 0 0 0 2px var(--ink); font-size:15px; font-weight:600; }
/* l'aperçu masqué (bouton de la console) : le fond noir, les calques restent */
.moniteur iframe:not([src]) { visibility:hidden; }
/* l'aperçu qui se charge : un voile et un anneau, levés en fondu quand le
   widget montre sa première image. L'anneau tourne par `transform`, que le
   compositeur anime seul, même quand la page est occupée. */
.moniteur-charge { position:absolute; inset:0 0 auto; aspect-ratio:16 / 9; display:grid; place-content:center; justify-items:center; gap:14px;
  background:#050606; color:var(--dim); font-size:13px; opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility 0s .6s; }
.moniteur.charge .moniteur-charge { opacity:1; visibility:visible; transition:opacity .2s; }
.moniteur-charge i { width:30px; height:30px; border-radius:50%; border:2px solid var(--fill-2); border-top-color:var(--ink); will-change:transform;
  animation:rTourne .9s linear infinite; }
#apercuBascule span { font-size:14px; }
.moniteur-haut { position:absolute; left:14px; top:14px; z-index:1; display:flex; gap:8px; pointer-events:none; }
.pastille-live, .pastille-apercu { display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:999px; font-size:12.5px; font-weight:650;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.pastille-live { background:rgba(255,82,66,.92); color:#fff; }
.pastille-live::before { content:""; width:7px; height:7px; border-radius:50%; background:#fff; animation:rRespire 1.6s ease-in-out infinite; }
.pastille-apercu { background:rgba(16,16,15,.6); color:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }

/* --- la console, sous l'image --- */
.console { position:relative; display:flex; align-items:center; gap:14px; margin:8px; padding:8px 10px 8px 8px; border-radius:16px;
  background:var(--fill); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.antenne { display:flex; align-items:center; gap:11px; padding:5px 14px 5px 6px; border-radius:12px; cursor:pointer; transition:background .2s; }
.antenne:hover { background:rgba(255,255,255,.06); }
.antenne input { position:absolute; opacity:0; pointer-events:none; }
.antenne-sw { position:relative; width:52px; height:30px; border-radius:15px; background:rgba(255,255,255,.14); transition:background .25s var(--ease), box-shadow .25s; }
.antenne-sw i { position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4); transition:transform .35s var(--spring); }
.antenne input:checked + .antenne-sw { background:var(--danger); box-shadow:0 0 18px rgba(255,82,66,.55); }
.antenne input:checked + .antenne-sw i { transform:translateX(22px); }
.antenne input:focus-visible + .antenne-sw { outline:2px solid var(--ink); outline-offset:2px; }
.antenne input:disabled ~ * { opacity:.4; }
.antenne-txt { display:grid; line-height:1.2; }
.antenne-txt b { font-size:14px; font-weight:650; }
.antenne-txt small { font-size:12px; color:var(--ink-2); max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.antenne:has(input:checked) .antenne-txt small { color:#ff8a7e; }
.console-nom { flex:1; min-width:0; display:grid; line-height:1.25; padding-left:14px; box-shadow:inset 1px 0 0 rgba(255,255,255,.1); }
.console-nom b { font-size:15px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.console-nom span { font-size:12.5px; color:var(--ink-2); }
.console-timer { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:11px; background:rgba(255,255,255,.08);
  font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--ink-2); transition:background .2s, color .2s; }
.console-timer:hover { background:rgba(255,255,255,.13); }
.console-timer svg { width:17px; height:17px; }
.console-timer.marche { color:#fff; }
.console-timer.marche svg { color:var(--ok); animation:rRespire 1.6s ease-in-out infinite; }
.console-timer.relance svg { animation:rTourne .6s var(--ease) reverse; }

/* --- la pellicule --- */
.pellicule { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(188px, 212px); gap:14px; overflow-x:auto; padding:6px 4px 14px; margin:0 -4px;
  scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.plan { position:relative; scroll-snap-align:start; }
.plan-go { display:grid; gap:10px; width:100%; text-align:left; }
.plan-vig { position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; border-radius:14px; background:#050606;
  box-shadow:0 0 0 1px var(--line); transition:transform .4s var(--spring), box-shadow .25s var(--ease); }
.plan-vig > img, .plan-vig > video { width:100%; height:100%; object-fit:cover; object-position:var(--o, 50% 50%); display:block;
  transform:scale(var(--z, 1)); transform-origin:var(--o, 50% 50%); transition:transform .6s var(--ease); }
.plan-go:hover .plan-vig { transform:translateY(-3px); box-shadow:0 0 0 1px var(--line-strong), 0 16px 34px -10px rgba(0,0,0,.7); }
.plan-go:hover .plan-vig > img, .plan-go:hover .plan-vig > video { transform:scale(calc(var(--z, 1) * 1.04)); }
.plan-go[aria-pressed="true"] .plan-vig { box-shadow:0 0 0 2px var(--ink), 0 16px 34px -12px rgba(0,0,0,.7); }
.plan.live .plan-vig { box-shadow:0 0 0 2px var(--danger), 0 0 22px -4px rgba(255,82,66,.45); }
.plan-vig kbd { position:absolute; left:8px; bottom:8px; display:grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border-radius:6px;
  background:rgba(11,11,10,.62); backdrop-filter:blur(8px); font:600 11.5px var(--font); color:var(--ink-2); }
.plan-vig kbd:empty { display:none; }
.plan-vig em { position:absolute; right:8px; top:8px; display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px; border-radius:999px;
  background:var(--danger); color:#fff; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.02em; }
.plan-vig em::before { content:""; width:5px; height:5px; border-radius:50%; background:#fff; animation:rRespire 1.6s ease-in-out infinite; }
.plan-pied { display:grid; gap:1px; padding:0 2px; min-width:0; }
.plan-pied b { font-size:14px; font-weight:620; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-pied span { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plan-pied span svg { width:13px; height:13px; }
.plan-x { position:absolute; left:8px; top:8px; width:28px; height:28px; border-radius:8px; background:rgba(11,11,10,.62); color:var(--ink-2);
  backdrop-filter:blur(8px); opacity:0; transition:opacity .2s, background .16s, color .16s; }
.plan-x:hover { background:var(--danger); color:#fff; }
.plan:hover .plan-x, .plan-x:focus-visible { opacity:1; }
.plan-x svg { width:15px; height:15px; }
@keyframes rConfirme { from { opacity:0; transform:scale(.94); } }
.plan--ajout .plan-go { aspect-ratio:16 / 9; place-items:center; align-content:center; gap:6px; border-radius:14px; color:var(--dim); font-size:13px; font-weight:500;
  box-shadow:inset 0 0 0 1.5px var(--line-strong); transition:background .2s, color .2s; }
.plan--ajout .plan-go:hover { background:var(--fill); color:var(--ink); }
.plan--ajout .plan-go svg { width:22px; height:22px; }
.plan.tire { opacity:.35; }
.plan.vise-g::before, .plan.vise-d::after { content:""; position:absolute; top:0; height:calc(100% - 46px); width:3px; border-radius:2px; background:var(--ink); }
.plan.vise-g::before { left:-9px; }
.plan.vise-d::after { right:-9px; }

/* la vallée en miniature : un ciel teinté du morceau, des étoiles, la crête, le trait à la hauteur de la caméra */
.vig-vallee { position:absolute; inset:0;
  background:radial-gradient(120% 70% at 50% 105%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%),
    linear-gradient(to bottom, #030405, #0a0c0e 55%, #16170f); }
.vig-vallee > i { position:absolute; inset:0 0 40% 0; opacity:.9;
  background:radial-gradient(1px 1px at 8% 22%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 19% 64%, #dfe6ee 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 31% 12%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 44% 40%, #cfd7e0 60%, transparent 61%),
    radial-gradient(1px 1px at 57% 18%, #fff 60%, transparent 61%), radial-gradient(1.4px 1.4px at 66% 55%, #ffe6c4 60%, transparent 61%),
    radial-gradient(1px 1px at 78% 26%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 88% 70%, #dfe6ee 60%, transparent 61%),
    radial-gradient(1px 1px at 94% 10%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 4% 80%, #cfd7e0 60%, transparent 61%),
    linear-gradient(165deg, transparent 30%, rgba(176,188,198,.08) 45%, transparent 60%); }
.vig-vallee::before { content:""; position:absolute; left:0; right:0; bottom:0; height:44%; background:linear-gradient(#121311, #070807);
  clip-path:polygon(0 42%, 9% 26%, 18% 44%, 29% 14%, 40% 40%, 52% 6%, 63% 34%, 74% 16%, 86% 46%, 100% 22%, 100% 100%, 0 100%); }
.vig-vallee::after { content:""; position:absolute; left:6%; right:6%; top:calc(60% - var(--c) * 30%); height:1.5px; border-radius:1px;
  background:linear-gradient(90deg, transparent, var(--acc) 20%, color-mix(in srgb, var(--acc) 60%, #fff) 50%, var(--acc) 80%, transparent);
  box-shadow:0 0 10px var(--acc), 0 0 24px color-mix(in srgb, var(--acc) 50%, transparent); }
.vig-vide { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:6px; color:var(--dim);
  background:radial-gradient(80% 80% at 50% 40%, #151514, #0a0a09); }
.vig-vide svg { width:26px; height:26px; }
.vig-vide small { font-size:11.5px; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- l'inspecteur --- */
.inspecteur { position:sticky; top:20px; display:grid; gap:14px; align-content:start; }
.insp { position:relative; display:grid; gap:14px; padding:16px; border-radius:var(--r-lg); background:rgba(22,22,21,.92); box-shadow:0 0 0 1px var(--line); }
.insp-tete { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; }
.insp-tete h3 { font-size:15.5px; font-weight:650; }
.insp-nom { flex:1; min-width:0; height:36px; margin-left:-8px; padding:0 8px; border:0; border-radius:8px; background:transparent; font-size:18px; font-weight:680; letter-spacing:-.015em; transition:background .16s; }
.insp-nom:hover { background:var(--fill); }
.insp-nom:focus { outline:0; background:var(--surface-2); box-shadow:0 0 0 2px var(--ink); }

.fonds { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.fond-choix { display:flex; align-items:center; gap:10px; height:48px; padding:0 12px; border-radius:12px; background:var(--fill); color:var(--ink-2); font-size:13.5px; font-weight:550;
  transition:background .16s, color .16s, box-shadow .16s; }
.fond-choix svg { width:20px; height:20px; }
.fond-choix:hover { background:var(--fill-2); color:var(--ink); }
.fond-choix[aria-checked="true"] { background:var(--surface-3); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.fond-regl { display:grid; gap:12px; animation:rVue .3s var(--ease); }
.graduation { display:flex; justify-content:space-between; gap:10px; margin-top:-6px; font-size:12px; color:var(--dim); }

.biblio { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; max-height:340px; overflow:auto; scrollbar-width:thin; padding:2px; }
.media { position:relative; }
.media-go { position:relative; display:block; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:11px; background:#050606; box-shadow:0 0 0 1px var(--line); transition:box-shadow .2s; }
.media-go img, .media-go video { width:100%; height:100%; object-fit:cover; display:block; }
.media-nom { position:absolute; left:0; right:0; bottom:0; display:grid; padding:16px 8px 6px; text-align:left; background:linear-gradient(transparent, rgba(0,0,0,.78)); opacity:0; transition:opacity .2s; }
.media-nom b { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-nom small { font-size:11px; color:var(--ink-2); }
.media-go:hover .media-nom, .media.choisi .media-nom { opacity:1; }
.media.choisi .media-go { box-shadow:0 0 0 2px var(--ink); }
.media.choisi .media-go::after { content:""; position:absolute; right:7px; top:7px; width:20px; height:20px; border-radius:50%; background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230b0b0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.media-x { position:absolute; left:6px; top:6px; width:26px; height:26px; background:rgba(11,11,10,.75); opacity:0; transition:opacity .2s; }
.media:hover .media-x, .media-x:focus-visible { opacity:1; }
.importer { display:grid; place-content:center; justify-items:center; gap:3px; aspect-ratio:16 / 9; border-radius:11px; color:var(--dim); box-shadow:inset 0 0 0 1.5px var(--line-strong); transition:background .2s, color .2s; }
.importer:hover { background:var(--fill); color:var(--ink); }
.importer svg { width:20px; height:20px; }
.importer span { font-size:13px; font-weight:600; }
.importer small { font-size:11px; }
.tuile-envoi .media-go { box-shadow:0 0 0 2px var(--ink); animation:rConfirme .35s var(--spring); }
.tuile-envoi .media-go > img, .tuile-envoi .media-go > video { filter:saturate(.4) brightness(.8); transition:filter .5s var(--ease); }
.tuile-envoi .voile { position:absolute; left:0; right:0; top:0; height:calc((1 - var(--p, 0)) * 100%); background:rgba(11,11,10,.72); backdrop-filter:blur(3px);
  transition:height .35s var(--ease); }
.tuile-envoi .voile::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ink); box-shadow:0 0 12px rgba(255,255,255,.6); }
.tuile-envoi .envoi-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:1px; text-shadow:0 1px 8px rgba(0,0,0,.6); transition:opacity .3s; }
.tuile-envoi .envoi-pct b { font-size:24px; font-weight:300; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.tuile-envoi .envoi-pct small { font-size:12px; color:var(--ink-2); margin-top:6px; }
.tuile-envoi .envoi-ok { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform:scale(.6); transition:opacity .3s, transform .45s var(--spring); }
.tuile-envoi .envoi-ok svg { width:34px; height:34px; padding:7px; border-radius:50%; background:#fff; color:#0b0b0a; stroke-width:2.6; }
.tuile-envoi.fini .media-go > img, .tuile-envoi.fini .media-go > video { filter:none; }
.tuile-envoi.fini .envoi-pct { opacity:0; }
.tuile-envoi.fini .envoi-ok { opacity:1; transform:none; }
.cadrage-ligne { display:flex; gap:8px; align-items:center; }
.cadrage-ligne .segments { flex:1; }
.cadrage-ligne .w-round svg { width:15px; height:15px; }

/* --- recadrer : le cadre 16:9 au milieu, le fichier entier autour, assombri --- */
.recadre { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:24px; background:rgba(5,5,5,.66); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:rFondu .25s var(--ease); }
.recadre.sort { opacity:0; transition:opacity .25s var(--ease); }
@keyframes rFondu { from { opacity:0; } }
.recadre-carte { display:grid; gap:16px; width:min(1080px, 100%); padding:18px; border-radius:22px; background:var(--surface); box-shadow:var(--sh-3); animation:rConfirme .35s var(--spring); }
.recadre-tete { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.recadre-tete h3 { font-size:18px; font-weight:680; letter-spacing:-.015em; }
.recadre-scene { position:relative; aspect-ratio:16 / 9.6; overflow:hidden; border-radius:14px; background:#050606; cursor:grab; touch-action:none; user-select:none; }
.recadre-scene.prise { cursor:grabbing; }
.recadre-scene > img, .recadre-scene > video { position:absolute; max-width:none; pointer-events:none; }
/* le cadre : tout ce qui est hors de lui s'assombrit ; ses tiers apparaissent quand on déplace */
.recadre-cadre { position:absolute; pointer-events:none; border-radius:4px; box-shadow:0 0 0 1.5px #fff, 0 0 0 9999px rgba(5,5,5,.66); }
.recadre-cadre i { position:absolute; background:rgba(255,255,255,.4); opacity:0; transition:opacity .2s; }
.recadre-cadre i:nth-child(1), .recadre-cadre i:nth-child(2) { top:0; bottom:0; width:1px; }
.recadre-cadre i:nth-child(1) { left:33.33%; } .recadre-cadre i:nth-child(2) { left:66.66%; }
.recadre-cadre i:nth-child(3), .recadre-cadre i:nth-child(4) { left:0; right:0; height:1px; }
.recadre-cadre i:nth-child(3) { top:33.33%; } .recadre-cadre i:nth-child(4) { top:66.66%; }
.recadre-scene.prise .recadre-cadre i { opacity:1; }
.recadre-pied { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.recadre-zoom { flex:1; min-width:220px; max-width:420px; }

/* les sons gardés de la carte Son : le son de la scène est le preset allumé */
.sons-presets { display:flex; flex-wrap:wrap; gap:6px; }
.son-preset { display:inline-flex; align-items:center; height:34px; padding-right:2px; border-radius:999px; background:var(--fill); box-shadow:inset 0 0 0 1px var(--line);
  transition:background .2s, box-shadow .2s; animation:rAlias .4s var(--spring); }
.son-preset:hover { background:var(--fill-2); }
.son-preset > button:first-child { max-width:210px; height:100%; padding:0 4px 0 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:620; color:var(--ink-2); }
.son-preset .ico { width:28px; height:28px; border-radius:50%; }
.son-preset .ico svg { width:14px; height:14px; }
.son-preset.on { background:var(--ink); box-shadow:none; }
.son-preset.on > button:first-child { color:#0b0b0a; }
.son-preset.on .ico { color:rgba(11,11,10,.45); }
.son-garder { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px 0 10px; border-radius:999px; font-size:13px; font-weight:620; color:var(--dim);
  box-shadow:inset 0 0 0 1px var(--line-strong); transition:color .16s, background .16s; }
.son-garder:hover { color:var(--ink); background:var(--fill); }
.son-garder svg { width:15px; height:15px; }
.web-etat { display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--dim); }
.web-etat.ok { color:var(--ok); }
.web-etat.err { color:var(--danger); }

/* --- les calques : une couche aux dimensions du widget, posée sur le moniteur --- */
.calques-edit { position:absolute; inset:0 0 auto; aspect-ratio:16 / 9; z-index:1; overflow:hidden; pointer-events:none; }
.calques-plan { position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; transform:scale(var(--k, .5)); }
.calque-boite { position:absolute; white-space:pre; pointer-events:auto; cursor:move; touch-action:none; user-select:none;
  outline:calc(1.5px / var(--k, .5)) dashed transparent; outline-offset:calc(6px / var(--k, .5)); border-radius:calc(4px / var(--k, .5)); transition:outline-color .15s; }
.calque-boite:hover { outline-color:rgba(255,255,255,.55); }
.calque-boite.choisi { outline-style:solid; outline-color:#fff; }
.calque-boite.choisi::before, .calque-boite.choisi::after { content:""; position:absolute; width:calc(9px / var(--k, .5)); height:calc(9px / var(--k, .5));
  border-radius:50%; background:#fff; box-shadow:0 0 0 calc(1.5px / var(--k, .5)) #0b0b0a; top:50%; translate:0 -50%; }
.calque-boite.choisi::before { left:calc(-11px / var(--k, .5)); }
.calque-boite.choisi::after { right:calc(-11px / var(--k, .5)); }
.calques-edit.glisse .calque-boite { cursor:grabbing; }
.calques-edit.glisse .calque-boite.choisi { will-change:translate; }
.guide { position:absolute; opacity:0; transition:opacity .12s; background:#ff3d8b; box-shadow:0 0 6px rgba(255,61,139,.7); }
.guide-v { left:50%; top:0; bottom:0; width:1px; }
.guide-h { top:50%; left:0; right:0; height:1px; }
.calques-edit.aimant-v .guide-v, .calques-edit.aimant-h .guide-h { opacity:1; }

.calques-liste { display:grid; gap:4px; }
.calque-ligne { display:grid; grid-template-columns:34px minmax(0, 1fr) auto auto; gap:8px; align-items:center; padding:5px 4px 5px 5px; border-radius:11px; cursor:pointer; transition:background .16s; }
.calque-ligne:hover { background:var(--fill); }
/* l'ordre au glisser : la ligne tirée flotte au-dessus, les autres glissent à leur nouvelle place */
.calque-ligne { user-select:none; }
.calques-liste.trie .calque-ligne { transition:translate .2s var(--ease); }
.calques-liste.trie .calque-ligne.tire { position:relative; z-index:1; transition:none; cursor:grabbing; background:var(--surface-3); box-shadow:0 10px 28px rgba(0,0,0,.5), inset 0 0 0 1px var(--line-strong); }
.calque-ligne.choisi { background:var(--fill-2); box-shadow:inset 0 0 0 1px var(--line-strong); }
.calque-ligne.cache .calque-ic, .calque-ligne.cache .calque-nom { opacity:.4; }
.calque-ic { display:grid; place-items:center; width:34px; height:30px; border-radius:8px; background:var(--surface-3); font-size:13px; font-weight:700; }
.calque-ic svg { width:16px; height:16px; }
.calque-nom { font-size:13.5px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calque-ligne .ico { width:28px; height:28px; }
/* « Ajouter » un calque : un menu de verre, comme la bulle du lien de diffusion */
.ajout-pop { position:absolute; right:0; top:40px; z-index:6; display:grid; gap:2px; width:184px; padding:6px; border-radius:16px;
  background:rgba(24,24,23,.9); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.06); transform-origin:top right; animation:rPop .3s var(--spring); }
.ajout-pop button { display:flex; align-items:center; gap:11px; height:38px; padding:0 10px; border-radius:10px; font-size:14px; font-weight:550; color:var(--ink-2); text-align:left; transition:background .14s, color .14s; }
.ajout-pop button:hover, .ajout-pop button:focus-visible { background:var(--fill-2); color:var(--ink); outline:none; }
.ajout-pop svg { width:17px; height:17px; }
#ajout > button[aria-expanded="true"] { background:var(--fill-2); box-shadow:0 0 0 1px var(--line-strong); }
.calque-props .paire { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.calque-props { display:grid; gap:12px; padding-top:12px; box-shadow:inset 0 1px 0 var(--line); animation:rVue .25s var(--ease); }
.calque-props textarea { min-height:58px; font-size:14px; }
.polices { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.polices button { display:grid; justify-items:center; gap:4px; padding:10px 4px 8px; border-radius:11px; background:var(--fill); color:var(--ink-2); transition:background .16s, color .16s, box-shadow .16s; }
.polices button b { font-size:20px; line-height:1; color:var(--ink); }
.polices button span { font-size:11px; }
.polices button:hover { background:var(--fill-2); }
.polices button[aria-checked="true"] { background:var(--surface-3); box-shadow:inset 0 0 0 1.5px var(--ink); color:var(--ink); }
.nuances { grid-column:1 / -1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.nuance { position:relative; width:28px; height:28px; border-radius:50%; background:var(--n); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); transition:transform .2s var(--spring); }
.nuance:hover { transform:scale(1.1); }
.nuance.on { box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.nuance--libre { overflow:hidden; cursor:pointer; background:conic-gradient(#ff5242, #e3a13c, #4cc28a, #4c9cff, #b26bff, #ff5242); }
.nuance--libre input { position:absolute; inset:-8px; width:44px; height:44px; opacity:0; cursor:pointer; }
.segments.segments--3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.segments--3 button { display:grid; place-items:center; }
.segments--3 svg { width:17px; height:17px; }

/* --- le timer : un bouton rond cerclé de sa progression --- */
.timer-face { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:16px; align-items:center; }
.timer-play { position:relative; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--accent-fill); color:var(--accent-ink);
  transition:transform .25s var(--spring); }
.timer-play:hover { transform:scale(1.05); }
.timer-play:active { transform:scale(.96); }
.timer-play::before { content:""; position:absolute; inset:-6px; border-radius:50%;
  background:conic-gradient(var(--ink) calc(var(--p, 0) * 1turn), var(--fill-2) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.timer-play svg { width:24px; height:24px; }
.timer-play .ic-pause, #timerBox.marche .timer-play .ic-play, .musique.marche .timer-play .ic-play { display:none; }
#timerBox.marche .timer-play .ic-pause, .musique.marche .timer-play .ic-pause { display:block; }
#timerBox.marche .timer-play::before, .musique.marche .timer-play::before { background:conic-gradient(var(--ok) calc(var(--p, 0) * 1turn), var(--fill-2) 0); }
.timer-lecture { position:relative; display:grid; gap:2px; min-width:0; margin:-6px -10px; padding:6px 10px; border-radius:12px; cursor:ew-resize; user-select:none; touch-action:none;
  transition:background .2s; }
.timer-lecture:hover, .timer-lecture:focus-visible, .timer-lecture.glisse { background:var(--fill); }
.timer-lecture:focus-visible { outline:2px solid var(--ink); outline-offset:0; }
/* la règle : des graduations à la seconde et à la demi-minute, qui défilent avec la valeur */
.regle { position:relative; height:9px; margin:2px 0 1px; opacity:0; transition:opacity .2s;
  /* deux pixels par seconde : un trait fin toutes les trois secondes, un trait clair toutes les trente */
  background:linear-gradient(90deg, var(--ink-2) 1px, transparent 1px) var(--x, 0) 0 / 60px 9px repeat-x,
    linear-gradient(90deg, var(--line-strong) 1px, transparent 1px) var(--x, 0) 3px / 6px 6px repeat-x;
  -webkit-mask:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.regle::after { content:""; position:absolute; left:50%; top:-3px; width:2px; height:12px; margin-left:-1px; border-radius:1px; background:var(--ink); }
.timer-lecture:hover .regle, .timer-lecture:focus-visible .regle, .timer-lecture.glisse .regle { opacity:1; }
.timer-lecture.glisse .thin { color:var(--ink); }
.timer-lecture .thin { font-size:40px; font-weight:300; color:var(--ink-2); transition:color .3s; }
#timerBox.marche .timer-lecture .thin { color:var(--ink); }
#timerBox.marche .timer-lecture .lbl { color:var(--ok); }
.segments { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2px; padding:3px; border-radius:11px; background:var(--fill); }
.segments button { height:32px; border-radius:8px; font-size:13.5px; color:var(--ink-2); transition:background .16s, color .16s; }
.segments button:hover { color:var(--ink); }
.segments button[aria-checked="true"] { background:var(--surface-3); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.duree { grid-column:1 / -1; display:flex; align-items:center; gap:6px; }
.duree input { width:58px !important; text-align:center; font-variant-numeric:tabular-nums; }
.duree i { font-style:normal; font-size:13px; color:var(--dim); margin-right:4px; }
.presets { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.presets button { height:28px; padding:0 10px; border-radius:999px; background:var(--fill); font-size:12.5px; color:var(--ink-2); transition:background .16s, color .16s; }
.presets button:hover { background:var(--fill-2); color:var(--ink); }
.presets button[aria-pressed="true"] { background:var(--accent-fill); color:var(--accent-ink); }

/* --- le lien de diffusion : un bouton rond, une bulle de verre --- */
.head-acts { display:flex; gap:8px; align-items:center; }
.pop-ancre { position:relative; }
.diffusion-btn { display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 14px 0 6px; border-radius:999px; background:var(--fill);
  font-size:14px; font-weight:600; transition:background .16s, box-shadow .2s; }
.diffusion-btn:hover, .diffusion-btn[aria-expanded="true"] { background:var(--fill-2); }
.diffusion-btn[aria-expanded="true"] { box-shadow:0 0 0 1px var(--line-strong); }
.antenne-ic { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent-fill); color:var(--accent-ink); }
.antenne-ic svg { width:16px; height:16px; stroke-width:1.9; }
.diffusion-point { width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
.diffusion-point.on { background:var(--ok); box-shadow:0 0 8px var(--ok); }

.diffusion-pop { position:absolute; right:0; top:48px; z-index:6; display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; width:min(420px, calc(100vw - 32px)); padding:16px; border-radius:20px;
  background:rgba(24,24,23,.9); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.06); transform-origin:top right; animation:rPop .3s var(--spring); }
@keyframes rPop { from { opacity:0; transform:translateY(-6px) scale(.96); } }
.diffusion-tete { display:flex; align-items:center; gap:14px; min-width:0; }
/* ⚠️ le lien tient sur une ligne : sans minmax(0, 1fr) sur la bulle et
   min-width:0 ici, il élargissait la grille et tout débordait à droite */
.diffusion-tete h3 { font-size:16px; font-weight:680; letter-spacing:-.012em; }
.diffusion-tete p { font-size:13px; color:var(--dim); }
.diffusion-tete p.on { color:var(--ok); }
/* l'antenne émet quand une source est connectée */
.onde { position:relative; display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:50%; background:var(--fill-2); color:var(--ink-2); }
.onde svg { width:22px; height:22px; }
.onde::before, .onde::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 1.5px var(--ok); opacity:0; }
.onde.on { background:var(--ok-soft); color:var(--ok); }
.onde.on::before { animation:rOnde 2.2s var(--ease) infinite; }
.onde.on::after { animation:rOnde 2.2s var(--ease) 1.1s infinite; }
@keyframes rOnde { from { opacity:.7; transform:scale(1); } to { opacity:0; transform:scale(1.7); } }
.diffusion-lien { display:flex; align-items:center; gap:6px; min-width:0; padding:4px 4px 4px 12px; border-radius:12px; background:var(--surface-2); box-shadow:0 0 0 1px var(--line); }
.diffusion-lien code { flex:1; min-width:0; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.diffusion-copie { height:42px; width:100%; border-radius:12px; font-size:14.5px; }
.diffusion-copie svg { width:17px; height:17px; }
.diffusion-copie.copie { background:var(--ok); color:#06120b; }
.diffusion-specs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.diffusion-specs li { display:grid; align-content:start; gap:2px; min-width:0; padding:9px 10px; border-radius:11px; background:var(--fill); }
.diffusion-specs b { font-size:13px; font-weight:650; }
.diffusion-specs span { font-size:11.5px; color:var(--dim); line-height:1.3; }

/* =============================================================================
   Réglages — des sections qui entrent l'une après l'autre
   ============================================================================= */
.vue--reglages { max-width:1080px; }
.reglages { display:grid; gap:16px; }
.rg { position:relative; display:grid; gap:16px; padding:20px; border-radius:22px; background:rgba(22,22,21,.92); box-shadow:0 0 0 1px var(--line), 0 20px 50px -30px rgba(0,0,0,.8);
  animation:rgEntre .6s var(--spring) calc(var(--i, 0) * 70ms) backwards; }
@keyframes rgEntre { from { opacity:0; transform:translateY(14px) scale(.985); } }
.rg-duo { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; }
.rg-tete { display:flex; align-items:center; gap:14px; min-width:0; }
.rg-tete > div { flex:1; min-width:0; display:grid; gap:2px; }
.rg-tete h2 { font-size:17px; font-weight:680; letter-spacing:-.015em; }
.rg-tete p { font-size:13px; color:var(--dim); line-height:1.4; }
.rg-ic { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; background:var(--accent-fill); color:var(--accent-ink); }
.rg-ic svg { width:21px; height:21px; stroke-width:1.9; }
.rg-ic--twitch, .rg-ic--spotify { background:linear-gradient(135deg, #f3f3f1, #c9c8c2); }

/* l'état des événements : un point qui respire, vert quand Twitch parle */
.rg-etat { display:inline-flex; align-items:center; gap:8px; flex:none; height:30px; padding:0 12px; border-radius:999px; background:var(--fill); font-size:12.5px; font-weight:600; color:var(--ink-2); }
.rg-etat i { position:relative; width:8px; height:8px; border-radius:50%; background:var(--dim); }
.rg-etat.ok { background:var(--ok-soft); color:var(--ok); }
.rg-etat.ok i { background:var(--ok); }
.rg-etat.ok i::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px var(--ok); animation:rOnde 1.8s var(--ease) infinite; }
.rg-etat.att { background:rgba(227,161,60,.12); color:#e3a13c; }
.rg-etat.att i { background:#e3a13c; animation:rRespire 1.2s ease-in-out infinite; }

.rg-comptes { display:grid; gap:8px; }
.rg-compte { display:grid; grid-template-columns:52px minmax(0, 1fr) auto; gap:14px; align-items:center; padding:10px 12px 10px 10px; border-radius:16px; background:var(--fill);
  transition:background .2s; }
.rg-compte:hover { background:var(--fill-2); }
/* un compte relié porte un anneau qui tourne lentement */
.rg-av { position:relative; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--fill-2); color:var(--dim); }
.rg-av img { position:relative; z-index:1; width:44px; height:44px; border-radius:50%; object-fit:cover; }
.rg-av svg { width:22px; height:22px; }
.relie .rg-av::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, var(--ok), transparent 35%, var(--ok) 50%, transparent 85%, var(--ok));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation:rTourne 6s linear infinite; }
@keyframes rTourne { to { transform:rotate(1turn); } }
.rg-compte-txt { display:grid; gap:1px; min-width:0; }
.rg-compte-txt span { font-size:12px; color:var(--dim); }
.rg-compte-txt b { font-size:16px; font-weight:650; letter-spacing:-.01em; }
.rg-compte-txt small { font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rg-compte .w-round svg { width:15px; height:15px; }
.ico--danger:hover { background:var(--danger-soft); color:var(--danger); }
/* armée : rouge, une jauge qui se vide en 2,6 s ; un second clic supprime */
.ico.arme { background:var(--danger) !important; color:#fff !important; opacity:1 !important; animation:rArme .45s var(--spring); }
@keyframes rJauge { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.ico.arme::after { content:""; position:absolute; left:6px; right:6px; bottom:4px; height:2px; border-radius:1px; background:rgba(255,255,255,.8); transform-origin:left;
  animation:rJauge 2.6s linear forwards; }
/* sur une vignette, la corbeille est en haut à gauche : le mot se pose à sa droite */
.plan-x.arme::before, .media-x.arme::before { right:auto; left:calc(100% + 6px); }
@keyframes rArme { 30% { transform:scale(1.15) rotate(-6deg); } 60% { transform:scale(.95) rotate(3deg); } }
.ico.arme::before { content:attr(data-arme); position:absolute; z-index:3; right:calc(100% + 8px); top:50%; translate:0 -50%; display:grid; place-items:center;
  height:26px; padding:0 10px; border-radius:999px; background:#3a1612; color:#ffb4a8; font-size:12.5px; font-weight:620; white-space:nowrap; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,82,66,.35), 0 8px 20px -8px rgba(0,0,0,.7);
  animation:rConfirme .3s var(--spring); }

/* --- les confirmations ---
   Enregistré : un liseré vert passe sur la carte et une coche se trace dans
   son coin. Refusé : la carte tremble. Supprimé : elle se replie. */
.valide { animation:rValide 1.3s var(--ease); }
@keyframes rValide {
  0% { box-shadow:0 0 0 0 rgba(76,194,138,0), inset 0 0 0 1.5px rgba(76,194,138,0); }
  16% { box-shadow:0 0 0 4px rgba(76,194,138,.16), inset 0 0 0 1.5px var(--ok); }
  100% { box-shadow:0 0 0 12px rgba(76,194,138,0), inset 0 0 0 1.5px rgba(76,194,138,0); } }
.type.valide { position:relative; }
.valide-ok { position:absolute; right:-7px; top:-7px; z-index:2; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--ok); color:#06120b;
  box-shadow:0 0 0 3px var(--bg), 0 0 18px -2px var(--ok); pointer-events:none; animation:rOkPose .5s var(--spring), rOkPart .3s var(--ease) 1.15s forwards; }
.valide-ok svg { width:13px; height:13px; stroke-width:3; stroke-dasharray:24; stroke-dashoffset:24; animation:rTrace .35s var(--ease) .14s forwards; }
@keyframes rOkPose { from { transform:scale(0) rotate(-40deg); } }
@keyframes rOkPart { to { transform:scale(.5); opacity:0; } }
@keyframes rTrace { to { stroke-dashoffset:0; } }
.refus { animation:rRefus .42s var(--ease); }
@keyframes rRefus { 0% { box-shadow:inset 0 0 0 1.5px var(--danger); } 20%, 60% { transform:translateX(-5px); } 40%, 80% { transform:translateX(5px); } 100% { box-shadow:inset 0 0 0 1.5px transparent; } }
.replie { animation:rReplie .32s var(--ease) forwards; pointer-events:none; }
@keyframes rReplie { to { opacity:0; transform:translateX(16px) scale(.97); } }
.rg-alerte { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:var(--danger-soft); color:#ff8a7e; font-size:13px; }
.rg-alerte svg { width:16px; height:16px; margin-top:2px; }
.rg-astuce { font-size:12.5px; color:var(--dim); line-height:1.5; }
.rg-astuce code { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:12px; color:var(--ink); background:var(--fill); padding:2px 6px; border-radius:6px; }

/* les liens en tuiles */
.tuiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.tuile { display:grid; gap:10px; align-content:start; min-width:0; padding:14px; border-radius:16px; background:var(--fill); box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .3s var(--ease), background .3s var(--ease), transform .35s var(--spring); }
.tuile:hover { transform:translateY(-2px); background:var(--fill-2); }
.tuile.on { box-shadow:inset 0 0 0 1px rgba(76,194,138,.35); }
.tuile-tete { display:flex; align-items:center; gap:10px; min-width:0; }
.tuile-tete b { flex:1; font-size:15px; font-weight:650; }
.tuile-ic { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:9px; background:var(--surface-3); color:var(--ink); }
.tuile-ic svg { width:17px; height:17px; }
.tuile-etat { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--dim); white-space:nowrap; }
.tuile-etat i { position:relative; width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
.tuile.on .tuile-etat { color:var(--ok); }
.tuile.on .tuile-etat i { background:var(--ok); }
.tuile.on .tuile-etat i::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px var(--ok); animation:rOnde 1.8s var(--ease) infinite; }
.tuile-lien { display:flex; align-items:center; gap:4px; min-width:0; padding:3px 3px 3px 10px; border-radius:10px; background:var(--surface-2); box-shadow:0 0 0 1px var(--line); }
.tuile-lien code { flex:1; min-width:0; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tuile-lien .ico { width:28px; height:28px; }
.tuile-copie { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; height:38px; border-radius:11px; overflow:hidden;
  background:var(--accent-fill); color:var(--accent-ink); font-size:14px; font-weight:600; transition:background .25s, transform .16s; }
.tuile-copie:active { transform:scale(.98); }
.tuile-copie svg { width:16px; height:16px; transition:transform .35s var(--spring), opacity .2s; }
.tuile-copie svg:last-child { position:absolute; opacity:0; transform:scale(.4); stroke-width:2.6; }
.tuile-copie.fait { background:var(--ok); color:#06120b; }
.tuile-copie.fait svg:first-child { opacity:0; transform:scale(.4); }
.tuile-copie.fait svg:last-child { position:static; opacity:1; transform:none; }
.tuile small { font-size:12px; color:var(--dim); }


/* ---------- Twitch ---------- */
.compte { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:10px; border-radius:var(--r); background:var(--fill); }
.compte .av { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; overflow:hidden; background:var(--fill-2); color:var(--dim); }
.compte .av img { width:100%; height:100%; object-fit:cover; }
.compte b { display:block; font-size:14.5px; font-weight:620; }
.compte span { font-size:12.5px; color:var(--dim); }
.compte .lbl { display:block; font-size:12px; }
.etapes { display:grid; gap:10px; counter-reset:e; }
.etapes li { position:relative; padding-left:30px; font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.etapes li::before { counter-increment:e; content:counter(e); position:absolute; left:0; top:0; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--fill-2); font-size:11.5px; font-weight:650; color:var(--ink); }
.etapes code, .note code { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:12px; color:var(--ink); background:var(--fill); padding:2px 6px; border-radius:6px; overflow-wrap:anywhere; }
.refus-liste { font-size:13px; color:var(--danger); }

/* ---------- la barre du brouillon des scènes ----------
   Posée en bas, au milieu de la page : un point qui respire, ce qui a changé,
   Annuler et Enregistrer. Elle tremble et rougit si l'on veut partir, verdit
   le temps de dire « Enregistré ». */
.brouillon { position:fixed; z-index:19; left:calc(236px + (100vw - 236px) / 2); bottom:22px; translate:-50% 0; display:flex; align-items:center; gap:12px;
  width:min(720px, calc(100vw - 236px - 48px)); padding:10px 10px 10px 18px; border-radius:18px; background:rgba(28,28,26,.86);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 0 0 1px var(--line-strong), 0 24px 60px -18px rgba(0,0,0,.85); animation:rBrouillon .5s var(--spring);
  transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.brouillon[hidden] { display:none; }
.brouillon.sort { animation:rBrouillonSort .26s var(--ease) forwards; }
@keyframes rBrouillon { from { opacity:0; transform:translateY(30px) scale(.96); } }
@keyframes rBrouillonSort { to { opacity:0; transform:translateY(24px) scale(.97); } }
.brouillon-point { flex:none; width:9px; height:9px; border-radius:50%; background:#f4b23e; box-shadow:0 0 0 0 rgba(244,178,62,.5); animation:rPouls 1.8s var(--ease) infinite; }
@keyframes rPouls { 70% { box-shadow:0 0 0 9px rgba(244,178,62,0); } 100% { box-shadow:0 0 0 0 rgba(244,178,62,0); } }
.brouillon-txt { flex:1; display:grid; gap:1px; min-width:0; }
.brouillon-txt b { font-size:14.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brouillon-txt span { font-size:12.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brouillon .w-round { flex:none; height:40px; }
.brouillon-ok { position:relative; gap:8px; padding:0 12px 0 16px; }
.brouillon-ok kbd { height:22px; padding:0 6px; display:grid; place-items:center; border-radius:6px; background:rgba(11,11,10,.1); font:600 11px var(--font); color:rgba(11,11,10,.55); }
.brouillon-coche { display:none; }
.brouillon-coche svg { width:16px; height:16px; stroke-width:2.6; }
.brouillon.envoi .brouillon-ok { opacity:.6; pointer-events:none; }
/* vouloir partir : elle tremble et rougit */
.brouillon.secoue { animation:rSecoue .5s var(--ease); background:rgba(70,20,16,.9); box-shadow:0 0 0 1.5px var(--danger), 0 24px 60px -18px rgba(0,0,0,.85); }
.brouillon.secoue .brouillon-point { background:var(--danger); }
@keyframes rSecoue { 15%, 55% { transform:translateX(-9px); } 35%, 75% { transform:translateX(9px); } 90% { transform:translateX(-3px); } }
/* enregistré : verte, la coche se trace à la place du raccourci */
.brouillon.fait { background:rgba(16,40,28,.92); box-shadow:0 0 0 1.5px var(--ok), 0 24px 60px -18px rgba(0,0,0,.85); }
.brouillon.fait .brouillon-point { background:var(--ok); animation:none; }
.brouillon.fait .brouillon-ok { background:var(--ok); color:#06120b; }
.brouillon.fait .brouillon-ok kbd { display:none; }
.brouillon.fait .brouillon-coche { display:grid; }
.brouillon.fait .brouillon-coche svg { stroke-dasharray:24; stroke-dashoffset:24; animation:rTrace .4s var(--ease) forwards; }
.brouillon.fait #brouillonAnnule { opacity:0; pointer-events:none; }

/* =============================================================================
   Hors ligne — le canevas de 1920 × 1080 dans le moniteur, la liste des sorties
   ============================================================================= */
.moniteur canvas { position:absolute; inset:0; width:100%; height:100%; }
.sorties { display:grid; gap:4px; max-height:430px; overflow:auto; scrollbar-width:thin; margin:0 -4px; padding:0 4px; }
.disque { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:12px; align-items:center; width:100%; padding:5px 10px 5px 5px; border-radius:11px; text-align:left;
  transition:background .16s, box-shadow .16s; }
.disque:hover { background:var(--fill); }
.disque[aria-checked="true"] { background:var(--fill-2); box-shadow:inset 0 0 0 1.5px var(--ink); }
.disque img { width:44px; height:44px; border-radius:7px; object-fit:cover; }
.disque span { display:grid; min-width:0; line-height:1.3; }
.disque b { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.disque small { font-size:12px; color:var(--dim); }

/* ---------- le petit mot de confirmation ---------- */
.toast { position:fixed; z-index:20; left:50%; bottom:24px; translate:-50% 16px; opacity:0; pointer-events:none; padding:10px 16px; border-radius:var(--r); background:var(--surface);
  box-shadow:var(--sh-3); font-size:14px; font-weight:500; color:var(--ink); transition:opacity .25s var(--ease), translate .35s var(--spring); }
.toast.on { opacity:1; translate:-50% 0; }
.toast.err { color:var(--danger); }
body:has(.brouillon:not([hidden])) .toast { bottom:100px; }
.barre { display:none; }

/* =============================================================================
   Le mini lecteur (lecteur.js) : la musique de la scène à l'antenne, dans la
   télécommande et sous le moniteur des Scènes. Le bouton rond est celui du
   timer, cerclé de l'avancée du morceau. Une ligne quand la place le permet,
   rangé sur deux ou trois dans un dock étroit.
   ============================================================================= */
.musique-tete { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.musique-morceau { flex:1 1 200px; display:flex; align-items:center; gap:12px; min-width:0; }
.musique-pochette { flex:none; width:46px; height:46px; overflow:hidden; border-radius:8px; background:var(--fill); }
.musique-pochette img { width:100%; height:100%; object-fit:cover; }
.musique-pochette img:not([src]) { visibility:hidden; }
.musique-titres { display:grid; min-width:0; line-height:1.3; }
.musique-titres b { font-size:14px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.musique-titres small { font-size:12.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.musique-commandes { display:flex; align-items:center; gap:6px; }
.musique-commandes .timer-play { width:48px; height:48px; margin:0 4px; }
.musique-commandes .timer-play svg { width:20px; height:20px; }
.musique-commandes [aria-pressed="true"] { background:var(--fill-2); color:var(--ink); }
.musique-volume { flex:1 1 100px; max-width:240px; display:flex; align-items:center; gap:8px; color:var(--dim); }
.musique-temps { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
.musique-temps span { flex:none; min-width:38px; }
.musique-temps span:last-child { text-align:right; }
.musique [disabled] { opacity:.35; pointer-events:none; }
/* la recherche : une ligne par morceau, un clic le joue à l'antenne */
.musique [data-l="recherche"].busy { opacity:.5; }
.musique-resultats { display:grid; gap:2px; margin:-6px -8px 0; max-height:320px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.musique-resultats button { width:100%; padding:6px 8px; border-radius:10px; text-align:left; transition:background .16s; }
.musique-resultats button:hover, .musique-resultats button:focus-visible { background:var(--fill); }
.musique-resultats .musique-pochette { width:40px; height:40px; }

/* =============================================================================
   La télécommande (/dock) : l'antenne, le timer et les scènes, pour un dock
   étroit du logiciel de diffusion (de 260 à 600 px de large). Sans le ciel :
   rien ne s'y anime en continu pendant le direct.
   ============================================================================= */
.dock { position:relative; z-index:1; display:grid; gap:10px; max-width:640px; margin:0 auto; padding:10px; }
.dock .insp { padding:14px; }
.dock .antenne { margin:-6px; }
/* le nom de la scène diffusée reste lu, même sous 400 px */
.dock .antenne-txt { display:grid; }
.dock .antenne-txt small { max-width:none; }
.dock .timer-face { gap:12px; }
.dock-acts { display:flex; gap:2px; margin-right:-6px; }
.ico.relance svg { animation:rTourne .6s var(--ease) reverse; }
.dock-scenes { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap:12px 10px; padding:4px 2px 0; }
.dock-scenes .plan-go { gap:6px; }
.dock-scenes .plan-vig { border-radius:11px; }
.dock-scenes .plan-pied b { font-size:13px; }

/* =============================================================================
   Tablette et téléphone — toujours en fin de feuille
   ============================================================================= */
@media (max-width:1240px) {
  .kpis { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .kpis .kpi:nth-child(5) { grid-column:span 2; }
  .regie { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .direct-grille { grid-template-columns:minmax(0, 1fr); }
  .direct-l { grid-template-columns:46px minmax(0, 1fr) 130px repeat(3, 58px); }
  .duo { grid-template-columns:minmax(0, 1fr); }
  /* la colonne de droite maigrit avant de passer dessous : l'image et ses réglages restent côte à côte */
  .studio, .studio.studio--tchat, .studio.studio--alertes { grid-template-columns:minmax(0, 1fr) 312px; }
  .biblio { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  .tuiles { grid-template-columns:minmax(0, 1fr); }
  .cmd { grid-template-columns:150px minmax(0, 1fr); }
  .cmd-meta { grid-column:1 / -1; justify-content:flex-end; }
  .bot-chiffres { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:1024px) {
  .direct-tchat { position:static; height:620px; }
  .file { position:relative; top:auto; }
  .studio, .studio.studio--tchat, .studio.studio--alertes { grid-template-columns:minmax(0, 1fr); }
  .inspecteur { position:relative; top:auto; grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items:start; }
}
@media (max-width:820px) {
  .app { grid-template-columns:minmax(0, 1fr); }
  .rail { position:sticky; top:0; z-index:10; height:auto; flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
    padding:max(10px, env(safe-area-inset-top)) 16px 10px; box-shadow:inset 0 -1px 0 var(--line); }
  .marque { padding:0; }
  .rail .onglets { display:none; }
  .rail-pied { margin:0; padding:0; }
  .qui { margin:0; padding:0; }
  .qui-txt, .qui > svg { display:none; }
  main { padding:16px 16px calc(96px + env(safe-area-inset-bottom)); }
  .barre { position:fixed; z-index:10; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); background:rgba(11,11,10,.86); backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 var(--line); }
  .barre button { display:grid; justify-items:center; gap:3px; padding:6px 0; font-size:min(10.5px, 2.75vw); white-space:nowrap; color:var(--dim); }
  .barre button svg { width:22px; height:22px; }
  .barre button[aria-selected="true"] { color:var(--ink); }
  .brouillon { left:50%; width:calc(100vw - 20px); bottom:calc(72px + env(safe-area-inset-bottom)); gap:8px; padding-left:14px; }
  .brouillon-txt span, .brouillon-ok kbd { display:none; }
  .head h1 { font-size:26px; }
  .plateau { min-height:0; gap:22px; padding:16px 16px 18px; border-radius:22px; }
  .plateau-corps { grid-template-columns:minmax(0, 1fr); gap:14px; }
  .viewers { justify-items:start; text-align:left; grid-row:1; }
  .titre-direct { margin-left:-8px; }
  .titre-direct input { height:48px; padding:0 40px 0 8px; font-size:22px; }
  .titre-direct > svg { opacity:1; }
  .regie { gap:8px; }
  .regie-t { gap:10px; padding:11px; border-radius:16px; }
  .regie-ic { width:36px; height:36px; border-radius:11px; }
  .regie-txt span, .regie-go { display:none; }
  .regie-txt b { white-space:normal; font-size:13.5px; }
  .viewers .thin { font-size:72px; }
  .direct-l { grid-template-columns:42px minmax(0, 1fr) 70px; gap:10px; }
  .direct-date { width:42px; height:42px; }
  .direct-pic { grid-template-columns:auto auto; justify-content:end; }
  .direct-pic i, .direct-n { display:none; }
  .kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kpis .kpi:last-child:nth-child(odd) { grid-column:1 / -1; }
  .kpis .kpi:nth-child(5) { grid-column:1 / -1; }
  .champs--2 { grid-template-columns:minmax(0, 1fr); }
  /* au téléphone la console quitte l'image : posée dessus, elle en cachait la moitié */
  .console { gap:8px; }
  .console-nom { display:none; }
  .console-nom + .console-timer { margin-left:auto; }
  #apercuBascule span { display:none; }
  .pellicule { grid-auto-columns:minmax(150px, 170px); }
  .type-corps .champs { padding-left:12px; }
  .type-head { gap:8px; }
}
@media (max-width:820px) {
  .rg-duo { grid-template-columns:minmax(0, 1fr); }
  .rg { padding:16px; }
  .rg-tete { flex-wrap:wrap; }
  .rg-compte .w-round span { display:none; }
  .head-acts .diffusion-btn > span:not(.antenne-ic) { display:none; }
  .head-acts .diffusion-btn { padding-right:6px; }
}
@media (max-width:560px) {
  .evt { grid-template-columns:36px minmax(0, 1fr) auto; }
  .evt time { display:none; }
  /* le bouton d'en-tête passe sous le texte, aligné sur lui */
  .rg-tete:has(> .w-round, > .rg-etat) > div { flex-basis:calc(100% - 56px); }
  .rg-tete > .w-round, .rg-tete > .rg-etat { margin-left:56px; }
  .cmd { grid-template-columns:minmax(0, 1fr); }
  .cmd-meta { flex-wrap:wrap; }
  .cmd-meta select { order:-1; flex:1 1 100%; }
  .cmd-delai { margin-right:auto; }
  /* la console des scènes tient sur une ligne avec le bouton de l'aperçu et le timer */
  .console { gap:6px; padding-right:8px; }
  .antenne { padding-right:8px; }
  .console .console-timer { padding:0 10px; }
}
@media (max-width:400px) {
  .antenne-txt { display:none; }
  .antenne { padding-right:6px; }
}
@media (hover:none) {
  .media-x, .plan-x { opacity:1; }
  .alias-x { width:26px; height:26px; }
  .regle { opacity:1; }
  .w-round:active { transform:none; background:var(--fill-2); }
  .duree input, .champ input, .champ select, .champ textarea, .dire input, .categorie input, .minuteurs input, .minuteurs textarea, .merci input { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}