, contrairement à un pourcentage de
* "left" seul) plutôt que "width:100%" : un , même à fond transparent,
* reste survolable sur toute sa boîte — avec width:100% cette boîte
* couvrait tout l'écran bien au-delà de la carte blanche visible
* (.mega-menu__inner, centrée par son propre width:fit-content), donc
* éloigner le curseur SUR LES CÔTÉS de la carte restait "dans" le menu (rien
* à survoler entre lui et le
ne le fermait jamais). En le limitant à
* la largeur réelle du contenu, sortir de la carte ferme bien le menu.
*
* z-index plus haut que .navbar (200, thème parent) : le touchant tout
* juste le bas de la navbar, la petite marge de survol interne
* (padding-top) peut légèrement chevaucher visuellement la barre — sans ce
* z-index plus élevé, la navbar (au-dessus dans l'empilement) la masquerait.
*/
.sf-menu .sf-mega {
position: fixed;
display: none;
left: 50%;
transform: translateX(-50%);
z-index: 201;
}
/*
* Contrôlé UNIQUEMENT par la classe .sfHover (posée/retirée par le JS
* Superfish, toujours actif ici) — pas de règle ":hover" pure en plus.
* Les deux en parallèle peuvent se désynchroniser (le CSS ":hover" réagit au
* pixel près, le JS Superfish a son propre état interne), ce qui provoquait
* un clignotement (ouverture/fermeture parasite) une fois le délai de
* fermeture mis à 0 (assets/js/mega-menu.js) : ce délai masquait auparavant
* ces micro-désynchronisations.
*/
.sf-menu li.sfHover > .sf-mega {
display: block;
}
/*
* Le thème parent souligne en permanence le lien d'un item de menu quand
* WordPress lui pose une classe "current-*" — pas seulement pour la page
* exactement liée, mais aussi pour tout item ANCÊTRE d'une catégorie
* produit contenant le produit affiché (ex. "BRIDAL" reste souligné en
* arrivant sur une fiche produit de sa sous-catégorie "Wedding Dress", même
* sans jamais survoler le menu). On neutralise ce soulignement "actif" pour
* qu'il ne reste visible qu'au survol/focus réel (.navbar-nav > li > a:hover
* dans le thème parent gère déjà cette partie, inchangée).
*/
.navbar-nav > li.current-menu-item > a,
.navbar-nav > li.current_page_item > a,
.navbar-nav > li.current-menu-parent > a,
.navbar-nav > li.current-menu-ancestor > a,
.navbar-nav > li.current_page_parent > a,
.navbar-nav > li.current_page_ancestor > a {
border-bottom-color: transparent;
}
@media (min-width: 64.0625em) {
/*
* .mega-menu lui-même reste "invisible" (pas de fond/bordure) et touche
* directement le (pas de margin-top) : le padding-top ici sert de
* zone tampon toujours hoverable entre le lien et la carte visible
* (.mega-menu__inner) — plus de zone morte où le survol se perdrait en
* descendant vers le mega menu, contrairement à un margin-top qui laisse
* un vrai espace vide (non hoverable) entre les deux.
*/
.navbar-nav .mega-menu {
padding-top: 10px;
}
.navbar-nav .mega-menu__inner {
/*
* width:max-content (plutôt que fit-content/inline-flex, essayés
* avant et peu fiables ici) : force explicitement la largeur voulue
* par le contenu (liens + grille d'images, elle-même en
* width:max-content ci-dessous) au lieu de laisser le navigateur la
* deviner via un calcul intrinsèque imbriqué (flex dans flex +
* flex-wrap + max-width), ce qui produisait une largeur trop courte
* — le fond blanc s'arrêtait avant la 4e carte, qui débordait dessus.
* .sf-mega (parent) s'ajuste déjà lui-même à sa taille de contenu
* (position:fixed + width auto = shrink-to-fit), donc pas besoin de
* margin:auto ici pour centrer.
*/
display: flex;
width: max-content;
gap: 110px;
/* 1300px = liens (130px min, peut être plus si un libellé est long) +
gap (110px) + 4 cartes (884px, largeur EXACTE désormais, voir
.mega-menu__preview) + padding (2 * 32px) + marge de sécurité ;
sinon ce plafond serrait le contenu et le ferait retomber à moins
de 4 cartes par ligne avant d'atteindre sa largeur voulue. */
max-width: min(1300px, calc(100vw - 48px));
padding: 28px 32px;
background: #fff;
border-top: 2px solid var(--inspiro-primary-color);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.navbar-nav .mega-menu__links {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 130px;
}
.navbar-nav .mega-menu__link {
display: block;
padding: 0;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1a1a1a;
white-space: nowrap;
border-bottom: none;
}
.navbar-nav .mega-menu__link:hover {
color: var(--inspiro-primary-color);
border-bottom: none;
}
.navbar-nav .mega-menu__preview {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
gap: 28px;
/*
* Largeur EXPLICITE via calc(), à partir de --preview-columns posé en
* inline par inc/mega-menu.php (nombre réel de cartes sur la 1re
* ligne, plafonné à 4) — plus fiable qu'un dimensionnement flex
* intrinsèque (fit-content/max-content sur un flex-wrap capé par
* max-width), qui a causé plusieurs fois un fond blanc trop étroit
* (la dernière carte débordait dessus, restant hoverable en dehors
* de la zone visible — d'où aussi le mega menu qui semblait "bloqué"
* en éloignant le curseur).
*/
width: calc( 200px * var( --preview-columns, 4 ) + 28px * ( var( --preview-columns, 4 ) - 1 ) );
}
.navbar-nav .mega-menu__preview-item {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 10px;
width: 200px;
text-decoration: none;
}
.navbar-nav .mega-menu__preview-image {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
background-color: #eee;
background-size: cover;
background-position: center top;
}
.navbar-nav .mega-menu__preview-item--no-image .mega-menu__preview-image {
background-color: #e5e5e5;
}
.navbar-nav .mega-menu__preview-caption {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1a1a1a;
}
}