/* ════════════════════════════════════════════════════════════════════
   IMMERSION D'OUVERTURE — le film du logo avance au défilement
   Fichiers : assets/immersion.css, assets/immersion.js,
              assets/immersion/d/001-240.webp (ordinateur, 1280×720)
              assets/immersion/m/001-240.webp (téléphone, bande centrale 846×720)
   Retirable d'un bloc : supprimer la <section class="immersion">, ce
   fichier et le script. Rien d'autre du site n'en dépend.
   ════════════════════════════════════════════════════════════════════ */

.immersion{
  --imm-fond:#0b1410;
  --imm-vert:#2fc46a;
  --imm-blanc:#ffffff;
  position:relative;
  background:var(--imm-fond);
  height:100vh; height:100svh;            /* sans JavaScript : un seul écran, affiche fixe */
}
.immersion.imm-actif{ height:400vh; height:400svh; }   /* avec JavaScript : 4 écrans de défilement */
.immersion.imm-actif.imm-statique{ height:100vh; height:100svh; }

.imm-scene{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:var(--imm-fond);
}

/* image fixe (sans JavaScript, économie de données, moins d'animations) */
.imm-affiche{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 45%;
}
.immersion.imm-actif:not(.imm-statique) .imm-affiche{ display:none; }

/* fond flouté (téléphone : remplit le haut et le bas autour de la bande vidéo) */
.imm-flou{
  position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px);
  filter:blur(22px) brightness(.45) saturate(1.15);
  opacity:0;
}
.imm-zoom{ position:absolute; inset:-2%; transform-origin:50% 46%; }
.imm-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.imm-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(11,20,16,.7) 100%),
    linear-gradient(to bottom, rgba(11,20,16,.6), transparent 20%, transparent 70%, rgba(11,20,16,.9));
}
/* fondu de sortie vers le hero */
.imm-sortie{ position:absolute; inset:0; background:var(--imm-fond); opacity:0; pointer-events:none; }

/* textes qui passent devant le film */
.imm-txt{
  position:absolute; left:0; right:0;
  margin:0 auto; padding:0 20px;
  max-width:980px; text-align:center;
  color:var(--imm-blanc);
  text-wrap:balance;
  pointer-events:none;
}
.immersion.imm-actif:not(.imm-statique) .imm-txt{ opacity:0; }
.imm-t1{
  bottom:22%;
  font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:var(--imm-vert);
  text-shadow:0 0 14px rgba(47,196,106,.55);
}
.imm-t2{
  top:50%; transform:translateY(-50%);
  font-size:clamp(2rem,6.2vw,4.6rem); line-height:1.02; font-weight:700; letter-spacing:-.02em;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
}
.imm-t2 span{ display:inline-block; white-space:nowrap; }
.imm-t2 em{ font-style:normal; color:var(--imm-vert); }
.imm-t3{
  bottom:13%;
  font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:var(--imm-vert);
}
/* sans JavaScript ou en affiche fixe : seule la phrase d'ouverture reste, en bas */
.immersion .imm-t2, .immersion .imm-t3{ display:none; }
.immersion.imm-actif:not(.imm-statique) .imm-t2,
.immersion.imm-actif:not(.imm-statique) .imm-t3{ display:block; }

/* indication de défilement + passer l'intro */
.imm-bas{
  position:absolute; left:0; right:0; bottom:calc(28px + env(safe-area-inset-bottom,0px));
  display:flex; justify-content:center; align-items:center; gap:18px;
}
.imm-defiler{
  display:flex; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--imm-blanc);
}
.imm-defiler::before{
  content:""; width:1.5px; height:30px;
  background:linear-gradient(var(--imm-vert),transparent);
  animation:imm-goutte 1.8s ease-in-out infinite;
}
@keyframes imm-goutte{
  0%{transform:scaleY(.2);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  100%{transform:scaleY(.2);transform-origin:bottom}
}
.imm-passer{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--imm-vert); text-decoration:none;
  border:1px solid rgba(47,196,106,.5); border-radius:999px; padding:9px 14px;
  background:rgba(11,20,16,.55);
}
.imm-passer:hover,.imm-passer:focus-visible{ background:var(--imm-vert); color:var(--imm-fond); }

/* jauge d'avancement du film */
.imm-jauge{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:rgba(47,196,106,.15);
}
.imm-jauge b{
  display:block; height:100%; width:100%;
  background:var(--imm-vert); box-shadow:0 0 10px var(--imm-vert);
  transform:scaleX(0); transform-origin:left;
}
.immersion:not(.imm-pret) .imm-jauge{ display:none; }

/* la barre d'action mobile du site est fixe en bas : on remonte le bas de la scène */
@media (max-width:760px){
  .imm-bas{ bottom:calc(92px + env(safe-area-inset-bottom,0px)); }
  .imm-t1{ bottom:30%; }
  .imm-t3{ bottom:24%; }
  .imm-passer{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .imm-defiler::before{ animation:none; }
}