/* Navigation */

.wp-block-navigation__responsive-container.is-menu-open {
    padding: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: var(--wp--custom--spacing--gap);
}

/* Correctif post-WP 6.x : empêche le conteneur responsive de prendre de la hauteur hors menu mobile ouvert */
.wp-block-navigation__responsive-container:not(.is-menu-open) {
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
    border: 1px solid currentColor;
    padding: 2px;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
    color: var(--wp--preset--color--base);
}


 /* ---- Conteneur du menu principal ---- */
 .mega-content-group {
     position: relative;
     width: 100%;
     margin: auto;
     overflow: visible;
 }

 /* Sous-menu — position absolute dans .mega-content-group (juste sous le header, sans calcul JS).
    Sélecteur préfixé par .mega-content-group (au lieu de .mega-content seul) : WordPress charge
    en front-end, uniquement pour les utilisateurs connectés pouvant éditer, la feuille de style
    des composants de l'éditeur (wp-includes/css/dist/components/style.min.css), qui contient une
    règle générique [role="region"] { position: relative }. Notre JS pose role="region" sur ces
    mêmes panneaux (accessibilité) : même spécificité CSS (0,1,0), et cette feuille chargeant après
    la nôtre, elle gagnait la cascade — les 5 panneaux repassaient en position relative, s'empilaient
    dans le flux (5 × 400px) et décalaient tout le reste de la page vers le bas au survol, uniquement
    en étant connecté. Préfixer par l'ancêtre remonte la spécificité à (0,2,0), qui gagne dans tous
    les cas sans dépendre de l'ordre de chargement des feuilles de style. */
 .mega-content-group .mega-content {
     position: absolute;
     z-index: 999;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     transform-origin: top center;
     width: 100vw;
     opacity: 0;
     filter: blur(4px);
     visibility: hidden;
     transition: opacity 0.35s ease, filter 0.35s ease, visibility 0s 0.35s;
 }

 .mega-content.active {
     opacity: 1;
     filter: blur(0);
     visibility: visible;
     transition: opacity 0.35s ease, filter 0.35s ease;
 }

 /* Pont invisible au-dessus du sous-menu pour éviter que la souris "quitte" la zone entre le header et le panel */
 .mega-content::before {
     content: '';
     position: absolute;
     bottom: 100%;
     left: 0;
     right: 0;
     height: 40px;
 }

 /* Bouton de fermeture — positionné dans le coin haut-droit de .mega-content */
 .mega-content .fermeture {
     display: none;
     position: absolute;
     top: 30px !important;
     right: 30px !important;
     background: none;
     border: none;
     font-size: 1.5rem;
     line-height: 1;
     cursor: pointer;
     color: currentColor;
     padding: 4px 8px;
     z-index: 99999;
     opacity: 0.6;
     transition: opacity 0.2s ease;
 }

 .mega-content .fermeture.visible {
     display: block;
 }

 .mega-content .fermeture:hover {
     opacity: 1;
     color: var(--wp--preset--color--or);
 }

 /* ---- end Conteneur du menu principal ---- */


 /*** centre les logo et itre site dans header ***/


/* centrage des logos du header */
.horizon-centre>* {
    position: fixed;
    z-index: 1000;
}
/*** souligné pour les titres du menu screen */
.menu-header:hover {
    text-decoration: underline;
}

/* Rotation du chevron au survol du lien de menu */
.mega-link .fleche-menu {
    display: inline-block;
    transition: transform 0.35s ease;
}

.mega-link .fleche-menu.active {
    transform: rotate(180deg);
}

/* ============================================================
   Header sticky "intelligent" au scroll (se cache en descendant,
   réapparaît en remontant, sans attendre le retour en haut de
   page). Activé via body.nl-header-mode-sticky, posé par
   navigation.js.
   ============================================================ */

/* position:fixed plutôt que sticky : le bloc natif WooCommerce "Filtres" (Interactivity API,
   callback scrollLimit()) pose en permanence body.style.overflow = "auto" en ligne dès le
   chargement de page — cela casse position:sticky pour TOUT descendant du document (bug
   WooCommerce core, pas lié à notre code). position:fixed n'est pas concerné par ce réglage. */
body.nl-header-mode-sticky {
    padding-top: var(--nl-header-height, 0px);
}

body.nl-header-mode-sticky .entete-primaire {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    width: 100%;
    z-index: 1001;
    transition: transform 0.5s ease-in-out;
}

body.nl-header-mode-sticky .entete-primaire.nl-header-hidden {
    transform: translateY(-100%);
}

/* .mega-content-group porte les panneaux .mega-content en position:absolute, top:0 : sans ce
   réglage il resterait à sa position normale dans le flux (donc tout en haut, puisque le
   header vient d'en être sorti) au lieu de suivre le header. On le fixe à son tour, avec un
   top égal à la hauteur réelle du header (mesurée en JS — jamais une valeur fixe, le header
   est responsive).
   Le terme "hauteur barre d'admin" (--wp-admin--admin-bar--height) doit être ajouté, comme sur
   .entete-primaire elle-même : sans lui, le panneau chevauche le bas du header d'exactement la
   hauteur de la barre d'admin (32px), visible uniquement en prévisualisation connectée (0 pour
   un visiteur réel). Même correctif que celui déjà appliqué à .ss-menu-filtre le 10/08. */
body.nl-header-mode-sticky .mega-content-group {
    position: fixed;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nl-header-height, 0px));
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* Header masqué (scroll vers le bas) → le lien déclencheur n'est lui-même plus visible,
   aucun sous-menu ne doit rester ouvert à l'écran */
body.nl-header-mode-sticky .entete-primaire.nl-header-hidden ~ .mega-content-group .mega-content {
    opacity: 0 !important;
    filter: blur(4px) !important;
    visibility: hidden !important;
}

/* ------------------------------------------------------------
   Sous-menu produits sticky (.ss-menu-filtre, dans l'entête des pages
   catalogue) : évite le chevauchement avec le header au scroll up.
   - Header visible  → le sous-menu se cale SOUS lui (top = hauteur header).
   - Header masqué   → le sous-menu remonte tout en haut (top = 0).
   Piloté par body.nl-header-hidden (posé par navigation.js), car le
   sous-menu n'est pas dans la fratrie du header (il vit dans le contenu).
   La transition sur `top` est calée sur celle du header (0.5s) pour que les
   deux mouvements soient synchronisés. Desktop uniquement, comme tout le
   mode sticky (body.nl-header-mode-sticky).

   z-index 900 : au-dessus du contenu produits (qui plafonne à 50) mais SOUS
   les panneaux déroulants du mega-menu (.mega-content-group = 1000) et le
   header (1001), pour que le survol du menu principal affiche bien ses
   sous-menus PAR-DESSUS le sous-menu produits, et non dessous.
   ------------------------------------------------------------ */
body.nl-header-mode-sticky .ss-menu-filtre {
    /* Bas réel du header = hauteur barre d'admin (0 pour un visiteur) + hauteur
       du header. Sans le terme barre d'admin, un chevauchement égal à sa
       hauteur apparaîtrait en prévisualisation connecté (invisible pour les
       visiteurs, mais gênant à tester). */
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nl-header-height, 0px));
    transition: top 0.5s ease-in-out;
    z-index: 900;
}

body.nl-header-mode-sticky.nl-header-hidden .ss-menu-filtre {
    top: var(--wp-admin--admin-bar--height, 0px);
}

/* Icône panier flottante : réapparaît seule après un ajout au panier pendant que le header
   est masqué (voir initFloatingCartIcon() dans navigation.js) */
.nl-floating-cart {
    position: fixed;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
    right: 20px;
    z-index: 1002;
    padding: 10px;
    border-radius: 999px;
    background: var(--wp--preset--color--base, #f8f5ee);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nl-floating-cart.nl-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---- end header sticky ---- */