/* MG3D — Menu déroulant injecté par le plugin (indépendant du thème).
   Gère plusieurs niveaux : sous-catégorie (niveau 2) ET sous-sous-catégorie
   (niveau 3+), en "flyout" qui s'ouvre sur le côté pour les niveaux profonds.
   Des !important partout : ce fichier doit prendre le dessus sur le thème
   quoi qu'il arrive, sans dépendre de l'ordre de chargement. */

/* Avec beaucoup d'éléments de premier niveau, la rangée doit pouvoir passer
   à la ligne EN BLOC plutôt que de laisser chaque libellé se couper
   individuellement en 2 lignes (ce qui donne un menu décalé/inégal). */
.primary-nav > ul,
#primary-nav > ul {
  flex-wrap: wrap !important;
  row-gap: 10px !important;
}
.primary-nav > ul > li > a,
#primary-nav > ul > li > a {
  white-space: nowrap !important;
}

.primary-nav li,
nav.primary-nav li,
#primary-nav li {
  position: relative !important;
}

/* Sous-menus cachés par défaut, quel que soit leur niveau */
.primary-nav .sub-menu,
nav.primary-nav .sub-menu,
#primary-nav .sub-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 0 !important;
  min-width: 240px !important;
  padding: 8px !important;
  background: #1a1a21 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 32px -12px rgba(0,0,0,.6) !important;
  z-index: 200 !important;
  list-style: none !important;
}

/* Niveau 3+ (sous-sous-catégorie) : s'ouvre sur le côté, pas en dessous */
.primary-nav .sub-menu .sub-menu {
  top: -8px !important;
  left: 100% !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
}

/* Affichage au survol ou au focus clavier, à chaque niveau.
   Sélecteurs avec ID inclus pour égaler (et non perdre contre) la
   spécificité de la règle display:none ci-dessus qui inclut #primary-nav. */
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu,
.primary-nav li.mg3d-open > .sub-menu,
#primary-nav li:hover > .sub-menu,
#primary-nav li:focus-within > .sub-menu,
#primary-nav li.mg3d-open > .sub-menu {
  display: block !important;
}

.primary-nav .sub-menu li {
  list-style: none !important;
  width: 100% !important;
}

.primary-nav .sub-menu a {
  display: block !important;
  padding: 10px 30px 10px 12px !important;
  border-radius: 6px !important;
  font-size: .82rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  color: #eceef2 !important;
}
.primary-nav .sub-menu a::after { display: none !important; }
.primary-nav .sub-menu a:hover { background: rgba(147,51,234,.18) !important; color: #fff !important; }

/* Petite flèche indiquant qu'un élément a des enfants */
.primary-nav .menu-item-has-children > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.primary-nav .menu-item-has-children > a::after {
  content: "▾";
  font-size: .7em;
  transition: transform .15s ease;
}
.primary-nav .menu-item-has-children:hover > a::after,
.primary-nav .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}
/* Niveau 3+ : flèche latérale plutôt que vers le bas */
.primary-nav .sub-menu .menu-item-has-children > a::after {
  content: "›";
  margin-left: auto;
  transform: none !important;
}

/* Mobile : pas de survol possible, donc tout reste affiché en ligne,
   simplement indenté par niveau. */
@media (max-width: 880px) {
  .primary-nav .sub-menu,
  #primary-nav .sub-menu {
    display: block !important;
    position: static !important;
    margin: 8px 0 8px 16px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    border-left: 2px solid rgba(255,255,255,.12) !important;
  }
  .primary-nav .sub-menu a { padding: 8px 0 8px 14px !important; white-space: normal !important; }
  .primary-nav .menu-item-has-children > a::after { display: none !important; }
}