/* ========================================
   DROPDOWN SUBMENUS - Style arrondi et ombré
   ======================================== */

.wp-block-navigation__submenu-container {
  background: transparent !important;
  border-radius: 1rem !important;
  padding: 0.75rem 0.5rem !important;
  padding-top: 1.25rem !important; /* Espace pour le pont invisible + padding interne */
  min-width: 220px !important;
  box-shadow: none !important;
  border: none !important; /* Pas de bordure directe - le ::after la gère */
  margin-top: 0 !important; /* Pas de margin pour éviter le gap de hover */
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0.25s ease-out !important;
}

/* Affichage au hover avec transition */
.wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

/* Items du sous-menu */
.wp-block-navigation__submenu-container .wp-block-navigation-item {
  margin: 0 0.25rem;
  position: relative;
  z-index: 1; /* Au-dessus du ::after (fond) */
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  padding: 0.625rem 1rem !important;
  border-radius: 0.75rem !important;
  transition: all 0.2s ease-out !important;
  display: block !important;
  width: 100% !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgba(46, 170, 123, 0.2) !important;
  color: #2EAA7B !important;
}

/* Sous-menus imbriqués */
.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
  margin-top: 0 !important;
  margin-left: 0.5rem !important;
}

/* Flèche du toggle */
.wp-block-navigation-submenu__toggle svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  margin-left: 0.25rem !important;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.wp-block-navigation-submenu:hover > .wp-block-navigation-submenu__toggle svg {
  opacity: 1;
  transform: rotate(180deg);
}

/* Fond du dropdown avec bordure (positionné après le pont invisible) */
.wp-block-navigation__submenu-container::after {
  content: '';
  position: absolute;
  top: 0.5rem; /* Laisse 0.5rem de "pont" invisible pour le hover */
  left: 0;
  right: 0;
  bottom: 0;
  background: #2a2a2a;
  border-radius: 1rem;
  box-shadow:
    0 15px 50px -12px rgba(0, 0, 0, 0.4),
    0 8px 25px -8px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: -1;
  pointer-events: none;
}

/* Petit triangle au-dessus du dropdown - à droite */
.wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: calc(0.5rem - 6px); /* Aligné avec le haut du fond */
  right: 24px;
  width: 12px;
  height: 12px;
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
  z-index: 1; /* Au-dessus du ::after pour couvrir la bordure */
}