/* ========================================
   HERO-CONTENT.CSS
   Auteur                : Renaud
   Création              : 05 novembre 2025
   Dernière modification : 18 novembre 2025
   ======================================== */


.hero-content {
    position: relative;
    min-height: 50vh;/*60vh;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    }

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero-image.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: brightness(0.6);
    z-index: -1;
    background-color: var(--color-background-hero);
}


.hero-content-text {
    /* ... vos styles actuels ... */
    display: flex; /* Active Flexbox */
    flex-direction: column; /* Organise les éléments en colonne */
    align-items: center; /* Centre horizontalement les éléments */
    text-align: center; /* Centre le texte lui-même */
    justify-content: center; /* Centre verticalement si le parent a une hauteur définie */
    gap: 1.5rem; /* Ajoute de l'espace entre les éléments enfants (titre, description, bouton) */
    max-width: 1200px;
}



.hero-title { /* TITRE h1 */
    margin-bottom: 1rem;
    font-size: clamp(2rem, 5vw, 2.8rem);
    text-align: center;
    color: var(--color-hero-title);
    text-shadow: 2px 2px 4px var(--color-hero-title-shadow);
}

.hero-description {
    margin-bottom: 2rem;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    text-align: center;
    line-height: 1.6;
    color: var(--color-hero-title);
    text-shadow: 1px 1px 3px var(--color-hero-title-shadow);
}




/* Media queries pour la responsivité du Hero */ /* A VERIFIER */
@media (max-width: 768px) {
    .hero-content {
         /* Préférer min-height pour la flexibilité */
        min-height: 40vh; /* Un peu moins haut sur mobile pour laisser plus de place au contenu */
        height: auto; /* Permet au contenu de dicter la hauteur si nécessaire */
    }
   .hero-title {
        font-size: clamp(1.8rem, 4vw, 2rem);
    }
    .hero-description {
        font-size: clamp(0.9rem, 2vw, 1rem);
    }
    .hero-cta {
        display: block; /* Les boutons s'empilent sur mobile */
        margin: 1rem auto;
        max-width: 200px;
    }
}