:root {
  color-scheme: dark;
  --bg: #0e0e10; --bg-2: #151517; --fg: #e8e8e6; --fg-2: #9a9a9e; --fg-3: #5e5e64;
  --line: #27272b; --line-2: #3b3b41; --red: #ff453a;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font: 14px/1.5 var(--sans); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }

.bar { max-width: 1120px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { font: 600 13px var(--mono); letter-spacing: .18em; color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.wordmark::before { content: ''; width: 9px; height: 9px; background: var(--red); }
main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 80px; }
.label { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.note { font-size: 12.5px; line-height: 1.5; color: var(--fg-3); margin: 0; }
.note.err { color: var(--red); }

/* Panneau de réglages + aperçu */
.deck { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.panel { display: flex; flex-direction: column; }
.group { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.group:first-child { padding-top: 0; }
.radios { display: grid; }
.radios label, .check { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 5px 0; font-size: 14px; user-select: none; }
.check .label { color: var(--fg); }
input[type=radio], input[type=checkbox] { appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid var(--line-2); background: transparent; border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer; }
input[type=checkbox] { border-radius: 2px; }
input[type=radio]:checked { border-color: var(--fg); }
input[type=radio]:checked::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); }
input[type=checkbox]:checked { background: var(--fg); border-color: var(--fg); }
input[type=checkbox]:checked::after { content: ''; width: 7px; height: 4px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: translateY(-1px) rotate(-45deg); }
input:disabled, select:disabled { opacity: .35; cursor: default; }
select, input[type=text], input[type=password], textarea { width: 100%; font: 13px/1.4 var(--sans); color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; padding: 7px 9px; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--line-2); }
.stage { min-width: 0; }
.preview { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); overflow: hidden; }
.preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.preview .bubble { inset: auto auto 4% 3%; width: 22%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; transform: scaleX(-1); border: 2px solid rgba(255,255,255,.5); }
.preview .placeholder { position: absolute; inset: 0; display: grid; place-items: center; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; font: 500 140px/1 var(--mono); color: #fff; background: rgba(0,0,0,.55); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar .left, .toolbar .right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timer { font: 500 22px/1 var(--mono); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 10px; }
.timer::before, .piptimer::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite; }
.paused .timer::before, body.pip.paused .piptimer::before { animation: none; background: var(--fg-3); }
@keyframes blink { 50% { opacity: .15; } }
.status { font: 12px var(--mono); color: var(--fg-2); }

/* Boutons */
.btn { font: 500 13px/1 var(--sans); color: var(--fg); background: transparent; border: 1px solid var(--line-2); border-radius: 2px; padding: 9px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn:hover { border-color: var(--fg-2); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.primary:hover { background: #fff; border-color: #fff; }
.btn.rec { background: var(--red); border-color: var(--red); color: #fff; }
.btn.rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.btn.danger { color: var(--red); border-color: rgba(255,69,58,.45); }
.btn.danger:hover { border-color: var(--red); }
.btn.quiet { border-color: transparent; color: var(--fg-2); }
.btn.quiet:hover { color: var(--fg); border-color: transparent; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Bibliothèque */
.library { margin-top: 40px; }
.library > .label { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.library > .note { margin-top: 14px; }
.empty { padding: 18px 0; font: 12px var(--mono); color: var(--fg-3); border-bottom: 1px solid var(--line); }
.item { border-bottom: 1px solid var(--line); }
.item-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.toggle { width: 22px; height: 22px; border: 0; background: none; cursor: pointer; color: var(--fg-2); display: grid; place-items: center; padding: 0; flex: none; }
.toggle::before { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg) translate(-1px, 1px); transition: transform .15s; }
.item.open .toggle::before { transform: rotate(45deg); }
.item .title { flex: 1; min-width: 160px; font: 500 15px var(--sans); background: transparent; border-color: transparent; padding: 5px 6px; margin-left: -6px; }
.item .title:hover { border-color: var(--line); }
.item .title:focus { background: var(--bg-2); border-color: var(--line-2); }
.meta { font: 12px var(--mono); color: var(--fg-2); white-space: nowrap; cursor: pointer; }
.item-body { display: grid; gap: 12px; padding: 4px 0 22px 34px; }
.playerbox { aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); position: relative; overflow: hidden; }
.item .desc { resize: vertical; min-height: 58px; }
.item-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.progress { flex: 1; min-width: 120px; height: 2px; background: var(--line); }
.progress .bar { display: block; height: 100%; width: 0; background: var(--fg); transition: width .2s; }

/* Lecteur : écran + bulle caméra */
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.player video.screen { width: 100%; height: 100%; display: block; }
.player video.cam { position: absolute; left: 3%; bottom: 13%; width: 22%; max-width: 260px; min-width: 80px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; cursor: pointer; border: 2px solid rgba(255,255,255,.5); transition: width .15s; }
.player.cam-large video.cam { width: 38%; max-width: 440px; }
.player.cam-hidden video.cam { display: none; }
.player .cam-toggle { position: absolute; left: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.5); cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; padding: 0; }
.player .cam-toggle::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; }
.player:hover .cam-toggle, .player.cam-hidden .cam-toggle { opacity: .9; }

/* Contrôleur flottant (Document Picture-in-Picture) */
body.pip { display: grid; grid-template-rows: 1fr auto auto; height: 100vh; gap: 10px; padding: 10px; }
.pipcamwrap { position: relative; min-height: 0; display: grid; place-items: center; background: #000; border: 1px solid var(--line); }
.pipcam { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.pipcount { position: absolute; inset: 0; display: grid; place-items: center; font: 500 72px/1 var(--mono); color: #fff; pointer-events: none; }
.piptimer { font: 500 20px/1 var(--mono); font-variant-numeric: tabular-nums; display: flex; justify-content: center; align-items: center; gap: 10px; }
.pipbtns { display: flex; gap: 8px; }
.pipbtns .btn { flex: 1; justify-content: center; padding: 10px 6px; }

/* Divers */
.toast { position: fixed; left: 24px; bottom: 24px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--fg); padding: 10px 14px; font: 12.5px/1.4 var(--mono); max-width: min(560px, 90vw); z-index: 9; }
dialog { background: var(--bg-2); color: var(--fg); border: 1px solid var(--line-2); border-radius: 2px; padding: 24px; width: min(460px, 92vw); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 16px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
dialog label { display: grid; gap: 8px; margin-bottom: 12px; font-size: 13px; }

/* Page de partage */
.view h1 { font: 600 22px/1.3 var(--sans); letter-spacing: -.01em; margin: 6px 0 6px; }
.view .meta { margin: 0 0 18px; cursor: default; white-space: normal; }
.desc-view { white-space: pre-wrap; margin: 18px 0 0; max-width: 72ch; font-size: 15px; }
.view .item-actions { margin-top: 18px; }

[hidden] { display: none !important; }
@media (max-width: 760px) {
  .deck { grid-template-columns: 1fr; }
  main { padding: 20px 16px 60px; }
  .bar { padding: 14px 16px; }
  .countdown { font-size: 90px; }
  .item-body { padding-left: 0; }
  .meta { white-space: normal; }
  .toast { left: 16px; right: 16px; }
}