/* ==========================================================================
   Méga-menu catégories — déclencheur + panneau cascade 3 colonnes
   ========================================================================== */

.pmb-mm {
    position: relative;
    display: inline-block;
}

/* --- Déclencheur (« Nos produits ▾ ») --- */
.pmb-mm-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 10px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #1a1a1a;
}

.pmb-mm-arrow {
    font-size: 0.72em;
    font-style: normal;
    transition: transform 0.2s ease;
}

.pmb-mm.open .pmb-mm-trigger {
    color: #eb1d24;
}

.pmb-mm.open .pmb-mm-arrow {
    transform: rotate(180deg);
}

/* --- Panneau --- */
.pmb-mm-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

.pmb-mm.open .pmb-mm-panel {
    display: flex;
}

/* --- Colonne d'onglets (Catégorie / Marque / Compatibilité) --- */
.pmb-mm-tabs {
    flex: 0 0 auto;
    width: 200px;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    background: #fafafa;
    border-right: 1px solid #ececec;
}

.pmb-mm-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    text-align: left;
    padding: 12px 20px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #5a5a5a;
    cursor: pointer;
}

.pmb-mm-tab:hover {
    color: #1a1a1a;
}

.pmb-mm-tab.active {
    color: #eb1d24;
    border-left-color: #eb1d24;
    background: #fff;
}

/* Chevron › : signale que l'onglet OUVRE un panneau du méga-menu. */
.pmb-mm-tab::after {
    content: '\203A';
    color: #c4c4c4;
    font-size: 18px;
    line-height: 1;
}

.pmb-mm-tab:hover::after,
.pmb-mm-tab.active::after {
    color: #eb1d24;
}

/* Liens directs du 1er niveau (Tous nos produits, Nouveautés…) : naviguent vers
   une page. Même graisse/police que les onglets, mais SANS chevron (le › est
   réservé aux éléments qui ouvrent un panneau). */
.pmb-mm-link {
    display: block;
    padding: 12px 20px;
    border-left: 3px solid transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #5a5a5a;
    text-decoration: none;
    transition: color .12s;
}

.pmb-mm-link:hover {
    color: #1a1a1a;
}

/* --- Panneaux --- */
.pmb-mm-tabpanels {
    flex: 1 1 auto;
    min-width: 0;
}

.pmb-mm-tabpanel {
    display: none;
}

.pmb-mm-tabpanel.active {
    display: block;
}

/* --- Colonnes catégories --- */
.pmb-mm-cols {
    display: flex;
}

.pmb-mm-col {
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
    max-height: 72vh;
    overflow-y: auto;
}

.pmb-mm-l2,
.pmb-mm-l3,
.pmb-mm-l4 {
    border-left: 1px solid #f0f0f0;
}

.pmb-mm-l1,
.pmb-mm-sub {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.pmb-mm-sub {
    display: none;
}

.pmb-mm-sub.active {
    display: block;
}

/* --- Items --- */
.pmb-mm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 18px;
    color: #2d2d2d;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
}

.pmb-mm-item:hover,
.pmb-mm-item.active {
    background: #f7f7f7;
    color: #eb1d24;
}

.pmb-mm-chev {
    flex: 0 0 auto;
    color: #c4c4c4;
    font-size: 18px;
    font-style: normal;
    line-height: 1;
}

.pmb-mm-item:hover .pmb-mm-chev,
.pmb-mm-item.active .pmb-mm-chev {
    color: #eb1d24;
}

/* --- Onglet Marque : liste en colonnes fluides --- */
.pmb-mm-marques {
    column-width: 200px;
    column-gap: 0;
    padding: 8px 0;
    max-height: 72vh;
    overflow-y: auto;
}

.pmb-mm-marques .pmb-mm-item {
    break-inside: avoid;
}

/* --- Onglet Compatibilité : 2 colonnes (véhicule / appareil) --- */
.pmb-mm-compat {
    display: flex;
    padding: 8px 0;
}

.pmb-mm-compat-col {
    flex: 1 1 50%;
    min-width: 0;
    padding: 12px 20px;
    border-left: 1px solid #f0f0f0;
    max-height: 72vh;
    overflow-y: auto;
}

.pmb-mm-compat-col:first-child {
    border-left: 0;
}

.pmb-mm-compat-head {
    display: block;
    margin: 0 0 10px;
    padding: 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
}

.pmb-mm-compat-head:hover {
    color: #eb1d24;
}

.pmb-mm-compat-list {
    column-width: 170px;
    column-gap: 8px;
}

.pmb-mm-compat-list .pmb-mm-item {
    break-inside: avoid;
    padding: 6px 6px;
    font-size: 13.5px;
}

.pmb-mm-soon {
    color: #aaa;
    font-size: 13px;
    font-style: italic;
    padding: 0 6px;
}

/* --- Fallback mobile : onglets empilés au-dessus, col 1 = liste de liens --- */
/* --------------------------------------------------------------------------
   Mobile : le panneau est déplacé dans le menu coulissant par js/mobile.js et
   présenté en drill-down — une vue à la fois, avec un bouton retour.
   Le déclencheur « Nos produits » de l'en-tête disparaît : tout passe par le
   burger, ce qui évite deux points d'entrée concurrents.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .pmb-mm-trigger {
        display: none;
    }

    .pmb-mm.pmb-mm-mobile {
        display: none; /* Le panneau vit désormais dans le menu coulissant. */
    }

    .pmb-mnav .pmb-mm-panel {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        border: 0;
        box-shadow: none;
        background: none;
    }

    /* Barre de navigation : retour + titre de la vue courante. */
    .pmb-mnav-bar {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 40px;
        margin-bottom: 4px;
    }

    .pmb-mnav-bar.is-root {
        display: none; /* À la racine, ni retour ni titre. */
    }

    .pmb-mnav-back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid #ebebeb;
        border-radius: 8px;
        background: #fff;
        font-size: 22px;
        line-height: 1;
        color: #eb1d24;
        cursor: pointer;
    }

    .pmb-mnav-title {
        font-weight: 700;
        font-size: 15px;
    }

    .pmb-mnav-title a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid currentColor;
    }

    /* Une seule vue visible à la fois. Toutes les colonnes de la cascade
       retrouvent une largeur pleine ; les vues inactives sont masquées. */
    .pmb-mnav .pmb-mm-col {
        flex-basis: auto;
        max-width: none;
        width: 100%;
        min-height: 0;
        border: 0;
        padding: 0;
        overflow: visible;
    }

    /* .pmb-mm-l1 est elle-même un <ul> (donc une vue) : son `display` est régi
       par les règles de vue ci-dessous, pas ici. */
    .pmb-mnav .pmb-mm-cols,
    .pmb-mnav .pmb-mm-col:not(.pmb-mm-l1) {
        display: block;
    }

    .pmb-mnav .pmb-mm-tabpanel,
    .pmb-mnav .pmb-mm-tabs,
    .pmb-mnav .pmb-mm-sub,
    .pmb-mnav .pmb-mm-l1,
    .pmb-mnav .pmb-mm-marques,
    .pmb-mnav .pmb-mm-compat,
    .pmb-mnav .pmb-mm-compat-list {
        display: none;
    }

    .pmb-mnav .pmb-mnav-on,
    .pmb-mnav .pmb-mnav-path {
        display: block;
    }

    /* Descendu dans une liste de compatibilité : les en-têtes des deux colonnes
       et la colonne voisine n'ont plus lieu d'apparaître au-dessus. */
    .pmb-mnav .pmb-mm-compat.pmb-mnav-path .pmb-mm-compat-head,
    .pmb-mnav .pmb-mm-compat.pmb-mnav-path .pmb-mm-compat-col:not(.pmb-mnav-path) {
        display: none;
    }

    /* Hôte : <li> inséré dans la liste de navigation du menu coulissant. */
    .pmb-mnav-host {
        list-style: none;
        width: 100%;
    }

    /* Vue profonde : la sous-navigation occupe seule le tiroir. */
    .sliding-menu.pmb-mnav-deep .wp-block-navigation__container > li:not(.pmb-mnav-host),
    .sliding-menu.pmb-mnav-deep .wp-block-buttons {
        display: none !important; /* Bat la classe de layout de WordPress. */
    }

    /* Les onglets deviennent trois entrées de liste, comme le reste du menu. */
    .pmb-mnav .pmb-mm-tabs {
        flex-direction: column;
        width: auto;
        border: 0;
        gap: 0;
        background: none; /* Le fond gris des onglets desktop n'a pas lieu d'être. */
    }

    .pmb-mnav .pmb-mm-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        /* 40px à gauche : aligne le libellé sur celui des entrées du menu, qui
           sont précédées d'une icône. Se lit comme un sous-niveau de
           « Nos produits », juste au-dessus. */
        padding: 12px 4px 12px 40px;
        border: 0;
        border-bottom: 1px solid #d6d6d6;
        border-radius: 0;
        background: none;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    /* L'onglet actif du desktop ne doit pas colorer la ligne en mobile. */
    .pmb-mnav .pmb-mm-tab.active {
        color: inherit;
        background: none;
    }

    .pmb-mnav .pmb-mm-tab::after {
        content: '›';
        color: #eb1d24;
        font-size: 18px;
    }

    /* Lien direct du 1er niveau en mobile : une ligne du menu comme les onglets,
       mais SANS chevron (il navigue au lieu d'ouvrir un sous-niveau). */
    .pmb-mnav .pmb-mm-link {
        display: block;
        width: 100%;
        padding: 12px 4px 12px 40px;
        border: 0;
        border-bottom: 1px solid #d6d6d6;
        color: inherit;
        font: inherit;
        text-decoration: none;
    }

    /* Lignes : catégories, marques, marques de compatibilité. */
    .pmb-mnav .pmb-mm-item,
    .pmb-mnav .pmb-mm-compat-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 4px;
        border-bottom: 1px solid #d6d6d6;
        border-radius: 0;
        text-decoration: none;
    }

    .pmb-mnav .pmb-mm-compat-head {
        font-weight: 700;
    }

    .pmb-mnav .pmb-mm-compat-head::after {
        content: '›';
        color: #eb1d24;
        font-size: 18px;
    }

    /* Le pré-déroulé desktop ne doit pas se lire comme une sélection ; seule
       la catégorie réellement consultée est mise en avant. */
    .pmb-mnav .pmb-mm-item.active:not(.is-current) {
        color: inherit;
        background: none;
        font-weight: inherit;
    }

    /* Chevron seulement quand la ligne descend d'un niveau. */
    .pmb-mnav .pmb-mm-item .pmb-mm-chev {
        color: #eb1d24;
        font-size: 18px;
        font-style: normal;
    }

    .pmb-mnav .pmb-mm-marques,
    .pmb-mnav .pmb-mm-compat-list {
        max-height: none;
        overflow: visible;
    }

    /* Entrée de vue : glissement depuis la droite (retour compris, volontairement
       identique — l'important est de signaler le changement de niveau). */
    @media (prefers-reduced-motion: no-preference) {
        .pmb-mnav .pmb-mnav-in {
            animation: pmb-mnav-slide 0.18s ease-out;
        }
    }

    @keyframes pmb-mnav-slide {
        from {
            opacity: 0;
            transform: translateX(12px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}