/* Une ouverture, une image, un cadre. Sans la scène, les règles de base
   gardent le titre et le film dans le flux normal de la page. */
.film-section[data-film-armed]{padding-block:0;overflow:visible;position:relative;z-index:1}
.film-section[data-film-armed] .film-stage{height:100vh;height:100svh;overflow:clip;isolation:isolate;background:var(--paper)}
.film-section[data-film-armed] .film-shell{background:var(--ink);transform-origin:50% 50%;will-change:transform,clip-path}
.film-section[data-film-armed] .film-shell video{object-fit:contain}
.film-section[data-film-armed] .film-progress{bottom:var(--film-trim,0px);left:var(--film-trim-x,0px);right:var(--film-trim-x,0px);background:#f2f0ea33}
.film-section[data-film-armed] .film-progress>span{background:var(--orange)}
.film-aperture,.film-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.film-frame{z-index:3}
.film-scene-title{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);top:24%;pointer-events:none;text-align:center;line-height:.92;letter-spacing:-.065em;color:var(--ink)}
.film-scene-title>span{display:block;font:italic 400 clamp(42px,5vw,88px)/.95 var(--serif);letter-spacing:-.035em;margin-bottom:.12em}
.film-scene-title strong{display:block;font:700 clamp(52px,11.8vw,212px)/.92 var(--display);letter-spacing:-.065em}
.film-scene-title strong>span{color:var(--orange)}
.film-section[data-film-armed] .film-caption{position:absolute;left:var(--gutter);right:var(--gutter);margin:0;z-index:5;min-height:48px;color:var(--paper);mix-blend-mode:normal;transition:none}
.film-section[data-film-armed] .film-toggle{min-height:48px;min-width:195px}
/* Le projet suivant avance dans la place laissée par l’image. Ce sont son
   titre et son lien réels : le clavier et les ancres suivent le même parcours. */
[data-film-handoff]{position:relative;z-index:2;margin-top:calc(-1 * var(--film-overlap,32svh));padding-top:clamp(26px,4svh,48px);border-top:0}
@media(max-width:760px){
 .film-scene-title{top:29%}
 .film-scene-title>span{font-size:clamp(40px,12vw,64px)}
 .film-scene-title strong{font-size:clamp(40px,12vw,92px);letter-spacing:-.07em}
 .film-section[data-film-armed] .film-caption{font-size:10px;gap:16px}
 .film-section[data-film-armed] .film-toggle{font-size:12px;min-width:142px;padding-block:8px}
}

/* Les commandes restent lisibles sur les images orange comme sur l’encre.
   Lorsque le cadre se pose sur papier, elles reprennent leur trait noir. */
.film-section[data-film-armed] .film-caption>span{background:var(--ink);padding:8px 10px}
.film-section[data-film-armed] .film-toggle{background:var(--ink);padding-inline:14px;border-color:currentColor}
.film-section[data-film-armed] [data-film-phase=passage] .film-caption{color:var(--ink)}
.film-section[data-film-armed] [data-film-phase=passage] .film-caption>span,
.film-section[data-film-armed] [data-film-phase=passage] .film-toggle{background:transparent}
.film-section[data-film-armed] .film-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:4px}