/**
 * WooCommerce Mega Menu Styles
 * Full width (100vw) sans transform
 */

/* Wrapper principal */
.woo-mega-menu-wrapper{
    position: static; /* IMPORTANT: ne pas servir de référentiel */
    display: inline-block;
}

/* Élément de navigation dans le menu WP */
.woo-mega-menu-nav-item{
    position: static !important; /* IMPORTANT: évite de “contenir” le dropdown */
}

/* Trigger du menu */
.woo-mega-menu-trigger{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.woo-mega-menu-trigger:hover{ color:#a84872; }

.woo-mega-menu-trigger .menu-title{ font-weight: 400; }

.woo-mega-menu-trigger .menu-arrow{
    transition: transform 0.3s ease;
}

.woo-mega-menu-wrapper:hover .menu-arrow,
.woo-mega-menu-wrapper.active .menu-arrow{
    transform: rotate(180deg);
}

/* Éviter que le header/nav coupe le mega menu */
.site-header,
.header,
.nav,
.main-navigation,
.woocommerce-mega-menu,
.woo-mega-menu-nav-item,
.woo-mega-menu-wrapper{
    overflow: visible !important;
}

/* Contenu du méga menu: FULL VIEWPORT, SANS TRANSFORM */
.woo-mega-menu-content{
    position: fixed;           /* crucial: plus dépendant du parent */
    left: 0;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;

    /* Placement vertical: juste sous le header (ajuste si besoin) */
    top: calc(var(--header-height, 80px) + 0px);

    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 8px 8px;
    z-index: 9999;

    /* état fermé */
    opacity: 0;
    visibility: hidden;

    /* “slide down” sans transform: on joue sur top */
    margin-top: -10px;

    transition: opacity 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0.3s;
}

/* état ouvert */
.woo-mega-menu-wrapper:hover .woo-mega-menu-content,
.woo-mega-menu-wrapper.active .woo-mega-menu-content{
    top: 0;
    opacity: 1;
    visibility: visible;
    padding-bottom: 100px;
    transition: opacity 0.3s ease, margin-top 0.3s ease, visibility 0s;
}

/* Grille intérieure */
.woo-mega-menu-inner{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    padding: 30px 40px;

    max-width: 85vw;
    margin: 0 auto;  /* centrage du contenu */
    width: 100%;
    box-sizing: border-box;
}

/* Colonnes */
.woo-mega-menu-column{ min-width:150px; }

/* Titres des catégories parentes */
.woo-mega-menu-heading{
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: none;
}

/* Liste des sous-catégories */
.woo-mega-menu-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.woo-mega-menu-item{
    margin: 0;
    padding: 0;
}

.woo-mega-menu-item > a{
    display: block;
    padding: 6px 0;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.2s ease;
}

/* Liste des sous-sous-catégories (niveau 3) */
.woo-mega-menu-sublist{
    list-style: none;
    margin: 0 0 5px 0;
    padding: 0 0 0 15px;
    border-left: 2px solid #eee;
}

.woo-mega-menu-subitem{
    margin: 0;
    padding: 0;
}

.woo-mega-menu-subitem a{
    display: block;
    padding: 4px 0;
    text-decoration: none;
    line-height: 1.3;
    transition: all 0.2s ease;
}

/* Responsive */
@media screen and (max-width: 1024px){
    .woo-mega-menu-content{
        border-radius: 0;
        top: calc(var(--header-height, 70px) + 0px);
    }

    .woo-mega-menu-inner{
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 20px;
    }
}

@media screen and (max-width: 768px){
    .woo-mega-menu-inner{
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }

    .woo-mega-menu-heading{ font-size: 12px; }

    .woo-mega-menu-item a{
        font-size: 13px;
        padding: 5px 0;
    }
}

@media screen and (max-width: 480px){
    .woo-mega-menu-inner{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .woo-mega-menu-column{
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
    }

    .woo-mega-menu-column:last-child{
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* Animation des éléments de liste (tu peux garder tes transforms ici, ça ne touche pas le conteneur) */
.woo-mega-menu-item{
    opacity: 0;
    transform: translateX(-10px);
    animation: fadeInItem 0.3s ease forwards;
}

.woo-mega-menu-subitem{
    opacity: 0;
    transform: translateX(-10px);
    animation: fadeInItem 0.3s ease forwards;
}

.woo-mega-menu-wrapper:hover .woo-mega-menu-item,
.woo-mega-menu-wrapper:hover .woo-mega-menu-subitem{
    opacity: 1;
    transform: translateX(0);
}

@keyframes fadeInItem{
    to{
        opacity: 1;
        transform: translateX(0);
    }
}

/* Délai progressif */
.woo-mega-menu-item:nth-child(1){ animation-delay: 0.05s; }
.woo-mega-menu-item:nth-child(2){ animation-delay: 0.1s; }
.woo-mega-menu-item:nth-child(3){ animation-delay: 0.15s; }
.woo-mega-menu-item:nth-child(4){ animation-delay: 0.2s; }
.woo-mega-menu-item:nth-child(5){ animation-delay: 0.25s; }
.woo-mega-menu-item:nth-child(6){ animation-delay: 0.3s; }
.woo-mega-menu-item:nth-child(7){ animation-delay: 0.35s; }
.woo-mega-menu-item:nth-child(8){ animation-delay: 0.4s; }
.woo-mega-menu-item:nth-child(9){ animation-delay: 0.45s; }
.woo-mega-menu-item:nth-child(10){ animation-delay: 0.5s; }

.woo-mega-menu-subitem:nth-child(1){ animation-delay: 0.1s; }
.woo-mega-menu-subitem:nth-child(2){ animation-delay: 0.15s; }
.woo-mega-menu-subitem:nth-child(3){ animation-delay: 0.2s; }
.woo-mega-menu-subitem:nth-child(4){ animation-delay: 0.25s; }
.woo-mega-menu-subitem:nth-child(5){ animation-delay: 0.3s; }

body.mega-menu-open{
    overflow: hidden;
}

/* Mega menu scrollable quand trop haut */
.woo-mega-menu-content{
    /* garde ton fixed/left/width etc */
    overflow-y: auto;
    overflow-x: hidden;

    /* Hauteur max: viewport - header - marge */
    max-height: calc(100vh - var(--header-height, 80px) - 16px);

    -webkit-overflow-scrolling: touch; /* iOS */
}

/* Optionnel: évite que l'inner force une largeur/hauteur bizarre */
.woo-mega-menu-inner{
    box-sizing: border-box;
}
/* évite que le menu capte des events quand il est fermé */
.woo-mega-menu-content{
    pointer-events: none;
}

.woo-mega-menu-wrapper.active .woo-mega-menu-content,
.woo-mega-menu-wrapper:hover .woo-mega-menu-content{
    pointer-events: auto;
}
/* Zone tampon pour combler l'espace entre le trigger et le dropdown */
.woo-mega-menu-content::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;        /* <-- augmente si le graphiste a descendu plus */
    height: 24px;      /* <-- idem */
    background: transparent;
}
/* Mobile: le mega doit être scrollable et utilisable */
@media (max-width: 768px){
    .woo-mega-menu-content{
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - var(--header-height, 70px) - 10px);
        /* laisse la zone cliquable */
        pointer-events: auto;
    }

    /* Zone tampon mobile aussi (augmente si gros gap) */
    .woo-mega-menu-content::before{
        top: -28px;
        height: 28px;
    }
}

/* Optionnel: quand menu ouvert, on bloque le scroll de page derrière */
body.mega-menu-open{
    overflow: hidden;
    touch-action: none;
}




/* Hover uniquement sur devices avec souris/trackpad */
@media (hover: hover) and (pointer: fine) {
    .woo-mega-menu-wrapper:hover .woo-mega-menu-content {
        opacity: 1;
        visibility: visible;
        margin-top: 0; /* ou ton animation */
        pointer-events: auto;
    }
}

/* Mobile/tactile: on IGNORE hover, on n'ouvre que via .active */
@media (hover: none), (pointer: coarse) {
    .woo-mega-menu-wrapper:hover .woo-mega-menu-content {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .woo-mega-menu-wrapper.active .woo-mega-menu-content {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}