/* MCB – header desktop (desk-header-8), chargé sur toutes les pages.
   Design_handoff_home_prestashop/README.md, sections 2 et 3. */

/* ---------- Bandeau utilitaire ---------- */

.mcb-utility-bar {
    background: var(--mcb-graphite);
    height: 40px;
}

.mcb-utility-bar__inner {
    height: 100%;
    max-width: var(--mcb-content-max-width);
    padding: 0 var(--mcb-content-padding);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Texte centré, sans les liens displayNav1 (retirés du bandeau utilitaire). */
.mcb-utility-bar__inner--centered {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 4px 22px;
    row-gap: 2px;
}

.mcb-utility-bar__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.mcb-utility-bar__claim {
    color: var(--mcb-white);
    font-family: var(--mcb-font-heading);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.mcb-utility-bar__claim sup {
    font-size: 9px;
    /* 0.2em (1.8px à 9px) ne suffisait pas : le rendu du sup et de l'espace/nbsp qui suit
       se chevauchent visuellement (voir aussi   dans desk-header-8.tpl), collant
       "1er" à "spécialiste" malgré cette marge. Valeur augmentée + vérifiée en navigateur. */
    margin-right: 0.5em;
    /* theme.css met `sup { right: -5px }` en global (décalage pensé pour un autre usage,
       ex. prix) : ça pousse "er" à 5px de "1". Neutralisé ici seulement, pas touché en
       global pour ne pas affecter les autres sup du site. */
    right: 0;
}

.mcb-utility-bar__sep {
    width: 1px;
    height: 14px;
    background: var(--mcb-border-dark);
    flex: 0 0 auto;
}

.mcb-utility-bar__delivery {
    color: var(--mcb-text-light);
    font-family: var(--mcb-font-body);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcb-utility-bar__right {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}

.mcb-utility-bar__right a {
    color: var(--mcb-text-light);
    font-family: var(--mcb-font-body);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.mcb-utility-bar__right a:hover {
    color: var(--mcb-white);
}

.mcb-utility-bar__right a.mcb-utility-bar__account {
    color: var(--mcb-orange-light);
    font-weight: 600;
}

.mcb-utility-bar__right a.mcb-utility-bar__account:hover {
    color: var(--mcb-orange-pale);
}

/* ---------- Rangée logo / recherche / compte / panier + barre de catégories (sticky) ---------- */

.mcb-header-sticky-group {
    position: relative;
    background: var(--mcb-white);
    border-bottom: 1px solid var(--mcb-border-light);
}

/* .tv-main-div (thème) a overflow:hidden, ce qui neutralise position:sticky natif :
   on reproduit donc le comportement au scroll via mcb-header.js (classe .is-stuck). */
.mcb-header-sticky-group.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
}

.mcb-header-main__inner {
    max-width: var(--mcb-content-max-width);
    padding: 0 var(--mcb-content-padding);
    margin: 0 auto;
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.mcb-header-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.mcb-header-logo img {
    height: 42px;
    width: auto;
}

/* Recherche (surcharge de tvcmssearch/views/templates/front/display_search.tpl) */

.mcb-header-search-slot {
    flex: 1 1 320px;
    max-width: 620px;
}

.mcb-header-search {
    position: relative;
}

/* Dropdown "au fil de la frappe" : contenu = rendu de tvcmssearch (module/tvcmssearch/ajax),
   déjà stylé par tvcmssearch/views/css/front.css (classes tvsearch-*) ; on ne positionne que
   le conteneur. */
.mcb-header-search__result {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 20;
    margin-top: 8px;
    background: var(--mcb-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mcb-header-search__form {
    display: flex;
    align-items: center;
    height: 46px;
    border: 1.5px solid var(--mcb-graphite);
    background: var(--mcb-white);
}

.mcb-header-search__icon {
    width: 17px;
    height: 17px;
    color: var(--mcb-gray-500);
    flex: 0 0 auto;
    margin-left: 14px;
}

.mcb-header-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0 12px;
    font-family: var(--mcb-font-body);
    font-size: 14px;
    color: var(--mcb-graphite);
}

.mcb-header-search__input:focus {
    outline: none;
}

.mcb-header-search__input::placeholder {
    color: var(--mcb-gray-500);
}

.mcb-header-search__submit {
    flex: 0 0 auto;
    height: 100%;
    padding: 0 22px;
    border: 0;
    background: var(--mcb-orange);
    color: var(--mcb-white);
    font-family: var(--mcb-font-heading);
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.mcb-header-search__submit:hover {
    background: var(--mcb-orange-pressed);
}

/* Compte / panier */

.mcb-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    /* La recherche est plafonnée à max-width:620px (voir .mcb-header-search-slot) : au-delà,
       l'espace qu'elle ne consomme plus doit revenir ici, pas rester bloqué entre elle et ce
       bloc. margin-left:auto absorbe cet espace pour garder compte/panier collés au bord droit
       du conteneur, quelle que soit la largeur d'écran. */
    margin-left: auto;
}

.mcb-header-account,
.mcb-header-cart {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.mcb-header-account {
    border: 1px solid var(--mcb-border-light);
    color: var(--mcb-graphite);
}

.mcb-header-account:hover {
    border-color: var(--mcb-graphite);
}

.mcb-header-account__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.mcb-header-account__lines,
.mcb-header-cart__lines {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.mcb-header-account__label,
.mcb-header-cart__label {
    font-family: var(--mcb-font-body);
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--mcb-gray-500);
}

.mcb-header-cart__label {
    color: var(--mcb-gray-400);
}

.mcb-header-account__value,
.mcb-header-cart__value {
    font-family: var(--mcb-font-body);
    font-size: 13px;
    font-weight: 600;
}

.mcb-header-cart {
    background: var(--mcb-graphite);
    color: var(--mcb-white);
}

.mcb-header-cart:hover {
    background: var(--mcb-graphite-4);
}

.mcb-header-cart__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* ps_shoppingcart.tpl (surcharge) imbrique le bouton dans le balisage historique du thème
   (#_desktop_cart > .blockcart > .tvheader-cart-wrapper > .tvheader-cart-btn-wrapper > a) :
   on neutralise ces conteneurs plutôt que de les supprimer, pour ne pas toucher au JS/dropdown
   B2B existant (devis, aperçu panier) qui s'appuie dessus. */
#_desktop_cart,
#_desktop_cart .blockcart,
#_desktop_cart .tvheader-cart-wrapper,
#_desktop_cart .tvheader-cart-btn-wrapper {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
}

#_desktop_cart .tvcart-icon-text-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------- Barre de catégories ---------- */

.mcb-category-bar-wrapper {
    border-top: 1px solid var(--mcb-border-light-3);
    background: var(--mcb-white);
}

.mcb-category-bar {
    max-width: var(--mcb-content-max-width);
    padding: 0 var(--mcb-content-padding);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    /* Le CSS natif du module (modules/tvcmsmegamenu/views/css/front.css, pas une surcharge de
       thème) met text-align:center sur .container_tv_megamenu, un ancêtre de cette barre : ça se
       propage par héritage jusque dans le panneau (titre, libellés...). On neutralise ici, au
       plus haut niveau qu'on contrôle, pour ne pas avoir à le répéter sur chaque classe enfant. */
    text-align: left;
}

.mcb-category-bar__item {
    /* Pas de position:relative ici : .mcb-mega-panel (absolute, left:0/right:0) doit se positionner
       par rapport à .mcb-category-bar (pleine largeur), pas par rapport à cet item (trop étroit). */
    position: static;
}

.mcb-category-bar__item:first-child .mcb-category-bar__link {
    padding-left: 0;
}

.mcb-category-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--mcb-font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mcb-graphite-4);
    text-decoration: none;
    cursor: pointer;
}

.mcb-category-bar__chevron {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

.mcb-category-bar__item.is-open .mcb-category-bar__link {
    border-bottom-color: var(--mcb-orange);
    color: var(--mcb-graphite);
}

.mcb-category-bar__item--cta {
    margin-left: auto;
}

/* ---------- Panneau contextuel ---------- */

.mcb-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--mcb-border-light-3);
    background: var(--mcb-white);
    box-shadow: var(--mcb-shadow-megamenu);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 36px;
    padding: 26px 28px 30px;
    z-index: 210;
}

.mcb-mega-panel__title {
    font-family: var(--mcb-font-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mcb-orange);
    margin-bottom: 16px;
}

.mcb-mega-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 28px;
}

/* Lignes du panneau (une par sous-catégorie de niveau 2 ayant des enfants) : libellé de groupe à
   gauche, grille de ses enfants (niveau 3, avec leurs propres enfants niveau 4 en petit gris) à
   droite. Voir mega-panel-leaves.tpl. */
.mcb-mega-panel__rows-wrap {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--mcb-border-light-3);
}

.mcb-mega-panel__row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px 24px;
    padding: 13px 0;
    border-bottom: 1px solid var(--mcb-border-light-3);
    align-items: start;
}

.mcb-mega-panel__row-label {
    font-family: var(--mcb-font-heading);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--mcb-graphite);
    text-decoration: none;
}

.mcb-mega-panel__row-label:hover {
    color: var(--mcb-orange);
}

.mcb-mega-panel__row-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px 24px;
    min-width: 0;
}

.mcb-mega-panel__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mcb-mega-panel__item-label {
    font-family: var(--mcb-font-body);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--mcb-graphite-4);
    text-decoration: none;
}

.mcb-mega-panel__item-label:hover {
    color: var(--mcb-orange);
}

.mcb-mega-panel__item-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
}

.mcb-mega-panel__item-sub {
    font-family: var(--mcb-font-body);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--mcb-gray-500);
    text-decoration: none;
}

.mcb-mega-panel__item-sub:hover {
    color: var(--mcb-orange);
}

/* Dernière ligne : sous-catégories de niveau 2 sans enfant (ex. Fixation seule pour
   Consommables), en liens gras au même style que les libellés de groupe. */
.mcb-mega-panel__leaves {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mcb-border-light-3);
}

.mcb-mega-panel__leaf {
    font-family: var(--mcb-font-heading);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--mcb-graphite);
    text-decoration: none;
}

.mcb-mega-panel__leaf:hover {
    color: var(--mcb-orange);
}

.mcb-mega-panel__sublink {
    font-family: var(--mcb-font-body);
    font-size: 13.5px;
    color: var(--mcb-graphite-4);
    text-decoration: none;
}

.mcb-mega-panel__sublink:hover {
    color: var(--mcb-orange);
}

.mcb-mega-panel__info {
    background: var(--mcb-bg-alt);
    border: 1px solid var(--mcb-border-light-2);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.mcb-mega-panel__info-label {
    font-family: var(--mcb-font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mcb-gray-500);
}

.mcb-mega-panel__info-name {
    font-family: var(--mcb-font-heading);
    font-size: 16px;
    font-weight: 800;
    color: var(--mcb-graphite);
    margin-bottom: 8px;
}

.mcb-mega-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 18px;
    background: var(--mcb-graphite);
    color: var(--mcb-white);
    font-family: var(--mcb-font-heading);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.mcb-mega-panel__cta:hover {
    background: var(--mcb-orange);
}

/* « L'entreprise » : simple dropdown étroit (pas de panneau pleine largeur façon méga-menu — pas
   de catégorie produit derrière, juste 3 liens). Positionné par rapport à cet item précis, pas à
   .mcb-category-bar entière (d'où position:relative ici, contrairement aux autres items). */
.mcb-category-bar__item--cta {
    position: relative;
}

.mcb-simple-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 240px;
    margin-top: -1px;
    background: var(--mcb-white);
    border: 1px solid var(--mcb-border-light-3);
    box-shadow: var(--mcb-shadow-megamenu);
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    z-index: 210;
}

.mcb-simple-dropdown__link {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-family: var(--mcb-font-body);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--mcb-graphite-4);
    white-space: nowrap;
    text-decoration: none;
}

.mcb-simple-dropdown__link:hover {
    background: var(--mcb-bg-alt);
    color: var(--mcb-orange);
}

/* =========================================================================
   Bascule desktop / mobile — seuil 1024px, en CSS pur.
   header.tpl rend désormais TOUJOURS les deux gabarits avec leurs données réelles
   (voir header.tpl) : le choix d'affichage revient entièrement à ces media queries,
   qui ont donc toujours du contenu réel des deux côtés (plus de zone morte liée à la
   détection d'appareil par User-Agent).
   ========================================================================= */

@media (max-width: 1023.98px) {
    .tvcmsdesktop-top-header-wrapper {
        display: none;
    }
}

@media (min-width: 1024px) {
    .mcb-mobile-header {
        display: none;
    }
}

/* ---------- Header mobile (mobile-header-1) ---------- */

.mcb-mobile-header {
    background: var(--mcb-white);
    border-bottom: 1px solid var(--mcb-border-light);
}

.mcb-mobile-header__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
}

.mcb-mobile-header__burger {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcb-white);
    border: 1px solid var(--mcb-border-light);
    color: var(--mcb-graphite);
    cursor: pointer;
    padding: 0;
}

.mcb-mobile-header__burger-icon--close {
    display: none;
}

.mcb-mobile-header__burger[aria-expanded="true"] .mcb-mobile-header__burger-icon--open {
    display: none;
}

.mcb-mobile-header__burger[aria-expanded="true"] .mcb-mobile-header__burger-icon--close {
    display: block;
}

.mcb-mobile-header__logo {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.mcb-mobile-header__logo img {
    height: 34px;
    width: auto;
}

.mcb-mobile-header__actions {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcb-mobile-header__icon-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mcb-border-light);
    color: var(--mcb-graphite);
    text-decoration: none;
}

/* Le nœud #_desktop_cart_manage (contenu réel du panier) est déplacé ici en JS ; on neutralise
   son habillage desktop (bouton large, libellés) pour ne garder que l'icône dans ce bouton 44px. */
.mcb-mobile-header__icon-btn--cart {
    padding: 0;
    overflow: hidden;
}

.mcb-mobile-header__icon-btn--cart .mcb-header-cart-slot,
.mcb-mobile-header__icon-btn--cart #_desktop_cart,
.mcb-mobile-header__icon-btn--cart .blockcart,
.mcb-mobile-header__icon-btn--cart .tvheader-cart-wrapper,
.mcb-mobile-header__icon-btn--cart .tvheader-cart-btn-wrapper,
.mcb-mobile-header__icon-btn--cart .mcb-header-cart {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    padding: 0;
    border: 0;
}

.mcb-mobile-header__icon-btn--cart .mcb-header-cart__lines,
.mcb-mobile-header__icon-btn--cart .cart-products-count {
    display: none;
}

.mcb-mobile-header__icon-btn--cart .mcb-header-cart__icon {
    width: 20px;
    height: 20px;
}

.mcb-mobile-header__search {
    padding: 0 16px 12px;
}

.mcb-mobile-header__search .mcb-header-search__form {
    height: 46px;
}

/* 16px minimum : évite le zoom automatique de Safari iOS au focus d'un champ texte. */
.mcb-mobile-header__search .mcb-header-search__input {
    font-size: 16px;
}

/* ---------- Tiroir (accordéon) ---------- */

.mcb-mobile-drawer {
    border-top: 1px solid var(--mcb-border-light);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    background: var(--mcb-white);
}

.mcb-mobile-drawer__guest-ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
}

.mcb-mobile-drawer__guest-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    font-family: var(--mcb-font-heading);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--mcb-border-light);
    color: var(--mcb-graphite);
}

.mcb-mobile-drawer__guest-btn--primary {
    background: var(--mcb-graphite);
    color: var(--mcb-white);
    border-color: var(--mcb-graphite);
}

/* Barre de catégories déplacée en JS dans le tiroir (mcb-header.js) : la même structure
   (.mcb-category-bar, .mcb-mega-panel...) passe d'un survol/dropdown desktop à un accordéon
   plein écran, sans dupliquer le rendu du hook displayMegamenu. */
.mcb-mobile-drawer .mcb-category-bar-wrapper {
    border-top: 0;
}

.mcb-mobile-drawer .mcb-category-bar {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    padding: 0;
}

.mcb-mobile-drawer .mcb-category-bar__item--cta {
    border-top: 1px solid var(--mcb-border-light-3);
    margin-left: 0;
    position: static;
}

.mcb-mobile-drawer .mcb-category-bar__item {
    border-bottom: 1px solid var(--mcb-border-light-3);
}

/* Dropdown « L'entreprise » en accordéon : plus de flottant positionné, liste empilée comme les
   autres sections (mêmes cibles tactiles >= 44px). */
.mcb-mobile-drawer .mcb-simple-dropdown {
    position: static;
    box-shadow: none;
    border: 0;
    min-width: 0;
    background: var(--mcb-bg-alt);
    padding: 4px 0 10px;
}

.mcb-mobile-drawer .mcb-simple-dropdown__link {
    min-height: 44px;
    padding: 0 16px;
    font-size: 14.5px;
}

.mcb-mobile-drawer .mcb-simple-dropdown__link:hover {
    background: transparent;
}

.mcb-mobile-drawer .mcb-category-bar__link {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    justify-content: space-between;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 0;
}

/* .mcb-category-bar__item:first-child .mcb-category-bar__link (desktop, plus haut dans ce
   fichier) met padding-left:0 pour aligner "Ensilage" au bord du conteneur dans la barre
   horizontale — mais ce HTML est réutilisé tel quel dans le tiroir mobile (relocalisé en JS
   par mcb-header.js), où ce reset n'a pas lieu d'être : "Ensilage" se retrouvait collé au
   bord alors que tous les autres items du tiroir ont leur retrait normal. */
.mcb-mobile-drawer .mcb-category-bar__item:first-child .mcb-category-bar__link {
    padding-left: 16px;
}

.mcb-mobile-drawer .mcb-category-bar__chevron {
    transition: transform 0.15s ease;
}

.mcb-mobile-drawer .mcb-category-bar__item.is-open .mcb-category-bar__chevron {
    transform: rotate(180deg);
}

/* Panneau en accordéon : plus d'overlay absolu, le contenu pousse la suite vers le bas. */
.mcb-mobile-drawer .mcb-mega-panel {
    position: static;
    box-shadow: none;
    border-top: 0;
    background: var(--mcb-bg-alt);
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    padding: 4px 16px 14px;
    gap: 0;
}

.mcb-mobile-drawer .mcb-mega-panel__info {
    display: none;
}

.mcb-mobile-drawer .mcb-mega-panel__title {
    font-size: 12.5px;
    color: var(--mcb-orange);
    margin-bottom: 10px;
}

.mcb-mobile-drawer .mcb-mega-panel__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.mcb-mobile-drawer .mcb-mega-panel__sublink {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14.5px;
}

/* Lignes groupées (mega-panel-leaves.tpl) en accordéon : une colonne, empilé, cibles tactiles
   >= 44px. Le libellé de groupe (ex. « Silots liants ») sert d'en-tête au-dessus de ses enfants. */
.mcb-mobile-drawer .mcb-mega-panel__rows-wrap {
    border-top: 0;
}

.mcb-mobile-drawer .mcb-mega-panel__row {
    display: block;
    padding: 10px 0;
}

.mcb-mobile-drawer .mcb-mega-panel__row-label {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mcb-orange);
}

.mcb-mobile-drawer .mcb-mega-panel__row-items {
    display: block;
}

.mcb-mobile-drawer .mcb-mega-panel__item {
    gap: 0;
}

.mcb-mobile-drawer .mcb-mega-panel__item-label {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14.5px;
}

.mcb-mobile-drawer .mcb-mega-panel__item-subs {
    flex-direction: column;
    gap: 0;
    padding-left: 14px;
    margin-bottom: 6px;
    border-left: 1px solid var(--mcb-border-light);
}

.mcb-mobile-drawer .mcb-mega-panel__item-sub {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 14px;
}

.mcb-mobile-drawer .mcb-mega-panel__leaves {
    display: block;
    padding: 6px 0 10px;
}

.mcb-mobile-drawer .mcb-mega-panel__leaf {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14.5px;
}