/* apropos.css - Styles spécifiques à la page À propos */

.hero {
    position: relative;
    min-height: 65vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay sombre */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

/* Conteneur texte au-dessus de l'overlay */
.hero .container {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white; /* Blanc par défaut pour tout le contenu */
}

/* Force blanc sur le titre et le paragraphe lead + ombre forte */
.hero h1,
.hero .lead {
    color: white !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9) !important;
}

/* Cible ultra-spécifique pour ton paragraphe exact */
.hero .container p.lead.fs-5 {
    color: white !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        min-height: 55vh;
    }
    .hero h1 {
        font-size: 2.5rem;
    }
    .hero .lead {
        font-size: 1.2rem;
    }
}