/* The backoffice's own video player (chantier B3, assets/js/video-player.js).
   Mockup validated 2026-11-05: canvas page "Vidéo", Video-Lecteur / Video-Telephone.
   The stage is black in every theme; the text below it follows the page. */
.vp{position:relative;display:flex;flex-direction:column;gap:8px;outline:none}
.vp:focus-visible .vp-stage{box-shadow:0 0 0 2px var(--mb-primary,#3691c9)}
.vp-stage{position:relative;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;width:100%;color:#e8edf4;user-select:none;-webkit-user-select:none}
.vp-stage:fullscreen{border-radius:0;aspect-ratio:auto}
.vp-stage:-webkit-full-screen{border-radius:0}
.vp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.vp.is-zoom .vp-video{object-fit:fill;max-width:none;max-height:none}
.vp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.vp-hit{position:absolute;inset:0;cursor:grab;touch-action:none}
.vp-hit:active{cursor:grabbing}
.vp-hit[hidden],.vp-mini[hidden],.vp-wm[hidden],.vp-msg[hidden],.vp-under[hidden],.vp-big[hidden],.vp-q[hidden]{display:none !important}
.vp-big,.vp-start{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:0;
  background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vp-big svg,.vp-start svg{width:28px;height:28px;margin-left:3px}
.vp-big:hover,.vp-start:hover{background:rgba(54,145,201,.9)}
.vp-wm{position:absolute;right:18px;bottom:78px;color:rgba(255,255,255,.36);font-size:13px;font-weight:600;letter-spacing:.04em;
  text-align:right;line-height:1.3;pointer-events:none;text-transform:none}
.vp-msg{position:absolute;left:50%;top:18px;transform:translateX(-50%);max-width:80%;padding:6px 12px;border-radius:6px;
  background:rgba(0,0,0,.7);color:#e8edf4;font-size:13px;text-align:center}
.vp.is-wait .vp-stage::after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:vp-spin .8s linear infinite;pointer-events:none}
@keyframes vp-spin{to{transform:rotate(360deg)}}
.vp-mini{position:absolute;right:16px;top:16px;width:188px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:6px;touch-action:none}
.vp-mini-fr{position:relative;overflow:hidden;cursor:grab}
.vp-mini canvas{display:block;width:176px;height:auto;opacity:.85}
.vp-rect{position:absolute;border:2px solid #fff;box-shadow:0 0 0 999px rgba(0,0,0,.35);pointer-events:none}
.vp-mini small{display:flex;justify-content:space-between;color:#e8edf4;font-size:11px;margin-top:5px;font-weight:600}
.vp-bar{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,0));color:#e8edf4;transition:opacity .18s ease}
/* Playing and still (assets/js/video-player.js, goIdle): the bar fades out, nothing clicks through it,
   the cursor goes from the picture (full screen too). It comes back at once on a move. */
.vp.is-idle .vp-bar{opacity:0;pointer-events:none;transition-duration:.45s}
.vp.is-idle .vp-stage{cursor:none}
.vp-seek{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin-bottom:10px;cursor:pointer;touch-action:none}
.vp-seek::before{content:'';position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.vp-buf{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.35);border-radius:2px}
.vp-pos{position:absolute;left:0;top:0;bottom:0;width:0;background:#3691c9;border-radius:2px}
.vp-knob{position:absolute;left:0;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff}
.vp-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vp-sp{flex:1}
.vp-b{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:#e8edf4;border-radius:6px;cursor:pointer;padding:0}
.vp-b:hover{background:rgba(255,255,255,.1)}
.vp-tc{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;color:#e8edf4;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp-tc-all{color:rgba(232,237,244,.6)}
.vp-q{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:6px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#e8edf4;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.vp-q svg{width:14px;height:14px}
.vp-q.on{background:#3691c9;border-color:#3691c9;color:#fff}
.vp-q:disabled{opacity:.45;cursor:default}
.vp-q.is-auto:disabled{opacity:1;background:none}
/* Hovering the timeline: the frame at that point, its chapter, its exact timecode (assets/js/video-player.js). */
.vp-peek{position:absolute;bottom:18px;left:0;width:192px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:4}
.vp-peek[hidden]{display:none !important}
.vp-peek-v{width:192px;aspect-ratio:16/9;background:#000;border:1px solid rgba(255,255,255,.4);border-radius:6px;object-fit:contain;display:block;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.vp-peek-v[hidden]{display:none !important}
.vp-peek-tc{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;color:#fff;background:rgba(0,0,0,.78);padding:2px 7px;border-radius:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp-peek-ch{font-size:11.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.62);padding:1px 7px;border-radius:4px;max-width:192px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-peek-ch[hidden]{display:none !important}
.vp-peek-v.is-blank{opacity:0}
/* The bar's link, speed and framing buttons; the small menu above them. */
.vp-b[hidden]{display:none !important}
.vp-b.on{background:#3691c9;color:#fff}
/* The bar on one line on a computer: the chapter name gives way first, then what a narrow player can
   do without (the "1080p auto" indicator, the total time) -- measured on the player, not the page. */
.vp-stage{container-type:inline-size}
.vp-chapname{flex:0 1 auto;min-width:0}
@media (min-width:721px){.vp-row{flex-wrap:nowrap}}
@container (max-width:800px){.vp-q.is-auto:disabled{display:none}}
@container (max-width:640px){.vp-tc-all{display:none}.vp-chapname{display:none !important}}
.vp-rate{min-width:46px;justify-content:center;font-variant-numeric:tabular-nums}
.vp-menu{position:absolute;z-index:6;display:flex;flex-direction:column;min-width:170px;padding:4px;border-radius:8px;
  background:rgba(14,20,28,.96);border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.vp-menu-i{display:block;width:100%;text-align:left;padding:7px 10px 7px 26px;border:0;border-radius:5px;background:none;color:#e8edf4;
  font:inherit;font-size:13px;cursor:pointer;position:relative}
.vp-menu-i:hover,.vp-menu-i:focus-visible{background:rgba(255,255,255,.1);outline:none}
.vp-menu-i.on::before{content:'';position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:#3691c9}
.vp-msg-b{margin:0 0 0 2px;padding:0;border:0;background:none;color:#8cc8ef;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
/* Framing guides over the film's own frame (team): a crop with the rest dimmed, or the safe areas. */
.vp-guide{position:absolute;overflow:hidden;pointer-events:none}
.vp-guide[hidden],.vp.is-zoom .vp-guide{display:none !important}
.vp-guide-c{position:absolute;outline:1px dashed rgba(255,255,255,.85);box-shadow:0 0 0 9999px rgba(0,0,0,.55)}
.vp-guide-s{position:absolute;border:1px dashed rgba(255,255,255,.7)}
.vp-guide-s.is-act{inset:3.5%}
.vp-guide-s.is-title{inset:5%;border-color:rgba(255,214,102,.8)}
.vp-guide-l{position:absolute;left:4px;top:3px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:0 5px;border-radius:3px}
.vp-guide-s.is-title .vp-guide-l{top:auto;bottom:3px;color:#ffd666}
.vp-guide-x{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) center/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) center/100% 1px no-repeat}
/* Our own full screen (an iPhone has none for a page element): the player over the whole page, its
   controls and watermark inside the safe area (Dynamic Island, home indicator, landscape notch). */
.vp.is-pfull{position:fixed;inset:0;z-index:2147483000;margin:0;gap:0;background:#000;box-sizing:border-box;overscroll-behavior:contain;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.vp.is-pfull .vp-stage{flex:1 1 auto;min-height:0;height:100%;aspect-ratio:auto;border-radius:0}
.vp.is-pfull .vp-under{display:none !important}
html.vp-pfull-open,html.vp-pfull-open body{overflow:hidden !important}
/* B5: chapter marks on the seek bar, the current chapter's name, the subtitles button. */
.vp-chap{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:rgba(255,255,255,.85);border-radius:1px;pointer-events:none}
.vp-chapname{font-size:12.5px;color:rgba(232,237,244,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch}
.vp-chapname[hidden]{display:none !important}
.vp-cc{min-width:40px;justify-content:center;letter-spacing:.04em}
.vp-video::cue{font-size:1.05em;background:rgba(0,0,0,.6)}
.vp-under{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:12.5px;color:var(--text-muted,#6b7a90)}
.vp-under b{color:var(--text-primary,currentColor)}
/* Portal, under a Bunny player (nLPD): "Le studio voit jusqu'où vous avez regardé ce film." It takes the
   portal's own text colour (light or dark), quietly. */
.pt-vp-note{margin:6px 0 0;font-size:12px;line-height:1.45;opacity:.72}
.pt-vp-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* The mount before its first play: the poster and one play button. */
.vp:not(.is-built){aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;display:block}
.vp-state{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0));color:#e8edf4;font-size:13px}
.vp-box{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-height:120px;padding:18px;border-radius:8px;
  background:var(--bg-input,#eff3f7);color:var(--text-primary,#0b1f36);border:1px solid var(--border-color,transparent);font-size:13.5px;line-height:1.45}
@media (max-width:720px){
  .vp-bar{padding:18px 8px 6px}
  .vp-tc{font-size:11px}
  .vp-tc-all{display:none}
  .vp-chapname{display:none !important}
  .vp-wm{right:10px;top:10px;bottom:auto;font-size:9.5px;font-weight:700;letter-spacing:.06em}
  .vp-under{display:none}
}
@media (prefers-reduced-motion:reduce){.vp.is-wait .vp-stage::after{animation:none}.vp-bar{transition:none}}
/* The film page (Livrables ?film=): player left, versions and "Où est le film" right. */
.vf{display:flex;flex-direction:column;gap:14px}
.vf-back{font-size:13px;color:var(--text-muted,#6b7a90);text-decoration:none;align-self:flex-start}
.vf-back:hover{color:var(--text-primary)}
.vf-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vf-h-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vf-h h2{margin:0;font-size:1.35rem;font-weight:700}
.vf-acts{display:flex;gap:8px;flex-wrap:wrap}
.vf-lay{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.vf-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.vf-note{margin:0;font-size:12.5px}
.vf-side{display:flex;flex-direction:column;gap:12px}
.vf-card{border:1px solid var(--border-color);border-radius:var(--radius-md,10px);padding:12px 14px;background:var(--bg-card);color:var(--text-primary)}
.vf-ct{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted,#6b7a90);margin-bottom:8px}
.vf-vr{display:flex;flex-direction:column;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text-primary);border:1px solid transparent}
.vf-vr:hover{background:var(--bg-card-hover)}
.vf-vr.is-on{border-color:var(--mb-primary);background:var(--bg-card-hover)}
.vf-vr small{font-size:12px;color:var(--text-muted,#6b7a90)}
.vf-new{width:100%;justify-content:center;margin-top:8px}
.vf-kv{margin:0;display:flex;flex-direction:column;gap:8px}
.vf-kv div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px;font-size:12.8px}
.vf-kv dt{color:var(--text-muted,#6b7a90)}
.vf-kv dd{margin:0}
.vf-kv dd.is-ok{color:#34d399;font-weight:600}
.vf-kv dd.is-warn{color:#fbbf24;font-weight:600}
[data-theme="light"] .vf-kv dd.is-ok{color:#047857}
[data-theme="light"] .vf-kv dd.is-warn{color:#b45309}
.vf-wm{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border-color)}
.vf-wm span{display:flex;flex-direction:column;font-size:12.8px}
.vf-wm small{color:var(--text-muted,#6b7a90);font-size:11.5px}
.vf-sw{position:relative;width:40px;height:22px;border-radius:11px;border:0;background:var(--border-light);cursor:pointer;flex:none}
.vf-sw::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.vf-sw.on{background:var(--mb-primary)}
.vf-sw.on::after{left:21px}
.vf-sw:disabled{opacity:.6;cursor:default}
.vp-film-link{display:inline-block;margin-top:6px;font-size:12.5px}
@media (max-width:900px){.vf-lay{grid-template-columns:minmax(0,1fr)}}
/* B5: the film page's card "Sous-titres et chapitres" (assets/js/video-finish.js). */
.vfin .vf-note{margin:6px 0}
.vfin-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.vfin-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:12.8px}
.vfin-on{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.vfin-meta{color:var(--text-muted,#6b7a90);font-size:11.5px;flex:1 1 100%}
.vfin-acts{display:inline-flex;gap:10px;font-size:12px}
.vfin-link{background:none;border:0;padding:0;color:var(--mb-primary);font:inherit;font-size:12px;cursor:pointer}
.vfin-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.vfin-lang{max-width:160px}
.vfin-file-btn{position:relative;overflow:hidden;cursor:pointer}
.vfin-file{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.vfin-tr{margin-top:2px}
.vfin-sec{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-color);font-size:12.8px}
.vfin-chaps{margin:6px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.vfin-t{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;color:var(--text-muted,#6b7a90);margin-right:6px}
.vfin-box{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.vfin-box[hidden]{display:none !important}
.vfin-text{width:100%;box-sizing:border-box;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px}
.vfin-box-acts{display:flex;gap:10px;align-items:center}
.vfin-job.is-failed{color:#fbbf24}
[data-theme="light"] .vfin-job.is-failed{color:#b45309}