/* Styles par défaut pour les écrans larges */
.nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #BF0426; /* Couleur principale */
    padding: 10px 0;
}

.nav a {
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
    color: #F2F2F2; /* Couleur du texte */
    text-decoration: none;
}

/* Effet de survol */
.nav a:hover {
    background-color: #BF365A; /* Changement de couleur au survol */
}

/* État actif ou focus */
.nav a.active,
.nav a:focus {
    background-color: #D98BA0; /* Couleur pour l'état actif */
    color: #0D0D0D; /* Couleur du texte pour l'état actif */
}

/* Bouton hamburger caché par défaut */
.menu-icon {
    display: none;
}

/* Media queries pour les petits écrans */
@media (max-width: 767px) {
    .nav {
        display: flex; /* Change la disposition du menu en bloc pour les petits écrans */
        background-color: #BF0426; /* Couleur principale */
        padding: 10px 0;
        position: relative;
        flex-direction : column;
    }

    /* Affiche le bouton hamburger sur les petits écrans */
    .menu-icon {
        display: block;
        padding: 10px;
        cursor: pointer;
    }

    /* Cache les liens par défaut sur les petits écrans */
    .nav a {
        display: none;
        padding: 10px;
        background-color: #BF0426; /* Couleur principale pour les petits écrans */
        text-align: left;
        width: 100%; /* Prend toute la largeur pour avoir un menu en colonne */
        box-sizing: border-box; /* Pour inclure le padding dans la largeur totale */
    }

    /* Affiche les liens lorsque le bouton hamburger est survolé */
    .nav:hover a {
        display: block; /* Passe les liens en mode "block" pour qu'ils s'affichent en colonne */
    }
}
.header-logo {
    float: left; /* Place le logo à gauche de l'en-tête */
    margin: 10px;
}

.header-logo img {
    width: 150px; /* Taille du logo, ajustable selon tes préférences */
    height: auto; /* Maintient les proportions de l'image */
}