/* ==========================================================================
   IBL Mega Menu
   Utilise les variables --ibl-color-primary / --ibl-color-secondary
   injectées par le module iblcolorconfig (fallback si absent).
   ========================================================================== */

.ibl-megamenu {
    position: relative;
    background: var(--ibl-color-megamenu-bar, #ffffff) !important;
    border: none;
    color: var(--ibl-color-megamenu-bar-text, #222222) !important;
}

/* Le conteneur interne (classe Bootstrap "container") ne doit pas avoir
   sa propre couleur : sinon la règle générale "Fond" du module couleur
   (plus spécifique via !important) le repeint et crée un effet de
   bande centrale différente des bords. On le neutralise ici avec une
   spécificité plus forte pour garantir une couleur uniforme sur toute
   la largeur du méga-menu. */
.ibl-megamenu .ibl-megamenu__container {
    background: transparent !important;
}

.ibl-megamenu__burger {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
}

.ibl-megamenu__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #333;
    margin: 3px 0;
}

.ibl-megamenu__list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.ibl-megamenu__item {
    position: relative;
}

.ibl-megamenu__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--ibl-color-megamenu-bar-text, #222222) !important;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ibl-megamenu__link:hover {
    color: var(--ibl-color-primary, #2e7d32);
}

.ibl-megamenu__caret {
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
}

.ibl-megamenu__panel {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 50;
    min-width: 640px;
    padding: 24px;
    border-top: 3px solid var(--ibl-color-primary, #2e7d32);
}

.ibl-megamenu__item--has-children:hover .ibl-megamenu__panel,
.ibl-megamenu__item--has-children.ibl-megamenu__item--open .ibl-megamenu__panel {
    display: block;
}

/* ==========================================================================
   Bouton "Catégories" style barre latérale (liste verticale + flyout)
   ========================================================================== */

.ibl-megamenu__sidebar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--ibl-color-category-btn, var(--ibl-color-primary, #2e7d32));
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
}

.ibl-megamenu__sidebar-btn:hover {
    filter: brightness(0.88);
    color: #fff;
}

.ibl-megamenu__sidebar-icon {
    font-size: 16px;
    line-height: 1;
}

.ibl-megamenu__caret--white {
    border-color: #fff;
    margin-left: auto;
}

.ibl-megamenu__sidebar-panel {
    min-width: 280px;
    padding: 0;
    border-top: none;
}

.ibl-megamenu__sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ibl-megamenu__sidebar-row {
    position: relative;
    border-bottom: 1px solid #eee;
}

.ibl-megamenu__sidebar-row > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    color: #333 !important;
    text-decoration: none;
    font-size: 14px;
}

.ibl-megamenu__sidebar-row:hover > a {
    background: #f7f7f7;
    color: var(--ibl-color-primary, #2e7d32);
}

.ibl-megamenu__sidebar-arrow {
    font-size: 18px;
    line-height: 1;
    color: #999;
}

.ibl-megamenu__sidebar-row:hover .ibl-megamenu__sidebar-arrow {
    color: var(--ibl-color-primary, #2e7d32);
}

.ibl-megamenu__sidebar-flyout {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 240px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    border-top: 3px solid var(--ibl-color-primary, #2e7d32);
    padding: 16px;
    z-index: 70;
}

.ibl-megamenu__sidebar-row--has-flyout:hover > .ibl-megamenu__sidebar-flyout {
    display: block;
}

/* ==========================================================================
   Effet optionnel "page qui tourne" à l'ouverture du panneau
   Activable/désactivable dans Modules > IBL - Méga menu > Configurer
   ========================================================================== */

.ibl-megamenu--flip-effect .ibl-megamenu__item--has-children {
    perspective: 1400px;
}

.ibl-megamenu--flip-effect .ibl-megamenu__panel {
    display: block;
    transform-origin: top left;
    transform: rotateY(-75deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    backface-visibility: hidden;
}

.ibl-megamenu--flip-effect .ibl-megamenu__item--has-children:hover .ibl-megamenu__panel,
.ibl-megamenu--flip-effect .ibl-megamenu__item--has-children.ibl-megamenu__item--open .ibl-megamenu__panel {
    transform: rotateY(0deg);
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 991px) {
    /* L'effet 3D est désactivé sur mobile : accordéon simple, plus lisible sur petit écran */
    .ibl-megamenu--flip-effect .ibl-megamenu__panel {
        transform: none;
        opacity: 1;
        display: none;
    }

    .ibl-megamenu--flip-effect .ibl-megamenu__item--open > .ibl-megamenu__panel {
        display: block;
    }
}

.ibl-megamenu__columns {
    display: flex;
    gap: 32px;
}

.ibl-megamenu__column-title {
    display: block;
    font-weight: 700;
    color: #222 !important;
    text-decoration: none;
    margin-bottom: 10px;
}

.ibl-megamenu__column-title:hover {
    color: var(--ibl-color-primary, #2e7d32);
}

.ibl-megamenu__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ibl-megamenu__sublist li {
    margin-bottom: 6px;
}

.ibl-megamenu__sublist a {
    color: #555 !important;
    text-decoration: none;
    font-size: 13px;
}

.ibl-megamenu__sublist a:hover {
    color: var(--ibl-color-primary, #2e7d32);
    text-decoration: underline;
}

.ibl-megamenu__sublist--nested {
    margin-left: 12px;
    margin-top: 4px;
}

.ibl-megamenu__sublist--nested a {
    font-size: 12px;
    color: #888 !important;
}

.ibl-megamenu__banner img {
    max-width: 220px;
    border-radius: 4px;
}

/* ==========================================================================
   Responsive (mobile / tablette) - menu en accordéon
   ========================================================================== */

@media (max-width: 991px) {
    .ibl-megamenu__burger {
        display: flex;
    }

    .ibl-megamenu__list {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .ibl-megamenu.ibl-megamenu--open .ibl-megamenu__list {
        display: flex;
    }

    .ibl-megamenu__panel {
        display: none;
        position: static;
        box-shadow: none;
        min-width: 0;
        border-top: none;
        border-left: 3px solid var(--ibl-color-primary, #2e7d32);
        padding: 12px 16px;
    }

    .ibl-megamenu__item--open > .ibl-megamenu__panel {
        display: block;
    }

    .ibl-megamenu__columns {
        flex-direction: column;
        gap: 16px;
    }

    .ibl-megamenu__banner {
        display: none;
    }

    .ibl-megamenu__item--has-children:hover .ibl-megamenu__panel {
        display: none; /* désactive le hover en mobile, on gère au clic via JS */
    }

    .ibl-megamenu__item--has-children.ibl-megamenu__item--open .ibl-megamenu__panel {
        display: block;
    }

    /* Bouton Catégories en mobile : pleine largeur, flyout imbriqué au lieu de latéral */
    .ibl-megamenu__sidebar-btn {
        justify-content: space-between;
        width: 100%;
    }

    .ibl-megamenu__sidebar-panel {
        min-width: 0;
    }

    .ibl-megamenu__sidebar-flyout {
        display: none;
        position: static;
        box-shadow: none;
        border-top: none;
        border-left: 3px solid var(--ibl-color-primary, #2e7d32);
        padding: 8px 8px 8px 16px;
        min-width: 0;
    }

    .ibl-megamenu__sidebar-row--has-flyout:hover .ibl-megamenu__sidebar-flyout {
        display: none; /* le survol ne déclenche rien en mobile, seul le clic (JS) ouvre */
    }

    .ibl-megamenu__sidebar-row--open > .ibl-megamenu__sidebar-flyout {
        display: block;
    }
}