/* ============================================================================
   NIGERINFOS — Scroll-film « La Carte Vivante » (accueil, desktop)
   Chargé uniquement sur la page d'accueil quand le film est actif.
   ============================================================================ */

:root {
  /* Couleur de la toute dernière frame du film : le contenu démarre exactement
     sur cette teinte pour un raccord invisible (échantillonnée à l'assemblage) */
  --couleur-fin-film: #03120b;
}

/* --- Conducteur + scène collante ------------------------------------------- */
.film {
  position: relative;
  height: 850vh;                 /* 5 chapitres × 170vh */
  background: #000;
}
.film__scene {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
}

.film__affiche,
.film__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.film__canvas { z-index: 2; }

/* --- Grain + vignette (fondus en fin de film par le script) ----------------- */
.film__vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .42) 100%);
  opacity: .5;
  mix-blend-mode: overlay;
}

/* --- Textes posés sur le film ------------------------------------------------ */
.film__beats { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.film__beat {
  position: absolute; inset-inline: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center; padding-inline: 8vw;
  opacity: 0;
  color: #fff;
}
.film__beat .bouton { pointer-events: auto; }

.film__surtitre {
  font-size: .95rem; font-weight: 600; letter-spacing: .35em;
  text-transform: uppercase; color: var(--couleur-primaire-vive, #f7ad1a);
  margin: 0 0 .75rem;
}
.film__titre {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.01em;
  margin: 0;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .55);
}
.film__titre--beat { font-size: clamp(2.2rem, 5.5vw, 4.2rem); }
.film__soustitre {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  margin: 1rem 0 0; opacity: .92;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
.film__indice {
  margin-top: 3rem; font-size: .85rem; letter-spacing: .25em;
  text-transform: uppercase; opacity: .8;
}
.film__fleche {
  display: block; margin-top: .4rem; font-size: 1.2rem;
  animation: film-fleche 1.8s ease-in-out infinite;
}
@keyframes film-fleche {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(8px); opacity: 1; }
}
.film__cta { margin-top: 2rem; font-size: 1.05rem; padding: .8rem 2rem; }

/* --- Lecture de chapitre ------------------------------------------------------ */
.film__chapitre {
  position: absolute; left: 28px; bottom: 26px; z-index: 5;
  display: flex; align-items: center; gap: .9rem;
  color: #fff; font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
.film__chapitre-barre {
  width: 130px; height: 2px; background: rgba(255, 255, 255, .28);
  display: inline-block; overflow: hidden;
}
.film__chapitre-barre i {
  display: block; height: 100%; width: 0;
  background: var(--couleur-primaire-vive, #f7ad1a);
}

/* --- Barre de chargement des frames ------------------------------------------- */
.film__chargement {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 6;
  height: 3px; background: rgba(255, 255, 255, .12);
}
.film__chargement i {
  display: block; height: 100%; width: 0;
  background: var(--couleur-primaire-vive, #f7ad1a);
  transition: width .25s linear;
}
.film__chargement.termine { opacity: 0; transition: opacity .6s; }

/* --- Bouton passer -------------------------------------------------------------- */
.film__passer {
  position: absolute; right: 28px; bottom: 22px; z-index: 6;
  background: rgba(0, 0, 0, .35); color: #fff;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px;
  padding: .45rem 1.1rem; font-size: .8rem; cursor: pointer;
  backdrop-filter: blur(4px);
}
.film__passer:hover { background: rgba(0, 0, 0, .6); border-color: #fff; }

/* --- Raccord film → contenu (rampe pilotée par le script) ------------------------ */
.film__raccord {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 3;
  height: 45vh; pointer-events: none; opacity: 0;
  background: linear-gradient(transparent, var(--couleur-fin-film));
}

/* ============================================================================
   ENTÊTE PENDANT LE FILM : fixée, transparente, texte lisible via un voile
   dégradé — redevient normale (solide) à la fin du film ou si le film est
   retiré (le script enlève la classe avec-film du body).
   ============================================================================ */

body.avec-film .entete {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  background: transparent; border-bottom-color: transparent;
  transition: background .35s;
}
body.avec-film .entete::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, .55), transparent);
  opacity: 1; transition: opacity .35s;
}
body.avec-film .entete .navigation { background: transparent; }
body.avec-film .entete .entete__recherche { visibility: hidden; }

/* Fin de film : l'entête retrouve son apparence normale */
body.avec-film .entete.entete--solide {
  position: fixed;
  background: var(--papier);
  border-bottom-color: var(--couleur-primaire-vive);
}
body.avec-film .entete.entete--solide::before { opacity: 0; }
body.avec-film .entete.entete--solide .navigation { background: var(--couleur-secondaire); }
body.avec-film .entete.entete--solide .entete__recherche { visibility: visible; }

/* Le premier bloc de contenu après le film démarre sur la couleur de fin
   du film puis fond vers le site clair : aucun raccord visible */
body.avec-film .bandeau-actu {
  border-top: none;
  background: var(--couleur-fin-film);
}

/* Ceinture de sécurité : si le CSS charge mais pas le script (cas extrême),
   ou préférence de mouvement réduit → pas de film du tout */
@media (prefers-reduced-motion: reduce), (max-width: 1023px) {
  .film { display: none; }
  body.avec-film .entete { position: static; background: var(--papier); }
  body.avec-film .entete::before { content: none; }
  body.avec-film .entete .navigation { background: var(--couleur-secondaire); }
  body.avec-film .entete .entete__recherche { visibility: visible; }
}

/* Porte d'entrée inline (entete.php) : retrait avant peinture */
html.sans-film .film { display: none; }