:root {
  /* Dusk Mastering — cf. Claude Design « Logo studio de mastering » */
  --bg: oklch(0.16 0.012 40);          /* ≈ #221C19 */
  --panel: oklch(0.19 0.012 40);
  --panel-2: oklch(0.22 0.012 40);
  --line: oklch(1 0 0 / 0.12);
  --text: oklch(0.97 0.004 60);        /* ≈ #F7F4F1 */
  --muted: oklch(0.7 0.01 40);
  --accent: oklch(0.78 0.09 50);       /* ≈ #E4A276 */
  --accent-hi: oklch(0.86 0.07 50);
  --accent-ink: oklch(0.16 0.012 40);
  --live: oklch(0.8 0.14 150);
  --danger: oklch(0.72 0.17 25);
  --radius: 2px;
  --display: 'Nunito', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
.hidden { display: none !important; }

/* ---------- boutons & champs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--line); cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  user-select: none; -webkit-user-select: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.btn.primary:hover { background: transparent; color: var(--accent); }
.btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.off { color: var(--danger); border-color: oklch(0.72 0.17 25 / 0.5); }
.btn.danger { background: transparent; border-color: oklch(0.72 0.17 25 / 0.5); color: var(--danger); }
.btn.danger:hover { background: oklch(0.72 0.17 25 / 0.12); color: var(--danger); border-color: var(--danger); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.icon { width: 44px; padding: 0; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label, .label, .eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.eyebrow { color: var(--accent); }
input[type=text], input[type=password], select, textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; outline: none; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type=range] { accent-color: var(--accent); width: 100%; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- landing ---------- */
.landing {
  min-height: 100%; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(ellipse at top, oklch(0.24 0.04 45) 0%, var(--bg) 60%);
}
.card {
  width: 100%; max-width: 440px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--accent); }
.brand .sun { width: 38px; height: 38px; flex: none; }
.brand-txt { display: flex; flex-direction: column; gap: 2px; font-family: var(--display); line-height: 1; }
.brand .w1 { font-weight: 800; font-size: 16px; color: var(--text); letter-spacing: .02em; }
.brand .w2 { font-weight: 600; font-size: 8.5px; letter-spacing: .36em; text-transform: uppercase; color: var(--accent); }
.hero-title { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.05; margin: 8px 0 10px; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- salle ---------- */
.app { display: grid; grid-template-rows: auto 1fr auto; height: 100%; height: 100dvh; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.topbar .room-id { font-family: var(--mono); font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.status-dot.ok { background: var(--live); }
.status-dot.bad { background: var(--danger); }

.main { display: grid; grid-template-columns: 1fr 360px; min-height: 0; }
.stage { position: relative; min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.side { border-left: 1px solid var(--line); min-height: 0; overflow: auto; display: flex; flex-direction: column; }

.screen-wrap { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; flex: 1 1 auto; min-height: 200px; display: flex; }
.screen-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.screen-wrap .tag { position: absolute; left: 10px; top: 10px; }
.screen-wrap .fs { position: absolute; right: 10px; top: 10px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.stage.no-screen .tiles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); flex: 1; align-content: center; }
.tile {
  position: relative; aspect-ratio: 16 / 9; background: var(--panel); border-radius: var(--radius);
  overflow: hidden; border: 2px solid transparent; transition: border-color .15s;
}
.tile.talking { border-color: var(--accent); }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; z-index: 1; }
.tile.self video { transform: scaleX(-1); }
.tile .avatar { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 40px; color: oklch(0.4 0.02 45); }
.tile .name {
  position: absolute; z-index: 2; left: 8px; bottom: 8px; display: flex; gap: 6px; align-items: center;
  background: oklch(0 0 0 / 0.6); padding: 3px 9px; border-radius: var(--radius); font-size: 13px;
}
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: var(--radius); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--panel-2); color: var(--muted); }
.pill.live { background: oklch(0.8 0.14 150 / 0.14); color: var(--live); }
.pill.accent { background: var(--accent); color: var(--accent-ink); }
.pill.warn { background: oklch(0.72 0.17 25 / 0.15); color: var(--danger); }
.mic-ico { width: 8px; height: 8px; border-radius: 50%; background: #555; }
.mic-ico.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.section { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.section h3 { margin: 0 0 12px; font-family: var(--mono); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

.format-line { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.15; margin-bottom: 6px; }
.format-line .sep { color: var(--accent); margin: 0 6px; }

/* meters */
.meters { display: flex; gap: 3px; height: 110px; margin: 10px 0 4px; }
.meter { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.meter .bar { position: relative; flex: 1; width: 100%; max-width: 18px; background: oklch(0.12 0.01 40); border-radius: 1px; overflow: hidden; }
.meter .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to top, var(--live) 0%, var(--live) 60%, var(--accent) 80%, var(--danger) 100%); background-size: 100% 110px; background-position: bottom; }
.meter .clip { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; }
.meter .clip.on { background: var(--danger); }
.meter .lbl { font-family: var(--mono); font-size: 8px; color: var(--muted); white-space: nowrap; }

/* talkback */
.talk-btn {
  width: 100%; min-height: 52px; border-radius: var(--radius); font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .16em;
  background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; touch-action: none;
}
.talk-btn.open { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* chat */
.chat { display: flex; flex-direction: column; flex: 1; min-height: 220px; }
.chat-log { flex: 1; overflow: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { font-size: 14px; }
.msg .who { font-weight: 700; margin-right: 6px; }
.msg .who.me { color: var(--accent); }
.msg time { font-family: var(--mono); }
code { font-family: var(--mono); font-size: .92em; color: var(--accent); }
.msg time { color: var(--muted); font-size: 11px; margin-left: 4px; }
.chat form { display: flex; gap: 8px; padding: 10px 16px 14px; }
.chat input { flex: 1; }

/* barre de contrôle */
.controls { display: flex; justify-content: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); flex-wrap: wrap; }

/* overlay de connexion */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: grid; place-items: center; padding: 16px; z-index: 10; overflow: auto; }

.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); padding: 10px 16px; border-radius: var(--radius); z-index: 20; font-size: 14px; }

.source-progress { width: 100%; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs .btn { min-height: 32px; padding: 0 10px; font-size: 12px; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: auto; }
  .app { grid-template-rows: auto 1fr auto; }
  .stage { overflow: visible; min-height: auto; }
  .topbar .room-id { display: none; }
  .screen-wrap { min-height: 0; aspect-ratio: 16 / 10; flex: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .stage.no-screen .tiles { grid-template-columns: repeat(2, 1fr); }
  .side { border-left: 0; border-top: 1px solid var(--line); overflow: visible; min-height: auto; }
  .chat { min-height: 300px; }
  .controls .btn .txt { display: none; }
  .hero-title { font-size: 32px; }
  .topbar .brand .sun { width: 32px; height: 32px; }
}
.btn.on:hover, .btn.primary.on:hover { color: var(--accent-ink); background: var(--accent-hi); }

/* Plein écran « maison » quand le navigateur n'a pas d'API plein écran */
.screen-wrap.pseudo-fs { position: fixed; inset: 0; z-index: 50; border-radius: 0; min-height: 0; aspect-ratio: auto; }