/* jdb-classic-child : mega-menu restyle - JDB-Info */

#top-menu > li.dropdown-submenu > .popover.sub-menu {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  padding: 20px !important;
  max-width: 1100px;
}

#top-menu > li.dropdown-submenu > .popover.sub-menu > ul[data-depth="1"] {
  padding: 0 20px;
  border-right: 1px solid #e5e5e5;
}

#top-menu > li.dropdown-submenu > .popover.sub-menu > ul[data-depth="1"]:last-child {
  border-right: none;
}

#top-menu ul[data-depth="1"] > li > a.dropdown-item {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e8312a;
  padding: 0 0 10px 0 !important;
  display: block;
}

#top-menu ul[data-depth="2"] {
  margin-top: 12px;
}

#top-menu ul[data-depth="2"] > li > a.dropdown-item {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  padding: 8px 0 4px 0 !important;
  text-transform: none;
  letter-spacing: normal;
}

#top-menu ul[data-depth="2"] ul[data-depth="3"] > li > a.dropdown-item {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  padding: 5px 0 !important;
  text-transform: none;
  letter-spacing: normal;
}

#top-menu ul[data-depth="2"] ul[data-depth="3"] > li > a.dropdown-item:hover {
  color: #e8312a;
}

/* Menu principal - niveau 0 */
#top-menu {
  display: flex;
  gap: 28px;
}

#top-menu > li > a.dropdown-item {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  padding: 8px 0 !important;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#top-menu > li > a.dropdown-item:hover {
  color: #e8312a;
}

#top-menu > li.current > a.dropdown-item {
  color: #e8312a;
  border-bottom-color: #e8312a;
}

/* Au-delà du niveau 3, on cache le détail (illisible en dropdown) */
#top-menu ul[data-depth="2"] ul[data-depth="3"] ul[data-depth="4"] {
  display: none;
}

/* Gestion du débordement horizontal si trop de colonnes niveau 1 */
#top-menu > li.dropdown-submenu > .popover.sub-menu {
  max-height: 480px;
  overflow-y: auto;
}




/* Centrage du dropdown relatif a son propre onglet (pas a la page entiere) */
#top-menu > li.category {
  position: relative;
}

#top-menu > li.category > .popover.sub-menu {
  width: max-content !important;
  min-width: max-content !important;
  max-width: 90vw !important;
  margin-left: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* Reduction de l'espace entre la barre de menu et le dropdown */
#top-menu > li.category > .popover.sub-menu {
  margin-top: -20px !important;
}

/* Menu categorie vertical (sidebar) - restyle complet */
.block-categories {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px 0;
}

.block-categories .category-top-menu > li > a.h6 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  padding: 0 16px 12px;
  display: block;
}

.category-sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-sub-menu li[data-depth="0"] > a {
  display: block;
  padding: 9px 16px;
  font-size: 14px;
  color: #1a1a1a;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.category-sub-menu li[data-depth="0"] > a:hover {
  color: #e8312a;
  background-color: #fbeaea;
}

.category-sub-menu li[data-depth="0"] .navbar-toggler.collapse-icons {
  position: absolute;
  right: 16px;
  top: 9px;
  cursor: pointer;
  color: #999;
}

.category-sub-menu li[data-depth="0"] {
  position: relative;
}

.category-sub-menu li[data-depth="0"] .material-icons {
  font-size: 18px;
}

.category-sub-menu .category-sub-link {
  display: block;
  padding: 7px 16px 7px 32px;
  font-size: 13px;
  color: #666;
  transition: color 0.15s ease;
}

.category-sub-menu .category-sub-link:hover {
  color: #e8312a;
}

.category-sub-menu li[data-depth="1"] {
  position: relative;
}

.category-sub-menu li[data-depth="1"] .arrows {
  position: absolute;
  right: 16px;
  top: 7px;
  cursor: pointer;
  color: #bbb;
  font-size: 14px;
}

/* Correction : gestion de toutes les profondeurs (pas seulement 0 et 1) */
.category-sub-menu li {
  position: relative;
}

.category-sub-menu li[data-depth="2"] .category-sub-link,
.category-sub-menu li[data-depth="3"] .category-sub-link,
.category-sub-menu li[data-depth="4"] .category-sub-link {
  padding-left: 48px;
  font-size: 12px;
  color: #888;
}

.category-sub-menu li[data-depth="3"] .category-sub-link {
  padding-left: 64px;
}

.category-sub-menu li[data-depth="4"] .category-sub-link {
  padding-left: 80px;
}

.category-sub-menu li[data-depth="2"] .arrows,
.category-sub-menu li[data-depth="3"] .arrows,
.category-sub-menu li[data-depth="4"] .arrows {
  position: absolute;
  right: 16px;
  top: 7px;
  color: #ccc;
}

/* On cache le detail au-dela de depth 3 dans la sidebar, trop profond pour rester lisible */
.category-sub-menu li[data-depth="4"] {
  display: none;
}

/* Neutralise un ::before natif "-" herite d'une regle liste generique */
.category-sub-menu li::before {
  content: none !important;
}