/* ==========================================================================
   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;
}

/* Sert de référence de positionnement pour les panneaux "pleine largeur"
   (type galerie) : ils se calent sur le container plutôt que sur l'onglet
   qui les ouvre, quelle que soit sa position dans la barre de menu. */
.ibl-megamenu__container {
    position: relative;
}

/* 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;
    outline: none;
    padding: 12px 16px;
    cursor: pointer;
}

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

/* Le texte "Menu" reste accessible aux lecteurs d'écran mais n'est pas
   affiché visuellement : le bouton ne montre que l'icône (3 lignes). */
.ibl-megamenu__burger-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.ibl-megamenu__item {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Onglet "HTML / Script" : contenu libre (fourni par l'admin), on centre
   juste verticalement dans la barre de menu. */
.ibl-megamenu__item--html {
    display: flex;
    align-items: center;
    padding: 0 16px;
}

/* Classe utilitaire optionnelle, à appliquer par l'admin sur son propre
   <a>/<button> dans le champ HTML / Script pour reprendre le style visuel
   du menu (couleur d'accent définie par iblcolorconfig si présent). */
.ibl-megamenu__cta-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ibl-color-primary, #2e7d32);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.ibl-megamenu__cta-button:hover {
    filter: brightness(0.92);
}

.ibl-megamenu__caret-toggle {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    border-left: 1px solid rgba(0, 0, 0, .08);
    padding: 14px 14px;
    cursor: pointer;
    color: inherit;
}

.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__link:focus-visible,
.ibl-megamenu__sidebar-btn:focus-visible,
.ibl-megamenu__burger:focus-visible,
.ibl-megamenu__caret-toggle:focus-visible,
.ibl-megamenu__sidebar-row > a:focus-visible {
    outline: 2px solid var(--ibl-color-primary, #2e7d32);
    outline-offset: -2px;
}

.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-panel--with-blocks {
    display: flex;
    align-items: flex-start;
}

.ibl-megamenu__sidebar-panel--with-blocks .ibl-megamenu__sidebar-list {
    flex: 0 0 280px;
}

.ibl-megamenu__sidebar-blocks {
    display: flex;
    gap: 24px;
    padding: 16px;
    border-left: 1px solid #eee;
}

.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__sublist--nested-2 {
    margin-left: 12px;
    margin-top: 4px;
}

.ibl-megamenu__sublist--nested-2 a {
    font-size: 11px;
    color: #aaa !important;
}

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

.ibl-megamenu__column--block {
    min-width: 180px;
    max-width: 260px;
}

/* Onglet "galerie" : la position et la largeur du panneau pleine largeur
   sont calculées en JavaScript (voir megamenu.js) plutôt qu'en CSS pur —
   plus fiable, indépendant de la structure de positionnement du thème. */
.ibl-megamenu__panel--full {
    min-width: 0;
}

.ibl-megamenu__gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
}

.ibl-megamenu__gallery-item {
    flex: 1 1 calc((100% / var(--ibl-gallery-columns, 2)) - 16px);
    max-width: calc((100% / var(--ibl-gallery-columns, 2)) - 16px);
}

.ibl-megamenu__gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.ibl-megamenu__gallery-caption {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    text-align: center;
    color: #555;
}

.ibl-megamenu__gallery-text {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

.ibl-megamenu__block-text {
    font-size: 13px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

.ibl-megamenu__block-html {
    font-size: 13px;
    line-height: 1.5;
}

.ibl-megamenu__block-image {
    max-width: 100%;
    display: block;
    border-radius: 4px;
}

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

@media (max-width: 991px) {
    .ibl-megamenu__item {
        flex-direction: column;
    }

    .ibl-megamenu__item--html {
        padding: 12px 16px;
        justify-content: center;
    }

    .ibl-megamenu__item--html .ibl-megamenu__cta-button {
        width: 100%;
        justify-content: center;
    }

    /* Plus de bouton burger sur mobile : la liste des onglets (CATEGORIES,
       etc.) est visible directement, sans étape d'ouverture supplémentaire. */
    .ibl-megamenu__burger {
        display: none !important;
    }

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

    .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__gallery {
        flex-direction: column;
        padding: 12px 16px;
    }

    .ibl-megamenu__gallery-item {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .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-panel--with-blocks {
        flex-direction: column;
    }

    .ibl-megamenu__sidebar-blocks {
        flex-direction: column;
        border-left: none;
        border-top: 1px solid #eee;
    }

    .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;
    }

    /* Onglet "Catégories" déplié sur mobile : lignes pleine largeur avec
       indicateur +/- façon accordéon, au lieu du chevron utilisé sur PC. */
    .ibl-megamenu__sidebar-row > a {
        padding: 14px 16px;
        font-size: 15px;
        background: #f7f7f7;
    }

    .ibl-megamenu__sidebar-row:hover > a {
        background: #f7f7f7;
    }

    .ibl-megamenu__sidebar-list--nested .ibl-megamenu__sidebar-row > a,
    .ibl-megamenu__sidebar-flyout .ibl-megamenu__sidebar-row > a {
        background: #fff;
        padding-left: 28px;
    }

    .ibl-megamenu__sidebar-arrow {
        display: none;
    }

    .ibl-megamenu__sidebar-row--has-flyout > a {
        position: relative;
    }

    .ibl-megamenu__sidebar-row--has-flyout > a::after {
        content: "+";
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
        color: #333;
        flex-shrink: 0;
        margin-left: 12px;
    }

    .ibl-megamenu__sidebar-row--open > a::after {
        content: "\2212";
    }
}