/* Introduction en film piloté au défilement (accueil). Moteur : film.js */
.fx{height:720vh;position:relative;background:#06070d}
.fx-ecran{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.fx-ecran canvas{position:absolute;inset:0;width:100%;height:100%}
.fx-ecran::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(6,7,13,.75) 100%);pointer-events:none}
.fx-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--grad);transform-origin:left;transform:scaleX(0);z-index:3}

.fx-chap{position:absolute;z-index:2;top:50%;left:6vw;width:min(30vw,340px);opacity:0;will-change:opacity,transform}
/* voile sombre derrière les textes : le film démarre dans l'écran, très lumineux */
.fx-chap::before{content:"";position:absolute;inset:-90px -120px;z-index:-1;background:radial-gradient(closest-side,rgba(6,7,13,.93) 68%,transparent)}
.fx-chap small,.fx-titre small{display:block;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--c1);margin-bottom:14px}
.fx-chap b,.fx-h1{display:block;font-family:var(--h);font-weight:500;line-height:1.05;letter-spacing:-.02em}
.fx-chap b{font-size:clamp(2rem,3.6vw,3.3rem)}
.fx-chap p{margin-top:16px;font-size:.9rem;line-height:1.65;color:var(--mut)}
.fx-chap i{display:block;margin-top:18px;font-style:normal;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}

.fx-titre{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw;background:radial-gradient(ellipse 60% 55% at center,rgba(6,7,13,.86) 30%,rgba(6,7,13,.3))}
.fx-h1{font-size:clamp(2.6rem,7vw,6rem)}
.fx-h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-titre span{position:absolute;bottom:9vh;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.fx-skip{position:absolute;z-index:4;right:5vw;bottom:4vh;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt);text-decoration:none;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(6,7,13,.5)}
.fx-skip:hover,.fx-skip:focus-visible{border-color:var(--c1);color:var(--c1)}

@media (max-width:760px){
  .fx{height:600vh}
  .fx-chap{left:6vw;right:24vw;width:auto;top:auto;bottom:14vh}
  .fx-chap b{font-size:2.1rem}
  .fx-ecran::after{background:linear-gradient(180deg,rgba(6,7,13,.5),transparent 25% 50%,rgba(6,7,13,.9) 85%)}
}