/* ==========================================================================
   Arkana Menu 2026 — composant de navigation (thème default)
   Implémenté d'après le « Manuel des variables CSS » + « Guide développeur PHP ».
   HTML produit par render_arkana_menu() + navigation.php ; comportements par
   l'IIFE menu de public/assets/js/app.js.

   Les DÉFAUTS des variables vivent dans @layer (priorité basse) : les tokens
   configurés par l'admin (#theme-vars, :root non-layered) les surchargent.
   ========================================================================== */

@layer arkana-menu-defaults {
    :root {
        /* Dimensions */
        --menu-height-desktop: 84px;
        --menu-height-mobile: 72px;
        --menu-height: var(--menu-height-desktop);
        --menu-padding-x: 24px;
        --menu-padding-y: 0;
        --menu-gap: 24px;

        /* Structure */
        --menu-z-index: 1000;
        --menu-border-width: 1px;
        --menu-shadow: none;

        /* Logo */
        --menu-logo-height: 58px;
        --menu-logo-max-width: 220px;
        --logo-center-gap: 24px;
        --logo-center-row-gap: 4px;
        --logo-center-actions-gap: 20px;
        --logo-center-actions-width: 0px;
        --logo-center-logo-width: 0px;
        --logo-center-rows: 1;

        /* Navigation */
        --menu-row-gap: 4px;
        --menu-list-gap: 4px;
        --menu-item-height: 100%;
        --menu-item-padding-x: 14px;
        --menu-item-radius: 6px;
        --menu-item-font-size: 16px;
        --menu-item-font-weight: 400;
        --menu-item-text-transform: none;

        /* Sous-menus */
        --submenu-offset: 8px;
        --submenu-min-width: 260px;
        --submenu-padding: 8px;
        --submenu-gap: 2px;
        --submenu-border-width: 1px;
        --submenu-radius: 8px;
        --submenu-shadow: 0 14px 35px rgba(0, 0, 0, .14);
        --submenu-item-padding: 11px 14px;

        /* Actions */
        --menu-right-gap: 12px;
        --menu-action-size: 42px;
        --menu-action-radius: 50%;

        /* Burger */
        --burger-size: 60px;
        --burger-color: #1f1f1f;
        --burger-stroke-width: 3;
        --burger-transition-duration: 400ms;

        /* Mobile */
        --slide-menu-width: 380px;
        --slide-menu-padding: 20px;
        --slide-menu-transition: 240ms;
        --mobile-item-font-size: 17px;
        --mobile-item-padding: 15px 4px;

        /* Overlay */
        --menu-mask-background: rgba(0, 0, 0, .7);

        /* Accessibilité */
        --menu-focus-color: #005fcc;
        --menu-focus-width: 3px;
        --menu-focus-offset: 3px;

        /* Mégamenu */
        --mega-menu-padding: 24px;
        --mega-menu-columns: 4;
        --mega-menu-gap: 18px;
        --mega-menu-border-width: 1px;
        --mega-menu-radius: 0 0 12px 12px;
        --mega-menu-shadow: 0 18px 45px rgba(0, 0, 0, .16);
        --mega-menu-indent: 18px;
        --mega-menu-link-padding-y: 9px;
        --mega-menu-link-padding-x: 12px;
        --mega-menu-column-gap: 32px;
        --mega-menu-max-width: 1200px;
        --mega-menu-screen-margin: 16px;

        /* Couleurs */
        --menu-background: #ffffff;
        --menu-color: #1f1f1f;
        --menu-border-color: #e5e5e5;
        --menu-item-color: #1f1f1f;
        --menu-item-color-hover: #000000;
        --menu-item-background: transparent;
        --menu-item-background-hover: #f2f2f2;
        --submenu-background: #ffffff;
        --submenu-border-color: #dddddd;
        --submenu-item-background-hover: #f2f2f2;
        --menu-action-border-color: #dddddd;
        --menu-action-background: transparent;
        --menu-action-background-hover: #f2f2f2;
        --slide-menu-background: #ffffff;
        /* Panneau mobile ouvert : doit passer AU-DESSUS des widgets tiers de la page
           (contrôles Leaflet ~1000, bulle chatbot, bouton notifications…). La barre
           garde --menu-z-index ; seul le panneau/masque monte. */
        --slide-menu-z: 99999;
        --slide-menu-item-bg: #f4f5f7; /* fond « carte » des items du panneau mobile */
        --slide-menu-item-active-bg: #e6e8ec; /* carte de l'item actif / au survol */
        --slide-menu-item-gap: 8px;
        --mega-menu-background: #ffffff;
        --mega-menu-border-color: #dddddd;
    }
}

/* La classe .menu-breakpoint (posée par JS quand le menu ne tient plus) bascule
   sur la hauteur mobile. */
#main-menu.menu-breakpoint { --menu-height: var(--menu-height-mobile); }

/* ------------------------------------------------------------------ Barre --- */
#main-menu {
    position: sticky;
    top: 0;
    z-index: var(--menu-z-index);

    display: flex;
    align-items: center;
    gap: var(--menu-gap);

    height: var(--menu-height);
    padding: var(--menu-padding-y) var(--menu-padding-x);

    background: var(--menu-background);
    color: var(--menu-color);
    border-bottom: var(--menu-border-width) solid var(--menu-border-color);
    box-shadow: var(--menu-shadow);
}
#main-menu.is-resizing,
#main-menu.is-resizing * { transition: none !important; }

/* ------------------------------------------------------------------- Logo --- */
.menu-left { flex: 0 0 auto; display: flex; align-items: center; }
.menu-logo { display: inline-flex; align-items: center; }
.menu-logo img {
    height: auto;
    max-height: var(--menu-logo-height);
    max-width: var(--menu-logo-max-width);
    width: auto;
    object-fit: contain;
}

/* ------------------------------------------------------------ Navigation --- */
#slide-menu {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--menu-gap);
}
.menu-level-0 {
    display: flex;
    align-items: center;
    gap: var(--menu-list-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-level-0 > li { position: relative; display: flex; align-items: center; }

/* Lien + bouton d'ouverture regroupés */
.menu-item-container { display: inline-flex; align-items: center; }

.menu-level-0 a,
.menu-level-0 .menu-item-container > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px var(--menu-item-padding-x);
    border-radius: var(--menu-item-radius);

    color: var(--menu-item-color);
    background: var(--menu-item-background);
    text-decoration: none;

    font-size: var(--menu-item-font-size);
    font-weight: var(--menu-item-font-weight);
    text-transform: var(--menu-item-text-transform);
    line-height: 1.2;
    white-space: nowrap;
}
.menu-level-0 > li > a:hover,
.menu-level-0 > li > .menu-item-container > a:hover,
.menu-level-0 > li > a[aria-current="page"],
.menu-level-0 > li > .menu-item-container > a[aria-current="page"] {
    color: var(--menu-item-color-hover);
    background: var(--menu-item-background-hover);
}

/* Bouton flèche d'ouverture du sous-menu (séparé du lien) */
.submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 2px; /* desktop : espacement affiné plus bas (#main-menu:not(.menu-breakpoint)) */
    padding: 0;

    border: 0;
    border-radius: var(--menu-item-radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.submenu-toggle:hover { background: var(--menu-item-background-hover); }
/* Desktop : un peu plus d'air entre le libellé et le chevron (mobile inchangé :
   le conteneur y est en space-between, le chevron déjà collé à droite). */
#main-menu:not(.menu-breakpoint) .submenu-toggle { margin-left: 6px; }
.submenu-toggle-icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s;
}
.sub-menu.is-open > .menu-item-container > .submenu-toggle .submenu-toggle-icon { transform: translateY(1px) rotate(-135deg); }

/* Parent à sous-menu (1er niveau) : le libellé (lien) et le chevron (bouton
   disclosure) forment UN SEUL bloc visuel. Le fond survol/actif/ouvert porte sur
   TOUT le conteneur → le chevron n'apparaît plus « détaché ». La sémantique reste
   « lien + bouton » (RGAA/WCAG : navigation + révélation dissociées, chacune au clavier). */
.menu-level-0 > li.sub-menu > .menu-item-container {
    border-radius: var(--menu-item-radius);
    background: var(--menu-item-background);
    transition: background .15s ease, color .15s ease;
}
.menu-level-0 > li.sub-menu > .menu-item-container:hover,
.menu-level-0 > li.sub-menu.is-open > .menu-item-container,
.menu-level-0 > li.sub-menu > .menu-item-container:has(> a[aria-current="page"]) {
    background: var(--menu-item-background-hover);
    color: var(--menu-item-color-hover);
}
.menu-level-0 > li.sub-menu > .menu-item-container > a,
.menu-level-0 > li.sub-menu > .menu-item-container > a:hover,
.menu-level-0 > li.sub-menu > .menu-item-container > a[aria-current="page"] {
    background: transparent;
    color: inherit;
}
.menu-level-0 > li.sub-menu > .menu-item-container > a { padding-right: 4px; }
.menu-level-0 > li.sub-menu > .menu-item-container > .submenu-toggle {
    margin-left: 0;
    padding: 0 6px 0 2px;
    width: auto;
}
.menu-level-0 > li.sub-menu > .menu-item-container > .submenu-toggle:hover { background: transparent; }

/* Séparateur */
.menu-separator { list-style: none; }
.menu-separator hr { margin: 0 6px; height: 60%; border: 0; border-left: 1px solid var(--menu-border-color); }

/* --------------------------------------------------- Sous-menu (desktop) --- */
.menu-level-0 .menu-level-1,
.menu-level-0 ul[class^="menu-level-"] {
    list-style: none;
    margin: 0;
    padding: var(--submenu-padding);
}
/* Items pleine hauteur de barre (desktop) → les panneaux déroulants (sous-menu
   ET méga) s'ouvrent PILE sous la bordure basse de la barre, sans écart flottant
   lié au centrage vertical des items. Le contenu des items reste centré (flex). */
#main-menu:not(.menu-breakpoint) .menu-left,
#main-menu:not(.menu-breakpoint) .menu-right,
#main-menu:not(.menu-breakpoint) .menu-center,
#main-menu:not(.menu-breakpoint) .navbar-zone,
#main-menu:not(.menu-breakpoint) .menu-level-0,
#main-menu:not(.menu-breakpoint) .menu-level-0 > li { align-self: stretch; }

.sub-menu > ul[class^="menu-level-"] {
    position: absolute;
    top: calc(100% + var(--menu-border-width));
    left: 0;
    z-index: 5;

    min-width: var(--submenu-min-width);
    display: flex;
    flex-direction: column;
    gap: var(--submenu-gap);

    background: var(--submenu-background);
    border: var(--submenu-border-width) solid var(--submenu-border-color);
    border-radius: var(--submenu-radius);
    box-shadow: var(--submenu-shadow);
}
.sub-menu > ul[hidden] { display: none; }
.sub-menu.is-open > ul[class^="menu-level-"] { display: flex; }
/* Le mode « survol » (.nav-submenu-hover) est piloté en JS (app.js) via .is-open,
   pour garder aria-expanded + [hidden] synchronisés (accessibilité). */

.sub-menu ul a,
.sub-menu ul .menu-item-container > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--submenu-item-padding);
    border-radius: 6px;
    color: var(--submenu-color, #1f1f1f);
    text-decoration: none;
    white-space: nowrap;
}
.sub-menu ul a:hover,
.sub-menu ul a[aria-current="page"] { background: var(--submenu-item-background-hover); }
/* Texte du mégamenu : peut différer du sous-menu, sinon reprend sa couleur. */
.sub-menu-mega ul a { color: var(--mega-menu-color, var(--submenu-color, #1f1f1f)); }

/* Sous-sous-menu (niveau ≥2) : flyout à droite sur desktop */
.sub-menu ul .sub-menu > ul[class^="menu-level-"] {
    top: calc(-1 * var(--submenu-padding));
    left: 100%;
    margin-left: var(--submenu-offset);
}
.sub-menu ul .sub-menu > .menu-item-container { width: 100%; justify-content: space-between; }

/* Bouton « Retour » : masqué en desktop (drill-down mobile — phase ultérieure).
   Spécificité RENFORCÉE : `.menu-left li { display:inline-flex }` (0,0,1,1) écrasait
   sinon `.submenu-return` (0,0,1,0) → le bouton réapparaissait en desktop et
   décalait le haut du panneau. `.sub-menu .submenu-return` (0,0,2,0) reprend la main. */
.sub-menu .submenu-return { display: none; }

/* --------------------------------------------------------------- Mégamenu --- */
.sub-menu-mega > ul[class^="menu-level-"] {
    position: absolute;
    top: calc(100% + var(--menu-border-width));
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;

    /* Se dimensionne au CONTENU (petit menu = petit panneau), plafonné à la
       largeur max. Colonnes par largeur (nombre auto) → pas de colonnes vides
       forcées quand il y a peu d'éléments. */
    width: max-content;
    max-width: min(var(--mega-menu-max-width), calc(100vw - 2 * var(--mega-menu-screen-margin)));

    column-width: var(--mega-menu-col-width, 15rem);
    column-gap: var(--mega-menu-column-gap);

    padding: var(--mega-menu-padding);
    background: var(--mega-menu-background);
    border: var(--mega-menu-border-width) solid var(--mega-menu-border-color);
    border-radius: var(--mega-menu-radius);
    box-shadow: var(--mega-menu-shadow);
}
.sub-menu-mega > ul[hidden] { display: none; }
.sub-menu-mega.is-open > ul[class^="menu-level-"] { display: block; }

/* Dans le mégamenu, tous les niveaux internes sont dépliés (pas de dropdown). */
.sub-menu-mega ul .sub-menu > ul[class^="menu-level-"] {
    position: static;
    display: block !important;
    transform: none;
    width: auto;
    min-width: 0;
    columns: auto;
    padding: 0 0 0 var(--mega-menu-indent);
    border: 0;
    box-shadow: none;
    background: transparent;
}
.sub-menu-mega ul li { break-inside: avoid; }
.sub-menu-mega ul .menu-item-container { display: block; }
.sub-menu-mega ul .submenu-toggle { display: none; } /* pas d'interaction dans le méga */
.sub-menu-mega ul a,
.sub-menu-mega ul .menu-item-container > a {
    padding: var(--mega-menu-link-padding-y) var(--mega-menu-link-padding-x);
}
/* Titres de 1er niveau du méga = en gras */
.sub-menu-mega > ul > li > .menu-item-container > a,
.sub-menu-mega > ul > li > a { font-weight: 600; }

/* Contrôle des colonnes du mégamenu (piloté par css_class de l'item). */
.sub-menu-mega ul .break-before { break-before: column; }
.sub-menu-mega ul .break-after  { break-after: column; }
.sub-menu-mega ul .keep-together { break-inside: avoid; }
/* Jamais de saut AVANT le 1er élément réel (le .submenu-return masqué est le
   1er <li>) → évite une colonne vide en tête quand il porte break-before. */
.sub-menu-mega > ul > li:first-child,
.sub-menu-mega > ul > .submenu-return + li { break-before: avoid; }

/* Bloc « en surbrillance » (façon colonne « Accès rapides » de nimes.fr) : un groupe
   titré sur fond teinté. Token `bloc-surbrillance` posé sur l'item via le builder
   (css_class) — s'applique aussi bien dans un MÉGAMENU que dans un SOUS-MENU classique
   (la case « Bloc en surbrillance » du builder s'affiche pour les deux). Le multi-colonnes
   CSS ne permet pas de peindre « une colonne » (rendu, pas élément) — on peint donc le
   BLOC, et `break-inside: avoid` le garde entier dans une colonne (mégamenu). Couleur
   pilotée par le thème (--mega-menu-highlight-bg). */
.menu-level-0 .bloc-surbrillance {
    background: var(--mega-menu-highlight-bg, #faf6ee);
    border-radius: 10px;
    padding: 14px 16px;
    break-inside: avoid;
}

/* --------------------------------------------------------------- Actions --- */
.menu-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--menu-right-gap);
}
/* Les hooks panier (shops_nav_icon) et langues (nav_language_switcher) rendent
   des <li class="nav-item"> hérités de la navbar Bootstrap. Dans .menu-right (un
   <div>), ces <li> orphelins afficheraient leur PUCE de liste (•). On les rend
   en flex sans marqueur. */
.menu-right ul,
.menu-left ul { margin: 0; padding: 0; list-style: none; }
.menu-right li,
.menu-left li { list-style: none; display: inline-flex; align-items: center; width: 100%; }
.menu-right li::marker { content: none; }
.menu-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--menu-action-size);
    height: var(--menu-action-size);

    color: var(--menu-color);
    /* Boutons-icônes (compte / favoris / loupe mobile) SANS encadré : juste l'icône. */
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--menu-action-radius);
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
.menu-icon-btn:hover { /* pas de fond au survol */ }

/* Bouton-icône AVEC libellé (compte « Mon compte », téléphone « icône + numéro ») :
   largeur auto + gap, au lieu du carré fixe icône-seule. */
.menu-icon-btn.menu-has-label { width: auto; gap: 8px; padding: 0 12px; }
.menu-account-label,
.menu-phone-label { font-size: var(--menu-item-font-size, .95rem); white-space: nowrap; }

/* Icônes SVG maison de la nav (compte, favoris, panier, burger) : `fill:currentColor`
   → doivent hériter de la couleur du menu. Les <button> (#burger, panier) NE
   propagent PAS `color` par défaut (couleur UA noire / btn-link bleue) → on force
   l'héritage. Les <a> héritent déjà. */
.menu-svg-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
#burger, .shops-cart-toggle { color: inherit; }
.shops-cart-toggle:hover, .shops-cart-toggle:focus { color: inherit; }
/* Mobile (media query ET repli .menu-breakpoint) : le téléphone est TOUJOURS en
   icône seule, quel que soit le réglage « Affichage » du composeur (pas de place
   pour le numéro dans la barre étroite). */
@media (max-width: 991.98px) { .menu-phone-label { display: none; } }
#main-menu.menu-breakpoint .menu-phone-label { display: none; }

/* Barre de recherche : plus fine (indépendante de la taille des icônes) + pilule. */
.menu-search { display: flex; align-items: center; }
.menu-search input {
    height: var(--menu-search-height, 38px);
    padding: 0 16px;
    border: 1px solid var(--menu-action-border-color);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: #fff;
    min-width: 190px;
    font-size: .9rem;
}
.menu-search button {
    height: var(--menu-search-height, 38px);
    width: 44px;
    border: 1px solid var(--menu-action-border-color);
    border-radius: 0 999px 999px 0;
    background: var(--menu-action-background);
    cursor: pointer;
}

.menu-action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--menu-item-radius);
    background: var(--menu-item-background-hover);
    color: var(--slide-menu-color, #1f1f1f);
    text-decoration: none;
    font-weight: 600;
}

/* ---------------------------------------------------------------- Burger --- */
#burger {
    display: none; /* visible seulement au breakpoint */
    align-items: center;
    justify-content: center;
    width: var(--menu-action-size);
    height: var(--menu-action-size);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.burger-svg { width: var(--burger-size); height: var(--burger-size); }
.burger-line {
    stroke: var(--burger-color);
    stroke-width: var(--burger-stroke-width);
    stroke-linecap: round;
    transform-origin: 50% 50%;
    transition: transform var(--burger-transition-duration), opacity var(--burger-transition-duration);
}
#main-menu.menu-open .burger-top { transform: translateY(16px) rotate(45deg); }
#main-menu.menu-open .burger-mid { opacity: 0; }
#main-menu.menu-open .burger-bot { transform: translateY(-16px) rotate(-45deg); }

/* -------------------------------------------------------------- Overlay ---- */
#mask {
    position: fixed;
    inset: 0;
    z-index: calc(var(--slide-menu-z, 99999) - 1); /* juste sous le panneau, au-dessus de la page */
    background: var(--menu-mask-background);
    opacity: 0;
    transition: opacity var(--slide-menu-transition);
}
#mask[hidden] { display: none; }
#main-menu.menu-open ~ #mask,
#main-menu.menu-open #mask { opacity: 1; }

/* --------------------------------------------------------- Accessibilité --- */
#main-menu a:focus-visible,
#main-menu button:focus-visible {
    outline: var(--menu-focus-width) solid var(--menu-focus-color);
    outline-offset: var(--menu-focus-offset);
}

/* ---------------------------------- Utilitaires desktop/mobile ------------- */
.only-mobile { display: none !important; }
.only-desktop { display: inline-flex; }

/* ================================================================= MOBILE ===
   Appliqué par media query (sans JS) ET par la classe .menu-breakpoint (JS de
   mesure, phase 2, pour collapser plus tôt si le menu ne tient pas).
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Sur vrai mobile/tablette (<992px), la barre prend la « Hauteur (mobile) ».
       (.menu-breakpoint ne s'active QUE ≥992px en cas de débordement — cf. app.js ;
       sans cette ligne la barre resterait à la hauteur desktop.) */
    #main-menu { gap: 12px; --menu-height: var(--menu-height-mobile); }

    .only-mobile { display: inline-flex !important; }
    .only-desktop { display: none !important; }
    #burger { display: inline-flex; }
    .menu-search.only-desktop { display: none; }

    /* #slide-menu = panneau coulissant. Côté d'ouverture piloté par les vars
       --slide-menu-right/left/hidden/shadow (défaut = depuis la droite). */
    #slide-menu {
        position: fixed;
        top: 0;
        right: var(--slide-menu-right, 0);
        left: var(--slide-menu-left, auto);
        bottom: 0;
        z-index: var(--slide-menu-z, 99999); /* au-dessus des widgets tiers de la page */

        width: min(var(--slide-menu-width), 100vw);
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 0;       /* le header et chaque niveau gèrent leur propre padding */
        overflow: hidden; /* le panneau ne scrolle pas : c'est le niveau courant qui scrolle */

        background: var(--slide-menu-background);
        /* Ombre portée UNIQUEMENT panneau ouvert : fermé, le panneau est hors
           écran mais son ombre débordait sur le bord (visible côté ouverture). */
        box-shadow: none;

        transform: translateX(var(--slide-menu-hidden, 100%));
        transition: transform var(--slide-menu-transition) ease;
    }
    #main-menu.menu-open #slide-menu {
        transform: translateX(0);
        box-shadow: var(--slide-menu-shadow, -12px 0 40px rgba(0, 0, 0, .18));
    }

    /* Pas de logo dans le panneau qui s'ouvre (il reste l'affaire de la barre). */
    #slide-menu > .menu-logo { display: none; }

    /* Header du panneau : « retour » (gauche) + titre du niveau + « fermer » (droite).
       Sélecteur avec #slide-menu : bat la règle globale `.slide-head{display:none}`
       (qui vit plus bas dans le fichier) quel que soit l'ordre de source. */
    #slide-menu > .slide-head {
        display: flex; align-items: center; gap: 8px;
        flex: 0 0 auto;
        height: var(--slide-head-h, 54px);
        padding: 0 8px;
        border-bottom: 1px solid var(--menu-border-color);
        background: var(--slide-menu-background, #fff);
    }
    .slide-head__btn {
        width: 40px; height: 40px; flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 50%;
        background: var(--slide-menu-item-bg, #f4f5f7);
        color: var(--slide-menu-color, #1f1f1f);
        font-size: 17px; line-height: 1; cursor: pointer;
    }
    .slide-head__btn[hidden] { display: none; }
    .slide-head__title {
        flex: 1 1 auto; min-width: 0; text-align: center;
        font-weight: 700; font-size: .95rem;
        color: var(--slide-menu-color, #1f1f1f);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Niveau 0 = liste de base, scrollable sous le header. */
    #slide-menu > .menu-level-0 {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 12px 16px;
    }
    #slide-menu > .menu-mobile-actions {
        flex: 0 0 auto;
        padding-left: 16px; padding-right: 16px; padding-bottom: 16px;
    }
    #slide-menu .slide-see-all { display: block; }

    .menu-level-0 { flex-direction: column; align-items: stretch; gap: 0; }
    /* `position: static` INDISPENSABLE au drill-down : en desktop les <li> sont
       `relative` (ancrage des dropdowns), ce qui en ferait le bloc conteneur des
       panneaux de niveau → ils se réduiraient à la taille de la ligne. Ici, le
       niveau 1 se cale sur #slide-menu (fixed) et les niveaux ≥2 sur leur <ul>. */
    /* `display:block` sur TOUS les niveaux : #slide-menu porte la classe .menu-left,
       or `.menu-left li{display:inline-flex}` (l.408) s'applique à tous les <li> du
       panneau → sans ça les items des sous-niveaux s'affichent CÔTE À CÔTE. Même
       spécificité (0,1,1) : c'est l'ordre de source qui nous fait gagner ici. */
    .menu-level-0 li { position: static; display: block; }
    .menu-item-container { display: flex; justify-content: space-between; align-items: center; }
    .menu-level-0 a,
    .menu-level-0 .menu-item-container > a {
        display: flex;
        padding: var(--mobile-item-padding);
        font-size: var(--mobile-item-font-size);
        border-radius: 8px;
        white-space: normal;
        /* Panneau mobile = fond clair → texte lisible, indépendant de la barre. */
        color: var(--slide-menu-color, #1f1f1f);
    }
    .menu-item-container > a { flex: 1 1 auto; }
    /* Parent de sous-menu : son <a> est `color: inherit` (règle desktop, spéc. 0,3,2)
       → il hérite du blanc de la barre. On force la couleur du panneau clair sur le
       CONTENEUR (spéc. 0,3,1, source d'héritage) sinon le libellé est invisible. */
    .menu-level-0 > li.sub-menu > .menu-item-container { color: var(--slide-menu-color, #1f1f1f); }
    .submenu-toggle { width: 40px; height: 40px; flex: 0 0 auto; color: var(--slide-menu-color, #1f1f1f); }
    /* Les COULEURS D'ITEM réglées via la config (style inline color/fond, panneau
       « Apparence » du menu) sont CONSERVÉES sur mobile : un item « fond rose / texte
       blanc » s'affiche en pastille rose lisible, comme sur la barre. On ne force la
       couleur claire du panneau QUE sur les items SANS couleur configurée (règle 629). */

    /* Libellés longs : tous les liens du panneau mobile (1er niveau ET enfants de
       sous-menu) passent à la ligne. Deux règles desktop forçaient `nowrap` et
       l'emportaient sur le `normal` mobile (0,1,1) :
         - `.menu-level-0 > li > a`  (0,1,2)  → items de 1er niveau
         - `.sub-menu ul a`          (0,2,2)  → enfants de sous-menu (ex. l'annonce rose)
       On préfixe par #slide-menu pour repasser devant en spécificité. */
    #slide-menu .menu-level-0 > li > a,
    #slide-menu .menu-level-0 > li.sub-menu > .menu-item-container > a,
    #slide-menu .sub-menu ul a,
    #slide-menu .sub-menu ul .menu-item-container > a {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Items de 1er niveau en « cartes » : pastille claire arrondie + espacement.
       - lien simple  → le fond est sur le <a>
       - lien à sous-menu → le fond est sur le CONTENEUR (lien + chevron dans la même carte) */
    .menu-level-0 > li { margin-bottom: var(--slide-menu-item-gap, 8px); }
    .menu-level-0 > li > a,
    .menu-level-0 > li.sub-menu > .menu-item-container {
        background: var(--slide-menu-item-bg, #f4f5f7);
        border-radius: 12px;
    }
    .menu-level-0 > li > a { padding-left: 14px; }
    .menu-level-0 > li.sub-menu > .menu-item-container > a { padding-left: 14px; }
    /* Le chevron ne colle pas au bord droit de la carte. */
    .menu-level-0 > li.sub-menu > .menu-item-container { padding-right: 10px; }
    /* Les sous-items (accordéon) restent plats, sans carte. */
    .sub-menu ul .menu-level-1 > li > a,
    .sub-menu ul .menu-item-container > a { background: transparent; }
    /* Item actif / au survol : carte visible sur le panneau clair (indépendant de
       « Fond lien survol » qui, réglé sur blanc, ferait disparaître la carte).
       Mêmes sélecteurs que le desktop → l'emporte par ordre de source ici. */
    .menu-level-0 > li > a:hover,
    .menu-level-0 > li > a[aria-current="page"],
    .menu-level-0 > li.sub-menu > .menu-item-container:hover,
    .menu-level-0 > li.sub-menu.is-open > .menu-item-container,
    .menu-level-0 > li.sub-menu > .menu-item-container:has(> a[aria-current="page"]) {
        background: var(--slide-menu-item-active-bg, #e6e8ec);
        color: var(--slide-menu-color, #1f1f1f);
    }

    /* Sous-menus mobiles = DRILL-DOWN : chaque niveau est un panneau plein qui
       glisse depuis la DROITE par-dessus le niveau parent ; le bouton « retour »
       du header le renvoie vers la droite (niveau précédent). */
    .menu-level-0 li.sub-menu > ul[class^="menu-level-"] {
        margin: 0;
        columns: auto;
        border: 0;
        box-shadow: none;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--slide-menu-background, #fff);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .28s ease, visibility 0s .28s;
        display: block; /* neutralise [hidden] pour permettre l'animation */
        z-index: 1;
    }
    /* Niveau 1 (enfant direct du niveau 0) : sous le header, plein panneau. */
    .menu-level-0 > li.sub-menu > ul[class^="menu-level-"] {
        position: absolute; top: var(--slide-head-h, 54px); left: 0; right: 0; bottom: 0;
    }
    /* Niveaux ≥ 2 : remplissent leur panneau parent (déjà sous le header). */
    .menu-level-0 ul[class^="menu-level-"] li.sub-menu > ul[class^="menu-level-"] {
        position: absolute; inset: 0;
    }
    .menu-level-0 li.sub-menu.is-open > ul[class^="menu-level-"] {
        transform: translateX(0);
        visibility: visible;
        transition: transform .28s ease, visibility 0s 0s;
    }
    /* A11y : quand un volet enfant recouvre son niveau, les items du niveau parent
       sortent du flux (sinon Tab atteint des liens cachés DERRIÈRE le volet). Le
       volet enfant (is-open > ul) réaffirme visibility:visible juste au-dessus. */
    #slide-menu [class^="menu-level-"]:has(> li.sub-menu.is-open) > li { visibility: hidden; }
    #slide-menu li.sub-menu.is-open > ul[class^="menu-level-"] { visibility: visible; }

    /* ---- MÉGAMENU EN MOBILE = niveau de drill normal -----------------------
       Le méga est une mise en forme DESKTOP (panneau large centré + colonnes).
       Sur mobile il n'y a pas la place : on neutralise son layout pour qu'il se
       comporte comme n'importe quel niveau (volet plein, liste 1 colonne).
       Sans ça : `width:max-content` → le volet ne couvre pas la liste racine, et
       `column-width` → les items s'affichent côte à côte. */
    .menu-level-0 > li.sub-menu-mega > ul[class^="menu-level-"] {
        width: auto;
        max-width: none;
        column-width: auto;
        column-count: auto;
        column-gap: normal;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    /* Niveaux INTERNES du méga : le desktop les force dépliés en statique
       (`position:static; transform:none`) → ils redeviennent des volets qui
       glissent, comme partout ailleurs. */
    .menu-level-0 .sub-menu-mega ul li.sub-menu > ul[class^="menu-level-"] {
        position: absolute;
        inset: 0;
        width: auto;
        min-width: 0;
        columns: auto;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--slide-menu-background, #fff);
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .28s ease, visibility 0s .28s;
    }
    .menu-level-0 .sub-menu-mega ul li.sub-menu.is-open > ul[class^="menu-level-"] {
        transform: translateX(0);
        visibility: visible;
        transition: transform .28s ease, visibility 0s 0s;
    }
    /* Ligne = libellé + chevron (le desktop met le conteneur en `display:block`). */
    .menu-level-0 .sub-menu-mega ul .menu-item-container {
        display: flex; justify-content: space-between; align-items: center;
    }
    .sub-menu-mega ul .submenu-toggle { display: inline-flex; } /* le méga draille comme les autres */
    /* Lien « Voir tout {catégorie} » injecté en tête de chaque panneau (accès à la
       page parente, puisque toucher la ligne descend d'un niveau). */
    .slide-see-all a {
        display: block; padding: 10px 14px; margin-bottom: 8px;
        background: var(--slide-menu-item-bg, #f4f5f7); border-radius: 12px;
        font-weight: 600; color: var(--slide-menu-color, #1f1f1f); text-decoration: none;
    }

    .menu-separator hr { height: 1px; width: 100%; border-left: 0; border-top: 1px solid var(--menu-border-color); margin: 8px 0; }

    .menu-mobile-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--menu-border-color); }
    .menu-mobile-actions .menu-action-button { width: 100%; justify-content: center; }
}
.menu-mobile-actions { display: none; }
@media (max-width: 991.98px) { .menu-mobile-actions { display: block; } }

/* Header du panneau + lien « Voir tout » : injectés par app.js dans le DOM en
   permanence, mais réservés au PANNEAU (mobile, ou repli .menu-breakpoint).
   On les masque donc en desktop RÉEL uniquement — le préfixe #main-menu est
   nécessaire pour battre les règles d'affichage des <li> de sous-menu. */
@media (min-width: 992px) {
    /* Le header retour/fermer reste réservé au panneau mobile. */
    #main-menu:not(.menu-breakpoint) .slide-head { display: none; }
    #main-menu.menu-breakpoint .slide-head { display: flex; }
    #main-menu.menu-breakpoint .slide-see-all { display: block; }
    /* Motif A : le parent n'ouvre plus sa page directement → le lien « {nom} » (page du
       parent) apparaît en TÊTE du menu déroulant desktop, en évidence. */
    #main-menu:not(.menu-breakpoint) .slide-see-all a {
        display: block; padding: 8px 14px; margin: 0 0 4px;
        font-weight: 700; color: var(--submenu-color, #1f1f1f); text-decoration: none;
    }
    #main-menu:not(.menu-breakpoint) .slide-see-all a:hover,
    #main-menu:not(.menu-breakpoint) .slide-see-all a:focus-visible { text-decoration: underline; }
}

/* Collapse FORCÉ par JS à des largeurs desktop (le menu ne tient pas) :
   on reprend l'essentiel du basculement mobile. */
@media (min-width: 992px) {
    #main-menu.menu-breakpoint .only-desktop { display: none !important; }
    #main-menu.menu-breakpoint .only-mobile { display: inline-flex !important; }
    #main-menu.menu-breakpoint #burger { display: inline-flex; }
    #main-menu.menu-breakpoint .menu-mobile-actions { display: block; }
    #main-menu.menu-breakpoint #slide-menu {
        position: fixed; top: 0; right: var(--slide-menu-right, 0); left: var(--slide-menu-left, auto); bottom: 0;
        z-index: var(--slide-menu-z, 99999); /* idem mobile : au-dessus des widgets tiers */
        width: min(var(--slide-menu-width), 100vw);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: var(--slide-menu-padding); overflow-y: auto;
        background: var(--slide-menu-background); box-shadow: none;
        transform: translateX(var(--slide-menu-hidden, 100%)); transition: transform var(--slide-menu-transition) ease;
    }
    #main-menu.menu-breakpoint.menu-open #slide-menu { transform: translateX(0); box-shadow: var(--slide-menu-shadow, -12px 0 40px rgba(0, 0, 0, .18)); }
    #main-menu.menu-breakpoint .menu-level-0 { flex-direction: column; align-items: stretch; gap: 0; }
    #main-menu.menu-breakpoint .menu-level-0 > li { display: block; }
    #main-menu.menu-breakpoint .sub-menu > ul[class^="menu-level-"],
    #main-menu.menu-breakpoint .sub-menu-mega > ul[class^="menu-level-"] {
        position: static; transform: none; width: auto; min-width: 0; columns: auto;
        padding: 0 0 0 12px; border: 0; box-shadow: none; background: transparent;
    }
    /* Panneau clair → couleur de texte lisible (l'override mobile vit dans
       max-width:991.98px et ne s'applique pas ici ; sans ça, le blanc de la
       barre reste et les liens sont invisibles sur le panneau). */
    #main-menu.menu-breakpoint .menu-level-0 a,
    #main-menu.menu-breakpoint .menu-level-0 .menu-item-container > a,
    #main-menu.menu-breakpoint .menu-level-0 > li.sub-menu > .menu-item-container,
    #main-menu.menu-breakpoint .submenu-toggle { color: var(--slide-menu-color, #1f1f1f); }
}

/* ==================================================== Logo centré (2/4) =====
   Modèle A : le thème place le logo au centre, les menus front sont répartis
   de part et d'autre. #slide-menu passe en display:contents pour que les deux
   groupes deviennent des cellules de la grille de #main-menu. Neutralisé au
   breakpoint (le panneau mobile reprend la main).
   ========================================================================== */
.menu-nav-group { display: flex; align-items: center; gap: var(--menu-list-gap); min-width: 0; }

@media (min-width: 992px) {
    #main-menu.logo-center:not(.menu-breakpoint) {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto;
        grid-template-areas: "leftnav logo rightnav actions";
        gap: var(--logo-center-gap);
    }
    #main-menu.logo-center:not(.menu-breakpoint) > #slide-menu { display: contents; }
    #main-menu.logo-center:not(.menu-breakpoint) .menu-left        { grid-area: logo;     justify-self: center; }
    #main-menu.logo-center:not(.menu-breakpoint) .menu-nav-group--left  { grid-area: leftnav;  justify-self: end;   }
    #main-menu.logo-center:not(.menu-breakpoint) .menu-nav-group--right { grid-area: rightnav; justify-self: start; }
    #main-menu.logo-center:not(.menu-breakpoint) .menu-right       { grid-area: actions;  }
    #main-menu.logo-center:not(.menu-breakpoint) .menu-mobile-actions { display: none; }

    /* 4 menus : deux listes empilées de chaque côté (2 lignes). */
    #main-menu.logo-center-4:not(.menu-breakpoint) .menu-nav-group {
        flex-direction: column;
        align-items: stretch;
        gap: var(--logo-center-row-gap);
    }
    #main-menu.logo-center-4:not(.menu-breakpoint) .menu-nav-group--left .menu-level-0 { justify-content: flex-end; }
}

/* ============================================ Lien d'évitement (skip link) ==
   <a class="accessible alert alert-primary" href="#contenu"> : masqué hors
   focus, révélé au focus clavier. L'habillage (fond/bordure) vient de .alert
   alert-primary (Bootstrap) ; ici on ne gère que la révélation.
   ========================================================================== */
.accessible {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.accessible:focus {
    position: fixed !important;
    top: 10px; left: 10px;
    z-index: 2100;
    width: auto; height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}
.skip-nav { line-height: 0; }

/* ============================================ Menu aligné au contenu =========
   Option thème « Largeur du menu = Aligné au contenu » (classe .menu-contained).
   Le FOND de la barre reste pleine largeur ; seul le CONTENU (logo/menus/actions)
   est aligné sur le conteneur .container du contenu de page. Les paliers suivent
   les max-width de .container Bootstrap ; +.75rem = la gouttière du conteneur.
   ========================================================================== */
#main-menu.menu-contained { --nav-cw: 100%; }
@media (min-width: 576px)  { #main-menu.menu-contained { --nav-cw: 540px;  } }
@media (min-width: 768px)  { #main-menu.menu-contained { --nav-cw: 720px;  } }
@media (min-width: 992px)  { #main-menu.menu-contained { --nav-cw: 960px;  } }
@media (min-width: 1200px) { #main-menu.menu-contained { --nav-cw: 1140px; } }
@media (min-width: 1400px) { #main-menu.menu-contained { --nav-cw: 1320px; } }
#main-menu.menu-contained {
    padding-inline: max(var(--menu-padding-x), calc((100% - var(--nav-cw)) / 2 + .75rem));
}

/* ============================================ Bouton d'action (CTA) =========
   Un item de menu porteur de .menu-cta (case « Bouton d'action » dans l'admin)
   est mis en avant comme un bouton, aux couleurs du Bouton 1 du thème.
   Ex : « Demander un devis ».
   ========================================================================== */
.menu-level-0 > li.menu-cta > a,
.menu-level-0 > li.menu-cta > .menu-item-container > a {
    background: var(--btn-1-bg, #2c7a6e);
    color: var(--btn-1-color, #fff);
    border-radius: var(--btn-1-radius, var(--menu-item-radius));
    padding: 9px 18px;
    font-weight: 600;
}
.menu-level-0 > li.menu-cta > a:hover,
.menu-level-0 > li.menu-cta > a[aria-current="page"],
.menu-level-0 > li.menu-cta > .menu-item-container > a:hover {
    background: var(--btn-1-bg, #2c7a6e);
    color: var(--btn-1-color, #fff);
    filter: brightness(.92);
}
@media (max-width: 991.98px) {
    .menu-cta > a,
    .menu-cta > .menu-item-container > a { justify-content: center; text-align: center; }
}

/* ============================================ Composeur : rangée 2 + flags ==
   Rangée 1 = barre principale (conteneurs .menu-left/#slide-menu/.menu-right).
   Rangée 2 = barre secondaire (zones génériques, desktop). Piloté par navbar.php.
   ========================================================================== */
#main-menu.nav-2rows { flex-direction: column; height: auto; align-items: stretch; padding: 0; }
.navbar-row { display: flex; align-items: center; gap: var(--menu-gap); width: 100%; padding: var(--menu-padding-y) var(--menu-padding-x); min-height: var(--menu-height); }
/* Double menu : la rangée 1 (logo + utilitaires) ÉPOUSE son contenu au lieu de
   réserver toute la hauteur de barre (sinon le logo flotte dans une grande bande
   vide → barre bien trop haute). La rangée 2 reste un bandeau de menu fin. */
#main-menu.nav-2rows .navbar-row-1 { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
.navbar-row-2 { min-height: var(--menu-row2-height, 48px); border-top: 1px solid var(--menu-border-color); background: rgba(0, 0, 0, .02); }
.navbar-row-2 .navbar-zone { display: flex; align-items: center; gap: var(--menu-list-gap); min-width: 0; }
.navbar-row-2 .navbar-zone--left   { flex: 0 0 auto; }
.navbar-row-2 .navbar-zone--center { flex: 1 1 auto; justify-content: center; }
.navbar-row-2 .navbar-zone--right  { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 991.98px) { #main-menu.nav-2rows .navbar-row-2 { display: none; } }

/* Barre transparente (ex. par-dessus un hero). */
#main-menu.nav-transparent { background: transparent; border-bottom-color: transparent; }
/* Barre non collante. */
#main-menu.nav-static { position: static; }

/* ------------------ Composeur : alignement horizontal par zone -------------
   Chaque zone d'une navbar COMPOSÉE (.navbar-zone) devient une colonne à part
   égale ; l'alignement du contenu est piloté par la classe navbar-align-*.
   Défaut : left→gauche, center→centre, right→droite (= navbar classique).
   Portée limitée à .navbar-zone → les navbars legacy (sans cette classe) sont
   inchangées. NB : un menu très large tient mieux sur une 2ᵉ rangée. --------- */
/* flex-basis:auto (et non 0) → une zone se dimensionne sur SON contenu puis grandit :
   une zone logo/actions courte ne monopolise plus 1/3, la zone du menu reçoit
   l'espace dont elle a besoin (évite un débordement → repli .menu-breakpoint prématuré). */
#main-menu .navbar-zone { flex: 1 1 auto; min-width: 0; margin-left: 0; margin-right: 0; }
#main-menu .navbar-zone.navbar-align-start  { justify-content: flex-start; }
#main-menu .navbar-zone.navbar-align-center { justify-content: center; }
#main-menu .navbar-zone.navbar-align-end    { justify-content: flex-end; }

/* ------------------ Barre FIXE (option du composeur) -----------------------
   position:fixed = hors flux → le cale-espace .nav-fixed-spacer (rendu par
   navbar.php, sauf en transparent) compense la hauteur pour ne pas masquer le
   contenu. La barre garde le z-index de base (#main-menu). --------------------- */
#main-menu.nav-fixed { position: fixed; top: 0; left: 0; right: 0; }
.nav-fixed-spacer { height: var(--menu-height, 84px); }
#main-menu.nav-fixed.nav-2rows + .nav-fixed-spacer { height: calc(var(--menu-height, 84px) + 48px); }
@media (max-width: 991.98px) {
    .nav-fixed-spacer,
    #main-menu.nav-fixed.nav-2rows + .nav-fixed-spacer { height: var(--menu-height-mobile, 72px); }
}

/* Bandeau promo + barre FIXE : le bandeau (theme_promo_banner, rendu par
   theme_body_start HORS <header>) est au-dessus de la barre dans le flux ; en
   nav-fixed la barre le recouvrait (top:0). On épingle le bandeau tout en haut,
   on décale la barre de sa hauteur, et on réserve cette hauteur sur le <body>.
   .promo-pin + --promo-banner-h sont posés par menu.js (uniquement si nav-fixed
   et non transparent). Le .nav-fixed-spacer continue de réserver la seule barre. */
body.promo-pin { padding-top: var(--promo-banner-h, 0px); }
body.promo-pin .theme-promo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1002; }
body.promo-pin #main-menu.nav-fixed { top: var(--promo-banner-h, 0px); }

/* A11y — respect de « animations réduites » : on coupe les transitions de la nav
   (glissement du panneau/volets, fondu du masque, lignes du burger) pour les
   utilisateurs qui le demandent (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    #slide-menu,
    #slide-menu [class^="menu-level-"],
    #main-menu #mask,
    #main-menu .burger-line,
    #main-menu .submenu-toggle-icon {
        transition: none !important;
    }
}