@media (max-width: 768px) {
    .container {
        flex-direction: column; 
    }
    nav {
        margin-top: 10px; 
    }
}


/* Styles du menu hamburger */
.hamburger {
    display: none; 
    flex-direction: column; 
    cursor: pointer; 
    margin-right: 20px; 
}

.line {
    width: 30px; 
    height: 3px; 
    background-color: orangered; 
    margin: 3px 0; 
}


/* Media Queries pour la responsivité */
@media (max-width: 768px) {
    .container {
        justify-content: flex-start; /* Aligne le hamburger à gauche */
    }

    .logo-container {
        flex: 1; /* Permet au logo de prendre de l'espace */
        justify-content: center; /* Centre horizontalement le logo */
    }

    .hamburger {
        display: flex; /* Affiche le hamburger sur petits écrans */
        position: absolute; /* Positionne le hamburger */
        left: 20px; /* Aligne le hamburger à gauche */
        top: 20px; /* Ajustez selon vos besoins */
    }

    .navbar {
        margin-left: 0; /* Supprime la marge gauche pour la navbar */
        width: 100%; /* Prend toute la largeur de l'écran */
    }
   

    .navbar ul {
        display: none; 
        flex-direction: column; 
        align-items: flex-start; /* Aligne le contenu à gauche */
        padding: 0; /* Supprime le padding pour un meilleur alignement */
        position: absolute; /* Positionne le menu */
        top: 80px; 
        left: 0; 
        background-color: transparent; 
        width: 100%; 
        z-index: 20; /* Assure que le menu est au-dessus d'autres éléments */
        background-color: rgba(255, 255, 255, 0.8); /* Fond sombre semi-transparent */
        padding: 1rem; /* Optionnel : ajout d'un espace autour des éléments */
    }

    .navbar.active ul {
        display: flex; 
    }

    li {
        margin: 10px 0; /* Espacement vertical entre les éléments de menu */
        margin-right: 0; /* Supprime la marge droite */
    }
    img {
        /* width: 100px; */
        height: 100%; 
        /* max-height: 80px; */
        
    }

   /*  le sous-menu */
   .navbar.active ul ul {
    display: none; /* Masque le sous-menu par défaut */
    margin-left: 50px;
    
    
}

.navbar.active li:hover > ul {
    display: block; /* Affiche le sous-menu en hover*/
}   





    
}