/*
 * metronic-menu-drill — Sous-menus en cartes flottantes.
 *
 * Architecture des états CSS (ordre critique — la cascade résout les
 * conflits de même spécificité entre :not(.is-active) et .is-prev/.is-next) :
 *
 *   .is-active           Page visible, en flux (position: relative)
 *   .is-prev             Page parent derrière (relative, fadée)
 *   .is-next             Page sortante vers la droite (absolute, hors champ)
 *   :not(.is-active)     Défaut : hors champ à droite, invisible
 *
 * Les sous-pages (pas root) héritent d'un style carte (fond, ombre,
 * radius, left offset) partagé entre is-active et is-next pour que
 * l'apparence reste stable pendant le slide de sortie.
 */

/* Conteneur -------------------------------------------------------- */

.menu-drill {
    position: relative;
    /* clip ne crée pas de scroll container (contrairement à hidden),
       donc le scroll vertical du parent autoheight fonctionne. */
    overflow-x: hidden;
    overflow-x: clip; /* progressif : clip override hidden si supporté */
    overflow-y: visible;
}

/* Transitions ------------------------------------------------------ */

.menu-drill-page {
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity   180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active ----------------------------------------------------------- */

.menu-drill-page.is-active {
    position: relative;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Inactive (défaut) ------------------------------------------------ */

.menu-drill-page:not(.is-active) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    transform: translateX(100%);
    opacity: 0;
}

/* Parent visible derrière ------------------------------------------ */

.menu-drill-page.is-prev {
    position: relative;
    transform: none;
    opacity: 0.35;
    z-index: 1;
    pointer-events: none;
}

/* Sortie vers la droite (back) ------------------------------------- */

.menu-drill-page.is-next {
    transform: translateX(100%);
    opacity: 1;
    width: auto;
}

/* Carte flottante (sous-pages, pas root) --------------------------- */
/* Partagé entre is-active et is-next pour conserver l'apparence
   (fond, ombre, radius, position) pendant le slide de sortie.
   Sans ça, left saute de 40px à 0 et l'ombre disparaît. */

.menu-drill-page:not([data-page="root"]):is(.is-active, .is-next) {
    background: var(--bs-body-bg, #fff);
    box-shadow: -4px 2px 20px rgba(0, 0, 0, 0.12);
    border-radius: 0.475rem;
    left: 40px;
    right: 0;
}

.menu-drill-page.is-active:not([data-page="root"]) {
    position: absolute;
    z-index: 2;
    overflow-y: auto;
    max-height: 100%;
    /* Padding vertical identique au dropdown parent (py-4 = 1.5rem)
       pour que les items ne collent pas aux bords de la carte. */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Accessibilité ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .menu-drill-page {
        transition: none;
    }
}