/* Styles pour le header */
header {
    /*position: fixed;*/
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 15px 0;
    z-index: 1000;
}

header nav {
    max-width: 1200px; /* Limite la largeur du nav */
    margin: 0 auto;    /* Centre le nav */
}

header nav ul {
    list-style: none;
    text-align: center; /* Centre les éléments de la liste */
}

header nav ul li {
    display: inline-block;
    margin: 0 20px; /* Espace entre les éléments */
}

header nav ul li a {
    color: #fff; /* Couleur des liens */
    text-decoration: none; /* Pas de soulignement */
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s ease;
}

header nav ul li a:hover {
    color: #ddd; /* Couleur au survol */
}

.hamburger {
    display: none; /* Masqué par défaut */
    font-size: 30px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

/* Styles pour le menu en version mobile */
@media (max-width: 768px) {
    header nav ul {
        display: none; /* Masquer le menu par défaut */
        flex-direction: column; /* Alignement vertical */
        position: absolute;
        top: 0px; /* Pour le placer sous le header */
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
    }

    header nav ul.active {
        display: flex; /* Afficher le menu quand activé */
    }

    .hamburger {
        display: block; /* Afficher le bouton hamburger sur les petits écrans */
    }
}