.watch { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5);
         display: grid; gap: var(--s5);
         grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }

/* ── la scène ───────────────────────────────────────────────────── */
.stage { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.stage-view {
  position: relative; aspect-ratio: 16/9; background: var(--dark-bg);
  background-image: linear-gradient(var(--vp-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--vp-grid) 1px, transparent 1px);
  background-size: 26px 26px; display: grid; place-content: center;
  cursor: pointer;   /* cliquer l'image lance/arrête, convention lecteur vidéo */
}

/* ═══ Barre superposée façon YouTube ═══════════════════════════════
   Reprise de la planche approuvée Docs/refs/player-web-design.html (passe 3) :
   le rendu occupe TOUT le cadre, la barre vit en surimpression sur un dégradé
   et s'estompe pendant la lecture. Classes et valeurs reprises telles quelles,
   pour que la page et la planche ne divergent pas.
   Ce qui n'est PAS repris : les menus Vitesse et Vues. Ils existent dans le
   vrai player (player_web/index.html) ; les redessiner ici en dépendrait de
   verbes que l'ABI n'expose pas (aucune vitesse dans mu_capi.h). ═══ */
.yt-bigplay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5;
  width: 60px; height: 60px; border-radius: 50%; background: rgba(14,21,34,.55);
  border: 2px solid rgba(255,255,255,.75); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
}
.stage.paused.show-bigplay .yt-bigplay,.stage.paused .yt-bigplay:focus-visible { opacity: 1; pointer-events: auto; }
@media (pointer: coarse) {
  .stage.paused .yt-bigplay { width: 68px; height: 68px; opacity: 1; pointer-events: auto; }
  #play { width: 44px; height: 44px; }
}
.yt-bigplay, .yt-btn { touch-action: manipulation; }

.yt-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 28px 10px 8px;
  background: linear-gradient(to top, rgba(8,13,22,.82) 0%, rgba(8,13,22,.55) 45%, rgba(8,13,22,0) 100%);
  opacity: 1; transition: opacity 220ms var(--ease);
}
.yt-overlay.is-hidden { opacity: 0; pointer-events: none; }
.yt-overlay:focus-within { opacity: 1 !important; pointer-events: auto !important; }

.yt-progress-wrap { position: relative; padding: 6px 2px; cursor: pointer; touch-action: none; }
/* Buffered animation windows sit immediately against the slider's top edge. */
.yt-buffer-track { position: relative; height: 2px; overflow: hidden;
                   background: rgba(255,255,255,.12); pointer-events: none; }
.yt-buffer-track span { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.7); }
.stage.is-buffering .yt-buffer-track { opacity: .7; }
.yt-progress-track { position: relative; height: 3px; border-radius: 2px;
                     background: rgba(255,255,255,.25); transition: height 120ms var(--ease); }
.yt-progress-wrap:hover .yt-progress-track,
.yt-progress-wrap.dragging .yt-progress-track { height: 6px; }
.yt-progress-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
                      border-radius: 2px; background: var(--accent); }
.yt-progress-thumb {
  position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%,-50%); opacity: 0;
  transition: opacity 120ms var(--ease); box-shadow: 0 0 0 4px rgba(120,184,74,.22);
}
.yt-progress-wrap:hover .yt-progress-thumb,
.yt-progress-wrap.dragging .yt-progress-thumb { opacity: 1; }
.yt-progress-tip {
  position: absolute; bottom: 100%; margin-bottom: 10px; transform: translateX(-50%);
  background: rgba(8,13,22,.92); color: #fff; font-family: var(--font-mono);
  font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease); left: 0;
}
.yt-progress-wrap:hover .yt-progress-tip,
.yt-progress-wrap.dragging .yt-progress-tip { opacity: 1; }

.yt-row { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.yt-left, .yt-right { display: flex; align-items: center; gap: 2px; flex: none; }
.yt-right { margin-left: auto; }
.yt-time { white-space: nowrap; font-family: var(--font-mono); font-size: 12px;
           color: #dfe6f0; margin-left: 6px; margin-right: 2px; }
.yt-btn {
  appearance: none; border: 0; background: none; color: #fff;
  width: 36px; height: 36px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; gap: 5px; font-size: 16px;
  cursor: pointer; flex: none;
}
.yt-btn:hover { background: rgba(255,255,255,.14); }

/* ── ce qu'on sait du mouvement ─────────────────────────────────── */
.meta h1 { font-size: var(--fs-xl); line-height: 1.25; margin-top: var(--s4); }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
            margin-top: var(--s3); padding-bottom: var(--s4);
            border-bottom: 1px solid var(--border-soft); }
.actor { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.actor .av { width: 30px; height: 30px; border-radius: 50%; flex: none;
             background: var(--primary-soft); color: var(--primary-hi);
             font-size: var(--fs-xs); font-weight: 700; display: grid; place-content: center; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-left: auto; }
.fact { background: var(--bg-sunken); border: 1px solid var(--border-soft);
        border-radius: var(--r-pill); padding: 4px 11px; font-size: var(--fs-xs); }
.fact b { font-family: var(--font-mono); font-weight: 500; }
.note-manque { margin-top: var(--s4); font-size: var(--fs-xs); color: var(--ink-muted);
               line-height: 1.6; border-left: 2px solid var(--border-soft);
               padding-left: var(--s3); }

/* ── la colonne « autres scènes » ───────────────────────────────── */
.aside-title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s3); }
.mini {
  display: flex; gap: var(--s3); width: 100%; padding: var(--s2);
  border: none; background: none; font: inherit; color: var(--ink);
  text-align: left; border-radius: var(--r-sm); cursor: pointer;
}
.mini:hover { background: var(--bg-hover); }
.mini[aria-current="true"] { background: var(--primary-soft); }
.mini-thumb { width: 104px; aspect-ratio: 16/10; flex: none; border-radius: var(--r-sm);
              background: var(--dark-bg); display: grid; place-content: center;
              color: var(--dark-muted); font-size: 15px;
              border: 1px solid var(--border-soft); }
.mini-tt { font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }
.mini-st { font-size: 10px; color: var(--ink-muted); margin-top: 3px; }

@media (max-width: 1179px) {
  .watch { grid-template-columns: minmax(0, 1fr); padding: var(--s4); }
}
@media (max-width: 719px) {
  .watch { padding: 0 0 var(--s4); gap: var(--s4); }
  .stage { border-radius: 0; border-left: none; border-right: none; }
  .meta, .side { padding: 0 var(--s3); }
  .meta h1 { font-size: var(--fs-lg); }
  .facts { margin-left: 0; }
}

#playerCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#playerCanvas[hidden] { display: none; }
#playerPlaceholder[hidden] { display: none; }
#playerStatus { color: var(--ink-2); }

/* The fullscreen element must grow with the viewport, including on tall phones.
   The fallback covers browsers that do not support element fullscreen (notably
   some mobile Safari versions). Keep the controls inside the safe area. */
.player-fullscreen-fallback { overflow: hidden; }
#stageBox:fullscreen, #stageBox.is-fullscreen-fallback {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  border: 0; border-radius: 0; background: var(--dark-bg);
}
#stageBox.is-fullscreen-fallback { position: fixed; inset: 0; z-index: 1000; }
#stageBox:fullscreen #stage, #stageBox.is-fullscreen-fallback #stage {
  width: 100%; height: 100% !important; min-height: 0;
  aspect-ratio: auto; box-sizing: border-box;
}
#stageBox:fullscreen .yt-overlay, #stageBox.is-fullscreen-fallback .yt-overlay {
  padding-right: max(10px, env(safe-area-inset-right));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  padding-left: max(10px, env(safe-area-inset-left));
}

/* Lecteur embarqué (?embed=paysage|portrait, player-share.js) : la scène seule remplit l'iframe.
   Les gestes sur le canvas contrôlent la caméra comme dans la page standard. */
.is-embed .shell__bar, .is-embed #sidebar, .is-embed .meta, .is-embed .side { display: none !important; }
.is-embed .main, .is-embed .watch { padding: 0 !important; overflow: hidden; }
.is-embed .watch { display: block; }
.is-embed .stage { border: 0; border-radius: 0; }
.is-embed .stage-view { aspect-ratio: auto !important; height: 100dvh !important; }
/* Dans la page hôte, pas de notification de téléchargement : la barre des plages suffit. */
.is-embed .mu-downloads { display: none !important; }
/* Popup « Intégrer dans une page ». */
.mu-share-dialog { width: min(560px, calc(100vw - 32px)); max-width: 560px; box-sizing: border-box; }
.mu-share-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mu-share-header h3 { margin: 0; }
.mu-share-close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; }
.mu-share-dialog svg { width: 18px; height: 18px; flex: 0 0 18px; }
.mu-share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.mu-share-actions .btn { min-width: 0; min-height: 44px; gap: 8px; padding: 8px 10px; }
.mu-share-copy { box-shadow: 0 2px 5px rgba(95, 152, 54, .16); }
.mu-share-copy:hover { box-shadow: 0 4px 12px rgba(95, 152, 54, .28); }
.mu-share-copy:active { background: var(--accent-dark); transform: translateY(1px) scale(.98); box-shadow: none; }
.mu-share-copy.is-copied { background: var(--accent-dark); color: #fff; }
.mu-share-feedback { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mu-share-formats { display: flex; margin: 4px 0 6px; }
.mu-share-hint { min-height: 2.6em; }
.mu-share-code { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sunken); color: var(--ink); resize: vertical; }
@media (max-width: 420px) {
  .mu-share-actions { gap: 8px; }
  .mu-share-actions .btn { font-size: 11px; gap: 5px; padding-inline: 6px; }
  .mu-share-dialog svg { width: 16px; height: 16px; flex-basis: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-share-actions .btn { transition: none; }
}