/* =====================================================================
   Grand panneau déroulant au survol des bulles catégories (façon Jumia).

   Écrans ≥ 992px (souris : survol ; tactile : 1er appui) : en dessous, les bulles restent
   de simples liens. Le panneau est posé sous toute la barre de bulles, hors
   du carrousel ; son contenu suit la bulle survolée
   (assets/js/category-mega-menu.js, gabarit partials/_category_menu.html.twig).

   Pour le retirer : supprimer le <link> de ce fichier et le <script>
   category-mega-menu.js dans templates/base.html.twig.
   ===================================================================== */

.category-mega {
    display: none;
}

@media (min-width: 992px) {
    .category-bubble-bar {
        position: relative;
    }

    .category-mega {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 95;
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translate3d(0, .6rem, 0);
        transition: visibility .18s, opacity .18s, transform .18s;
    }

    .category-mega.is-open {
        visibility: visible;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .category-mega[hidden] {
        display: none;
    }

    .category-mega-panel {
        max-height: min(62rem, calc(100vh - 22rem));
        overflow-y: auto;
        padding: 2.4rem 3rem 1.6rem;
        border: 1px solid #ececec;
        border-radius: 0 0 1.2rem 1.2rem;
        background: #fff;
        box-shadow: 0 1.6rem 4rem rgba(15, 23, 42, .14);
    }

    .category-mega-columns {
        columns: 4 20rem;
        column-gap: 3.2rem;
    }

    .category-mega-group {
        break-inside: avoid;
        margin-bottom: 2.2rem;
    }

    .category-mega-heading {
        display: block;
        margin-bottom: .6rem;
        padding-bottom: .6rem;
        border-bottom: 1px solid #f0f0f0;
        color: #1f2937 !important;
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .category-mega-heading:hover,
    .category-mega-heading:focus-visible {
        color: #F78116 !important;
    }

    .category-mega-group ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .category-mega-group li a {
        display: block;
        padding: .55rem 0;
        color: #4b5563 !important;
        font-size: 1.35rem;
        line-height: 1.35;
    }

    .category-mega-group li a:hover,
    .category-mega-group li a:focus-visible {
        color: #F78116 !important;
    }

    .category-mega-more {
        font-weight: 600;
    }

    .category-mega-more i {
        margin-left: .3rem;
        font-size: 1rem;
    }

    .category-mega-all {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        margin-top: .4rem;
        color: #F78116 !important;
        font-size: 1.35rem;
        font-weight: 700;
    }

    .category-mega-all:hover {
        text-decoration: underline;
    }

    /* Bulle dont le panneau est ouvert : même mise en avant qu'au survol. */
    .category-bubble-bar .swiper-slide.is-mega-active .category-name a {
        color: #F78116;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-mega {
        transition: none;
    }
}