/* MBS-SUBCATEGORY-BUTTONS-YELLOW-001
 * Sous-categories classiques : texte noir sur jaune MBS.
 * Les listes ENI compactes utilisent le meme contraste jaune/noir.
 */
#subcategories ul:not(.eni-subcategory-links) li h5 .subcategory-name {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #d98b00;
  border-radius: 4px;
  background-color: #f5a623;
  color: #111 !important;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#subcategories ul:not(.eni-subcategory-links) li h5 .subcategory-name:hover,
#subcategories ul:not(.eni-subcategory-links) li h5 .subcategory-name:focus {
  background-color: #ffb733;
  color: #111 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

#subcategories ul:not(.eni-subcategory-links) li h5 .subcategory-name:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Sous-categories internes compactes, par exemple Graisses et Huiles hydrauliques. */
#subcategories ul.eni-subcategory-links li h5 .subcategory-name {
  border-color: #d98b00;
  border-radius: 4px;
  background-color: #f5a623;
  color: #111 !important;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#subcategories ul.eni-subcategory-links li h5 .subcategory-name:hover,
#subcategories ul.eni-subcategory-links li h5 .subcategory-name:focus {
  background-color: #ffb733;
  color: #111 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

#subcategories ul.eni-subcategory-links li h5 .subcategory-name:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Menus deroulants desktop : meme gris clair que le menu principal,
 * texte fonce au repos, jaune MBS et texte noir au survol.
 */
@media (min-width: 768px) {
  body.bg_black #_desktop_top_menu ul.top-menu .popover.sub-menu,
  body.bg_black.submenu1 #_desktop_top_menu .popover.sub-menu ul.top-menu li:hover > .collapse,
  body.bg_black.submenu3 #_desktop_top_menu .popover.sub-menu ul.top-menu li:hover > .collapse {
    background-color: #d4d4d4;
  }

  body.bg_black.submenu1 #_desktop_top_menu .popover.sub-menu ul.top-menu li,
  body.bg_black.submenu3 #_desktop_top_menu .popover.sub-menu ul.top-menu li {
    border-color: #b8b8b8;
  }

  body.bg_black #_desktop_top_menu .popover.sub-menu ul.top-menu li > a {
    color: #3d3d3d;
  }

  body.bg_black.submenu1 #_desktop_top_menu .popover.sub-menu ul.top-menu li a:hover,
  body.bg_black.submenu3 #_desktop_top_menu .popover.sub-menu ul.top-menu li a:hover,
  body.bg_black.live_edit_0.submenu1 #_desktop_top_menu .popover.sub-menu ul.top-menu li:hover > a,
  body.bg_black.live_edit_0.submenu3 #_desktop_top_menu .popover.sub-menu ul.top-menu li:hover > a {
    background-color: #f9b233;
    color: #000;
  }
}