/* ISOTROPE — « Le lecteur du futur » (player.js). Palette : noir, or, blanc chaud. */

/* Lumière ambiante : halo doux autour de la scène, aux couleurs de l'affiche */
.stage { position: relative; isolation: isolate; }
.stage.fp-amb::before {
  content: ''; position: absolute; z-index: -1; inset: -7% -5% 14% -5%; pointer-events: none; filter: blur(46px); opacity: .0; transition: opacity 1.2s ease;
  background:
    radial-gradient(60% 46% at 50% 0%, rgb(var(--amb-t) / .55), transparent 72%),
    radial-gradient(60% 46% at 50% 100%, rgb(var(--amb-b) / .5), transparent 72%),
    radial-gradient(40% 70% at 0% 50%, rgb(var(--amb-l) / .5), transparent 72%),
    radial-gradient(40% 70% at 100% 50%, rgb(var(--amb-r) / .5), transparent 72%);
}
.stage.fp-amb::before { opacity: .85; animation: fp-breathe 9s ease-in-out infinite; }
@keyframes fp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* Profondeur : tilt + reflet sur l'affiche (hors lecture) */
.media { transform-style: preserve-3d; }
.media.fp-tilt { transform: perspective(1300px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s linear; }
.media:not(.fp-tilt):not(.fp-cine) { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.media.fp-tilt::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 238, 200, .34), transparent 60%); }

/* Barre de commandes : en haut de l'image (la barre native de Vimeo reste en bas) */
.fp { position: absolute; z-index: 6; left: 10px; right: 10px; top: 10px; display: none; align-items: center; gap: 8px; padding: 6px 8px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 10, .72), rgba(8, 9, 10, .5)); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(236, 232, 225, .14);
  border-top-color: rgba(214, 178, 104, .4); border-radius: 3px; transform: translateY(-6px); opacity: 0; transition: opacity .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1); }
.fp.is-on { display: flex; opacity: 1; transform: none; }
.fp.is-on.is-idle { opacity: 0; transform: translateY(-4px); }
.fp > * { pointer-events: auto; }
.fp-btn { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 7px; color: #d9d4ca; border: 1px solid transparent; border-radius: 2px; transition: color .2s, border-color .2s, background .2s; }
.fp-btn svg { width: 17px; height: 17px; fill: currentColor; }
.fp-btn:hover, .fp-btn:focus-visible { color: #f3dfae; border-color: rgba(214, 178, 104, .5); background: rgba(214, 178, 104, .1); outline: none; }
.fp-btn.mono { font-size: 10.5px; letter-spacing: .1em; }
.fp-btn.is-on, .fp-btn[aria-pressed="true"] { color: #c9a45c; border-color: rgba(214, 178, 104, .6); background: rgba(214, 178, 104, .12); }
.fp-play { color: #f3dfae; }
.fp-tc { flex: none; display: flex; gap: 7px; align-items: baseline; font-size: 11px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #cfcac0; }
.fp-tc b { color: #f3dfae; font-weight: 500; } .fp-tc i { font-style: normal; color: #7d7a74; }
.fp-scrub { position: relative; flex: 1 1 auto; min-width: 80px; height: 24px; cursor: pointer; touch-action: none; }
.fp-scrub::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(236, 232, 225, .22); border-radius: 2px; }
.fp-fill { position: absolute; left: 0; top: 11px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #a98441, #e6c47b); border-radius: 2px; box-shadow: 0 0 10px rgba(214, 178, 104, .6); }
.fp-head { position: absolute; top: 6px; left: 0; width: 11px; height: 11px; margin-left: -5.5px; transform: rotate(45deg); background: #f3dfae; border: 1px solid #a98441; box-shadow: 0 0 12px rgba(240, 204, 128, .85); transition: transform .15s; }
.fp-scrub:hover .fp-head, .fp-scrub:focus-visible .fp-head { transform: rotate(45deg) scale(1.25); }
.fp-scrub:focus-visible { outline: 1px solid rgba(214, 178, 104, .7); outline-offset: 3px; }
.fp-mark { position: absolute; top: 4px; width: 2px; height: 16px; margin-left: -1px; background: #fff1c9; box-shadow: 0 0 8px rgba(255, 241, 201, .8); }
.fp-mark.fp-out { background: #d6b268; }
.fp-span { position: absolute; top: 9px; height: 6px; background: rgba(214, 178, 104, .28); border-radius: 1px; }
.fp-tip { position: absolute; bottom: 26px; transform: translateX(-50%); padding: 3px 6px; font-size: 10px; letter-spacing: .08em; background: rgba(8, 9, 10, .92); border: 1px solid rgba(214, 178, 104, .45); color: #f3dfae; white-space: nowrap; pointer-events: none; }
.fp-toast { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); margin: 0; padding: 5px 10px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  background: rgba(8, 9, 10, .92); border: 1px solid rgba(214, 178, 104, .5); color: #f3dfae; pointer-events: none; }

/* Reprise à un instant donné (lien partagé) */
.fp-resume { position: absolute; z-index: 7; right: 16px; bottom: 16px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; color: #f3dfae; background: rgba(13, 14, 15, .86); backdrop-filter: blur(6px); border: 1px solid rgba(214, 178, 104, .6); }
.fp-resume b { color: #c9a45c; } .fp-resume:hover { background: rgba(13, 14, 15, .96); border-color: #e6c47b; }

/* Écran noir : mode cinéma et plein écran — la scène occupe tout l'écran, le film est centré en 16:9, tout le reste est noir (jamais de blanc) */
html.fp-cinema, html.fp-cinema body { overflow: hidden; background: #000 !important; }
html.fp-cinema .chrome, html.fp-cinema .piste, html.fp-cinema .marks, html.fp-cinema .fiche, html.fp-cinema .reels-wrap, html.fp-cinema .prevnext, html.fp-cinema .skip, html.fp-cinema .open-credit { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s ease; }
html.fp-cinema .stage.fp-amb::before { opacity: 0; }
html.fp-cinema .stage { position: static; isolation: auto; }
html.fp-cinema .media.fp-cine, .media:fullscreen, .media:-webkit-full-screen {
  position: fixed !important; inset: 0 !important; z-index: 2147483000; width: 100vw !important; height: 100vh !important; max-height: none !important; aspect-ratio: auto !important;
  margin: 0; transform: none !important; background: #000 !important; display: block; overflow: hidden; }
html.fp-cinema .media.fp-cine { animation: fp-black .5s ease both; }
@keyframes fp-black { from { background: transparent; } to { background: #000; } }
html.fp-cinema .media.fp-cine .frame, .media:fullscreen .frame, .media:-webkit-full-screen .frame { position: absolute; inset: 0; background: #000 !important; }
html.fp-cinema .media.fp-cine .frame iframe, .media:fullscreen .frame iframe, .media:-webkit-full-screen .frame iframe {
  inset: auto !important; left: 50%; top: 50%; width: min(100vw, 177.78vh) !important; height: min(100vh, 56.25vw) !important; transform: translate(-50%, -50%); background: #000; }
html.fp-cinema .media.fp-cine .poster, .media:fullscreen .poster, .media:-webkit-full-screen .poster { object-fit: contain; background: #000; }
.media:fullscreen::backdrop, .media:-webkit-full-screen::backdrop { background: #000; }
html.fp-cinema .media.fp-cine .fp, .media:fullscreen .fp, .media:-webkit-full-screen .fp { top: 14px; left: 50%; right: auto; width: min(960px, calc(100vw - 28px)); translate: -50% 0; }

@media (max-width: 760px) { .fp .fp-ab, .fp .fp-link { display: none; } .fp-tc i { display: none; } .fp { gap: 5px; left: 6px; right: 6px; top: 6px; } }
@media (prefers-reduced-motion: reduce) { .stage.fp-amb::before { animation: none; } .media.fp-tilt { transform: none; } .fp, .fp-head { transition: none; } }