/* Base nav */
.nav.topnav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.nav.topnav li {
  position: relative; /* nécessaire pour les sous-menus */
}

/* Liens principaux */
.nav.topnav > li > a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #414040;
  background-color: #ffffff;
  border-radius: 0px;
  transition: background 0.2s ease;
}

.nav.topnav > li > a:hover {
  background-color: #AE1C1F;
}

/* Sous-menus (pas de gap!) */
.submenu {
  display: none;
  position: absolute;
  top: 100%;       /* IMPORTANT: pas de calc(100% + 10px) */
  left: 0;
  list-style: none;
  background: #181818;
  border: 1px solid #333;
  min-width: 200px;
  z-index: 1000;
  padding: 6px 0;  /* petit padding pour l'espace visuel */
  margin: 0;       /* pas de margin qui crée un trou */
}

/* Affichage au survol du LI parent */
.has-submenu:hover > .submenu {
  display: block;
}

/* Niveaux suivants (flyout) */
.submenu .has-submenu {
  position: relative;
}

.submenu .submenu {
  top: 0;
  left: 100%;
  margin-left: 0;      /* pas de marge, évite les "trous" */
  padding: 6px 0;
}

/* Liens dans les sous-menus */
.submenu li a {
  display: block;
  padding: 8px 12px;
  color: #fff;
  background-color: #181818;
  white-space: nowrap;
}

.submenu li a:hover {
  background-color: #AE1C1F;
}

/* Option: élargir la zone active pour éviter les micro-trous */
.has-submenu > a {
  padding-bottom: 10px;           /* agrandit la zone du parent */
}
.has-submenu::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 10px;                   /* pont "invisible" sous le bouton */
}

/* Responsive (les menus deviennent blocs) */
@media (max-width: 768px) {
  .nav.topnav {
    flex-direction: column;
  }
  .submenu {
    position: static;
    border: none;
    padding: 0;
  }
}