/* 1. Créer le contexte de superposition */
.site-grid {
    position: relative;
}

/* 2. Positionner le titre au-dessus du banner */
.container-header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
    background: transparent !important; /* Rend le fond du header invisible */
    border: none !important;
}

/* 3. Style du texte pour la lisibilité sur image */
.navbar-brand a {
    color: #ffffff !important; /* Texte en blanc */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Ombre pour lire sur fond clair */
}

.navbar-brand .site-description {
    color: #e2e8f0 !important; /* Slogan légèrement grisé */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* 4. Ajuster la bannière pour qu'elle commence en haut */
.container-banner {
    margin-top: 0;
    z-index: 1;
}

.container-banner img {
    width: 100%;
    height: 400px; /* Ajustez la hauteur selon vos besoins */
    object-fit: cover;
    display: block;
}

/* 5. Ajouter un léger voile sombre sur l'image pour le contraste */
.header-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .container-header {
        position: relative; /* On repasse en mode normal sur mobile pour éviter les chevauchements */
    }
    .navbar-brand a {
        color: #000 !important; /* Retour au texte sombre si le header redevient blanc */
        text-shadow: none;
    }
    .container-banner img {
        height: 200px; /* Plus petit sur smartphone */
    }
}

/* Supprime le bandeau de couleur et les espaces inutiles */
.header {
    background: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.container-header {
    position: absolute; /* Place le texte par-dessus le flux normal */
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; /* Assure que le texte est au premier plan */
    background: transparent !important;
}

/* Force la zone de bannière à monter tout en haut */
.container-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 0; /* Évite un espace blanc sous l'image */
}

.container-banner img {
    width: 100%;
    height: auto;
    min-height: 300px; /* Ajustez selon votre bannière WebP */
    object-fit: cover;
}

/* Style du Titre et Slogan pour surimpression */
.navbar-brand a, 
.site-title {
    color: #ffffff !important; 
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.site-description {
    color: #ffffff !important;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}