/****************************************************************/
/*************************     MENU     *************************/
/****************************************************************/
.top-headers-wrapper .site-header.full-header-width {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.site-header-wrapper{
  padding-left: 20px;
  padding-right: 20px;
}

@media only screen and (min-width: 63.95em) {
  .offcanvas-search-bar {
    position: relative;
  }
  
  .offcanvas-search-bar .tools_button_icon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    pointer-events: none;
  }
  
  .offcanvas-search-bar .spk-icon-search {
    font-size: 20px;
  }
  
  input[type="text"].custom-search-placeholder::placeholder {
    color: #475569;
    font-weight: 500;
    font-size: 15px;
  }
  
  .top-headers-wrapper .site-header.default .site-header-wrapper .search-menu {
    width: 100%;
  }
  
  .top-headers-wrapper .site-header.default .site-header-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
  }
  
  .offcanvas-search-bar .custom-search-placeholder {
    padding: 24px 40px 24px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    cursor: pointer;
  }
}

@media only screen and (max-width: 63.95em) {
  .offcanvas-search-bar {
    cursor: pointer;
  }

  .offcanvas-search-bar .tools_button_icon {
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .offcanvas-search-bar .spk-icon-search {
    font-size: 22px;
  }

  .offcanvas-search-bar .custom-search-placeholder {
    display: none;
  }

  .top-headers-wrapper .site-header.default .site-header-wrapper {
    display: flex !important;
    align-items: center;
  }

  .top-headers-wrapper .site-header.default .site-header-wrapper .search-menu {
    flex: 120;
    display: flex;
    justify-content: flex-end;
  }
}

.top-headers-wrapper .site-header.default .site-header-wrapper .site-branding {
  justify-self: start;
}

.top-headers-wrapper .site-header.default .site-header-wrapper .search-menu {
  justify-self: center;
}

.top-headers-wrapper .site-header.default .site-header-wrapper .menu-wrapper {
  justify-self: end;
}

.top-headers-wrapper .site-header.default .site-header-wrapper .menu-wrapper {
  display: block;
}

#masthead.site-header {
  padding-top: 0;
  padding-bottom: 0;
}

.under-header-nav {
  height: 52px;
  background: #fff;
  border-top: 1px solid var(--Slate-200, #E2E8F0);
  border-bottom: 1px solid var(--Slate-200, #E2E8F0);
  background: var(--Primary-White, #FFF);
}

.under-header-nav .under-header-navigation {
  margin-top: 0px !important;
  display: flex;
  /*padding: 15px 0;*/
  justify-content: center;
  align-items: center;
  gap: 48px;
  align-self: stretch;
}


.main-navigation ul li a,
.main-navigation ul li span.link-nofollow{
  color: var(--Secondary-Black, var(--Primary-Black, #232323));
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.main-navigation ul ul li a,
.main-navigation ul ul li span.link-nofollow{
  color: var(--Secondary-Black, var(--Primary-Black, #232323));
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* MENU */
.menu-mainmenu {
  font-size: 13px;
  line-height: 50px !important;
}


/* ITEMS DU MENU LEVEL 0 */
#masthead .main-navigation > ul > li > a {
  color: var(--Secondary-Black, var(--Primary-Black, #232323));
  text-align: center;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: none;
  padding-left: clamp(10px, 0.98vw, 15px);
  padding-right: clamp(10px, 0.98vw, 15px);
  height: 100%;
  display: flex;
  align-items: center;
}

/* Affichage de la bordure bottom sur les items du menu level 0*/
#masthead .main-navigation > ul > li {
  cursor: pointer;
  position: relative;
  align-items: flex-start;
  padding-right: 0px;
  height: 50px;
}

#masthead .main-navigation > ul > li::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0px;
  height: 6px;
  background: #30b457;
  border-radius: 4px 4px 0 0;
  pointer-events: none;
  opacity: 0;
}

/* Affichage lorsque l'item est "actif" (sous-menu ouvert) */
#masthead .main-navigation > ul > li.active::before {
  opacity: 1;
  transform: scaleX(1);
}

/* Affichage de la barre au hover de l'item de niveau 0
 UNIQUEMENT lorsqu'aucun item n'est actif.
 Dès qu'un <li> a la classe .active, seul cet item garde la barre,
 le hover ne modifie plus l'état visuel. */
#masthead .main-navigation > ul > li:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* Affichage du chevron pour les items du menu level 0 avec sous menu */
#masthead .main-navigation>ul>li.menu-item-has-children:after{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  right: -6px;
  top: 14px;
  background: no-repeat center / contain url("../images/chevron-down.svg");
  pointer-events: none;
}


/* Images pour les items de sous-menu uniquement */
.sub-menu .menu-item-image {
width: 59px;
height: 59px;
object-fit: contain;
margin-right: 16px;
vertical-align: middle;
display: inline-block;
border: 1px solid var(--Slate-100, #F1F5F9);
background: var(--Primary-White, #FFF);
border-radius: 50%;
padding: 4px;
}

/* Surcharge pour les images dans le level-2 :
 on enlève la bordure et le border-radius pour un rendu plus léger. */
.sub-menu.level-2 .menu-item-image {
  border: none;
  border-radius: 0;
  padding: 0;
  width: 49px;
  height: 49px;
}

/* Alignement des items de sous-menu avec image */
.sub-menu li a,
.sub-menu li span {
  display: flex;
  align-items: center;
}

/* Overlay sur le body quand des sous-menus sont affichés */
body.menu-overlay .content-area {
position: relative;
}

body.menu-overlay .content-area::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(35, 35, 35, 0.40);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
}

body.menu-overlay.active .content-area::before {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

/* Quand l'overlay du mega-menu est actif, on bloque le scroll de la page
 (le scroll reste possible uniquement dans les conteneurs internes
 de type .submenu-scroll-*)
 On utilise overflow-y: scroll au lieu de hidden pour garder la scrollbar visible
 et éviter le décalage du contenu */
body.menu-overlay {
overflow-y: hidden;
width: 100%;
touch-action: none;
}

/* Tous les volets s’alignent sous la barre */

/* Container pour centrer les volets */
.under-header-nav {
position: relative;
}

#masthead .main-navigation > ul > li > .submenu-outer {
position: absolute;
/* On décale de 1px sous l'item parent pour laisser visible
  la bordure-bottom du menu principal. */
top: calc(100% + 1px);
left: 0; /* aligné avec le bord gauche de l'item parent */
background: #fff;
z-index: 1000;
}

/* Le ul.level-0 garde le style existant, mais il est désormais à l'intérieur
  de .submenu-outer > .submenu-scroll-0. On neutralise le positionnement
  absolu hérité du thème parent pour qu'il se dessine DANS la colonne. */
#masthead .main-navigation > ul > li > .submenu-outer .sub-menu.level-0 {
max-width: 90vw;
display: block;
background: #fff;
position: static;
top: auto;
left: auto;
right: auto;
padding: 24px 16px 5px !important;
}

#masthead ul li.menu-item-mobile-only {
  display: none;
}


/* 2 volets côte à côte */
#masthead .main-navigation > ul > li.has-2-levels > .submenu-outer {
left: 0;
}

/* Panneau de niveau 1 : on positionne désormais le wrapper .submenu-panel-level-1
  à droite du level-0, à la place de l'ancien ul.sub-menu.level-1. */
.sub-menu.level-0 > li > .submenu-panel-level-1 {
position: absolute;
left: calc(100% + 8px);   /* légèrement à droite du level-0 */
top: -24px;               /* aligné avec le haut du level-0 (24px = padding) */
background: #fff;
z-index: 1001;
/* pas de max-height / height ici, gérée par #masthead .submenu-panel-level-1 */
}

/* Le ul.sub-menu.level-1 à l'intérieur du panneau reste un conteneur normal,
  sans scroll ni max-height, il s'adapte à la hauteur du wrapper. */
#masthead .sub-menu.level-1 {
position: relative;
max-height: none;
overflow: visible;
}

/* Neutralise l'ancien positionnement absolu du level-1 (défini par le thème parent) :
  désormais c'est la div.submenu-panel-level-1 qui est positionnée, pas le ul. */
#masthead .sub-menu.level-0 > li > .sub-menu.level-1 {
position: static;
left: auto;
top: auto;
width: auto;
max-width: none;
background: transparent;
z-index: auto;
}

/* Ajustement du panneau level-1 par rapport au level-0 */
#masthead .sub-menu.level-0 > li > .submenu-panel-level-1 {
position: absolute;
/* remonte le panneau pour qu’il commence au même niveau que le haut du level-0
   24px = padding-top défini sur les UL des sous-menus */
top: 0px;
/* décale légèrement vers la droite pour ne plus recouvrir le level-0 */
left: calc(100% + 0px);
}

/* 3 volets côte à côte */
#masthead .main-navigation > ul > li.has-3-levels > .submenu-outer {
left: 0;
}

/* Positionnement des items dans level-1 pour permettre l'alignement de level-2 */
.sub-menu.level-1 {
position: relative; /* Pour positionner level-2 / son panneau par rapport à level-1 */
}

.sub-menu.level-1 > li {
position: relative;
}

/* Panneau de niveau 2 : wrapper à droite du level-1 (comme level-1 par rapport au level-0) */
.sub-menu.level-1 > li > .submenu-panel-level-2 {
position: absolute;
left: calc(100% + 0px);   /* aligné avec le bord droit du level-1 */
top: 0;                   /* aligné avec le haut du level-1 */
display: block;
background: #fff;
z-index: 1002;
}

/* Le ul.sub-menu.level-2 à l'intérieur du panneau reste un conteneur normal */
.submenu-panel-level-2 > .sub-menu.level-2 {
position: static;
max-height: none;
overflow: visible;
}

/* Positionnement des items dans level-2 pour permettre l'alignement de level-3 */
.sub-menu.level-2 > li {
position: relative;
}

#masthead .menu.mainmenu > li > img {
  visibility: hidden;
}

.sub-menu.level-2 > li > .sub-menu.level-3 {
position: absolute;
left: 100%; /* à droite du volet level-2 */
top: 0; /* sera ajusté pour aligner avec le haut de level-1 */
display: block;
background: #fff;
z-index: 1003;
max-height: 60vh;
}

/* Redéfinition du box-shadow pour tous les sous-menus */
.sub-menu.level-0,
.sub-menu.level-1,
.sub-menu.level-2,
.sub-menu.level-3 {
box-shadow: none !important;
}

/* Panneaux scrollables pour chaque niveau de sous-menu
 .submenu-outer : conteneur global (non scrollable, hauteur max contrôlée en JS)
 .submenu-scroll-0 / -1 / -2 : colonnes scrollables indépendantes pour chaque niveau */
.submenu-outer {
/* Hauteur max désormais gérée en JS (equalizeVoletsHeight) */
max-height: none;
/* Laisse les événements souris aux éléments internes
   (submenu-scroll, ul, li) pour que le hover se fasse
   bien sur les <li> et non sur le wrapper. */
pointer-events: none;
}

/* Wrapper principal des sous-menus (volet level-0) :
 - bordure supérieure
 - arrondi en bas à gauche (coin gauche du bloc de volets) */
.submenu-outer.submenu-column {
border-bottom-left-radius: 8px;
}

/* Bordure gauche sur les colonnes level-1 et level-2 (panneaux de droite) */
#masthead .submenu-panel-level-1.submenu-column,
#masthead .submenu-panel-level-2.submenu-column {
  border-left: 1px solid var(--Slate-200, #E2E8F0);
}

/* Arrondi en bas à droite uniquement sur la dernière colonne visible
 (level-0 seul, ou level-1, ou level-2 selon le cas) */
.submenu-column.is-last-column {
border-bottom-right-radius: 8px;
}

.submenu-scroll {
  overflow-y: auto;
  cursor: default;
}

.submenu-scroll-0 {
background-color: #F6F7F9;
}

/* Rayon bas-gauche également sur le conteneur scrollable du level-0
 pour que le fond suive l'arrondi du wrapper. */
.submenu-outer.submenu-column .submenu-scroll-0 {
border-bottom-left-radius: 8px;
}

/* Rayon bas-droit sur le conteneur scrollable de la dernière colonne visible
 (quel que soit le niveau : 0, 1 ou 2). */
.submenu-column.is-last-column .submenu-scroll {
border-bottom-right-radius: 8px;
}

/* Léger soulignement pour les items survolés du dernier niveau de sous-menu ouvert
 (la colonne marquée .is-last-column correspond toujours au niveau le plus profond visible) */
#masthead .submenu-column .sub-menu.level-0 > li:not(.active):hover > span,
#masthead .submenu-column .sub-menu.level-0 > li:not(.active):hover > a,
#masthead .submenu-column .sub-menu.level-1 > li:not(.active):hover > span,
#masthead .submenu-column .sub-menu.level-1 > li:not(.active):hover > a,
#masthead .submenu-column .sub-menu.level-2 > li:not(.active):hover > span,
#masthead .submenu-column .sub-menu.level-2 > li:not(.active):hover > a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.submenu-scroll-0,
.submenu-scroll-1,
.submenu-scroll-2 {
/* Permet d'étendre le panneau sur toute la hauteur de son volet */
height: 100%;
/* Réactive les événements souris à l'intérieur du wrapper scrollable */
pointer-events: auto;
}

/* S'assure que les <ul> et <li> internes capturent bien le hover/clic */
.submenu-outer .sub-menu.level-0,
.submenu-outer .sub-menu.level-0 > li {
pointer-events: auto;
}

/* Header des panels level-0/1/2 : titre + lien \"Voir tout\" */
.submenu-level0-header,
.submenu-level1-header,
.submenu-level2-header {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 20px 16px 0 16px;
}

.submenu-mobile-header {
display: none;
}

/* Éléments spécifiques mobile cachés par défaut (affichés seulement en mobile) */
.submenu-mobile-back,
.submenu-mobile-logo {
display: none;
}

/* Titre affiché au-dessus des panels level-0/1/2 (nom de la catégorie sélectionnée) */
.main-navigation ul .submenu-level0-title span.link-nofollow,
#offCanvasRight1 ul .submenu-level0-title span.link-nofollow,
.main-navigation ul .submenu-level1-title span.link-nofollow,
#offCanvasRight1 ul .submenu-level1-title span.link-nofollow,
.main-navigation ul .submenu-level2-title span.link-nofollow,
#offCanvasRight1 ul .submenu-level2-title span.link-nofollow {
  font-weight: 600;
  font-size: 16px;
  padding-left: 2px;
  line-height: 1.4;
  color: var(--Secondary-Black, var(--Primary-Black, #000000));
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.main-navigation ul .submenu-level0-title span.link-nofollow:hover,
.main-navigation ul .submenu-level1-title span.link-nofollow:hover,
.main-navigation ul .submenu-level2-title span.link-nofollow:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.main-navigation ul .submenu-level0-title,
.main-navigation ul .submenu-level1-title,
.main-navigation ul .submenu-level2-title {
  overflow: hidden;
}

/* Lien \"Voir tout\" à droite du titre (tous niveaux) */
#masthead #submenu-level0-view-all,
#masthead #submenu-level1-view-all,
#masthead #submenu-level2-view-all {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 15px;
  color: #00B761;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
  text-transform: none;
  border: 2px solid #00B761;
  border-radius: 20px;
  margin-left: 15px;
  height: 26px;
  line-height: 1.3;
}

#masthead #submenu-level0-view-all:hover,
#masthead #submenu-level1-view-all:hover,
#masthead #submenu-level2-view-all:hover {
  background: #00B761;
  color: #fff;
}

/* Largeur commune des colonnes level-0 et level-1 */
.submenu-column {
width: 350px;
max-width: 90vw;
}


/* Bordure droite pour le sous-menu level-0 */
#masthead .main-navigation > ul > li > .sub-menu.level-0 {
border-right: 1px solid var(--Slate-200, #E2E8F0);
}

#masthead .main-navigation > ul > ul {
top: 0px;
}


/* Sous-menu level-0 si le parent a has-2-levels OU has-3-levels */
#masthead .main-navigation > ul > li.has-2-levels > .sub-menu.level-0,
#masthead .main-navigation > ul > li.has-3-levels > .sub-menu.level-0 {
background: var(--Slate-50, #F6F7F9);
}


/***********************************************************************************/
/*************************   GESTION  DES SOUS MENUS (UL)     ****************/
/*****/*****************************************************************************/

#masthead .main-navigation ul {
padding: 24px 16px !important;
}

#masthead .main-navigation ul ul{
padding: 24px 16px !important;
}

/* Level-2 : on réduit le padding-left du UL lui-même pour ce niveau uniquement */
#masthead .main-navigation ul ul.sub-menu.level-2 {
padding-left: 8px;
}

/* Gestion de l'ouverture des sous-menus */

/* Sous-menus de niveau 0 : fermés par défaut, ouverts uniquement via .active (clic)
 On masque/affiche le wrapper .submenu-outer qui contient désormais le level-0. */
#masthead .main-navigation > ul > li.menu-item-has-children > .submenu-outer {
display: none;
}

/* Level-0 : visible quand le parent est actif, hauteur limitée par JS (equalizeVoletsHeight) */
#masthead .main-navigation > ul > li.menu-item-has-children.active > .submenu-outer {
display: block;
}

#masthead .main-navigation ul ul {
width: initial;
}

/* Le thème parent applique une règle générique du type
 .main-navigation > ul li ul { opacity: 0; visibility: hidden; ... }
 qui peut toucher nos sous-menus encapsulés. On force ici l'opacity/visibility
 à 1/visible pour les ul contenus dans nos wrappers personnalisés. */
#masthead .main-navigation > ul > li.menu-item-has-children.active .submenu-outer .sub-menu.level-0 {
opacity: 1 !important;
visibility: visible !important;
background-color: #F6F7F9;
}

#masthead .submenu-scroll-1 > .sub-menu.level-1,
#masthead .submenu-scroll-2 > .sub-menu.level-2 {
/* Par défaut, les UL level-1 et level-2 sont cachés, on n'affiche que
   ceux liés au <li> actif via les règles plus bas. */
opacity: 0;
visibility: hidden;
background-color: white;
}

/* UL level-1 du panneau correspondant au <li> level-0 actif
 ET UL level-2 du panneau correspondant au <li> level-1 actif :
 seuls ceux-ci ont une opacity à 1, les autres restent à 0. */
.sub-menu.level-0 > li.active > .submenu-panel-level-1 .submenu-scroll-1 > .sub-menu.level-1,
.sub-menu.level-1 > li.active > .submenu-panel-level-2 .submenu-scroll-2 > .sub-menu.level-2 {
opacity: 1 !important;
visibility: visible !important;
}

/* Panneau level-1 : conteneur visuel, scroll dans .submenu-scroll-1 */
#masthead .submenu-panel-level-1 {
  max-height: none; /* hauteur contrôlée en JS */
  overflow: visible;
  /* Ne pas absorber les clics sur les zones vides du panneau level-1 */
  pointer-events: none;
}

/* Wrapper scrollable pour le contenu des niveaux 0/1/2
 - overflow-y: overlay (quand supporté) affiche la barre AU-DESSUS du contenu
   sans réduire la largeur utile.
 - pas de margin-right pour ne plus décaler le contenu. */
.submenu-scroll.submenu-scroll-0,
.submenu-scroll.submenu-scroll-1,
.submenu-scroll.submenu-scroll-2 {
  max-height: none;           /* hauteur contrôlée en JS */
  overflow-y: auto;
  overflow-y: overlay;        /* WebKit/Blink : scrollbar en overlay */
  overflow-x: hidden;
}

/* Le ul.level-1 garde une hauteur auto dans le wrapper scrollable */
.submenu-scroll-1 > .sub-menu.level-1 {
  height: auto;
  max-height: none;
  overflow: visible;
  /* Réactive les événements souris sur le contenu réel */
  pointer-events: auto;
}

/* Scrollbar personnalisée pour le contenu scrollable level-1 */
.submenu-scroll-0,
.submenu-scroll-1,
.submenu-scroll-2 {
  /* Firefox : couleur du thumb (≈ #232323 à 50% d'opacité) + track invisible */
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 35, 35, 0.5) transparent;
}

.submenu-scroll-0::-webkit-scrollbar-track,
.submenu-scroll-1::-webkit-scrollbar-track,
.submenu-scroll-2::-webkit-scrollbar-track {
  background: transparent;
}

.submenu-scroll-0::-webkit-scrollbar-thumb,
.submenu-scroll-1::-webkit-scrollbar-thumb,
.submenu-scroll-2::-webkit-scrollbar-thumb {
  background-color: rgba(35, 35, 35, 0.5);
  border-radius: 999px;
  border: 0;
}

/* Panneau level-2 : conteneur visuel, scroll dans .submenu-scroll-2 */
#masthead .submenu-panel-level-2 {
  max-height: none; /* hauteur contrôlée en JS */
  overflow: visible;
  /* Ne pas absorber les clics sur les zones vides du panneau level-2
    (les événements doivent être gérés par les éléments internes) */
  pointer-events: none;
}

/* Wrapper scrollable pour le contenu level-2 */
/* Le ul.level-2 garde une hauteur auto dans le wrapper scrollable */
.submenu-scroll-2 > .sub-menu.level-2 {
height: auto;
max-height: none;
overflow: visible;
pointer-events: auto;
}

/* (Ancienne règle globalisante d'override de l'opacity pour level-1, remplacée
 par le ciblage ci-dessus sur le seul <li> actif) */

/* Affichage des panneaux level-1 :
 - par défaut tous cachés
 - on affiche uniquement celui de l'item marqué .active
 (la logique JS garantit qu'un seul li.level-0 est .active à la fois) */
.sub-menu.level-0 > li > .submenu-panel-level-1 {
display: none;
}

.sub-menu.level-0 > li.active > .submenu-panel-level-1 {
display: block;
}

/* Affichage des panneaux level-2 :
 - par défaut tous cachés
 - on affiche uniquement celui de l'item level-1 marqué .active */
.sub-menu.level-1 > li > .submenu-panel-level-2 {
display: none;
}

.sub-menu.level-1 > li.active > .submenu-panel-level-2 {
display: block;
}


/***********************************************************************************/
/*************************   GESTION ITEMS (LI) DES SOUS MENUS     ****************/
/**********************************************************************************/

#masthead .main-navigation ul ul > li +li {
margin-bottom: 8px;
margin-top: 8px;
}

/* Supprime le margin-top pour les items des niveaux 1 et 2 */
#masthead .main-navigation ul ul .sub-menu.level-1 > li + li,
#masthead .main-navigation ul ul .sub-menu.level-2 > li + li {
margin-top: 0;
}

#masthead .main-navigation ul ul li {
  height: 64px;
  display: flex;
  align-items: center;
  align-self: stretch;
  -webkit-transition: none !important;
  transition: none !important;
  position: relative; /* Pour positionner les sous-menus suivants */
  cursor: pointer;
  padding: 0;
}

/* Level-2 : hauteur auto (on annule la hauteur fixe de la règle générique ci-dessus) */
#masthead .main-navigation .sub-menu.level-2 > li {
height: 64px;
padding: 0px 8px;
}

/* Style appliqué à l'item de sous-menu sélectionné au clic */
.sub-menu.level-0 > li.active {
  border-radius: 8px;
  border: 1px solid var(--Slate-100, #F1F5F9);
  background: var(--Primary-White, #FFF);
}

/* Style pour l'item sélectionné dans le level-1 */
.sub-menu.level-1 > li.active {
  border-radius: 8px;
  border: 1px solid var(--Slate-100, #F1F5F9);
  background: var(--Slate-50, #F6F7F9);
}

.submenu-scroll-0 > ul.sub-menu.level-0:not(:has(> li.menu-item-has-children)),
.submenu-scroll-0:not(:has(> ul.sub-menu.level-0 > li.menu-item-has-children)) > .submenu-level0-header,
.submenu-scroll-0:not(:has(> ul.sub-menu.level-0 > li.menu-item-has-children)) {
  background-color: #fff !important;
}

.sub-menu .image_with_background img {
  width: 70px;
  height: 70px;
  border: none;
  margin-right: 3px;
  padding: 0;
}

#masthead .submenu-scroll-0:not(:has(> ul.sub-menu.level-0 > li.menu-item-has-children)) > ul,
.has-2-levels .sub-menu.level-0 {
  padding: 16px 12px 0px !important;
}

#masthead .main-navigation ul ul li > span,
#masthead .main-navigation ul ul li > a{
  color: var(--Secondary-Black, var(--Primary-Black, #232323));
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding: 12px 8px;
  transition: none !important;
}

#masthead .main-navigation ul ul li.active > span,
#masthead .main-navigation ul ul li.active > a{
  padding: 12px 7px;
}

#masthead .main-navigation ul ul li {
position: static;
height: 75px;
}

/* Padding bottom supplémentaire pour les items des levels 0 et 1
 afin d'aérer le contenu verticalement dans les colonnes 1 et 2. */
.sub-menu.level-0 > li,
.sub-menu.level-1 > li {
  margin-bottom: 8px;
}

/*Pour supprimer le border bottom au hover sur le lien*/
.main-navigation ul ul li a,
.main-navigation ul ul li span.link-nofollow {
background-image: none !important;
}

/* Neutralise le margin appliqué par le thème parent sur les li.has-children de niveaux 1+ */
.main-navigation ul ul li.menu-item-has-children > a {
margin: 0 !important;
}

.sub-menu.level-0 > li > a:hover,
.sub-menu.level-0 > li > span.link-nofollow:hover {
border-bottom: none !important;
}

.sub-menu.level-0 > li.menu-item-has-children > a,
.sub-menu.level-0 > li.menu-item-has-children > span,
.sub-menu.level-1 > li.menu-item-has-children > a,
.sub-menu.level-1 > li.menu-item-has-children > span {
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 0px;
width: 100%;
}


.sub-menu.level-0 > li.menu-item-has-children > a .submenu-item-label,
.sub-menu.level-0 > li.menu-item-has-children > span .submenu-item-label,
.sub-menu.level-1 > li.menu-item-has-children > a .submenu-item-label,
.sub-menu.level-1 > li.menu-item-has-children > span .submenu-item-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  flex: 1;
}

.sub-menu.level-0 > li > a,
.sub-menu.level-0 > li > span,
.sub-menu.level-1 > li > a,
.sub-menu.level-1 > li > span,
.sub-menu.level-2 > li > a,
.sub-menu.level-2 > li > span {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1 1 auto;
}


.sub-menu.level-0 > li.menu-item-has-children > a .submenu-item-icon,
.sub-menu.level-0 > li.menu-item-has-children > span .submenu-item-icon,
.sub-menu.level-1 > li.menu-item-has-children > a .submenu-item-icon,
.sub-menu.level-1 > li.menu-item-has-children > span .submenu-item-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: no-repeat center / contain url("/wp-content/themes/shopkeeper-child/images/chevron-right.svg");
}

#masthead .main-navigation ul ul li.menu-item-has-children:after {
  display: none;
}

/* Icône chevron pour les sous-menus de niveau 2+ (colonnes plus profondes) */
#masthead .main-navigation ul ul ul li.menu-item-has-children:after {
/* Icône désactivée pour les niveaux 2+ (on la gère autrement via HTML) */
display: none;
}

/****************************************************************/
/*********************     STICKY MENU     **********************/
/****************************************************************/
.sticky_header .sub-header {
position: relative;
z-index: 1000;
top: 145px;
width: 100%;
}

.site-header.sticky .main-navigation .menu-mainmenu {
line-height: 58px;
height: 58px;
display: inline-block;
margin-top: -10px;
}

.site-header.default.sticky {
padding-top: 10px !important;
padding-bottom: 10px !important;
}


/****************************************************************/
/*********************   MOBILE MENU     ************************/
/****************************************************************/

/*Canavs right*/
/*100% width for small screen */
@media only screen and (max-width: 39.9375em) {
.off-canvas.position-right {
  width: 100%;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}
}

.mobile-navigation {
padding: 0 !important;
border-bottom: none;
}

/* ------------------------------------------------------------------ */
/*  Premier niveau du menu dans l'offcanvas mobile                    */
/*  => même logique visuelle que les sous-menus (label + chevron)    */
/* ------------------------------------------------------------------ */

/* Ligne de premier niveau : texte + image à gauche, chevron à droite */
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li > a,
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li > span {
  padding: 14px 16px !important;
  font-size: 14px;
  font-weight: 600;
}

/* Lien de niveau 0 dans le menu offcanvas (image + texte à gauche, chevron à droite) */
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li.menu-item-has-children > a.gtm-menu,
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li.menu-item-has-children > span.gtm-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* image + texte collés à gauche */
  width: 100%;
}

/* Image du lien : à gauche avec un petit spacing */
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li.menu-item-has-children > a.gtm-menu .menu-item-image,
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li.menu-item-has-children > span.gtm-menu .menu-item-image {
  flex: 0 0 auto;
}

/* Chevron à droite : on le pousse avec margin-left:auto */
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li.menu-item-has-children > a.gtm-menu::after,
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li.menu-item-has-children > span.gtm-menu::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: auto; /* pousse le chevron tout à droite */
  background: no-repeat center / contain url("/wp-content/themes/shopkeeper-child/images/chevron-right.svg");
}

/* Bloc "label" à gauche (image + texte) */
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li > a .menu-item-image,
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li > span .menu-item-image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-right: 16px;
  vertical-align: middle;
  display: inline-block;
  background: var(--Primary-White, #F2EFED);
  border-radius: 50%;
  padding: 4px;
}

/* Icône chevron à droite – même sprite que .submenu-item-icon */
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li.menu-item-has-children > a::after,
.menu-offcanvas .mobile-navigation.primary-navigation > ul > li.menu-item-has-children > span::after {
content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  background: no-repeat center / contain url("/wp-content/themes/shopkeeper-child/images/chevron-right.svg");
  margin-left: auto;
}

.mobile-navigation ul .sub-menu li:not(.menu-item-has-children):first-child > a,
.mobile-navigation ul .sub-menu li:not(.menu-item-has-children):first-child > span {
margin-top: 0px;
}

.mobile-navigation ul li .more
{
top : 18px;
right : 20px;
}

/*Button close size*/
.off-canvas .menu-close .close-button {
font-size: 36px !important;
background: inherit;
color : #000 !important;
}

.mobile-navigation .mobile-nav-li-fake-has-children {
height: 33px;
}

.mobile-navigation .mobile-nav-li-fake-has-children a,
.mobile-navigation .mobile-nav-li-fake-has-children span {
font-weight: bold !important;
padding: 8px 0px 0px 35px !important;
}

.mobile-navigation ul .sub-menu li.menu-item-has-children > a,
.mobile-navigation ul .sub-menu li.menu-item-has-children > span {
margin-top: 0px;
}

.mobile-navigation ul .sub-menu {
transition: none;
}

/* Sous-menu mobile visible quand l'item est ouvert */
.mobile-navigation ul li.current .sub-menu,
.mobile-navigation ul .sub-menu.open {
visibility: visible;
opacity: 1;
max-height: none; /* rétablit la hauteur naturelle du sous-menu */
}

.mobile-navigation ul li.current {
  background-color: white !important;
  border-bottom-width: 0px !important;
}


/* Mega-menu dans le offcanvas mobile
 (même structure HTML que le header, mais dans .menu-offcanvas) */
@media only screen and (max-width: 63.95em) {
/* Structure générale de l'offcanvas mobile :
   - header fixe en haut
   - contenu (#mobiles-menu-offcanvas) scrollable verticalement */
#offCanvasRight1 {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}

#mobiles-menu-offcanvas {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu-offcanvas .main-navigation {
  padding: 0;
}

.menu-offcanvas .menu-mainmenu {
  display: flex;
  flex-direction: column;
  line-height: normal;
  height: auto;
  margin: 0;
}

.menu-offcanvas .menu-mainmenu > li {
  border-bottom: 1px solid rgba(48, 44, 46, 0.1);
}

.menu-offcanvas .menu-mainmenu > li > a {
  display: block;
  padding: 14px 16px;
  text-align: left;
}

/* Panneau level-0 dans l'offcanvas :
   - occupe tout l'espace du menu offcanvas (plein écran interne)
   - s'affiche par-dessus la liste principale quand l'item est ouvert */
.menu-offcanvas {
  position: relative;
}

/* On s'assure que les ancêtres immédiats ne deviennent pas le
   conteneur de positionnement de .submenu-outer (pas de position:relative)
   afin que le panneau level-0 soit bien positionné par rapport
   à .menu-offcanvas et non par rapport au <li>. */
.menu-offcanvas .mobile-navigation,
.menu-offcanvas .mobile-navigation > ul,
.menu-offcanvas .mobile-navigation ul > li {
  position: static !important;
  overflow: visible;
}

.menu-offcanvas .mobile-navigation ul > li > .submenu-outer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Hauteur plein écran pour le panneau level-0 dans l'offcanvas */
  height: 100vh;
  max-height: 100vh;
  background: #fff;
  z-index: 2100; /* au-dessus de la liste principale du menu mobile */
  overflow: hidden; /* le scroll est géré par .submenu-scroll-0 interne */
  pointer-events: auto;
}

/* À l'intérieur du panneau level-0 mobile :
   - .submenu-scroll-0 occupe toute la hauteur disponible
   - le <ul> du level-0 et le bloc commercial se succèdent en flux normal
     (le bloc commercial apparaît bien sous la UL, pas par-dessus) */
.menu-offcanvas .mobile-navigation ul > li > .submenu-outer .submenu-scroll-0 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

/* En mobile, le UL de level-0 doit prendre toute la largeur,
   sans créer de scroll horizontal. */
.menu-offcanvas .mobile-navigation ul > li > .submenu-outer .sub-menu.level-0 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.menu-offcanvas .mobile-navigation ul > li > .submenu-outer .submenu-scroll-0 > ul.sub-menu.level-0 {
  flex: 0 0 auto;
}

.submenu-commercial-block {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

/* Cacher les blocs megamenu (wrappers & blocs commerciaux)
   directement enfants des items de niveau 0 dans le menu mobile */
.menu-offcanvas .mobile-navigation ul > li > div {
  display: none !important;
}

  /* Mais les afficher quand l'item est ouvert (current/active) pour
    que le sous-menu de level-0 apparaisse au-dessus du main menu */
  .menu-offcanvas .mobile-navigation ul > li.current > div,
  .menu-offcanvas .mobile-navigation ul > li.active > div {
    display: block !important;
  }
}



@media only screen and (max-width: 63.95em) and (min-width: 40.063em) {

.main-navigation ul li.menu-item-has-children>a {
padding: 0px;
}

#masthead.site-header {
padding-top: 0;
height: 50px;
padding-bottom: 0;
/* Suppression de l'effet d'ombre du header sur cette plage de résolution */
box-shadow: none;
}

.site-branding {
margin-top: 10px;
}

.site-header.default.sticky {
padding-top: 0px !important;
padding-bottom: 0px !important;
}


}

.mobile-navigation {
padding-top: 20px;
padding-bottom: 0;
border-bottom: none;
}

.mobile-navigation:nth-child(2) {
padding-top: 0;
}

/* Masquer les images sur les items du menu principal (niveau 0) */
.main-navigation > ul > li > a .menu-item-image {
display: none;
}

/* Afficher les images uniquement dans les sous-menus */
.sub-menu .menu-item-image {
display: inline-block;
}

/* ===================================================================== */
/* Surcharges le style de js-composer pour simplifier l'affichage de row dans les mises en avants */
/* ===================================================================== */

.vc_row {
margin: 0;
}

/* ===================================================================== */
/* Surcharges ciblées pour le panneau scrollable niveau 1                */
/* ===================================================================== */

/* Le thème parent cible tous les ul imbriqués avec :
 .main-navigation ul ul ul { position:absolute; top:0; ... }
 Ce sélecteur matche aussi notre ul.sub-menu.level-1 parce qu'il est à
 l'intérieur de main-navigation > ul > li > ul.level-0 > li > ul.level-1.
 On force donc ce seul cas (level-1) à revenir en position statique. */
.main-navigation ul ul ul.sub-menu.level-1 {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
}

/* Même problème pour le level-2 :
 le thème parent applique un positionnement absolu sur les ul imbriqués
 (type .main-navigation ul ul ul ul { ... }) qui décale notre
 ul.sub-menu.level-2 à droite de son panneau .submenu-panel-level-2.
 On force ici ce ul.level-2 à rester statique à l'intérieur de son wrapper. */
.main-navigation ul ul ul ul.sub-menu.level-2 {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
}

/* ===================================================================== */
/* Layout mobile du mega-menu (empilé)                                   */
/* ===================================================================== */

@media only screen and (max-width: 63.95em) {

#offCanvasRight1 .mobile-navigation #submenu-level0-view-all,
#offCanvasRight1 .mobile-navigation #submenu-level1-view-all,
#offCanvasRight1 .mobile-navigation #submenu-level2-view-all {
  font-size: 14px;
  font-weight: 600;
  padding: 0px 5px;
  color: #00B761;
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
  text-transform: none;
  padding: 3px 5px;
  border: 2px solid #00B761;
  border-radius: 20px;
}

#offCanvasRight1 .mobile-navigation ul ul li.menu-item > a,
#offCanvasRight1 .mobile-navigation ul ul li.menu-item > span.link-nofollow {
  color: var(--Secondary-Black, var(--Primary-Black, #232323));
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  height: 70px;
  display: flex;
  align-items: center;
}

#offCanvasRight1 .mobile-navigation ul li .sub-menu {
  padding: 14px 16px 5px !important;
}

#offCanvasRight1 .mobile-navigation .submenu-level0-title:active,
#offCanvasRight1 .mobile-navigation .submenu-level1-title:active,
#offCanvasRight1 .mobile-navigation .submenu-level2-title:active {
  text-decoration: underline;
}

#offCanvasRight1 .mobile-navigation ul li .sub-menu.level-1,
#offCanvasRight1 .mobile-navigation ul li .sub-menu.level-2 {
  margin-bottom: 100px;
}

/* Verrouiller le scroll de la page quand le mega-menu mobile est ouvert */
body.menu-mobile-open {
  overflow: hidden;
  touch-action: none;
}

.mobile-navigation .more {
  display: none !important;
}

/* Quand le menu mobile est ouvert, on transforme #masthead
   en panneau plein écran scrollable. */
body.menu-mobile-open #offCanvasRight1 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: #fff;
  overflow-y: hidden;
}

/* S'assurer que le menu offcanvas passe au-dessus du header sticky */
#offCanvasRight1.off-canvas.menu-offcanvas {
  z-index: 9999; /* plus haut que le header */
}

/*Items second niveau du menu*/
.mobile-navigation > ul > li > ul > li > a,
.mobile-navigation > ul > li > ul > li > span,
.mobile-navigation > ul > li > ul > li.menu-item-has-children > a,
.mobile-navigation > ul > li > ul > li.menu-item-has-children > span {
  font-size: 13px;
}

/* Items premier niveau du menu (tous contextes) */
.mobile-navigation > ul > li {
  border-bottom: 1px solid rgba(48, 44, 46, 0.1);
}

.mobile-navigation > ul > li > a,
.mobile-navigation > ul > li > span,
.mobile-navigation > ul > li.menu-item-has-children > a,
.mobile-navigation > ul > li.menu-item-has-children > span {
  font-size: 14px;
  padding: 20px 0px 20px 35px !important;
}

.mobile-navigation > ul > li > ul.sub-menu.open {
  padding: 0px 0 10px 35px;
}

.mobile-navigation > ul > li.background-primary-color.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat {
  line-height: initial;
  background: white;
}

.mobile-navigation ul li.menu-item,
.mobile-navigation ul .sub-menu li.menu-item {
  margin: 0 7px;
  display: flex;
}

#offCanvasRight1 .submenu-commercial-block {
  padding-bottom: 75px;
}

/* En mobile, le wrapper level-0 reste dans le flux sous le main-menu.
   C'est #masthead qui prend plein écran, pas le panneau lui-même. */
#offCanvasRight1 .main-navigation > ul > li > .submenu-outer {
  position: static;
  width: 100%;
  max-width: 100%;
  max-height: none;
  background: #fff;
  overflow: visible;
}

/* Classe générique pour bloquer le scroll sur un conteneur scrollable de submenu */
#offCanvasRight1 .submenu-scroll-0.disable_scroll,
#offCanvasRight1 .submenu-scroll-1.disable_scroll {
  overflow-y: hidden;
}

#offCanvasRight1 #submenu-level0-view-all:active,
#offCanvasRight1 #submenu-level1-view-all:active,
#offCanvasRight1 #submenu-level2-view-all:active {
  background: #00B761;
  color: #fff;
}

/* Barre logo + croix toujours visible */
#offCanvasRight1 .submenu-mobile-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
}

/* Header titre + "Voir tout" toujours visible sous la barre mobile */
#offCanvasRight1 .submenu-level0-header,
#offCanvasRight1 .submenu-level1-header,
#offCanvasRight1 .submenu-level2-header {
  position: sticky;
  top: 74px; /* à ajuster selon la hauteur réelle de .submenu-mobile-header */
  z-index: 19;
  background: #fff;
  padding-bottom: 5px;
  height: 45px;
}

/* Shadow quand le contenu a été scrollé */
#offCanvasRight1.has-scroll-shadow > .submenu-mobile-header,
#offCanvasRight1 .submenu-scroll-0.has-scroll-shadow .submenu-level0-header,
#offCanvasRight1 .submenu-scroll-1.has-scroll-shadow .submenu-level1-header,
#offCanvasRight1 .submenu-scroll-2.has-scroll-shadow .submenu-level2-header {
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Barre d'entête mobile du sous-menu (logo + croix) */
.submenu-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.submenu-mobile-logo {
  display: flex;
  align-items: center;
}

.submenu-mobile-logo .mobile-logo-img {
  max-height: 50px;
  width: auto;
  display: block;
}

#offCanvasRight1 .submenu-mobile-close {
  width: 40px;
  height: 40px;
  background: transparent;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--Slate-200, #E2E8F0);
  border-radius: 10px;
}

.submenu-mobile-close::before,
.submenu-mobile-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #000;
  transform-origin: center;
}

.submenu-mobile-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.submenu-mobile-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Boutons retour mobile dans les headers level-1/2 */
#offCanvasRight1 .submenu-mobile-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  margin-left: 4px;
  margin-right: 14px;
  background: transparent;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--Slate-200, #E2E8F0);
  border-radius: 10px;
}

.submenu-mobile-back .submenu-item-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) rotate(90deg); /* centré + chevron gauche */
  background: no-repeat center / contain url("/wp-content/themes/shopkeeper-child/images/chevron.svg");
  display: block;
}

/* En mobile, aligne le lien \"Voir tout\" à droite dans les headers de sous-menus */
.submenu-level0-header,
.submenu-level1-header,
.submenu-level2-header {
  justify-content: space-between;
  padding: 0px 16px;
}

#submenu-level0-view-all,
#submenu-level1-view-all,
#submenu-level2-view-all {
  margin-left: auto;
}

/* Sur mobile, on masque under-header-nav par défaut
   et on ne l'affiche que quand le menu mobile est ouvert. */
.under-header-nav {
  display: none;
}

#masthead ul li.menu-item-mobile-only {
  display: inline-block;
}

#offCanvasRight1 .main-navigation > ul > li > .submenu-outer .sub-menu.level-0,
#offCanvasRight1 .main-navigation > ul > li > .submenu-outer .sub-menu.level-1,
#offCanvasRight1 .main-navigation > ul > li > .submenu-outer .sub-menu.level-2 {
max-width: 100%;
background-color: white !important;
}

.submenu-scroll-0 {
background-color: white;
}

.sub-menu.level-0 > li:active, .sub-menu.level-1 > li:active {
  padding-bottom: 0;
}

.mobile-navigation > ul {
  margin: 5px 0;
}

/* Sur mobile, appliquer le même style lorsqu'on maintient le doigt sur l'item */
.mobile-navigation.primary-navigation .sub-menu.level-0 > li > a:active,
.mobile-navigation.primary-navigation .sub-menu.level-0 > li > span:active,
.mobile-navigation.primary-navigation .sub-menu.level-1 > li > a:active,
.mobile-navigation.primary-navigation .sub-menu.level-1 > li > span:active,
.mobile-navigation.primary-navigation .sub-menu.level-2 > li > a:active,
.mobile-navigation.primary-navigation .sub-menu.level-2 > li > span:active {
  border-radius: 8px !important;
  background: var(--Slate-50, #F6F7F9) !important;
  transition: none !important;
  padding: 14px 0px !important;
}

.mobile-navigation.primary-navigation ul > li > a:active,
.mobile-navigation.primary-navigation ul > li > span:active {
  border-radius: 8px !important;
  border: 1px solid var(--Slate-100, #F1F5F9) !important;
  background: var(--Slate-50, #F6F7F9) !important;
  transition: none !important;
  padding: 14px 15px !important;
}

/* Colonnes à 100% de largeur en mobile (toutes) */
.submenu-column {
  width: 100%;
  max-width: 100%;
}

/* Panneaux level-1 et level-2 en superposition au-dessus du niveau parent */
.sub-menu.level-0 > li > .submenu-panel-level-1,
.sub-menu.level-1 > li > .submenu-panel-level-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 2100; /* au-dessus de la liste parente à l'intérieur de .submenu-outer */
}

#offCanvasRight1 .sub-menu.level-0 > li > .submenu-panel-level-1,
#offCanvasRight1 .sub-menu.level-1 > li > .submenu-panel-level-2 {
left: 0;
}

/* Supprimer la bordure gauche des colonnes level-1/2 en mobile */
#offCanvasRight1 .submenu-panel-level-1.submenu-column,
#offCanvasRight1 .submenu-panel-level-2.submenu-column {
  border-left: none;
}

/* Annuler le radius bas-droit géré via .is-last-column en desktop */
.submenu-column.is-last-column,
.submenu-column.is-last-column .submenu-scroll {
  border-bottom-right-radius: 0;
}

/* 1) On positionne .submenu-outer : c'est NOTRE conteneur plein écran */
#offCanvasRight1 .main-navigation > ul > li > .submenu-outer {
  position: absolute;   /* ou relative si déjà pleine page */
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
}

/* 2) On s'assure que level-0 N'EST PAS un conteneur de positionnement */
#offCanvasRight1 .sub-menu.level-0,
#offCanvasRight1 .sub-menu.level-0 > li {
  position: static !important;   /* très important */
}

/* 3) Panel level-1 : absolu par rapport à .submenu-outer (pas à li/ul) */
#offCanvasRight1 .sub-menu.level-0 > li > .submenu-panel-level-1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  background: #fff;
  z-index: 2200;
}

/* IMPORTANT : level-1 de base ne doit pas être conteneur de positionnement */
#offCanvasRight1 .sub-menu.level-1,
#offCanvasRight1 .sub-menu.level-1 > li {
  position: static !important;
}

/* Level-2 : même logique, plein écran au-dessus du panel level-1 */
#offCanvasRight1 .sub-menu.level-1 > li > .submenu-panel-level-2 {
  position: absolute;
  top: 0;
  left: 0;   /* override des règles desktop (calc(100% + ...)) */
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  background: #fff;
  z-index: 2300; /* > level-1 */
}

.menu-offcanvas .mobile-navigation ul > li > a,
.menu-offcanvas .mobile-navigation ul > li > span,
.mobile-navigation ul > li > a,
.mobile-navigation ul > li > span {
  text-transform: none !important;
}

#offCanvasRight1 > .submenu-mobile-header {
  padding: 12px 16px 0px;
}

#offCanvasRight1 .mobile-navigation > ul > li {
  border-bottom: none;
}

#offCanvasRight1 .mobile-navigation > ul > li > a,
#offCanvasRight1 .mobile-navigation > ul > li > span {
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Sous-menu calendrier en 1 colonne en mobile + pastille + texte sur une seule ligne */
#offCanvasRight1 .mobile-navigation .custom-menu-sow-calendar .sub-menu.level-0 {
  display: flex;
  flex-wrap: wrap;
}

#offCanvasRight1 .mobile-navigation .custom-menu-sow-calendar .sub-menu.level-0 > li {
  width: 100%;             /* 1 colonne au lieu de 2 */
  box-sizing: border-box;
  display: flex;           /* pastille + lien sur la même row */
  align-items: center;
  padding-left: 5px;
  position: relative;
}

#offCanvasRight1 .menu-item-image {
  width: 64px;
  height: 64px;
}

#offCanvasRight1 .sub-menu.level-2 .menu-item-image {
  width: 59px;
  height: 59px;
}
}

@media only screen and (max-width: 63.95em) {
  #offCanvasRight1 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
  }

  #mobiles-menu-offcanvas {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media only screen and (max-width: 39.9375em) {
	.off-canvas.position-right {
		width: 100%;
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
}