/* ========================================================================== S2i Menu - Styles All visual styling has been moved to Tailwind utility classes directly in the module's .tpl templates. Only the rules below can't be expressed there, since they target elements outside this module's own markup. ========================================================================== */ /* Body scroll lock when an offcanvas is open (module JS toggles this on , which s2i_menu never renders itself). */ body.offcanvas-open { overflow: hidden; } /* Hide the theme's native header hamburger button on desktop only when a megamenu is actually rendered somewhere on the page. If no menu group uses this mode, .megamenu never exists in the DOM and the native button is untouched. */ @media (min-width: 768px) { body:has(.megamenu__nav) #hamburger { display: none; } } /* En mode mega menu, le module fournit lui-même son bouton hamburger sur mobile : celui du thème ferait doublon à toutes les tailles, pas seulement sur desktop. Portée limitée au nouveau mode, le mode classique garde exactement le comportement de la règle ci-dessus. */ body:has(.megamenu--mega) #hamburger { display: none; } /* ========================================================================== Mode mega menu ========================================================================== */ /* Moteur de grille des panneaux. Les largeurs de colonnes sont choisies dans le builder, donc dynamiques : aucune classe `col-span-N` n'existerait dans le CSS compilé par Tailwind, qui ne voit que les templates. Une variable CSS évite d'avoir à maintenir une safelist, et accepte n'importe quelle valeur de 1 à 12. La somme des spans d'une ligne n'est pas normalisée à 12 : dépasser fait passer la colonne suivante à la ligne, ce que le canvas du builder reproduit à l'identique puisqu'il utilise la même grille. */ .mm-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mm-gap, 1.5rem); } .mm-col { grid-column: span var(--mm-span, 12) / span var(--mm-span, 12); min-width: 0; } /* Variante mobile : le builder n'a qu'une largeur desktop, tout s'empile. */ .mm-row--stack, .mm-row--stack .mm-row { grid-template-columns: 1fr; } .mm-row--stack .mm-col { grid-column: 1 / -1; } /* Redistribution par tranche de largeur (voir hidden_breakpoints) : quand un enfant d'une ligne se masque à une tranche donnée, les colonnes qui restent visibles doivent se partager toute la largeur plutôt que garder leur span d'origine avec un vide à la place de l'enfant disparu (une 9/12 à côté d'une 3/12 masquée doit devenir 9/9, donc pleine largeur). --mm-cols- est calculé côté serveur par LayoutHydrator::computeVisibleCols() : il ne vaut quelque chose que si un enfant se masque réellement à cette tranche précise, sinon la grille garde ses 12 pistes fixes par défaut — donc rien ne change ici pour une ligne qui n'utilise pas ce réglage, y compris le dépassement volontaire de spans qui fait passer une colonne à la ligne suivante. xxs/xs/sm sont déclarées AVANT le filet de sécurité <990px ci-dessous : ce dernier force un empilement à une colonne quel que soit --mm-cols-* dès qu'un thème affiche la nav desktop plus tôt que prévu, et doit donc rester prioritaire sur cette redistribution dans cette plage. */ @media (max-width: 575.98px) { .mm-row { grid-template-columns: repeat(var(--mm-cols-xxs, 12), minmax(0, 1fr)); } } @media (min-width: 576px) and (max-width: 767.98px) { .mm-row { grid-template-columns: repeat(var(--mm-cols-xs, 12), minmax(0, 1fr)); } } @media (min-width: 768px) and (max-width: 989.98px) { .mm-row { grid-template-columns: repeat(var(--mm-cols-sm, 12), minmax(0, 1fr)); } } /* 989px et non 767 : le thème Chopper redéfinit les breakpoints Tailwind à la bootstrap (sm 768, md 990, lg 1200), et le mode mega menu bascule sur son offcanvas en `md:hidden` — donc en dessous de 990px. Cette requête est le filet de sécurité si un thème affiche la nav desktop plus bas que prévu. */ @media (max-width: 989px) { .mm-row { grid-template-columns: 1fr; } .mm-col { grid-column: 1 / -1; } } /* md/lg/xl : seules tranches où .megamenu--mega est réellement visible (`hidden md:block` en display.tpl), donc où cette redistribution compte pour de vrai. */ @media (min-width: 990px) and (max-width: 1199.98px) { .mm-row { grid-template-columns: repeat(var(--mm-cols-md, 12), minmax(0, 1fr)); } } @media (min-width: 1200px) and (max-width: 1399.98px) { .mm-row { grid-template-columns: repeat(var(--mm-cols-lg, 12), minmax(0, 1fr)); } } @media (min-width: 1400px) { .mm-row { grid-template-columns: repeat(var(--mm-cols-xl, 12), minmax(0, 1fr)); } } /* Décalage et largeur du panneau. Les deux variables sont posées par front.js sur la nav : lui seul connaît la position de la nav dans la page, et donc de combien décaler un panneau pour qu'il aille d'un bord de fenêtre à l'autre. Les valeurs de repli laissent le panneau aligné sous la nav si le JS ne charge pas. */ .megamenu--mega .mm-panel { left: var(--mm-panel-left, 0); width: var(--mm-panel-width, 100%); max-width: var(--mm-panel-max-width, none); } /* Ouverture du panneau. Piloté par front.js (classe .is-open sur le

) plutôt qu'en :hover CSS pur, pour avoir le clavier, la tolérance de survol et la fermeture au clic extérieur. Ces règles vivent ici et pas en classes utilitaires parce qu'elles dépendent d'un état porté par un ancêtre. Le :focus-within est le filet de sécurité si le JS ne charge pas. */ .megamenu--mega .mm-panel { opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; } .megamenu--mega .megamenu__item.is-open > .mm-panel, .megamenu--mega .megamenu__item:focus-within > .mm-panel { opacity: 1; visibility: visible; transform: none; } .megamenu--mega .megamenu__item.is-open > .megamenu__link .megamenu__chevron { transform: rotate(180deg); } /* Le déclencheur reste dans son état « survolé » tant que son panneau est ouvert — sinon une ouverture au clic, au clavier ou au doigt (aucune de ces trois ne déclenche jamais un vrai :hover) laisse le triangle tourné mais le texte et le fond inchangés, une incohérence visuelle. Les classes `hover:` / `group-hover:` de la balise ne suffisent donc pas ; ces règles reproduisent le même résultat visuel piloté par `.is-open`. */ .megamenu--mega .megamenu__item.is-open > .megamenu__link { /* Pas de !important : une règle hors des @layer Tailwind passe déjà devant les utilitaires (voir .megamenu__more-tabs .megamenu__link plus bas). */ color: var(--color-black, #000); background-color: var(--color-grey-100, #f1f4f6); } /* Débordement : défilement horizontal quand overflow_mode vaut `scroll`. */ .megamenu--mega[data-mm-overflow="scroll"] .megamenu__nav { overflow-x: auto; scrollbar-width: none; } .megamenu--mega[data-mm-overflow="scroll"] .megamenu__nav::-webkit-scrollbar { display: none; } /* Volet « Plus » : un seul panneau, deux étages, plutôt que le dropdown étroit + le second panneau plein largeur superposé d'avant (voir l'historique Git). Le conteneur partagé porte la classe .mm-panel pour hériter gratuitement du positionnement plein largeur déjà posé par positionPanel() (--mm-panel-left/--mm-panel-width) et de la transition d'ouverture définie plus haut — seul son déclencheur diffère (clic sur .megamenu__more, pas survol générique de la nav), d'où cette règle jumelle de celle définie pour .megamenu__item.is-open. */ .megamenu--mega .megamenu__more.is-open > .mm-panel { opacity: 1; visibility: visible; transform: none; } /* Étage 1 : ligne d'onglets horizontale. Les

qu'y déplace front.js restent des .megamenu__item avec leurs classes utilitaires d'origine — prévues pour le fond sombre du header. Sur le fond blanc du volet il faut reprendre la couleur de texte, comme le faisait l'ancien dropdown vertical qu'elles remplacent ; ces règles ne sont pas dans une @layer, elles passent donc devant les utilitaires Tailwind sans !important. */ .megamenu__more-tabs .megamenu__link { height: 100%; padding-top: 0; padding-bottom: 0; border-radius: 0; color: var(--color-grey-900, #1a202c); } .megamenu__more-tabs .megamenu__link:hover { color: var(--color-black, #000); background-color: var(--color-grey-100, #f1f4f6); } .megamenu__more-tabs .megamenu__link > span { color: inherit; } /* Onglet actif : même traitement visuel que .megamenu__item.is-open dans la barre (texte noir, fond gris clair), plus un soulignement dans la couleur de marque pour rappeler l'onglet actif de la maquette. */ .megamenu__more-tabs .megamenu__item.is-open > .megamenu__link { color: var(--color-black, #000); background-color: var(--color-grey-100, #f1f4f6); box-shadow: inset 0 -2px 0 0 var(--color-primary, #2563eb); } /* Étage 2 : sous-menu de l'onglet actif, déplacé tel quel par front.js (activateMoreTab()/restoreMoreSubmenu()) — jamais cloné, jamais ré-affiché avec un texte en plus : c'est exactement le panneau déjà utilisé dans la barre, sur un fond simplement teinté. */ /* .mm-panel__inner porte déjà son propre padding horizontal (pensé pour vivre directement sous .mm-panel, qui n'a lui-même aucun padding latéral). Une fois déplacé ici, il hérite EN PLUS du padding de .megamenu__more-submenu (nécessaire puisque le .mm-panel englobant, lui, reste dans la

d'origine et ne voyage pas) : sans ce correctif le padding se cumule, resserre la grille de colonnes et fait déborder le contenu sur des lignes supplémentaires — un volet visiblement plus haut que le même panneau affiché depuis la barre. */ .megamenu__more-submenu [data-mm-more-submenu-content] .mm-panel__inner { padding-left: 0; padding-right: 0; } /* Le .mm-panel de chaque onglet déplacé ne doit plus jamais s'afficher comme son propre volet flottant : son contenu vit désormais dans l'étage 2 partagé. Sélecteur volontairement aussi spécifique que la règle générique qu'il neutralise (5 classes contre 4 pour .megamenu__item.is-open > .mm-panel), pour gagner quel que soit l'ordre des règles dans ce fichier. */ .megamenu--mega .megamenu__more-tabs .megamenu__item.is-open > .mm-panel, .megamenu--mega .megamenu__more-tabs .megamenu__item:focus-within > .mm-panel { display: none; }