/* ==========================================================================
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);
/* Bas réel de la nav en mobile = bandeau promo (si épinglé) + hauteur nav.
--promo-banner-h est posé dynamiquement par menu.js (0 si pas de bandeau).
Sert à caler tout ce qui doit s'ouvrir SOUS la nav : slide-menu, recherche. */
--nav-bottom-mobile: calc(var(--promo-banner-h, 0px) + var(--menu-height-mobile));
--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, ALIGNÉ EN HAUT du
panneau parent. `top:0` (et non `-padding`) car l'offsetParent est l'UL parent
(position:absolute) : un décalage négatif s'ACCUMULE à chaque niveau et fait
« monter » chaque flyout — les panneaux se retrouvaient en escalier. À 0, chaque
niveau s'aligne sur le haut de son parent → tous alignés sur le 1er bloc. */
.sub-menu ul .sub-menu > ul[class^="menu-level-"] {
top: calc(-1 * var(--submenu-border-width));
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;
/* Colonnes FLEX : chaque enfant direct (section) = une colonne. Le panneau
ÉPOUSE la largeur de ses colonnes (fond couvrant, pas de zone vide) et les
colonnes passent à la ligne s'il y en a trop (plafonné à la largeur max). */
display: flex;
flex-direction: row; /* surcharge le column des sous-menus classiques → colonnes côte à côte */
flex-wrap: nowrap;
align-items: flex-start;
gap: var(--mega-menu-gap, 18px) var(--mega-menu-column-gap);
width: max-content;
max-width: min(var(--mega-menu-max-width), calc(100vw - 2 * var(--mega-menu-screen-margin)));
padding: var(--mega-menu-padding);
background: var(--mega-menu-background, #fff);
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: flex; }
/* Chaque section (enfant direct) = une colonne autonome. */
.sub-menu-mega > ul[class^="menu-level-"] > li {
flex: 0 1 auto;
min-width: var(--mega-menu-col-width, 14rem);
max-width: 22rem;
}
/* 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 ) → é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 hérités de la navbar Bootstrap. Dans .menu-right (un
), ces
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);
text-decoration: none;
cursor: pointer;
position: relative;
}
/* Habillage « sans encadré » (compte / favoris / loupe mobile) : juste l'icône.
Écarté dès qu'une classe .btn est ajoutée via le champ « Classe CSS à ajouter »
du composeur de navbar. Sans ce :not(), `btn btn-1` restait sans effet visible :
.btn et .menu-icon-btn ont la MÊME spécificité (0,1,0), et menu.css est chargé
après Bootstrap — le dernier déclaré l'emportait donc systématiquement. */
.menu-icon-btn:not(.btn) {
color: var(--menu-color);
background: transparent;
border: 1px solid transparent;
border-radius: var(--menu-action-radius);
}
.menu-icon-btn:not(.btn):hover { /* pas de fond au survol */ }
/* Avec une classe bouton : on laisse Bootstrap peindre, on ne garde que la mise
en ligne. Largeur/hauteur libres, sinon le carré de 42px écrase le bouton. */
.menu-icon-btn.btn {
width: auto;
height: auto;
}
/* « Couleur de l'icône » du composeur de navbar.
La valeur arrive en `--nbc-color` sur un wrapper `display:contents` (voir
navbar_colored()). Il faut la relire ICI, sur le glyphe : la règle
`.menu-icon-btn { color: var(--menu-color) }` ci-dessus est portée par le
lui-même, et une déclaration directe bat toujours une valeur héritée du
wrapper — quelle que soit la spécificité de l'ancêtre. Le réglage était donc
sans effet visible.
Ciblé sur le glyphe et non sur le bouton entier : le champ s'intitule
« Couleur de l'icône », le libellé qui l'accompagne (« Appel », « Mon
compte ») reste à la couleur du menu. Les SVG maison portent
`fill="currentColor"`, ils suivent donc `color` sans règle de plus. */
.nbc-colored i,
.nbc-colored svg { color: var(--nbc-color, currentColor); }
/* 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; }
/* Le padding maison écraserait celui de Bootstrap (0,2,0 contre 0,1,0) et
aplatirait le bouton : réservé au rendu sans encadré. */
.menu-icon-btn.menu-has-label:not(.btn) { 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 (#burger, panier) NE
propagent PAS `color` par défaut (couleur UA noire / btn-link bleue) → on force
l'héritage. Les 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; }
/* Visuel PERSONNALISÉ (SVG déposé dans le composeur) à la place de l'icône du
thème, pour le compte et le panier.
La taille vit sur l'enveloppe (`--menu-icon-size`, posée en style inline par le
composeur) et non dans le markup collé : on n'a pas à réécrire le SVG du site,
et `width/height` internes sont neutralisés. `max-width:100%` protège la barre
d'un visuel exporté en 512 px. */
.menu-svg-custom { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; line-height: 0; }
.menu-svg-custom svg,
.menu-svg-custom img {
display: block;
width: var(--menu-icon-size, 28px);
height: auto;
max-width: 100%;
}
/* Icône AU-DESSUS du libellé (« Mon compte », « Mon panier » sous leur visuel).
Les deux composants sont des boutons-icônes en flex ligne : on bascule l'axe,
on recentre, et on rend la hauteur libre — le carré fixe de l'icône seule
couperait le texte. */
.menu-icon-btn.menu-icon-stacked,
.shops-cart-toggle.menu-icon-stacked {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: auto;
height: auto;
text-align: center;
line-height: 1.15;
}
/* Le compteur du panier suit l'icône plutôt que de se poser sous le libellé. */
.shops-cart-toggle.menu-icon-stacked .shops-cart-badge { margin-left: 0; }
.shops-cart-label { font-size: var(--menu-item-font-size, .95rem); white-space: nowrap; }
/* 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) retiré : pas de voile sombre, et le burger reste cliquable
quand le menu est ouvert (re-clic → fermeture). */
/* --------------------------------------------------------- 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); min-height: var(--menu-height-mobile); }
/* Logo capé auto à la hauteur de la barre mobile moins un padding : ne déborde jamais. */
.menu-logo img { height: min(var(--menu-logo-height-mobile, var(--menu-logo-height, 58px)), calc(var(--menu-height-mobile, 72px) - 8px)); width: auto; }
.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;
/* Démarre SOUS la barre de navigation (la nav reste visible au-dessus). */
top: var(--slide-menu-top, var(--nav-bottom-mobile, 72px));
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: 100vw; /* plein écran sur mobile (ignore --slide-menu-width) */
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0; /* le header et chaque niveau gèrent leur propre padding */
/* Scroll GLOBAL du panneau : quand plusieurs blocs coexistent (menu de base +
navbar-extra-menus + actions) et dépassent la hauteur, tout reste atteignable.
overflow-x masqué (les niveaux drill-down glissent depuis le côté) ; les niveaux
≥1 sont en position:fixed → non affectés par ce scroll. */
overflow-x: hidden;
overflow-y: auto;
/* Le scroll du tiroir ne se propage PAS à la page derrière (scroll tactile). */
overscroll-behavior: contain;
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%));
/* ACCESSIBILITÉ : fermé, le panneau est hors écran mais ses liens restaient
FOCUSABLES → en tabulant, le clavier entrait dans un menu invisible (focus
perdu, RGAA 10.7/12.8). `visibility:hidden` le sort du focus ET des lecteurs
d'écran. On éteint la visibilité APRÈS le glissement (delay = durée du
transform) pour ne pas couper l'animation de fermeture. */
visibility: hidden;
transition: transform var(--slide-menu-transition) ease,
visibility 0s linear var(--slide-menu-transition);
}
#main-menu.menu-open #slide-menu {
transform: translateX(0);
visibility: visible; /* immédiate à l'ouverture (glissement visible) */
transition: transform var(--slide-menu-transition) ease, visibility 0s;
box-shadow: var(--slide-menu-shadow, -12px 0 40px rgba(0, 0, 0, .18));
}
/* Verrou de défilement de la PAGE quand le tiroir mobile est ouvert (classe posée
par menu.js openPanel/closePanel). Sans ça, la barre étant « alignée au contenu »
(statique) et le tiroir « fixed », le fond défile sous le panneau au scroll. */
html.menu-scroll-lock,
html.menu-scroll-lock body { overflow: hidden; }
/* Pas de logo dans le panneau qui s'ouvre (il reste l'affaire de la barre). */
/* L'alignement de ZONE ne doit pas piloter le panneau mobile.
`#main-menu .navbar-zone.navbar-align-center{justify-content:center}` décrit un
alignement HORIZONTAL. Mais en mode panneau la même zone passe en
`flex-direction:column` : la propriété agit alors VERTICALEMENT et, dès que le
contenu déborde, le centrage flex pousse le premier enfant AU-DESSUS du bord haut.
L'en-tête (flèche « ← » et croix « ✕ ») se retrouvait à offsetTop -59px : masqué
sous la barre de navigation, et inatteignable au défilement (on ne peut pas
défiler vers un débordement côté début). Cela touchait la configuration la plus
courante — menu dans la zone centre, dont l'alignement par défaut est « centre ».
Spécificité 2-1-0 pour passer devant les règles d'alignement (1-2-0 et 1-3-0). */
#main-menu #slide-menu.navbar-zone {
/* `.navbar-zone--merged{flex-direction:row}` sert à la BARRE (une colonne
fusionnée s'y étale horizontalement). Appliquée au tiroir, elle mettait
l'en-tête et les niveaux côte à côte : en-tête réduit à une colonne de
145px au lieu de la largeur du panneau. Le panneau reste une COLONNE. */
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
#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);
}
/* Premier volet (racine) : header sans retour ni titre → inutile, on le masque
(le burger, transformé en croix, reste la fermeture). --empty posé par menu.js. */
#main-menu #slide-menu > .slide-head--empty { display: none; }
.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. Hauteur NATURELLE (flex:0 0 auto) : ne grandit plus
pour remplir le panneau — sinon un menu court (ex. « Accueil / Contact ») laisse
un grand vide avant le bloc de menus additionnels, qui se retrouve rejeté en bas.
Le scroll est désormais porté par #slide-menu (voir plus haut). */
#slide-menu > .menu-level-0 {
flex: 0 0 auto;
padding: 12px 16px;
}
#slide-menu > .menu-mobile-actions {
flex: 0 0 auto;
/* « Connexion » collé en bas tant qu'il reste de la place ; si le contenu
dépasse, margin-top:auto se réduit à 0 et le bloc suit le contenu (panneau
scrollable). Les menus restent ainsi groupés en haut, sans vide intercalé. */
margin-top: 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 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 . */
/* `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 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 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
- 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 (drill-down) adoptent le même style « carte/pilule » que le
niveau racine — y compris dans un mégamenu (mêmes / .menu-item-container). */
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li { margin-bottom: var(--slide-menu-item-gap, 8px); }
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li > a,
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li.sub-menu > .menu-item-container {
background: var(--slide-menu-item-bg, #f4f5f7);
border-radius: 12px;
}
/* Même gabarit vertical que la racine (--mobile-item-padding) : neutralise les
paddings plus serrés hérités du desktop (méga 9px, sous-menu normal 11px). */
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li > a,
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li.sub-menu > .menu-item-container > a {
padding: var(--mobile-item-padding);
padding-left: 14px;
}
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li.sub-menu > .menu-item-container { padding-right: 10px; }
/* Item actif / survol du sous-niveau : même pastille foncée que la racine. */
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li > a:hover,
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li > a[aria-current="page"],
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li.sub-menu > .menu-item-container:hover,
.menu-level-0 li.sub-menu > ul[class^="menu-level-"] > li.sub-menu.is-open > .menu-item-container {
background: var(--slide-menu-item-active-bg, #e6e8ec);
color: var(--slide-menu-color, #1f1f1f);
}
/* 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;
display: block; /* pas de rangée flex : les sections s'empilent pleine largeur */
}
/* Sections du méga (enfants directs) : colonnes DESKTOP (min/max-width, flex) →
en panneau mobile chacune prend TOUTE la largeur, empilée verticalement. */
.menu-level-0 > li.sub-menu-mega > ul[class^="menu-level-"] > li {
min-width: 0;
max-width: none;
width: auto;
flex: 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 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: var(--slide-menu-top, var(--nav-bottom-mobile, 72px)); 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%));
/* Accessibilité : fermé = non focusable (cf. mode mobile). */
visibility: hidden;
transition: transform var(--slide-menu-transition) ease, visibility 0s linear var(--slide-menu-transition);
}
#main-menu.menu-breakpoint.menu-open #slide-menu { transform: translateX(0); visibility: visible; transition: transform var(--slide-menu-transition) ease, visibility 0s; 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) ==
: 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: var(--menu-row2-height, 48px); padding-top: 0; padding-bottom: 0; }
.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-row2-height, 48px) * 2); }
/* ------------------ Composeur : encart « flottant » (DESKTOP) --------------
Marges extérieures + coins arrondis sur la barre → header détaché en carte.
Desktop UNIQUEMENT (≥992px, comme le reste de la navbar) ; mobile garde une
barre pleine largeur. Désactivé si transparent (géré au rendu navbar.php). */
@media (min-width: 992px) {
#main-menu.menu-boxed {
margin: var(--menu-margin-block, 0) var(--menu-margin-inline, 0);
border-radius: var(--menu-radius, 0);
}
/* Collante : la barre se détache aussi du bord HAUT quand elle se fige. */
#main-menu.menu-boxed:not(.nav-fixed):not(.nav-static) { top: var(--menu-margin-block, 0); }
/* Fixe : insets gauche/droite + haut par les marges. */
#main-menu.menu-boxed.nav-fixed {
top: var(--menu-margin-block, 0);
left: var(--menu-margin-inline, 0);
right: var(--menu-margin-inline, 0);
}
/* Le cale-espace compense la barre FIXE + ses marges haut/bas. */
#main-menu.menu-boxed.nav-fixed + .nav-fixed-spacer {
height: calc(var(--menu-height, 84px) + var(--menu-margin-block, 0) * 2);
}
/* Aligné au contenu : encart centré à largeur max (padding interne normal). */
#main-menu.menu-boxed.menu-contained {
max-width: var(--menu-max-width, var(--container-width, 1320px));
margin-left: auto;
margin-right: auto;
padding-inline: var(--menu-padding-x);
}
}
@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 ) 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 .
.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); }
/* Bandeau « site non public » (maintenance / construction, .site-status-bar) : même
principe que le promo, épinglé SOUS lui et au-dessus du menu fixe. .status-pin +
--status-bar-h posés par menu.js (nav-fixed, non transparent). La place est réservée
sur le (somme promo + statut) → la barre ne recouvre jamais le contenu. */
body.status-pin { padding-top: calc(var(--promo-banner-h, 0px) + var(--status-bar-h, 0px)); }
body.status-pin .site-status-bar { position: fixed; top: var(--promo-banner-h, 0px); left: 0; right: 0; z-index: 1001; }
body.status-pin #main-menu.nav-fixed { top: calc(var(--promo-banner-h, 0px) + var(--status-bar-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 .burger-line,
#main-menu .submenu-toggle-icon {
transition: none !important;
}
}
/* ── Colonnes fusionnées (composeur navbar) : grille 3 colonnes × 2 rangées ;
une colonne « fusionnée » s'étend sur les 2 rangées (pleine hauteur). Activé par
la classe .nav-merge (posée seulement si au moins une colonne est fusionnée). */
#main-menu.nav-merge .navbar-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: minmax(var(--menu-row2-height, 48px), auto) minmax(var(--menu-row2-height, 48px), auto);
align-items: stretch;
width: 100%;
column-gap: var(--menu-gap);
padding: 0 var(--menu-padding-x);
}
.nav-merge .navbar-grid > .navbar-zone { display: flex; align-items: center; gap: var(--menu-list-gap); min-width: 0; }
.nav-merge .navbar-grid > .navbar-zone--left { grid-column: 1; }
.nav-merge .navbar-grid > .navbar-zone--center { grid-column: 2; }
.nav-merge .navbar-grid > .navbar-zone--right { grid-column: 3; }
.nav-merge .navbar-grid > .nbz-r1 { grid-row: 1; }
.nav-merge .navbar-grid > .nbz-r2 { grid-row: 2; }
#main-menu.nav-merge .navbar-grid > .navbar-zone--merged {
grid-row: 1 / span 2;
flex-direction: column;
justify-content: center; /* les 2 sous-lignes centrées verticalement */
align-items: center; /* défaut ; surchargé par navbar-align-* ci-dessous */
gap: 4px;
}
/* Les 2 sous-lignes (rangée 1 / rangée 2) d'une cellule fusionnée restent HORIZONTALES. */
#main-menu.nav-merge .navbar-grid > .navbar-zone--merged > .nbz-mrow { display: flex; align-items: center; gap: var(--menu-list-gap); }
/* Cellule fusionnée EN COLONNE : l'alignement horizontal se règle via align-items
(la classe navbar-align-* n'agit que sur justify-content = axe vertical ici). */
#main-menu.nav-merge .navbar-grid > .navbar-zone--merged.navbar-align-start { align-items: flex-start; }
#main-menu.nav-merge .navbar-grid > .navbar-zone--merged.navbar-align-center { align-items: center; }
#main-menu.nav-merge .navbar-grid > .navbar-zone--merged.navbar-align-end { align-items: flex-end; }
@media (max-width: 991.98px) {
/* Mobile : la grille redevient une barre simple ; les cellules « rangée 2 » hors
panneau off-canvas se replient (comme la 2e rangée classique). */
#main-menu.nav-merge .navbar-grid { display: flex; align-items: center; justify-content: space-between; min-height: var(--menu-height-mobile); }
#main-menu.nav-merge .navbar-grid > .navbar-zone--merged { flex-direction: row; }
/* En ligne, align-items règle de nouveau l'axe VERTICAL : on recentre logo et
burger (les règles navbar-align-* plus haut ne visent l'axe horizontal qu'en
colonne, sinon le logo reste collé en haut de la barre). justify-content colle
le logo au bord gauche et le burger au bord droit de leur cellule respective. */
#main-menu.nav-merge .navbar-grid > .navbar-zone--merged.navbar-align-start { align-items: center; justify-content: flex-start; }
#main-menu.nav-merge .navbar-grid > .navbar-zone--merged.navbar-align-center { align-items: center; }
#main-menu.nav-merge .navbar-grid > .navbar-zone--merged.navbar-align-end { align-items: center; justify-content: flex-end; }
/* Zone centrale « rangée 2 » vide sur mobile (les menus passent dans le panneau
off-canvas nbz-r1) : masquée, sinon elle réserve l'espace de droite et rejette
le burger au centre au lieu de le coller à droite. */
/* TOUTE la rangée 2 est masquée sur mobile, pas seulement sa colonne centrale :
le rendu EMPILÉ masque `.navbar-row-2` en entier, et la grille fusionnée doit se
comporter pareil. Ne cibler que `--center` laissait les colonnes gauche et droite
de la rangée 2 (téléphone, réseaux, CTA…) s'afficher dans la barre mobile — deux
comportements différents pour la même configuration selon qu'une fusion est
activée ou non. */
#main-menu.nav-merge .navbar-grid > .nbz-r2 { display: none; }
}
/* ---------------------------------------------------------------------------
Menus repris dans le panneau mobile.
Le composeur n'attache #slide-menu qu'à UNE zone : les menus posés dans une
autre zone, ou en rangée 2, disparaissaient du panneau. navbar.php en ajoute
désormais une copie `.only-mobile` à l'intérieur.
L'utilitaire générique `.only-mobile` passe en `inline-flex` — pensé pour des
icônes. Ici il s'agit de listes : il faut un bloc pleine largeur, sinon les
menus repris s'alignent côte à côte au lieu de s'empiler.
Et il ne suffit pas d'élargir le wrapper : les règles du panneau visent
`#slide-menu > .menu-level-0` en ENFANT DIRECT. Les listes reprises, imbriquées
d'un cran, gardaient donc le `display:flex` horizontal de la barre desktop —
leurs items se serraient sur la largeur du texte au lieu de faire des cartes
pleine largeur comme ceux du premier menu. On leur applique le même traitement.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
#slide-menu .navbar-extra-menus,
#slide-menu .navbar-extra-menus [class^="menu-level-"] {
display: block !important;
width: 100%;
}
/* Le premier niveau porte déjà 12px en haut (règle de #slide-menu) : on ne
redonne que les marges latérales et le bas, sinon l'écart double. */
#slide-menu .navbar-extra-menus > [class^="menu-level-"] {
margin: 0;
padding: 0 16px 12px;
}
}
#main-menu.menu-breakpoint #slide-menu .navbar-extra-menus,
#main-menu.menu-breakpoint #slide-menu .navbar-extra-menus [class^="menu-level-"] {
display: block !important;
width: 100%;
}
#main-menu.menu-breakpoint #slide-menu .navbar-extra-menus > [class^="menu-level-"] {
margin: 0;
padding: 0 16px 12px;
}
/* ---------------------------------------------------------------------------
Originaux des menus repris : masqués sur mobile.
Leur COPIE vit désormais dans #slide-menu (cf. bloc ci-dessus). Sans cette
règle, l'original restait affiché dans la barre — visible en arrière-plan,
derrière le panneau ouvert, et débordant par-dessus le logo.
On vise les listes de menu situées dans une zone AUTRE que le panneau : le
`:not(#slide-menu)` protège le menu principal, qui doit rester visible.
Les autres composants de ces zones — bouton d'action, téléphone, langue —
ne sont pas touchés : seules les listes `menu-level-*` sont masquées.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
#main-menu .navbar-zone:not(#slide-menu) [class^="menu-level-"] { display: none !important; }
}
#main-menu.menu-breakpoint .navbar-zone:not(#slide-menu) [class^="menu-level-"] { display: none !important; }
/* ------------------------------------------------------------------
Rubrique courante (is-current-section)
Émis par render_arkana_menu sur le dont la BRANCHE contient la
page courante : l'entrée reste allumée sur les pages de détail qui ne
figurent pas dans le menu (une actualité allume « Actualités »).
Complète aria-current="page", qui ne vaut que pour la page exacte.
------------------------------------------------------------------ */
.menu-level-0 > li.is-current-section > a,
.menu-level-0 > li.is-current-section > .menu-item-container {
color: var(--menu-item-color-hover);
background: var(--menu-item-background-hover);
}
/* Couleur active PAR ENTRÉE — une seule règle pour tout le menu.
`--menu-active` est posée en variable sur le par render_arkana_menu
(champ « Couleur active » du gestionnaire de menu). Repli : la couleur du
thème (--menu-active-default), sinon rien — un menu sans couleur saisie
garde exactement son aspect actuel. Remplace le motif « une classe CSS +
une règle par rubrique ». */
.menu-level-0 > li.has-active-color.is-current-section,
.menu-level-0 > li.has-active-color:has(> a[aria-current="page"]),
.menu-level-0 > li.has-active-color:has(> .menu-item-container > a[aria-current="page"]) {
border-bottom: 4px solid var(--menu-active);
}
/* Le texte cible le : une couleur de texte propre à l item est posée en
inline sur le , qu une règle sur le ne pourrait pas surcharger. */
.menu-level-0 > li.is-current-section > a span,
.menu-level-0 > li.is-current-section > .menu-item-container > a span {
color: var(--menu-active, inherit);
}
.sub-menu ul li.is-current-section > a {
background: var(--submenu-item-background-hover);
}
/* ------------------------------------------------------------------
PETITS ÉCRANS — la rangée d'icônes ne doit plus déborder sur le logo.
`.navbar-grid` aligne trois zones en `flex-wrap: nowrap`, et la zone de
droite est en `overflow: visible` : quand ses icônes demandent plus de place
qu'elle n'en a, elles ne se réduisent pas — elles débordent vers la GAUCHE,
par-dessus le logo. Mesuré à 375 px : zone droite 213 px pour 307 px de
contenu, soit 111 px d'icônes posées sur le logo (37 px avant l'ajout de
l'icône panier, qui n'a fait qu'aggraver un défaut déjà là).
On resserre l'espacement et on autorise le logo à se réduire, plutôt que de
masquer une icône : chacune est un accès que l'admin a explicitement placé
dans le composeur de navbar.
------------------------------------------------------------------ */
@media (max-width: 575.98px) {
:root {
--menu-right-gap: 4px;
/* Le logo garde sa hauteur ; seule sa largeur maximale cède. */
--menu-logo-max-width: 96px;
}
/* Le logo peut rétrécir (par défaut un élément flex ne descend pas sous sa
taille de contenu), la rangée d'icônes ne déborde plus de sa zone. */
.navbar-grid .menu-logo { min-width: 0; flex-shrink: 1; }
.navbar-grid .menu-right { min-width: 0; }
.navbar-grid .menu-right .nbz-mrow { max-width: 100%; }
/* Boutons d'icône plus compacts : la cible tactile reste pilotée par leur
hauteur, inchangée. */
.navbar-grid .menu-right .nav-link,
.navbar-grid .menu-right .menu-icon-btn { padding-left: .2rem; padding-right: .2rem; }
}