/**
 * @package     Academic Suite
 * @subpackage  mod_academic_navbar
 * @copyright   (C) 2026 Institut Lumière Matière (ILM)
 * @license     MIT License
 *
 * Style minimaliste et élégant pour les SOUS-MENUS (dropdowns) de la navbar.
 * Tout est scopé à #navbar-main pour ne pas toucher les autres dropdowns du
 * site. La barre principale et le bandeau du haut gardent le style Mojito.
 */

/* ── Dropdown : conteneur ─────────────────────────────────────────────────── */
#navbar-main .dropdown-menu {
    min-width: 220px;
    margin-top: 0;
    padding: 6px 0;
    background: #fff;
    border: none;
    border-top: 3px solid #693290;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 30px rgba(70, 34, 97, 0.16);
    /* petite animation d'apparition */
    animation: anavbar-drop 160ms ease-out;
}

@keyframes anavbar-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Dropdown : items ─────────────────────────────────────────────────────── */
#navbar-main .dropdown-menu > li > a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #462261;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    border-left: 3px solid transparent;
    transition: background 130ms ease, color 130ms ease, border-color 130ms ease, padding-left 130ms ease;
}

#navbar-main .dropdown-menu > li > a:hover,
#navbar-main .dropdown-menu > li > a:focus {
    background: #f5ebf7;
    color: #693290;
    border-left-color: #693290;
    padding-left: 24px;
}

/* item actif (page courante) dans le dropdown */
#navbar-main .dropdown-menu > li.active > a,
#navbar-main .dropdown-menu > li > a.active {
    background: #faf6fc;
    color: #693290;
    font-weight: 600;
    border-left-color: #693290;
}

/* fin séparateur léger entre items (sauf le dernier) */
#navbar-main .dropdown-menu > li:not(:last-child) > a {
    border-bottom: 1px solid #f3edf8;
}

/* ── Ouverture au survol (le JS du module pose .open) ─────────────────────── */
#navbar-main .dropdown.open > .dropdown-menu,
#navbar-main .dropdown:hover > .dropdown-menu {
    display: block;
}

/* collé au toggle pour éviter le gap qui ferme le menu au survol */
#navbar-main .dropdown {
    position: relative;
}
#navbar-main .dropdown > .dropdown-menu {
    top: 100%;
    left: 0;
    margin-top: 0;
}

/* ── Caret (flèche) du toggle ─────────────────────────────────────────────── */
#navbar-main .dropdown-toggle .caret {
    margin-left: 6px;
    opacity: 0.7;
    transition: transform 160ms ease;
}
#navbar-main .dropdown.open > .dropdown-toggle .caret {
    transform: rotate(180deg);
}

/* ── Responsive : sur mobile le dropdown se déplie en bloc ────────────────── */
@media (max-width: 767px) {
    #navbar-main .dropdown-menu {
        position: static;
        float: none;
        box-shadow: none;
        border-top: none;
        border-radius: 0;
        background: #faf6fc;
        animation: none;
    }
    #navbar-main .dropdown-menu > li > a {
        padding-left: 32px;
    }
}