/* Général */ 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --gris: #D2D2D2;
    --blanc: #FFFFFF;
    --noir: #000000;      
}

html h1 {
    font-family: 'Sedan', sans-serif;
    color: var(--gris);
}

html body {
    background-color: var(--noir);
    margin: 0;
    padding: 0;
}

/* Header */ 

.navbar {
    background-color: var(--gris);
    padding-top: 0.5rem; /* Augmenté légèrement pour un meilleur visuel */
    padding-bottom: 0.5rem; /* Augmenté légèrement pour un meilleur visuel */
    min-height: 50px;
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Les ul sont flex par défaut pour un meilleur contrôle */
    gap: 20px; /* Espace entre les liens de chaque ul */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si pas assez de place */
    justify-content: center; /* Centre les liens sur les petits écrans */
}

.navbar a {
    color: var(--noir);
    text-decoration: none;
    font-size: 24px;
    font-family: 'Sedan', sans-serif;
    padding: 0.25rem 0.5rem; /* Ajout d'un petit padding pour faciliter le clic */
    display: block; /* S'assure que les liens sont des blocs pour le padding */
}

.navbar a:hover {
    text-decoration: underline;
}

/* Ajustements pour les sections nav-left, nav-center, nav-right */
/* Sur les grands écrans, ils seront gérés par flex-lg-row et justify-content-lg-between de Bootstrap */
/* Sur les petits écrans, ils seront empilés grâce à flex-column de Bootstrap */

/* Ajustement de la taille de police pour les petits écrans (optionnel, mais souvent utile) */
@media (max-width: 991.98px) {
    .navbar a {
        font-size: 18px; /* Taille de police réduite sur les petits écrans */
    }

    .navbar ul {
        flex-direction: column; /* Les listes s'empilent verticalement sur mobile */
        align-items: center; /* Centre les éléments de liste */
        gap: 0.5rem; /* Réduit l'espacement entre les liens sur mobile */
    }
}