/* ============================================================
   Orbit Studio — Plateau de tournage
   Refonte alignée Waka Orbit · ORBIT v5
   Charge colors_and_type.css AVANT ce fichier.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--orbit-bg);
  color: var(--orbit-text-1);
  font-family: var(--orbit-font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* page texture — fine grid + corner halos (signature Orbit) */
.studio-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 48% at 96% -4%, rgba(232,131,42,0.09), transparent 62%),
    radial-gradient(48% 46% at -4% 104%, rgba(0,188,212,0.055), transparent 60%);
}
.studio-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--orbit-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--orbit-border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.04;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
i.bi { line-height: 1; }
::selection { background: var(--orbit-orange); color: var(--orbit-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--orbit-border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--orbit-text-4); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   TOP NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 22px;
  height: 60px; padding: 0 26px;
  background: rgba(15,15,18,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--orbit-border);
}
.nav .brand { display: flex; align-items: center; gap: 11px; }
.nav .brand .mk {
  width: 32px; height: 32px; flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45));
}
.nav .brand .nm { font-size: 15px; font-weight: 700; letter-spacing: var(--tr-tight); color: var(--orbit-text-1); }
.nav .brand .nm b { color: var(--orbit-orange); font-weight: 700; }

.nav .links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nav .link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  color: var(--orbit-text-3); border: 1px solid transparent;
  transition: color var(--mo-fast), background var(--mo-fast), border-color var(--mo-fast);
  cursor: pointer; background: transparent;
}
.nav .link i { font-size: 14px; }
.nav .link:hover { color: var(--orbit-text-1); background: var(--orbit-bg-surface); }
.nav .link.active { color: var(--orbit-text-1); border-color: var(--orbit-border); background: var(--orbit-bg-surface); }
.nav .link .caret { font-size: 9px; color: var(--orbit-text-4); }
.nav .spacer { flex: 1; }
.nav .meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--orbit-font-mono); font-size: 11px; color: var(--orbit-text-3);
  padding-right: 4px;
}
.nav .meta .k { color: var(--orbit-text-4); }
.nav .cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 700;
  background: var(--orbit-orange); color: var(--orbit-bg);
  border: 1px solid var(--orbit-orange); cursor: pointer;
  transition: background var(--mo-fast);
}
.nav .cta:hover { background: var(--orbit-orange-bright); }

/* ============================================================
   PAGE SHELL
   ============================================================ */
.wrap { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 34px 30px 96px; }

/* ---- page header ---- */
.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.phead .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--orbit-font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-ultra); color: var(--orbit-orange);
  margin-bottom: 14px;
}
.phead .eyebrow .ln { width: 30px; height: 1px; background: var(--orbit-orange); opacity: 0.5; }
.phead h1 {
  font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.0;
  letter-spacing: -0.025em; color: var(--orbit-white); margin: 0;
}
.phead .sub { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--orbit-text-2); max-width: 62ch; }
.phead .sub b { color: var(--orbit-text-1); font-weight: 600; }

.phead .aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.session-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: var(--orbit-bg-raised); border: 1px solid var(--orbit-border-strong);
  font-family: var(--orbit-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-wide);
  color: var(--orbit-text-2);
}
.session-badge .dot { width: 7px; height: 7px; border-radius: 50% !important; background: var(--orbit-yellow); box-shadow: 0 0 0 3px rgba(241,196,15,0.14); }
.session-badge.live .dot { background: var(--orbit-green); box-shadow: 0 0 0 3px var(--orbit-green-glow); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.head-meta { display: flex; gap: 0; border: 1px solid var(--orbit-border); }
.head-meta .hm {
  padding: 8px 14px; border-right: 1px solid var(--orbit-border); background: var(--orbit-bg-raised);
  display: flex; flex-direction: column; gap: 3px; min-width: 84px;
}
.head-meta .hm:last-child { border-right: 0; }
.head-meta .hm .l { font-family: var(--orbit-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: var(--tr-ultra); color: var(--orbit-text-4); }
.head-meta .hm .v { font-size: 15px; font-weight: 700; color: var(--orbit-text-1); font-variant-numeric: tabular-nums; }
.head-meta .hm .v .u { font-size: 11px; color: var(--orbit-text-3); font-weight: 500; }
.head-meta .hm .v.accent { color: var(--orbit-orange); }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 34px; align-items: start; }

/* ---- the chronological spine on the left of the acts ---- */
.acts { position: relative; }
.acts::before {
  content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(var(--orbit-border-strong), var(--orbit-border) 60%, transparent);
}

/* ============================================================
   ACT (accordion section)
   ============================================================ */
.act { position: relative; padding-left: 60px; margin-bottom: 16px; }
.act .node {
  position: absolute; left: 6px; top: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; z-index: 2;
  background: var(--orbit-bg-raised); border: 1px solid var(--orbit-border-strong);
  font-family: var(--orbit-font-mono); font-size: 13px; font-weight: 700; color: var(--orbit-text-3);
}
.act.active .node { border-color: var(--orbit-orange); color: var(--orbit-orange); box-shadow: 0 0 0 4px rgba(232,131,42,0.10); }
.act.done .node { border-color: var(--orbit-green); color: var(--orbit-green); }
.act.done .node::after { content: "\F26E"; font-family: var(--orbit-font-icon); }
.act.done .node .num { display: none; }
.act.locked .node { color: var(--orbit-text-4); }

.panel {
  background: var(--orbit-bg-raised); border: 1px solid var(--orbit-border);
  transition: border-color var(--mo-base), box-shadow var(--mo-base);
}
.act.active .panel { border-color: var(--orbit-border-strong); box-shadow: var(--sh-elev); }
.act.locked .panel { opacity: 0.62; }

.phead-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
  padding: 16px 18px; cursor: pointer; user-select: none;
}
.act.locked .phead-row { cursor: not-allowed; }
.phead-row .ic {
  width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid var(--orbit-border); background: var(--orbit-bg); color: var(--orbit-text-3); font-size: 16px;
}
.act.active .phead-row .ic { color: var(--orbit-orange); border-color: var(--orbit-border-strong); }
.act.done .phead-row .ic { color: var(--orbit-green); }
.phead-row .tt { min-width: 0; }
.phead-row .tt h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--orbit-text-1); letter-spacing: -0.01em; }
.phead-row .tt small { display: block; margin-top: 3px; font-size: 12px; color: var(--orbit-text-3); line-height: 1.4; }
.phead-row .chev { color: var(--orbit-text-4); font-size: 14px; transition: transform var(--mo-base); }
.act.open .phead-row .chev { transform: rotate(180deg); }

.status {
  font-family: var(--orbit-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-wide);
  padding: 4px 9px; border: 1px solid var(--orbit-border); color: var(--orbit-text-3); white-space: nowrap;
}
.status.todo { color: var(--orbit-orange); border-color: rgba(232,131,42,0.35); background: rgba(232,131,42,0.06); }
.status.locked { color: var(--orbit-text-4); }
.status.done { color: var(--orbit-green); border-color: rgba(45,190,96,0.35); background: var(--orbit-green-glow); }
.status.run { color: var(--orbit-cyan); border-color: rgba(0,188,212,0.35); }

.pbody {
  display: none; padding: 4px 22px 24px 22px; border-top: 1px solid var(--orbit-border);
}
.act.open .pbody { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .act.open .pbody { animation: bodyin var(--mo-base); }
}
@keyframes bodyin { from { transform: translateY(-4px); } to { transform: none; } }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.fg { margin-top: 18px; }
.fg:first-child { margin-top: 16px; }
.grid2 .fg, .grid3 .fg { margin-top: 0; }
.flabel {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--orbit-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-wide);
  color: var(--orbit-text-3); font-weight: 600;
}
.flabel .req { color: var(--orbit-orange); }
.fhelp { margin-top: 7px; font-size: 11.5px; color: var(--orbit-text-4); line-height: 1.5; }
.fhelp b { color: var(--orbit-text-3); font-weight: 600; }

.input, .select, .textarea {
  width: 100%; background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border);
  color: var(--orbit-text-1); padding: 10px 12px; font-size: 13.5px; font-family: var(--orbit-font-sans);
  outline: none; transition: border-color var(--mo-fast), background var(--mo-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--orbit-text-4); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--orbit-orange); background: var(--orbit-bg); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--orbit-border-strong); }
.textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236E727E'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}

/* chapters table */
.ctable { border: 1px solid var(--orbit-border); background: var(--orbit-bg); }
.ctable .chead, .ctable .crow {
  display: grid; grid-template-columns: 36px 1fr 1.6fr 38px; align-items: center;
}
.ctable .chead {
  font-family: var(--orbit-font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: var(--tr-wide);
  color: var(--orbit-text-4); border-bottom: 1px solid var(--orbit-border); background: var(--orbit-bg-raised);
}
.ctable .chead span { padding: 9px 12px; }
.ctable .crow { border-bottom: 1px solid var(--orbit-border); }
.ctable .crow:last-child { border-bottom: 0; }
.ctable .crow .n { padding: 0 12px; font-family: var(--orbit-font-mono); color: var(--orbit-orange); font-size: 12px; }
.ctable .crow input {
  width: 100%; background: transparent; border: 0; border-left: 1px solid var(--orbit-border);
  color: var(--orbit-text-1); padding: 11px 12px; font-size: 13px; font-family: var(--orbit-font-sans); outline: none;
}
.ctable .crow input:focus { background: var(--orbit-bg-surface); }
.ctable .crow .rm { display: grid; place-items: center; color: var(--orbit-text-4); cursor: pointer; height: 100%; border-left: 1px solid var(--orbit-border); }
.ctable .crow .rm:hover { color: var(--orbit-red); }

/* casting cards */
.casting { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actor {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border);
  transition: border-color var(--mo-fast);
}
.actor:hover { border-color: var(--orbit-border-strong); }
.actor .av {
  width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--orbit-bg); border: 1px solid var(--orbit-border-strong); color: var(--orbit-orange); font-size: 18px;
  position: relative; overflow: hidden;
}
.actor .av .ph { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(232,131,42,0.18), transparent); }
.actor .nm { font-size: 13.5px; font-weight: 600; color: var(--orbit-text-1); }
.actor .ro { font-family: var(--orbit-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--orbit-text-3); margin-top: 3px; }
.actor .av-tag { font-family: var(--orbit-font-mono); font-size: 9.5px; color: var(--orbit-cyan); margin-top: 4px; }
.actor .x { color: var(--orbit-text-4); cursor: pointer; padding: 6px; }
.actor .x:hover { color: var(--orbit-red); }
.actor.add {
  border-style: dashed; cursor: pointer; color: var(--orbit-text-3);
  display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13px;
  grid-template-columns: none;
}
.actor.add:hover { border-color: var(--orbit-orange); color: var(--orbit-orange); }

/* buttons */
.btnrow { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border-strong); color: var(--orbit-text-1);
  transition: border-color var(--mo-fast), background var(--mo-fast), color var(--mo-fast);
}
.btn i { font-size: 15px; }
.btn:hover { border-color: var(--orbit-text-3); background: var(--orbit-bg-hover); }
.btn.primary { background: var(--orbit-orange); border-color: var(--orbit-orange); color: var(--orbit-bg); font-weight: 700; }
.btn.primary:hover { background: var(--orbit-orange-bright); border-color: var(--orbit-orange-bright); }
.btn.ghost { background: transparent; border-color: var(--orbit-border); color: var(--orbit-text-2); }
.btn.ghost:hover { color: var(--orbit-text-1); border-color: var(--orbit-border-strong); }
.btn.cyan { background: transparent; border-color: rgba(0,188,212,0.4); color: var(--orbit-cyan); }
.btn.cyan:hover { background: rgba(0,188,212,0.08); }
.btn.sm { padding: 7px 12px; font-size: 12px; }
.btn.sm i { font-size: 13px; }
.btn-note { font-family: var(--orbit-font-mono); font-size: 11px; color: var(--orbit-text-4); }

/* section sub-blocks */
.subblock { margin-top: 18px; border: 1px solid var(--orbit-border); background: var(--orbit-bg); }
.subblock-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--orbit-border);
}
.subblock-h strong { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--orbit-text-1); font-weight: 700; }
.subblock-h strong i { color: var(--orbit-orange); }
.subblock-b { padding: 16px; }

/* hint banner */
.hint {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px;
  background: rgba(0,188,212,0.05); border: 1px solid rgba(0,188,212,0.25); margin-top: 16px;
}
.hint i { color: var(--orbit-cyan); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.hint .t { font-size: 12.5px; color: var(--orbit-text-2); line-height: 1.55; }

/* dialogue/replies preview */
.replies { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.reply {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border);
  border-left: 2px solid var(--orbit-border-strong);
}
.reply .who {
  width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--orbit-bg); border: 1px solid var(--orbit-border); font-family: var(--orbit-font-mono);
  font-size: 11px; font-weight: 700; color: var(--orbit-orange);
}
.reply .meta { font-family: var(--orbit-font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--orbit-text-4); margin-bottom: 4px; display: flex; gap: 10px; }
.reply .meta .nm { color: var(--orbit-text-2); }
.reply .tx { font-size: 13px; color: var(--orbit-text-1); line-height: 1.5; }

/* avatar tiles (act 3) */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.tile { background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border); }
.tile .thumb {
  aspect-ratio: 16/9; background: var(--orbit-bg); position: relative; overflow: hidden;
  display: grid; place-items: center; color: var(--orbit-text-4);
  background-image: radial-gradient(circle at 50% 40%, rgba(232,131,42,0.10), transparent 60%);
}
.tile .thumb .pf { font-size: 30px; color: var(--orbit-text-3); }
.tile .thumb .badge {
  position: absolute; top: 8px; left: 8px; font-family: var(--orbit-font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: var(--tr-wide); padding: 3px 6px;
  background: rgba(15,15,18,0.7); border: 1px solid var(--orbit-border); color: var(--orbit-text-2);
}
.tile .thumb .dur { position: absolute; bottom: 8px; right: 8px; font-family: var(--orbit-font-mono); font-size: 10px; color: var(--orbit-text-1); background: rgba(15,15,18,0.7); padding: 2px 6px; }
.tile .meta { padding: 10px 12px; }
.tile .meta .nm { font-size: 12.5px; font-weight: 600; color: var(--orbit-text-1); }
.tile .meta .st { font-family: var(--orbit-font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: var(--tr-wide); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.tile .meta .st .d { width: 6px; height: 6px; border-radius: 50% !important; }
.tile .meta .st.ok { color: var(--orbit-green); } .tile .meta .st.ok .d { background: var(--orbit-green); }
.tile .meta .st.run { color: var(--orbit-cyan); } .tile .meta .st.run .d { background: var(--orbit-cyan); animation: pulse 1.2s infinite; }
.tile .meta .st.wait { color: var(--orbit-text-4); } .tile .meta .st.wait .d { background: var(--orbit-text-4); }

/* visuals summary (act 5) */
.visuals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.vcard { background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border); }
.vcard.set { border-color: var(--orbit-border-strong); }
.vcard .vh { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--orbit-border); }
.vcard .vh strong { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--orbit-text-1); font-weight: 600; }
.vcard .vh strong i { color: var(--orbit-text-3); font-size: 12px; }
.vcard.set .vh strong i { color: var(--orbit-orange); }
.vbadge { font-family: var(--orbit-font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: var(--tr-wide); padding: 2px 5px; border: 1px solid var(--orbit-border); color: var(--orbit-text-4); }
.vcard.set .vbadge { color: var(--orbit-bg); background: var(--orbit-green); border-color: var(--orbit-green); }
.vthumb { aspect-ratio: 16/9; display: grid; place-items: center; background: #07080C; color: var(--orbit-text-4); font-size: 10px; text-align: center; line-height: 1.4; position: relative; overflow: hidden; }
.vthumb .mini { position: absolute; inset: 0; }
.vact { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; }
.vact .ed { font-family: var(--orbit-font-mono); font-size: 10px; color: var(--orbit-text-3); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.vact .ed:hover { color: var(--orbit-orange); }
.vact small { font-family: var(--orbit-font-mono); font-size: 9.5px; color: var(--orbit-text-4); }

/* big "open studio" cta block */
.studio-cta {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  margin-top: 16px; padding: 20px; border: 1px solid var(--orbit-border-strong);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(232,131,42,0.10), transparent 60%),
    var(--orbit-bg-surface);
}
.studio-cta .tx h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--orbit-white); }
.studio-cta .tx p { margin: 0; font-size: 12.5px; color: var(--orbit-text-2); line-height: 1.55; max-width: 56ch; }

/* montage timeline */
.reel {
  aspect-ratio: 16/9; max-height: 280px; margin: 0 auto 16px; background: #07080C;
  border: 1px solid var(--orbit-border-strong); display: grid; place-items: center; position: relative; overflow: hidden;
  background-image: radial-gradient(circle at 50% 45%, rgba(0,188,212,0.08), transparent 55%);
}
.reel .play { width: 64px; height: 64px; border: 1px solid var(--orbit-border-strong); display: grid; place-items: center; color: var(--orbit-text-1); font-size: 24px; background: rgba(15,15,18,0.6); }
.reel .ov { position: absolute; left: 14px; bottom: 14px; font-family: var(--orbit-font-mono); font-size: 11px; color: var(--orbit-text-2); }
.timeline { display: flex; gap: 4px; margin-top: 12px; height: 54px; }
.tl-clip { flex: 1; border: 1px solid var(--orbit-border); background: var(--orbit-bg-surface); position: relative; min-width: 0; overflow: hidden; }
.tl-clip .lab { position: absolute; left: 6px; bottom: 5px; font-family: var(--orbit-font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--orbit-text-3); white-space: nowrap; }
.tl-clip.intro { border-top: 2px solid var(--orbit-orange); }
.tl-clip.teams { border-top: 2px solid var(--orbit-cyan); }
.tl-clip.trans { border-top: 2px solid var(--orbit-yellow); }
.tl-clip.outro { border-top: 2px solid var(--orbit-purple); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.scard { background: var(--orbit-bg-raised); border: 1px solid var(--orbit-border); }
.scard .sh {
  display: flex; align-items: center; gap: 8px; padding: 13px 15px; border-bottom: 1px solid var(--orbit-border);
  font-family: var(--orbit-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-ultra); color: var(--orbit-text-3);
}
.scard .sh i { color: var(--orbit-orange); font-size: 12px; }
.scard .sh .pct { margin-left: auto; color: var(--orbit-orange); font-weight: 700; }
.scard .sb { padding: 8px; }

/* progression stepper */
.stepper { position: relative; }
.stepper::before { content: ""; position: absolute; left: 19px; top: 14px; bottom: 14px; width: 1px; background: var(--orbit-border); }
.step {
  position: relative; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 11px;
  padding: 7px 8px; cursor: pointer; transition: background var(--mo-fast);
}
.step:hover { background: var(--orbit-bg-surface); }
.step .sn {
  width: 24px; height: 24px; display: grid; place-items: center; z-index: 1;
  background: var(--orbit-bg-raised); border: 1px solid var(--orbit-border-strong);
  font-family: var(--orbit-font-mono); font-size: 11px; font-weight: 700; color: var(--orbit-text-3);
}
.step.active .sn { background: var(--orbit-orange); border-color: var(--orbit-orange); color: var(--orbit-bg); }
.step.done .sn { background: var(--orbit-bg-raised); border-color: var(--orbit-green); color: var(--orbit-green); }
.step.done .sn::after { content: "\F26E"; font-family: var(--orbit-font-icon); }
.step.done .sn .t { display: none; }
.step .lb { font-size: 12.5px; color: var(--orbit-text-2); }
.step.active .lb { color: var(--orbit-text-1); font-weight: 600; }
.step.locked .lb { color: var(--orbit-text-4); }
.step .ck { font-size: 11px; font-family: var(--orbit-font-mono); color: var(--orbit-text-4); }
.step.done .ck { color: var(--orbit-green); }
.step.locked .ck i { color: var(--orbit-text-4); }

/* project links */
.slink {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 11px; background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border); margin: 6px;
  font-size: 12.5px; color: var(--orbit-text-1); cursor: pointer; transition: border-color var(--mo-fast), color var(--mo-fast);
}
.slink:hover { border-color: var(--orbit-orange); color: var(--orbit-orange); }
.slink span { display: flex; align-items: center; gap: 9px; }
.slink span i { color: var(--orbit-text-3); }
.slink:hover span i { color: var(--orbit-orange); }
.slink .count { font-family: var(--orbit-font-mono); font-size: 11px; color: var(--orbit-text-3); background: var(--orbit-bg); padding: 2px 7px; border: 1px solid var(--orbit-border); }

.shelp { padding: 12px 14px; font-size: 12px; color: var(--orbit-text-3); line-height: 1.6; }
.shelp b { color: var(--orbit-text-2); }

/* telemetry mini */
.telem { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--orbit-border); margin: 6px; }
.telem .t { background: var(--orbit-bg-raised); padding: 11px 12px; }
.telem .t .l { font-family: var(--orbit-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--orbit-text-4); }
.telem .t .v { font-size: 16px; font-weight: 700; color: var(--orbit-text-1); margin-top: 3px; font-variant-numeric: tabular-nums; }
.telem .t .v.accent { color: var(--orbit-orange); }
.telem .t .v.cyan { color: var(--orbit-cyan); }
.telem .t .v .u { font-size: 11px; color: var(--orbit-text-3); font-weight: 500; }

/* ============================================================
   VISUAL EDITOR MODAL (Canva-like)
   ============================================================ */
.editor-backdrop {
  position: fixed; inset: 0; z-index: 500; background: rgba(8,8,11,0.78); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 26px;
}
.editor-backdrop.open { display: flex; }
.editor {
  width: 100%; max-width: 1500px; height: 100%; max-height: 880px;
  background: var(--orbit-bg-raised); border: 1px solid var(--orbit-border-strong); box-shadow: var(--sh-elev);
  display: grid; grid-template-rows: 50px 1fr; grid-template-columns: 248px 1fr 232px;
  grid-template-areas: "top top top" "left canvas right";
  overflow: hidden;
}
.ed-top {
  grid-area: top; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: var(--orbit-bg); border-bottom: 1px solid var(--orbit-border);
}
.ed-top .ed-name { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--orbit-text-1); padding-right: 6px; }
.ed-top .ed-name .kind { font-family: var(--orbit-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--orbit-bg); background: var(--orbit-orange); padding: 2px 6px; }
.ed-divider { width: 1px; height: 22px; background: var(--orbit-border); margin: 0 4px; }
.ed-tabs { display: flex; gap: 2px; }
.ed-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 11.5px;
  color: var(--orbit-text-3); border: 1px solid transparent; background: transparent; cursor: pointer;
}
.ed-tab i { font-size: 13px; }
.ed-tab:hover { color: var(--orbit-text-1); background: var(--orbit-bg-surface); }
.ed-tab.active { color: var(--orbit-orange); border-color: var(--orbit-border); background: var(--orbit-bg-surface); }
.ed-ico { width: 30px; height: 30px; display: grid; place-items: center; color: var(--orbit-text-3); border: 1px solid transparent; cursor: pointer; font-size: 14px; }
.ed-ico:hover { color: var(--orbit-text-1); background: var(--orbit-bg-surface); border-color: var(--orbit-border); }
.ed-spacer { flex: 1; }

.ed-left { grid-area: left; background: var(--orbit-bg-raised); border-right: 1px solid var(--orbit-border); overflow-y: auto; }
.ed-right { grid-area: right; background: var(--orbit-bg-raised); border-left: 1px solid var(--orbit-border); overflow-y: auto; }
.ed-sec { padding: 12px; border-bottom: 1px solid var(--orbit-border); }
.ed-sec h4 { margin: 0 0 10px; font-family: var(--orbit-font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: var(--tr-ultra); color: var(--orbit-text-3); }
.ed-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ed-tool {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 4px;
  background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border); color: var(--orbit-text-2);
  font-size: 10px; cursor: pointer; transition: border-color var(--mo-fast), color var(--mo-fast);
}
.ed-tool i { font-size: 16px; }
.ed-tool:hover { border-color: var(--orbit-orange); color: var(--orbit-orange); }
.ed-presets { display: flex; flex-direction: column; gap: 5px; }
.ed-preset {
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px; padding: 8px 9px;
  background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border); cursor: pointer; text-align: left;
  transition: border-color var(--mo-fast);
}
.ed-preset:hover { border-color: var(--orbit-border-strong); }
.ed-preset i { font-size: 15px; color: var(--orbit-text-3); }
.ed-preset:hover i { color: var(--orbit-orange); }
.ed-preset span { display: flex; flex-direction: column; min-width: 0; }
.ed-preset .pt { font-size: 12px; color: var(--orbit-text-1); font-weight: 500; }
.ed-preset .ps { font-size: 10px; color: var(--orbit-text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ed-canvas { grid-area: canvas; background: #0A0A0D; display: grid; place-items: center; padding: 24px; overflow: hidden; position: relative;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 32px 32px; }
.ed-frame { width: 100%; max-width: 760px; aspect-ratio: 16/9; background: #07080C; border: 1px solid var(--orbit-border-strong); box-shadow: var(--sh-elev); position: relative; overflow: hidden; }
.ed-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-family: var(--orbit-font-mono); font-size: 10px; color: var(--orbit-text-4); background: rgba(15,15,18,0.8); border: 1px solid var(--orbit-border); padding: 6px 12px; }

.ed-align { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ed-align button { aspect-ratio: 1; display: grid; place-items: center; background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border); color: var(--orbit-text-2); cursor: pointer; font-size: 14px; }
.ed-align button:hover { border-color: var(--orbit-orange); color: var(--orbit-orange); }
.ed-layers { display: flex; flex-direction: column; gap: 4px; }
.ed-layer { display: grid; grid-template-columns: 18px 1fr 16px; align-items: center; gap: 8px; padding: 7px 8px; background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border); font-size: 11.5px; color: var(--orbit-text-2); cursor: pointer; }
.ed-layer:hover { border-color: var(--orbit-border-strong); }
.ed-layer.sel { border-color: var(--orbit-orange); color: var(--orbit-text-1); }
.ed-layer i { color: var(--orbit-text-4); font-size: 12px; }
.ed-layer.sel i { color: var(--orbit-orange); }

/* editor canvas demo content */
.demo-intro { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 56px;
  background: radial-gradient(60% 90% at 80% 20%, rgba(232,131,42,0.16), transparent 60%); }
.demo-intro .eb { font-family: var(--orbit-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-ultra); color: var(--orbit-orange); }
.demo-intro .tt { font-size: 40px; font-weight: 800; color: #fff; line-height: 1.0; letter-spacing: -0.02em; margin-top: 14px; max-width: 70%; }
.demo-intro .st { font-size: 15px; color: var(--orbit-text-2); margin-top: 14px; }
.demo-intro .ring { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); width: 120px; height: 120px; border: 1px solid rgba(232,131,42,0.4); border-radius: 50% !important; }
.demo-intro .ring::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(0,188,212,0.4); border-radius: 50% !important; }
.demo-sel { position: absolute; outline: 1px solid var(--orbit-orange); outline-offset: 2px; }
.demo-sel .h { position: absolute; width: 8px; height: 8px; background: var(--orbit-bg); border: 1px solid var(--orbit-orange); }
.demo-sel .h.tl { left: -4px; top: -4px; } .demo-sel .h.tr { right: -4px; top: -4px; }
.demo-sel .h.bl { left: -4px; bottom: -4px; } .demo-sel .h.br { right: -4px; bottom: -4px; }

/* responsive */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .sidebar .scard { flex: 1; min-width: 260px; }
  .visuals { grid-template-columns: repeat(3, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .grid2, .grid3, .casting { grid-template-columns: 1fr; }
  .phead { flex-direction: column; align-items: flex-start; }
  .visuals, .tiles { grid-template-columns: 1fr 1fr; }
  .editor { grid-template-columns: 1fr; grid-template-areas: "top" "canvas"; }
  .ed-left, .ed-right { display: none; }
}

/* ============================================================
   Participant identity — source de vérité (studio-session.js)
   Pastille avatar réutilisée : casting, répliques, plans, Teams.
   ============================================================ */
.pchip {
  display: grid; place-items: center; flex-shrink: 0;
  border-radius: 50% !important;
  background: var(--g); border: 1.5px solid var(--h); color: var(--h);
  font-family: var(--orbit-font-mono); font-weight: 700; letter-spacing: 0.02em;
}

/* ---- casting éditable (acte 1) ---- */
.actor .av { width: 44px; height: 44px; background: none; border: 0; overflow: visible; }
.actor-fields { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.actor-fields .nm-in, .actor-fields .ro-in {
  background: transparent; border: 1px solid transparent; width: 100%;
  color: var(--orbit-text-1); font-family: var(--orbit-font-sans); padding: 2px 5px;
  transition: border-color var(--mo-fast), background var(--mo-fast);
}
.actor-fields .nm-in { font-size: 13.5px; font-weight: 600; }
.actor-fields .ro-in { font-size: 11px; color: var(--orbit-text-3); }
.actor-fields .nm-in:hover, .actor-fields .ro-in:hover { border-color: var(--orbit-border); }
.actor-fields .nm-in:focus, .actor-fields .ro-in:focus { border-color: var(--orbit-orange); background: var(--orbit-bg); color: var(--orbit-white); }
.actor-fields .av-tag { font-family: var(--orbit-font-mono); font-size: 9.5px; color: var(--orbit-cyan); margin-top: 2px; display: flex; align-items: center; gap: 5px; }

/* ---- répliques colorées par intervenant (acte 2) ---- */
.reply .who { background: var(--g); border-color: var(--h); color: var(--h); }
.reply-body { min-width: 0; }
.reply .meta .rl { color: var(--orbit-text-3); }
.reply .meta .rk { color: var(--orbit-text-4); margin-left: auto; }

/* ---- plans avatar (acte 3) : tint par intervenant ---- */
.tile .thumb { background-image: radial-gradient(circle at 50% 38%, var(--g), transparent 64%); }

/* ============================================================
   ACTE 4 — écran Teams : UNE case par participant
   (corrige le défaut 3 intervenants → 2 cases)
   ============================================================ */
.teams-grid { position: absolute; left: 16px; right: 16px; top: 16px; bottom: 52px; display: grid; gap: 10px; }
.tcell {
  position: relative; border: 1px solid var(--h); overflow: hidden;
  display: grid; place-items: center; background: rgba(15,15,18,0.4);
}
.tcell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, var(--g), transparent 72%); }
.tcell-av { position: relative; z-index: 1; }
.tcell-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(15,15,18,0.82); border: 1px solid var(--orbit-border); padding: 3px 8px;
}
.tcell-nm { font-size: 11px; font-weight: 600; color: var(--orbit-text-1); }
.tcell-ro { font-family: var(--orbit-font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--orbit-text-3); }
.tcell-live {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--orbit-font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: var(--tr-wide);
  color: var(--orbit-green); background: rgba(15,15,18,0.7); padding: 2px 6px;
}
.tcell-live .d { width: 5px; height: 5px; border-radius: 50% !important; background: var(--orbit-green); animation: pulse 1.2s infinite; }
.reel .ov.teams-cap {
  left: 16px; right: 16px; bottom: 14px; transform: none;
  text-align: center; font-family: var(--orbit-font-sans); font-size: 12.5px;
  background: rgba(15,15,18,0.88); border: 1px solid var(--orbit-border); padding: 7px 16px; color: var(--orbit-text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 2px solid var(--screen-accent, var(--orbit-border));
}
.teams-reel.cap-top .ov.teams-cap { bottom: auto; top: 14px; border-bottom: 1px solid var(--orbit-border); border-top: 2px solid var(--screen-accent, var(--orbit-border)); }

/* Teams display variants driven by the personalization panel */
.teams-grid.hide-names .tcell-tag { display: none; }
.teams-grid.hide-live .tcell-live { display: none; }
.teams-grid.round .tcell { border-radius: 10px !important; }

/* ============================================================
   Personnalisation de l'écran (acte 4)
   ============================================================ */
.screen-tools { margin-top: 14px; border: 1px solid var(--orbit-border); background: var(--orbit-bg); }
.screen-tools .st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 12px 14px; }
.screen-tools .st-row + .st-row { border-top: 1px solid var(--orbit-border); }
.st-group { display: flex; align-items: center; gap: 10px; }
.st-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--orbit-font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: var(--tr-ultra); color: var(--orbit-text-3); }
.st-label i { color: var(--orbit-text-4); font-size: 12px; }

.seg-pick { display: inline-flex; border: 1px solid var(--orbit-border); }
.seg-pick button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; cursor: pointer;
  font-size: 11.5px; color: var(--orbit-text-3); background: var(--orbit-bg-surface);
  border: 0; border-right: 1px solid var(--orbit-border); font-family: var(--orbit-font-sans);
}
.seg-pick button:last-child { border-right: 0; }
.seg-pick button i { font-size: 13px; }
.seg-pick button:hover { color: var(--orbit-text-1); }
.seg-pick button.active { background: rgba(232,131,42,0.10); color: var(--orbit-orange); }

.swatch-row { display: inline-flex; gap: 6px; }
.swatch-row .sw {
  width: 24px; height: 24px; cursor: pointer; padding: 0;
  background: var(--sw); border: 1px solid var(--orbit-border-strong);
  position: relative;
}
.swatch-row .sw:hover { border-color: var(--orbit-text-3); }
.swatch-row .sw.active { border-color: var(--orbit-orange); box-shadow: 0 0 0 1px var(--orbit-orange); }
.swatch-row .sw.active::after { content: "\F26E"; font-family: var(--orbit-font-icon); position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }

.st-flags { gap: 18px; }
.st-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--orbit-text-2); cursor: pointer; user-select: none; }
.st-toggle .tg { width: 34px; height: 20px; border: 1px solid var(--orbit-border-strong); background: var(--orbit-bg-surface); position: relative; flex-shrink: 0; transition: background var(--mo-fast), border-color var(--mo-fast); }
.st-toggle .tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--orbit-text-3); transition: left var(--mo-fast), background var(--mo-fast); }
.st-toggle .tg.on { background: rgba(232,131,42,0.16); border-color: var(--orbit-orange); }
.st-toggle .tg.on::after { left: 16px; background: var(--orbit-orange); }
.st-grow { flex: 1; min-width: 12px; }
.st-cap {
  min-width: 240px; flex: 1; max-width: 420px;
  background: var(--orbit-bg-surface); border: 1px solid var(--orbit-border);
  color: var(--orbit-text-1); font-size: 12.5px; font-family: var(--orbit-font-sans); padding: 7px 10px; outline: none;
}
.st-cap:focus { border-color: var(--orbit-orange); }