/*
 * Corrections spécialisées pour le menu mobile multi-niveaux
 * Complexe Scolaire LA ROCHELLE
 */

/* Amélioration de la hiérarchie visuelle des menus */
@media screen and (max-width: 992px) {

    /* Indicateurs visuels améliorés pour les niveaux */
    .has-submenu > a {
        position: relative;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .has-submenu.open > a {
        border-left-color: var(--primary-color);
        background-color: rgba(233, 151, 0, 0.1);
    }

    .has-nested-submenu > a {
        position: relative;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .has-nested-submenu.open > a {
        border-left-color: var(--secondary-color);
        background-color: rgba(180, 117, 0, 0.1);
    }

    /* Animation améliorée pour l'ouverture des sous-menus */
    .submenu {
        transform-origin: top;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .nested-submenu {
        transform-origin: top;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border-radius: 8px;
        margin-top: 0.3rem;
    }

    /* États d'ouverture avec animations fluides */
    .has-submenu.open > .submenu {
        animation: slideDownFade 0.4s ease-out forwards;
    }

    .has-nested-submenu.open > .nested-submenu {
        animation: slideDownFade 0.4s ease-out forwards;
    }

    /* Amélioration de la lisibilité des niveaux imbriqués */
    .nested-submenu li {
        position: relative;
    }

    .nested-submenu li:before {
        content: '•';
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 0.6rem;
    }

    .nested-submenu li a {
        padding-left: 1.8rem;
        position: relative;
    }

    /* Indicateurs de profondeur */
    .submenu {
        border-left: 4px solid var(--primary-color);
        padding-left: 0.5rem;
    }

    .nested-submenu {
        border-left: 4px solid var(--secondary-color);
        margin-left: 1rem;
        padding-left: 0.5rem;
    }

    /* Hover states améliorés */
    .submenu li a:hover {
        padding-left: 1.3rem;
        background: linear-gradient(90deg, rgba(233, 151, 0, 0.1) 0%, transparent 100%);
    }

    .nested-submenu li a:hover {
        padding-left: 2.1rem;
        background: linear-gradient(90deg, rgba(180, 117, 0, 0.1) 0%, transparent 100%);
    }

    /* Amélioration du contraste pour l'accessibilité */
    .submenu li a {
        color: #333;
        font-weight: 500;
    }

    .nested-submenu li a {
        color: #555;
        font-weight: 400;
    }

    /* Focus visible pour l'accessibilité */
    .menu a:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
        background-color: rgba(233, 151, 0, 0.1);
    }

    /* Amélioration de l'espacement pour éviter les clics accidentels */
    .menu li {
        margin-bottom: 0.3rem;
    }

    .submenu li {
        margin-bottom: 0.2rem;
    }

    .nested-submenu li {
        margin-bottom: 0.1rem;
    }
}

/* Animations personnalisées */
@keyframes slideDownFade {
    0% {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        max-height: 600px;
        transform: translateY(0);
    }
}

/* Optimisations pour très petits écrans */
@media screen and (max-width: 480px) {
    .nested-submenu {
        margin-left: 0.5rem;
        font-size: 0.8rem;
    }

    .nested-submenu li:before {
        left: 0.3rem;
    }

    .nested-submenu li a {
        padding-left: 1.5rem;
    }

    .nested-submenu li a:hover {
        padding-left: 1.8rem;
    }
}

/* États de loading et transitions */
.menu.loading {
    pointer-events: none;
}

.menu.loading .has-submenu > a:after,
.menu.loading .has-nested-submenu > a:after {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Optimisation de performance - désactivation des animations sur mobile ancien */
@media (prefers-reduced-motion: reduce) {
    .submenu,
    .nested-submenu {
        transition: none;
    }

    .has-submenu.open > .submenu,
    .has-nested-submenu.open > .nested-submenu {
        animation: none;
    }
}