/* Contexte et pile d'empilement sûrs */
#mainNav {
  position: relative;
  z-index: 100;
}

#menuItems {
  position: relative;
  z-index: 200;
  overflow: visible !important;
}

.ituContainer {
  overflow: visible !important;
}

/* Les LI parents doivent être relatifs */
#menuItems #real-nav-items>li,
#menuItems #displayed-nav-items>li,
#menuItems .displayed-nav-items>li {
  position: relative;
}

/* Sous-menus (ul ou .dropdown-menu) — règle de base (niveau 1) */
#menuItems li>ul,
#menuItems li>.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none; /* contrôlé par .is-open ou :hover */
  background: #fff;
  min-width: 280px;
  max-width: 460px; /* défaut (non-mega) */
  margin: 0;
  padding: 0 !important; /* padding géré sur les <a> */
  list-style: none;
  z-index: 9999;
  border-radius: 0;
  box-shadow:
    0 8px 1.5rem rgba(169, 202, 216, .078),
    -8px 0 1.5rem -6px rgba(169, 202, 216, .078),
    8px 0 1.5rem -6px rgba(169, 202, 216, .078);
}

/* Items */
#menuItems li>ul>li>a,
#menuItems li>.dropdown-menu>li>a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px !important;
  text-decoration: none;
  color: black;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.25;
  border-left: 2px solid transparent;
  transition: padding .15s ease, background .15s ease, border-color .15s ease;
}

/* Hover : petit slide + fond bleu clair + barre bleue */
#menuItems li>ul>li>a:hover,
#menuItems li>.dropdown-menu>li>a:hover {
  background: #e5f5fb !important;
  color: black !important;
  padding-left: 30px;
  border-left: 3px solid #009cd6 !important;
}

/* Ouverture (JS ajoute .is-open) */
#menuItems li.is-open>ul,
#menuItems li.is-open>.dropdown-menu {
  display: block;
}

/* Hover desktop : UNIQUEMENT sur le menu affiché (niveau 1) */
@media (hover: hover) and (pointer: fine) {
  #menuItems .displayed-nav-items li:hover>ul,
  #menuItems .displayed-nav-items li:hover>.dropdown-menu {
    display: block;
  }
}

/* "More" (si c’est un <span>) */
#menuItems .more-dropdown>span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
}

/* Aligner à droite les derniers sous-menus (niveau 1) */
#menuItems .displayed-nav-items>li:nth-last-child(-n+2)>ul,
#menuItems .displayed-nav-items>li:nth-last-child(-n+2)>.dropdown-menu {
  left: auto;
  right: 0;
}

/* Barre bleue du parent (si sous-menu) */
#menuItems>ul>li>a,
#menuItems>ul>li>span {
  position: relative;
}

#menuItems .displayed-nav-items>li:has(> ul):hover>a::after,
#menuItems .displayed-nav-items>li:has(> .dropdown-menu):hover>a::after,
#menuItems .displayed-nav-items>li:has(> ul).is-open>a::after,
#menuItems .displayed-nav-items>li:has(> .dropdown-menu).is-open>a::after,
#menuItems .displayed-nav-items>li:has(> ul):hover>span::after,
#menuItems .displayed-nav-items>li:has(> .dropdown-menu):hover>span::after,
#menuItems .displayed-nav-items>li:has(> ul).is-open>span::after,
#menuItems .displayed-nav-items>li:has(> .dropdown-menu).is-open>span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #009cd6;
  bottom: 5px;
}

/* ===== Mega dropdown via classes ===== */
#menuItems li>.dropdown-menu.mega-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  column-gap: 20px;
  row-gap: 6px;
  min-width: 440px;
  max-width: 720px;
  padding: 8px 12px !important;
}

#menuItems li>.dropdown-menu.mega-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  column-gap: 20px;
  row-gap: 6px;
  min-width: 660px;
  max-width: 980px;
  padding: 8px 12px !important;
}

#menuItems li>.dropdown-menu.mega-2>li,
#menuItems li>.dropdown-menu.mega-3>li { break-inside: avoid; }

#menuItems li>.dropdown-menu.mega-2>li>a,
#menuItems li>.dropdown-menu.mega-3>li>a { width: 100%; box-sizing: border-box; }

/* Mobile : repasse en 1 colonne */
@media (max-width: 900px) {
  #menuItems li>.dropdown-menu.mega-2,
  #menuItems li>.dropdown-menu.mega-3 {
    display: block !important;
    min-width: 240px !important;
    max-width: 420px !important;
    padding: 0 !important;
  }
}

/* Mega affiché (niveau 1) */
#menuItems .displayed-nav-items>li.is-open>.dropdown-menu.mega-2,
#menuItems .displayed-nav-items>li:hover>.dropdown-menu.mega-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  column-gap: 20px;
  row-gap: 6px;
  min-width: 440px;
  max-width: 680px;
  padding: 8px 12px !important;
}

#menuItems .displayed-nav-items>li.is-open>.dropdown-menu.mega-3,
#menuItems .displayed-nav-items>li:hover>.dropdown-menu.mega-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  column-gap: 20px;
  row-gap: 6px;
  min-width: 660px;
  max-width: 980px;
  padding: 8px 12px !important;
}

/* Mega-4 (unique, sans doublon) */
#menuItems .displayed-nav-items>li>.dropdown-menu.mega-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  column-gap: 20px;
  row-gap: 6px;
  min-width: 880px;
  max-width: 1240px;
  padding: 8px 12px !important;
}

/* Flyout niveau 2+ robuste (gère li > ul ET li > * > ul) */
#menuItems .dropdown-menu li { position: relative; }

#menuItems .dropdown-menu li> :is(ul, .dropdown-menu),
#menuItems .dropdown-menu li>*> :is(ul, .dropdown-menu) {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important; /* ou calc(100% + 8px) si tu veux un gap */
  display: none;
  background: #fff;
  min-width: 240px;
  margin: 0;
  padding: 0 !important;
  list-style: none;
  z-index: 10000;
  box-shadow:
    0 8px 1.5rem rgba(169, 202, 216, .078),
    -8px 0 1.5rem -6px rgba(169, 202, 216, .078),
    8px 0 1.5rem -6px rgba(169, 202, 216, .078);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;             /* ⬅️ supprime la barre horizontale */
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* Ouvrir */
@media (hover: hover) and (pointer: fine) {
  #menuItems .dropdown-menu li:hover> :is(ul, .dropdown-menu),
  #menuItems .dropdown-menu li:hover>*> :is(ul, .dropdown-menu) {
    display: block;
  }
}
#menuItems .dropdown-menu li.is-open> :is(ul, .dropdown-menu),
#menuItems .dropdown-menu li.is-open>*> :is(ul, .dropdown-menu) { display: block; }

/* Flip gauche */
#menuItems .dropdown-menu li.fly-left> :is(ul, .dropdown-menu),
#menuItems .dropdown-menu li.fly-left>*> :is(ul, .dropdown-menu) {
  left: auto !important;
  right: 100% !important;
}

/* === WP: sous-menus .sub-menu (niveau 2+) en flyout latéral === */
#menuItems ul.sub-menu li { position: relative; }

#menuItems ul.sub-menu li > ul.sub-menu {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important; /* ou calc(100% + 8px) si tu veux un petit gap */
  display: none;
  background: #fff;
  min-width: 240px;
  margin: 0;
  padding: 0 !important;
  list-style: none;
  z-index: 10000;
  box-shadow:
    0 8px 1.5rem rgba(169, 202, 216, .078),
    -8px 0 1.5rem -6px rgba(169, 202, 216, .078),
    8px 0 1.5rem -6px rgba(169, 202, 216, .078);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;             /* ⬅️ supprime la barre horizontale */
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* Ouvrir au hover (desktop) */
@media (hover: hover) and (pointer: fine){
  #menuItems ul.sub-menu > li:hover > ul.sub-menu { display: block; }
}

/* Ouvrir au tap (tactile) : classe .is-open posée par le JS */
#menuItems ul.sub-menu > li.is-open > ul.sub-menu { display: block; }

/* Flip à gauche si nécessaire (classe posée par le JS) */
#menuItems ul.sub-menu > li.fly-left > ul.sub-menu {
  left: auto !important;
  right: 100% !important;
}

/* ====== Pont anti-décrochage SANS débordement (desktop) ====== */
@media (hover: hover) and (pointer: fine){
  /* pont à l'intérieur → plus de scroll horizontal parasite */
  #menuItems .dropdown-menu li::after,
  #menuItems ul.sub-menu > li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;     /* avant: -10px */
    width: 10px;  /* ajuste 6–12px si besoin */
    height: 100%;
    z-index: 10001;
  }

  #menuItems .dropdown-menu li.fly-left::after,
  #menuItems ul.sub-menu > li.fly-left::after {
    right: auto;
    left: 0;      /* miroir côté gauche en flip */
  }
}

/* ====== Chevrons “› / ‹” pour indiquer un sous-menu (niveau 2+) ====== */
#menuItems .dropdown-menu > li > a,
#menuItems ul.sub-menu > li > a {
  position: relative;
  padding-right: 28px !important; /* espace pour le chevron */
}

/* chevron à droite si l'item a un sous-menu */
#menuItems ul.sub-menu > li:has(> ul.sub-menu) > a::after,
#menuItems .dropdown-menu > li:has(> ul, > .dropdown-menu) > a::after {
  content: "›";
  color: #03a1dd; 
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  opacity: .6;
}

/* en flip gauche, on montre “‹” */
#menuItems ul.sub-menu > li.fly-left:has(> ul.sub-menu) > a::after,
#menuItems .dropdown-menu > li.fly-left:has(> ul, > .dropdown-menu) > a::after {
  content: "‹";
}

/* 1) Étendre le hover au parent li pour couvrir le "pont" */
@media (hover: hover) and (pointer: fine) {
  #menuItems .dropdown-menu li:hover > a,
  #menuItems ul.sub-menu > li:hover > a {
    background: #e5f5fb !important;
    color: black !important;
    padding-left: 30px;
  }
}


/* Remplir le pont avec le même fond que l'item hover/ouvert */
@media (hover: hover) and (pointer: fine) {
  #menuItems .dropdown-menu li:hover::after,
  #menuItems ul.sub-menu > li:hover::after {
    background: #e5f5fb;  /* même fond que l’item */
  }
}

/* Cas tactile (is-open) + clavier (focus-within) */
#menuItems .dropdown-menu li.is-open::after,
#menuItems ul.sub-menu > li.is-open::after,
#menuItems .dropdown-menu li:focus-within::after,
#menuItems ul.sub-menu > li:focus-within::after {
  background: #e5f5fb;
}

/* (déjà posé mais utile) le chevron ne capte pas la souris */
#menuItems ul.sub-menu > li > a::after,
#menuItems .dropdown-menu > li > a::after {
  pointer-events: none;
}