/* ========================================
   HERO ARCHITECTURE - Clean & Predictable
   ======================================== */

/* === BASE HERO STRUCTURE === */

[data-hero] {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  display: block;
}

/* HOME: plein écran */
[data-hero="home"] {
  height: 100vh;
  height: 100svh; /* dynamic viewport for mobile */
}

/* PAGES: bandeau - forcer height exact */
[data-hero="page"] {
  min-height: clamp(48vh, 56vh, 60vh);
  max-height: 60vh;
  height: clamp(48vh, 56vh, 60vh);
  margin: 0;
  padding: 0;
}

/* === MEDIA LAYER === */

.hero-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-media .hero,
.hero-media .hero-photo,
.hero-media .hero-slideshow,
.hero-media .hero-video {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

.hero-media figure,
.hero-media .img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* === OVERLAY LAYER === */

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  pointer-events: none;
  overflow: hidden; /* évite débordement si texte trop long */
}

/* === TITLES === */

/* Home title: initial state (JS will animate) */
.js .home-title-wrapper {
  /* opacity reste à 1, pas de fade */
  /* Pas de transform initial: GSAP gère tout avec y (pixels) */
  will-change: transform, opacity, filter;
}

/* No-JS fallback: visible */
.no-js .home-title-wrapper {
  opacity: 1;
  transform: none;
}

.home-title {
  /* font-size défini dans typography-hierarchy.css */
  color: #fff !important; /* CRITIQUE: blanc pour visibilité sur image */
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
  margin: 0;
  pointer-events: auto;
  position: relative;
  z-index: 999 !important; /* FORCE au-dessus de tout */
}

/* Page title: always visible, full opacity */
.page-title {
  /* font-size défini dans typography-hierarchy.css */
  color: #fff !important; /* CRITIQUE: blanc pour visibilité sur image */
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
  margin: 0 auto;
  padding: 0 2rem;
  pointer-events: auto;
  /* Opacity reste 100%, seul translateY est animé par GSAP */
  opacity: 1;
  /* Largeur max pour éviter titres trop larges */
  max-width: 80%; /* limite à 80% de la largeur */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* === SECTIONS AFTER HERO === */

[data-hero] + section,
[data-hero] ~ section {
  position: relative;
  z-index: 3;
  /* PAS de background ici: les sections définissent leur propre couleur */
  isolation: isolate;
}

/* === FIX: éliminer les sections hero internes qui créent du spacing === */

/* Les sections .hero internes ne doivent pas avoir de margin/padding */
.hero-media > section,
.hero-media > .hero,
.hero-media > .hero-photo,
.hero-media > .hero-slideshow,
.hero-media > .hero-video {
  margin: 0;
  padding: 0;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
  /* font-size défini dans typography-hierarchy.css */
  
  .hero-overlay {
    padding: 1rem;
  }
}

/* === ACCESSIBILITY === */

@media (prefers-reduced-motion: reduce) {
  .home-title-wrapper,
  .page-title,
  [data-parallax] {
    transition: none !important;
    animation: none !important;
  }
}