/* assets/css/header.css */

/* Styles spécifiques à l'en-tête */

header {
    background-color: var(--color-primary); /* Utilise la variable définie dans global.css */
    color: white; /* Couleur du texte dans l'en-tête */
    padding: 10px 20px; /* Espacement intérieur */
    display: flex; /* Utilise flexbox pour aligner le logo/titre et la navigation */
    justify-content: space-between; /* Espace entre le logo/titre et la navigation */
    align-items: center; /* Centre verticalement les éléments */
}

.site-title-logo {
    display: flex; /* Utilise flexbox pour aligner le logo et le titre/h1 caché */
    align-items: center; /* Centre verticalement le logo et le texte */
}

.site-logo {
    max-height: 50px; /* Définit la hauteur maximale du logo */
    width: auto; /* Maintient le ratio d'aspect */
    margin-right: 15px; /* Espace à droite du logo */
}

/* Styles de la navigation dans l'en-tête */
nav ul {
    list-style: none; /* Supprime les puces de liste */
    padding: 0; /* Supprime le padding par défaut */
    margin: 0; /* Supprime la marge par défaut */
}

nav ul li {
    display: inline-block; /* Affiche les éléments de liste en ligne */
    margin-left: 20px; /* Espacement entre les liens de navigation */
    /* Note: J'ai mis margin-left ici au lieu de margin-right dans global.css */
    /* pour une meilleure gestion de l'alignement du dernier élément. */
}

nav a {
    color: white; /* Couleur des liens de navigation */
    font-weight: bold; /* Met le texte en gras */
    text-decoration: none; /* Supprime le soulignement */
    transition: color 0.3s ease; /* Transition douce au survol */
}

nav a:hover,
nav a:focus {
    color: var(--color-accent); /* Changement de couleur au survol/focus (couleur d'accent) */
    text-decoration: underline; /* Souligne au survol/focus */
}

/* Ajoute d'autres styles liés à l'en-tête et à la navigation si besoin */