/* ============================================================
   Effets de défilement de la page d'accueil (12/11/2026).
   Chaque bloc ne s'applique que si js/ciel-effets.js a posé la classe
   correspondante sur <html> (fx-retrecit, fx-rideau, fx-texte, fx-fenetre, fx-fluide).
   Couper un effet : voir l'en-tête de js/ciel-effets.js.
   ============================================================ */

/* ---------- 1. La vidéo d'ouverture se réduit en carte arrondie ---------- */
.fx-retrecit .ciel-fond {
  clip-path: inset(calc(var(--r, 0) * 8%) calc(var(--r, 0) * 6%) round calc(var(--r, 0) * 36px));
}

/* ---------- 2. Sections empilées ---------- */
.fx-rideau main > * { position: relative; }
.fx-rideau .fx-colle { position: sticky; }
.fx-rideau .ciel.fx-colle { position: sticky; top: 0; }
/* La section recouverte s'assombrit à mesure que la suivante monte. */
.fx-rideau .fx-colle::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: #030c18; opacity: calc(var(--couvert, 0) * .6);
}
/* La section qui monte : bords arrondis en haut, comme une feuille posée dessus. */
.fx-rideau .fx-dessus { border-radius: 32px 32px 0 0; overflow: clip; }
/* Le dégradé de transition sous l'ouverture n'a plus lieu d'être : la bande de lumière monte directement. */
.fx-rideau .m-aube { display: none; }
.fx-rideau .accueil-ciel .m-parcours, .fx-rideau .m-parcours { padding-top: clamp(64px, 10vh, 120px); }

/* ---------- 3. La traduction du verset s'allume mot par mot ---------- */
.fx-texte .fx-mot { opacity: .22; transition: opacity .25s linear; }

/* ---------- 4. La photo de la formation s'ouvre comme une fenêtre ---------- */
.fx-fenetre .m-formation-image {
  clip-path: inset(calc(var(--fo, 1) * 14%) calc(var(--fo, 1) * 20%) round 20px);
}
.fx-fenetre .accueil-ciel .m-formation-image img,
.fx-fenetre .m-formation-image img { transform: translate3d(0, var(--py, 0px), 0) scale(calc(1.22 + var(--fo, 0) * .2)); }

/* ---------- 6. Défilement fluide (Lenis) ---------- */
html.fx-fluide { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (max-width: 720px) {
  .fx-rideau .fx-dessus { border-radius: 22px 22px 0 0; }
}