/* =============================================================================
   Menu de navigation : TROISIEME NIVEAU
   -----------------------------------------------------------------------------
   Ajoute le 2026-07-31 pour "Pergolas sur mesure > Accessoires > les 3 pages
   produit". Le thème ne gérait que deux niveaux.

   Pourquoi ce fichier existe : dans css/nxstar/style.css la règle
       .nxs-header ... .menu-item:hover .sub-menu { display:block }
   est un sélecteur de DESCENDANT. Elle ouvrait donc AUSSI le 3e niveau dès
   qu on survolait l item de premier niveau, et le panneau venait recouvrir
   "Catalogue" et "Garantie". Côté mobile, common.css faisait l inverse avec
       .main_nav_mobile ul li ul.sub-menu .sub-menu { display:none }
   qui masquait purement et simplement le 3e niveau.

   Ce fichier est chargé APRES style.css et common.css : à spécificité égale,
   c est l ordre source qui tranche.
   ============================================================================= */

/* ------------------------------------------------------------------ DESKTOP */

/* 1. Le 3e niveau ne suit plus le survol du 1er niveau. On le referme, puis on
      le rouvre uniquement au survol de SA propre ligne parente (plus bas). */
.nxs-header .nxs-nav .nav-down nav .nav-down-list .menu-item:hover .sub-menu .sub-menu {
  display: none;
}

/* 2. La ligne parente ancre le panneau et laisse de la place au chevron. */
.nxs-header .nxs-nav .nav-down nav .nav-down-list .menu-item .sub-menu li.menu-item-has-children {
  position: relative;
  padding-right: 2.25rem;
}

/* 3. Chevron indiquant qu il y a un sous-menu. */
.nxs-header .nxs-nav .nav-down nav .nav-down-list .menu-item .sub-menu li.menu-item-has-children::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid rgba(255, 255, 255, .55);
  border-bottom: 1.5px solid rgba(255, 255, 255, .55);
  transform: rotate(-45deg);
  transition: border-color .2s ease;
  pointer-events: none;
}
.nxs-header .nxs-nav .nav-down nav .nav-down-list .menu-item .sub-menu li.menu-item-has-children:hover::after {
  border-color: #946955;
}

/* 4. Le panneau de 3e niveau sort SUR LE COTE, aligné sur sa ligne parente.
      Le -12px compense le padding .75rem du panneau parent pour que le premier
      élément du 3e niveau soit à la même hauteur que sa ligne parente. */
.nxs-header .nxs-nav .nav-down nav .nav-down-list .menu-item .sub-menu .sub-menu {
  position: absolute;
  left: 100%;
  top: -12px;
  z-index: 11;
  width: 300px;
  background-color: #333230;
  padding: .75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

/* 5. Ouverture au survol de la ligne parente uniquement. Le sélecteur reprend
      le préfixe complet + une classe de plus, il bat donc la règle 1. */
.nxs-header .nxs-nav .nav-down nav .nav-down-list .menu-item .sub-menu li.menu-item-has-children:hover > .sub-menu {
  display: block;
}

/* 6. Le panneau de 2e niveau ne doit pas rogner le panneau qui en sort. */
.nxs-header .nxs-nav .nav-down nav .nav-down-list .menu-item > .sub-menu {
  overflow: visible;
}

/* ------------------------------------------------------------------- MOBILE */

/* 7. En pile mobile le 3e niveau redevient possible : on annule le display:none
      de common.css, mais on garde le panneau REPLIE par défaut. C est le script
      d accordéon qui l ouvre (voir js/menu-level3.js).

      Le margin-top n est pas cosmétique : le panneau imbriqué se trouve DANS le
      <li> parent, donc sans marge il démarrait à 8 px sous le libellé
      "Accessoires" alors que deux lignes voisines sont séparées de 21 px
      (10 px + bordure + 10 px). La ligne paraissait écrasée. */
.mobileMenu .wrapperMenu .main_nav_mobile ul li ul.sub-menu .sub-menu {
  display: none;
  margin: 11px 0 0;
  padding-left: 22px;
  /* Pas de filet vertical : le menu mobile ne parle qu en filets HORIZONTAUX.
     Le retrait suffit, d autant que les séparateurs des enfants sont eux aussi
     décalés, ce qui marque déjà le niveau. (Un filet vertical clair avait été
     essayé : invisible en blanc sur fond clair, et parasite une fois assombri.) */
}

/* 8. Entrées de 3e niveau : même rythme vertical que le niveau au-dessus, la
      hiérarchie est portée par le retrait et par la taille du texte. */
.mobileMenu .wrapperMenu .main_nav_mobile ul li ul.sub-menu .sub-menu li {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  border-top: 1px solid rgba(64, 65, 66, .4);
}
/* Seul le filet du premier enfant saute : il doublonnerait avec la ligne
   "Accessoires" juste au-dessus. Les rembourrages restent identiques sur les
   trois lignes, sinon la hauteur variait (28 / 37 / 29 px) et le rythme se
   voyait à l oeil. */
.mobileMenu .wrapperMenu .main_nav_mobile ul li ul.sub-menu .sub-menu li:first-child {
  border-top: 0;
}
.mobileMenu .wrapperMenu .main_nav_mobile ul li ul.sub-menu .sub-menu li a {
  font-size: .95em;
}

/* 9. Affordance d ouverture. Chaque ligne du menu mobile porte DEJA une flèche
      via `li a:after` dans common.css : on ne pose donc pas un second chevron,
      on fait pivoter celui qui existe quand la ligne est ouverte. Une seule
      flèche par ligne, cohérente avec le reste du menu. */
.mobileMenu .wrapperMenu .main_nav_mobile ul li ul.sub-menu li.menu-item-has-children > a:after {
  transition: transform .25s ease;
}
.mobileMenu .wrapperMenu .main_nav_mobile ul li ul.sub-menu li.menu-item-has-children.slp-open > a:after {
  transform: rotate(90deg);
}