/************************
HERO SECTION
************************/

.hero__content {
    position: relative;
    z-index: 2;
}

.hero-section {
    position: relative;
    overflow: hidden; /* Crucial pour cacher le débordement du zoom */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg-wrapper {
    position: relative;
    /* Hauteur pilotée par le contenu : jamais moins que min-height, mais le
       bloc s'agrandit si le titre/sous-titre prend plus de place (2 lignes de
       chaque restent toujours lisibles, sans débordement). */
    height: auto;
    min-height: clamp(260px, 36vh, 360px);
    padding-block: 2.5rem;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000; /* Fond noir pendant le chargement */
}

.hero-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    object-position: center center;
}

/* Option "Afficher les commandes de la vidéo" du formulaire : la vidéo
   passe au-dessus du calque décoratif .hero-overlay pour que ses commandes
   natives (lecture/pause, défilement, son) restent bien cliquables. */
.hero-video--controls {
    z-index: 2;
    pointer-events: auto;
}


/* On déplace le background ici pour pouvoir l'animer indépendamment */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    transition: filter 0.3s ease-out; /* Pour un flou fluide */
    will-change: transform, filter; /* Optimisation performance */
}

/* L'overlay avec votre motif échiquier moderne — purement décoratif,
   jamais interactif : ne doit intercepter aucun clic (notamment ceux
   destinés aux commandes natives d'une vidéo affichées par-dessus, voir
   l'option "Afficher les commandes de la vidéo" du formulaire). */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-conic-gradient(color-mix(in srgb, var(--color-1), transparent 30%) 0 25%, color-mix(in srgb, var(--color-1), transparent 80%) 0 50%) 50% / 4px 4px;
    z-index: 1;
    pointer-events: none;
}

/* Overlay d'assombrissement (option "Assombrir le visuel" du formulaire,
   "Aucun" par défaut) — voile noir semi-transparent au-dessus du visuel,
   sous le texte, pour améliorer la lisibilité sur un média très contrasté
   ou très coloré. Se superpose à .hero-overlay (motif décoratif existant,
   inchangé) plutôt que de le remplacer. */
.hero-darken {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-darken--leger {
    background: rgba(0, 0, 0, .2);
}

.hero-darken--moyen {
    background: rgba(0, 0, 0, .4);
}

.hero-darken--fort {
    background: rgba(0, 0, 0, .6);
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section h2 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Titre : un <span> dans le texte met cette partie en couleur de marque,
   même système que les autres titres de section du site. */
.hero-section h2 span {
    color: var(--color-primary);
}

.hero-section h3 {
    color:white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Pour la responsivité */
/* Tablette : bloc plus bas (l'écran est haut, 36vh y prenait trop de place) */
@media (min-width: 769px) and (max-width: 1199.98px) {
    .hero-bg-wrapper {
        min-height: clamp(220px, 24vh, 280px);
        padding-block: 2rem;
    }
}

/* Smartphone : inchangé */
@media (max-width: 768px) {
    .hero-bg-wrapper {
        height: min(200px, 40vh);
        min-height: 0;
        padding-block: 0;
    }
}

/************************
MODE "TAILLE NATIVE" (pas de recadrage)
La hauteur n'est plus fixe : l'image/vidéo garde son ratio d'origine et
définit elle-même la hauteur du hero (rien n'est coupé). Le texte reste
superposé par-dessus, comme en mode recadré.
************************/

.hero-bg-wrapper--native {
    height: auto;
    min-height: 0;
    padding-block: 0;
    display: block;
    background: transparent;
}

.hero-bg-wrapper--native .hero-bg-native-img,
.hero-bg-wrapper--native .hero-video--native {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 0;
}

.hero-bg-wrapper--native .hero-overlay,
.hero-bg-wrapper--native .hero-content {
    position: absolute;
    inset: 0;
}

/* Option "Afficher les commandes de la vidéo" : le bloc de titre/sous-titre
   (h2/h3 uniquement, aucun élément interactif) ne doit pas intercepter les
   clics destinés aux commandes natives de la vidéo — en mode "native", il
   couvre toute la zone (inset:0) et passerait autrement au-dessus d'elles. */
.hero-bg-wrapper--video-controls .hero-content {
    pointer-events: none;
}

.hero-bg-wrapper--native .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/************************
ANIMATIONS TITRES HERO
************************/

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* animation-fill-mode: both → démarre dans l'état "from" avant le délai
   (évite un flash du contenu avant l'animation) */
.hero-content h2 {
    animation: heroFadeUp .75s ease-out both;
    animation-delay: .2s;
}

.hero-content h3 {
    animation: heroFadeUp .75s ease-out both;
    animation-delay: .45s;
}