/**
 * Méga-menu (Creative Elements) - styles de base.
 *
 * Repris tel quel du thème Mon Millésime (classic_child/assets/css/header.css) :
 * le panneau est en position: absolute et s'ancre sur #header (plein largeur).
 * Le builder de header CE intercale des wrappers Elementor en position: relative
 * entre #header et le panneau ; megamenu.js les repasse en static pour rétablir
 * l'ancrage sur #header. L'ouverture se fait via la classe .is-open ajoutée par
 * megamenu.js (aucune révélation au :hover en CSS).
 */

.ce-megamenu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ce-megamenu__item {
    /* Panneau positionné par rapport à #header (plein largeur). */
    position: static;
}

.ce-megamenu__link {
    display: inline-block;
    padding: 8px 0;
    font-family: "Montserrat - bold", sans-serif;
    font-size: 14px;
    font-weight: 600 !important;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Scopé sous #header pour battre `#header a` (spécificité ID). La couleur par
   entrée est passée en variable inline pour laisser le `:hover` ci-dessous
   reprendre la main (une couleur inline sur `color` bloquerait le survol). */
#header .ce-megamenu__link {
    color: var(--ce-link-color, #333);
}

#header .ce-megamenu__link:hover,
.ce-megamenu__item--mega.is-open .ce-megamenu__link {
    color: #ec1e79;
}

.ce-megamenu__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 90;
    display: none;

    /* Largeur du container Rollindoc, centrée sous le header. */
    max-width: 1600px;
    margin-inline: auto;
    background-color: #fff;
    color: #1b2430;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 24px rgb(0 0 0 / 10%);
}

.ce-megamenu__item--mega.is-open .ce-megamenu__panel {
    display: block;
}

/* Neutralise le blanc de `#header a` dans le panneau : les liens suivent la
   cascade du contenu Creative Elements plutôt que d'être blancs sur blanc. */
#header .ce-megamenu__panel a {
    color: inherit;
}

/* Dans le builder CE : affiche le panneau du sous-menu réellement en cours
   d'édition exactement comme au survol sur le front (celui qui contient la
   zone éditable Elementor `.elementor-edit-area`). */
body.elementor-editor-active .ce-megamenu__panel:has(.elementor-edit-area) {
    display: block;
}

/* -------------------------------------------------------------------------- *
 *  Mode mobile / tablette : burger + off-canvas gauche + drill-down.
 *  Calqué sur le sidebar cart Creative Elements (overlay plein écran +
 *  translateX sur le panneau). Le <ul.ce-megamenu> devient lui-même le drawer ;
 *  megamenu.js y injecte l'entête (.ce-megamenu__drawer-head) et un bouton
 *  retour (.ce-megamenu__back) en tête de chaque sous-panneau.
 * -------------------------------------------------------------------------- */

/* Déclencheur : masqué en desktop, révélé sous le breakpoint. */
.ce-megamenu__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #333;
    background: none;
    border: 0;
    cursor: pointer;
}

.ce-megamenu__burger-bars {
    position: relative;
}

.ce-megamenu__burger-bars,
.ce-megamenu__burger-bars::before,
.ce-megamenu__burger-bars::after {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
}

.ce-megamenu__burger-bars::before,
.ce-megamenu__burger-bars::after {
    position: absolute;
    left: 0;
    content: "";
}

.ce-megamenu__burger-bars::before {
    top: -7px;
}

.ce-megamenu__burger-bars::after {
    top: 7px;
}

.ce-megamenu__burger .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Chrome de drawer injecté par le JS : neutre hors mode mobile. */
.ce-megamenu__drawer-head,
.ce-megamenu__panel-head {
    display: none;
}

.ce-megamenu-overlay {
    display: none;
}

@media (max-width: 1024px) {
    /* Le <ul> lui-même devient l'off-canvas (ancré à gauche). */
    .ce-megamenu {
        position: fixed;
        inset-block: 0;
        inset-inline: 0;
        z-index: 1000;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
        max-width: none;
        overflow-y: auto;
        background-color: #fff;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform 0.3s, visibility 0.3s;
        -webkit-overflow-scrolling: touch;
    }

    .ce-megamenu.is-drawer-open {
        visibility: visible;
        transform: translateX(0);
    }

    .ce-megamenu__burger {
        display: inline-flex;
    }

    .ce-megamenu-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: block;
        background-color: rgb(0 0 0 / 40%);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .ce-megamenu-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    body.ce-megamenu-lock {
        overflow: hidden;
    }

    /* Entête du drawer (bouton fermeture seul). */
    .ce-megamenu__drawer-head {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: flex-end;
        min-height: 56px;
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
    }

    /* Aligné sur .elementor-cart__close-button du sidebar cart CE. */
    .ce-megamenu__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        font-size: 25px;
        color: #818a91;
        background: none;
        border: 0;
        cursor: pointer;
        transition: color 0.5s;
    }

    .ce-megamenu__close:hover {
        color: #333;
    }

    /* Entrées de 1er niveau empilées. */
    .ce-megamenu__item {
        border-bottom: 1px solid #eee;
    }

    #header .ce-megamenu__link,
    .ce-megamenu__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 16px 20px;
        color: #333;
        text-align: start;
        white-space: normal;
    }

    /* Chevron « ouvrir le sous-panneau » sur les entrées méga. */
    .ce-megamenu__item--mega > .ce-megamenu__link::after {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        content: "";
    }

    /* Sous-panneau : sous-vue plein drawer qui glisse depuis la droite. */
    .ce-megamenu__panel {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        width: auto;
        max-width: none;
        margin: 0;
        overflow-y: auto;
        background-color: #fff;
        border-radius: 0;
        box-shadow: none;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform 0.3s, visibility 0.3s;
    }

    .ce-megamenu__item--mega.is-open .ce-megamenu__panel {
        visibility: visible;
        transform: translateX(0);
    }

    /* Entête du sous-panneau (bouton retour), collée en haut au scroll. */
    .ce-megamenu__panel-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: block;
        background-color: #fff;
    }

    .ce-megamenu__back {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 14px 20px;
        font-family: "Montserrat - bold", sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        color: inherit;
        background: none;
        border: 0;
        border-bottom: 1px solid #eee;
        cursor: pointer;
    }

    .ce-megamenu__back-icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-inline-end: 10px;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }
}