/* Modification de la taille du menu mobile */
.mobile-menu {
    width: 50% !important; /* Largeur de 50% de l'écran */
    max-height: 35vh !important; /* Hauteur de 35% de l'écran */
    background-color: #ffffff; /* Fond blanc */
    position: fixed;
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste le positionnement */
    z-index: 9999; /* S'assure que le menu reste au-dessus des autres éléments */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Ombre douce */
    padding: 20px;
    overflow-y: auto; /* Ajoute un défilement si le contenu dépasse la hauteur */
}

/* Stylisation des liens dans le menu mobile */
.mobile-menu a {
    display: block;
    padding: 10px;
    text-align: center;
    color: #333; /* Couleur du texte */
    font-size: 16px;
    text-decoration: none;
}

/* Effet au survol des liens */
.mobile-menu a:hover {
    background-color: #f0f0f0;
}

/* Masquer le menu par défaut */
.mobile-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Afficher le menu lorsqu'il est actif */
.mobile-menu.open {
    opacity: 1;
    visibility: visible;
}