/* ───────────────────────────────────────────────
 * Menu principal — Crèmerie des marchés
 * Desktop : nav horizontale + mega-menu au survol
 * Mobile  : accordéon vertical dans le drawer sombre
 * ─────────────────────────────────────────────── */

.MenuPrincipal {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;

    @media (max-width: 992px) {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    /* ── Niveau 1 ── */
    > li {
        position: relative;

        @media (max-width: 992px) {
            width: 100%;
        }

        > a {
            display: block;
            padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
            font-family: var(--wp--preset--font-family--secondary);
            font-weight: var(--wp--custom--font-weight--medium);
            font-size: var(--wp--preset--font-size--s);
            letter-spacing: 0.01em;
            color: var(--wp--preset--color--primary);
            text-decoration: none;
            border-bottom: 1.5px solid transparent;
            transition: color 0.18s ease, border-color 0.18s ease;
            @media (max-width: 1440px) {
                padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs);
            }

            @media (max-width: 1200px) {
                padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xxs);
            }
            @media (max-width: 992px) {
                font-size: var(--wp--preset--font-size--xl);
                font-weight: var(--wp--custom--font-weight--regular);
                color: var(--wp--preset--color--white);
                padding: var(--wp--preset--spacing--s) 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            }
        }

        > a:hover,
        > a:focus-visible {
            color: var(--wp--custom--color--or-hover);
            border-bottom-color: var(--wp--preset--color--secondary);
            @media (max-width: 992px) {
                color: var(--wp--preset--color--secondary);
                border-bottom-color: rgba(255, 255, 255, 0.12);
            }
        }

        /* Item actif (page courante) */
        &.current-menu-item > a,
        &.current_page_item > a {
            color: var(--wp--custom--color--or-hover);
            border-bottom-color: var(--wp--preset--color--secondary);
            @media (max-width: 992px) {
                color: var(--wp--preset--color--secondary);
            }
        }
    }

    /* ── Sous-menu (mega-menu desktop) ── */
    .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;

        @media (min-width: 993px) {
            position: absolute;
            top: calc(100% - 2px);
            left: 0;
            min-width: 190px;
            display: flex;
            flex-direction: column;
            gap: var(--wp--preset--spacing--xs);
            padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--s);
            background: var(--wp--preset--color--tertiary);
            border: 1px solid var(--wp--custom--color--gris-bordure);
            border-top: 2px solid var(--wp--preset--color--secondary);
            box-shadow: var(--wp--preset--shadow--card);
            opacity: 0;
            visibility: hidden;
            transform: translateY(4px);
            transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
            z-index: 60;
        }

        @media (max-width: 992px) {
            display: block;
            height: 0;
            overflow: hidden;
            transition: height 0.35s cubic-bezier(0.37, 0.33, 0.185, 0.9);
        }

        > li > a {
            display: block;
            font-family: var(--wp--preset--font-family--secondary);
            font-size: var(--wp--preset--font-size--s);
            color: var(--wp--preset--color--primary);
            text-decoration: none;
            font-weight: var(--wp--custom--font-weight--medium);
            padding: 0;
            transition: color 0.18s ease, padding-left 0.18s ease;

            @media (max-width: 992px) {
                color: rgba(255, 255, 255, 0.82);
                font-size: var(--wp--preset--font-size--l);
                padding: var(--wp--preset--spacing--xs) 0 var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
            }
        }
        > li > a:hover,
        > li > a:focus-visible {
            color: var(--wp--custom--color--or-hover);
            padding-left: 4px;
            @media (max-width: 992px) {
                color: var(--wp--preset--color--secondary);
            }
        }
    }

    /* Survol desktop → ouverture du mega-menu */
    > li.menu-item-has-children:hover > .sub-menu,
    > li.menu-item-has-children:focus-within > .sub-menu {
        @media (min-width: 993px) {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }

    /* ── Bouton accordéon (mobile uniquement) ── */
    .sub-menu-toggle {
        display: none;

        @media (max-width: 992px) {
            position: absolute;
            top: var(--wp--preset--spacing--xs);
            right: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: var(--wp--preset--spacing--l);
            height: var(--wp--preset--spacing--l);
            border: 0;
            border-radius: var(--wp--custom--radius--s);
            background: var(--wp--preset--color--secondary);
            color: var(--wp--preset--color--primary);
            font-size: var(--wp--preset--font-size--l);
            line-height: 1;
            cursor: pointer;
        }
    }
}