/* Le film du Dikenga, joue par le defilement.
   Une piste haute, une scene collee, une toile qui dessine la sequence d images,
   et les cinq chapitres qui s ecrivent par-dessus aux memes instants que l original
   du 08/08/2026. Les jetons de la maison sont ceux de maison.css. */

.film-piste{position:relative;height:520vh;background:var(--nuit)}
.film-scene{position:sticky;top:0;height:100svh;height:100vh;overflow:hidden}

/* la scene reprend le heros du hall, mais a hauteur d ecran exacte */
.film-piste .heros-hall{height:100%;min-height:0}
.film-piste .heros-hall .fond{overflow:hidden}
#film-toile{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;background:var(--nuit);opacity:0;transition:opacity .45s ease}
.film-repli{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:1}
/* des qu une vraie image du film est peinte, la toile passe devant le poster */
.film-piste.film-pret #film-toile{opacity:1}

/* poussiere d or et grain : la texture de l original, quelques octets */
.film-poussiere{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;background:transparent}
.film-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.42;animation:film-grain .9s steps(4) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes film-grain{0%{background-position:0 0}25%{background-position:-38px 22px}50%{background-position:21px -30px}75%{background-position:-14px -12px}100%{background-position:0 0}}

/* le voile et le texte passent devant la toile */
.film-piste .heros-hall .voile{z-index:5}
.film-piste .heros-hall .dedans{z-index:6}

/* les chapitres : meme place, meme rythme que l original */
.film-chapitre{position:absolute;z-index:6;left:6vw;bottom:clamp(96px,14vh,168px);display:flex;flex-direction:column;gap:12px;
  max-width:min(640px,72vw);padding:20px 26px 22px;border-radius:var(--rayon-carte);
  background:linear-gradient(120deg,rgba(12,10,9,.62),rgba(12,10,9,.24));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none}
.film-chapitre .rang{font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--pierre)}
.film-chapitre h2{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.05;letter-spacing:-.015em;
  font-size:clamp(1.9rem,4.4vw,3.4rem);color:var(--papier);text-shadow:0 4px 34px rgba(0,0,0,.5)}
.film-chapitre p{margin:0;max-width:44ch;font-size:clamp(.95rem,1.4vw,1.06rem);line-height:1.6;color:rgba(246,243,238,.86)}

/* le retour : le dernier chapitre s ouvre au centre et rend la main a la boutique */
.film-retour{left:50%;right:auto;bottom:auto;top:11vh;transform:translateX(-50%);text-align:center;align-items:center;
  width:min(92vw,760px);max-width:none;padding:26px 30px 30px;
  background:linear-gradient(180deg,rgba(12,10,9,.66),rgba(12,10,9,.30))}
.film-retour p{max-width:52ch}
.film-retour .boutons{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:var(--esp-sm)}

/* le signal de defilement */
.film-piste .signal{position:absolute;left:auto;right:6vw;bottom:84px;transform:none;z-index:7;display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:9em;font-size:11px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,243,238,.68);text-align:center}
.film-piste .signal i{display:block;width:1px;height:38px;background:linear-gradient(rgba(246,243,238,.9),transparent);animation:film-cue 1.8s ease-in-out infinite}
@keyframes film-cue{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}

/* le recit pour les lecteurs d ecran */
.film-recit{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:820px){
  .film-piste{height:480vh}
  .film-chapitre{left:5vw;max-width:88vw;padding:16px 18px 18px;gap:9px;bottom:clamp(84px,12vh,132px)}
  .film-chapitre h2{font-size:clamp(1.6rem,7vw,2.3rem)}
  .film-chapitre .rang{font-size:10px;letter-spacing:.22em}
  .film-retour{width:90vw;padding:18px 16px 20px;top:9vh}
  .film-piste .signal{right:5vw;bottom:78px;max-width:7.5em;font-size:10px;letter-spacing:.2em;gap:8px}
  .film-piste .signal i{height:30px}
}

/* le film n est pas la : la section des chapitres plus bas raconte la meme histoire */
html.pas-de-film .film-piste{height:100svh;height:100vh}
html.pas-de-film .film-scene{position:relative}
html.pas-de-film .film-repli{opacity:1}
html.pas-de-film #film-toile{opacity:1}
html.pas-de-film .film-chapitre,html.pas-de-film .film-poussiere,html.pas-de-film .film-piste .signal{display:none}
html.pas-de-film .film-grain{animation:none}

@media (prefers-reduced-motion:reduce){
  .film-piste{height:100svh;height:100vh}
  .film-scene{position:relative}
  .film-chapitre,.film-piste .signal{display:none!important}
  .film-poussiere{display:none}
  .film-grain,.film-piste .signal i{animation:none!important}
  .film-repli{transition:none}
}

/* 06/09 Judith : les cartes des cinq chapitres sous le film sont en double avec le film lui-meme (et une image floue). On ne les montre qu aux lecteurs qui ont demande un mouvement reduit, pour qui le film est fige. */
@media (prefers-reduced-motion: no-preference) {
  #cycle { display: none; }
}