/* ════════════════════════════════════════════════════════════
   CAPTURE — Carrousel d'arrière-plan pour sections hero
   assets/css/hero-bg-carousel.css

   S'applique à deux structures :
   1. .hero-slider / .hero-slide (page index — slides vides existants, remplis ici)
   2. .hero-bg-carousel (page-hero des autres pages — généré en JS)

   Empilement (z-index) :
   0 → images de fond (crossfade)
   1 → voile d'atténuation + grille décorative existante
   2 → contenu texte / CTA
════════════════════════════════════════════════════════════ */

/* ── Structure 1 : .hero-slider (page d'accueil) ── */
.hero-slider{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}
.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.4s ease-in-out;
  will-change:opacity;
}
.hero-slide.active{
  opacity:1;
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(13,27,42,0.78) 0%, rgba(13,27,42,0.6) 45%, rgba(13,27,42,0.85) 100%);
}

/* ── Structure 2 : .hero-bg-carousel (pages secondaires) ── */
.hero-bg-carousel{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.hbc-layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.4s ease-in-out;
  will-change:opacity;
}
.hero-bg-carousel::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(13,27,42,0.78) 0%, rgba(13,27,42,0.6) 45%, rgba(13,27,42,0.85) 100%);
}

/* ── S'assurer que grille décorative + contenu restent au-dessus ── */
.hero .hero-bg,
.hero .hero-grid,
.page-hero .page-hero-grid{
  z-index:1;
}
.hero .hero-inner,
.page-hero .container{
  position:relative;
  z-index:2;
}
.hero,
.page-hero{
  position:relative;
  overflow:hidden;
}