/* styles/headerStyle.css - VERSION BLINDÉE */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #000;
    border-bottom: 1px solid #333;
    height: 100px;
}

/* --- GESTION DU LOGO --- */
#header-logo a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    transition: none !important;
    opacity: 1 !important;
}

#header-logo a:hover {
    opacity: 1 !important;
    background: none !important;
}

#header-logo img {
    height: 60px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1); 
}

/* --- GESTION DU MENU --- */
nav ul {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* On cible "header nav a" pour être plus fort que "a" dans baseStyle.css */
header nav a {
    color: #fff !important; /* Force le blanc */
    text-decoration: none !important; /* Tue le souligné par défaut */
    text-transform: uppercase;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    letter-spacing: 2px;
    
    position: relative;
    padding-bottom: 5px;
    
    /* BLOQUER LES INTERFÉRENCES */
    border-bottom: none !important; /* Supprime la bordure instantanée de baseStyle */
    transition: none !important;    /* Supprime la transition d'opacité de baseStyle */
    opacity: 1 !important;          /* Force l'opacité à 100% */
}

/* L'animation du trait (Pseudo-élément) */
header nav a::after {
    content: '';
    position: absolute;
    width: 0;             /* Départ à 0 */
    height: 1px;          /* Trait fin */
    bottom: 0;
    left: 0;              /* Ancré à gauche */
    background-color: #fff;
    
    /* Seule la largeur (width) doit être animée ici */
    transition: width 0.3s ease-in-out !important; 
}

/* Au survol */
header nav a:hover {
    opacity: 1 !important; /* Empêche l'assombrissement */
    color: #fff !important;
    background: none !important;
}

header nav a:hover::after {
    width: 100%; /* Arrivée à 100% */
}

/* --- RESPONSIVE MOBILE (max-width: 768px) --- */
@media screen and (max-width: 768px) {
    
    header {
        /* On passe d'une ligne (row) à une colonne pour empiler Logo et Menu */
        flex-direction: column;
        /* On retire la hauteur fixe pour laisser le contenu prendre sa place */
        height: auto; 
        padding: 20px 15px; /* On réduit un peu le padding latéral */
        gap: 20px; /* Espace entre le logo et le menu */
    }

    /* On centre le logo */
    #header-logo {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Ajustement du menu de navigation */
    nav {
        width: 100%;
        display: flex;
        justify-content: center; /* Centre le menu horizontalement */
    }

    nav ul {
        gap: 20px; /* On réduit l'écart de 40px à 20px pour que ça tienne */
        flex-wrap: wrap; /* Permet aux liens de passer à la ligne si l'écran est vraiment minuscule */
        justify-content: center;
    }

    /* Optionnel : réduire un peu la taille du texte du menu sur mobile */
    header nav a {
        font-size: 0.9rem; 
    }
}