/* Styles personnalisés pour la police Inter */
body {
    font-family: 'Inter', sans-serif;
}

/* Styles pour les coins arrondis et ombres légères */
.rounded-element {
    border-radius: 0.5rem; /* Equivalent à rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Equivalent à shadow-md */
}

/* Style pour les flèches du menu déroulant */
.dropdown-arrow {
    transition: transform 0.3s ease-in-out;
}

.group:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.mobile-dropdown-arrow.rotated {
    transform: rotate(180deg);
}

/* Styles pour le survol des liens de navigation */
.nav-link-hover {
    display: flex; /* Pour aligner l'icône et le texte */
    align-items: center;
    gap: 0.5rem; /* Espace entre l'icône et le texte */
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    transition: all 0.3s ease-in-out;
    border-radius: 0.375rem; /* rounded-md */
}

.nav-link-hover:hover {
    color: #2563eb; /* blue-700 */
    background-color: #eff6ff; /* blue-50 */
}

/* Style pour la page active */
.active-link {
    color: #2563eb; /* blue-700 */
    background-color: #e0f2fe; /* blue-100 */
    font-weight: 600; /* semi-bold */
}

/* Styles pour les transitions du menu mobile */
.mobile-menu-transition {
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    display: none; /* Ajouté pour s'assurer qu'il est caché par défaut */
}

.mobile-menu-transition.open {
    max-height: 500px; /* Une valeur suffisamment grande pour contenir le menu */
    opacity: 1;
    display: block; /* S'assure qu'il est affiché lors de l'ouverture */
}

/* Styles spécifiques au Mega Menu (ajustés pour un sous-menu classique) */
.mega-menu-dropdown {
    /* Retiré left: 50%; transform: translateX(-50%); pour un alignement simple */
    width: 200px; /* Largeur fixe pour un sous-menu classique */
}