/* ------------------------------------------------------------------------
 * Méga-menu desktop - vitrine + puces d'engagement dans le panneau
 * Markup : themes/montheme/modules/ps_mainmenu/ps_mainmenu.tpl (desktopMenu, depth 0)
 * Données : module gpmenuvitrine ($gp_menu_vitrines / $gp_menu_engagements)
 * S'ajoute au panneau .menu-container existant sans le remplacer.
 * ---------------------------------------------------------------------- */
@keyframes mega-drop {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.js-menu-desktop {
  /* Le vrai propriétaire du z-index du panneau n'est pas le thème (z-index:1045)
     mais custom.css/navigation.css : `.header-navigation .main-menu__tree__item >
     .menu-container.js-sub-menu { z-index: 150 }` (spécificité 0,4,0 - plus forte
     que toute règle avec moins de 4 classes). z-index:150 suffisait tant que le
     panneau restait court ; le nôtre (rail + colonnes) est plus haut et peut
     atteindre un widget de page comme la carte Leaflet de /boutiques (calques
     internes jusqu'à z-index 700), qui passait alors par-dessus. On égale/dépasse
     cette spécificité pour reprendre la main, sous le niveau modal (1040+) pour ne
     pas gêner une vraie modale si les deux étaient ouvertes en même temps. */
  /* l'animation ne vit que pendant le survol (menu-container passe en display:block) :
     pas de fill-mode, sinon l'état "from" reste collé quand le panneau est masqué */
  /* le panneau occupe toute la largeur de la page, avec un padding léger
     (remplace le .container Bootstrap centré ~1320px) */
  /* --- disposition à rail : titres à gauche, panneau du rayon survolé à droite --- */
  /* rail gauche */
  /* panneaux : un par rayon, seul .is-active est visible */
  /* rayon sans sous-catégorie */
  /* rail droit : vitrine + engagements */
  /* vitrine boutique */
  /* puces d'engagement (dans le rail droit, sous la vitrine) */
  /* Le thème applique `.header a:not(.dropdown-item):not(.btn)` (et son :hover en
     teal) à TOUS les liens du menu — spécificité 0,3,1, plus forte que nos règles
     de couleur. On repasse au-dessus, à spécificité égale, pour les liens dont la
     couleur porte du sens. Le `a` explicite + `.menu-container` sont là pour ça. */
}
.js-menu-desktop .menu-container {
  border-top: 3px solid var(--bs-primary);
}
.header-navigation .js-menu-desktop .main-menu__tree__item > .menu-container.js-sub-menu {
  z-index: 1010;
}
@media (prefers-reduced-motion: no-preference) {
  .js-menu-desktop .main-menu__tree > li:hover .menu-container,
  .js-menu-desktop .main-menu__tree > li .menu-container:focus-within {
    animation: mega-drop 0.16s ease;
  }
}
.js-menu-desktop .mega__wrap {
  width: 100%;
  padding-right: clamp(1rem, 3.5vw, 3.5rem);
  padding-left: clamp(1rem, 3.5vw, 3.5rem);
}
.js-menu-desktop .mega--rail-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: stretch;
  min-height: 17rem;
}
.js-menu-desktop .mega--rail-layout.mega--vrail {
  grid-template-columns: 15rem minmax(0, 1fr) 18rem;
}
.js-menu-desktop .mega__rail {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.875rem 0.6875rem;
  border-right: 1px solid var(--color-border, #dfe8e4);
  background: var(--color-background-soft, #f8f7f4);
}
.js-menu-desktop .mega__rail-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  color: var(--color-text, #203232);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm, 8px);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js-menu-desktop .mega__rail-item {
    transition: none;
  }
}
.js-menu-desktop .mega__rail-item:hover, .js-menu-desktop .mega__rail-item:focus-visible {
  color: var(--color-primary, #006d6d);
  background: rgba(0, 109, 109, 0.08);
  outline: none;
}
.js-menu-desktop .mega__rail-item.is-active {
  color: var(--color-primary, #006d6d);
  font-weight: 700;
  background: var(--bs-white, #fff);
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(32, 50, 50, 0.06));
}
.js-menu-desktop .mega__rail-chev {
  margin-left: auto;
  font-size: 1rem;
  color: var(--color-text-muted, #667572);
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js-menu-desktop .mega__rail-chev {
    transition: none;
  }
}
.js-menu-desktop .mega__rail-item:hover .mega__rail-chev,
.js-menu-desktop .mega__rail-item.is-active .mega__rail-chev {
  color: var(--bs-primary);
  opacity: 1;
}
.js-menu-desktop .mega__panels {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.875rem 1.75rem;
}
.js-menu-desktop .mega__panels-list {
  flex: 1 1 auto;
}
.js-menu-desktop .mega__foot--panels {
  margin-top: auto;
  padding-top: 2rem;
}
.js-menu-desktop .mega__panel {
  display: none;
}
.js-menu-desktop .mega__panel.is-active {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .js-menu-desktop .mega__panel.is-active {
    animation: mega-drop 0.14s ease;
  }
}
.js-menu-desktop .mega__panel-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--bs-gray-200);
}
.js-menu-desktop .mega__panel-title {
  margin: 0;
  color: var(--bs-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.js-menu-desktop .mega__panel-all {
  color: var(--bs-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}
.js-menu-desktop .mega__panel-all:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.js-menu-desktop .mega__panel-cols {
  columns: 3 12rem;
  column-gap: 2rem;
}
.js-menu-desktop .mega__dp2 {
  margin: 0 0 1rem;
  break-inside: avoid;
}
.js-menu-desktop .mega__dp2-link {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--bs-gray-900);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.js-menu-desktop .mega__dp2-link:hover {
  color: var(--bs-primary);
}
.js-menu-desktop .mega__dp2--plain .mega__dp2-link {
  font-weight: 500;
}
.js-menu-desktop .mega__dp3 {
  margin: 0.125rem 0 0;
  padding: 0;
  list-style: none;
}
.js-menu-desktop .mega__dp3 a {
  display: block;
  padding: 0.1875rem 0;
  color: var(--bs-gray-600);
  font-size: 0.8125rem;
  text-decoration: none;
}
.js-menu-desktop .mega__dp3 a:hover {
  color: var(--bs-primary);
}
.js-menu-desktop .mega__panel--leaf.is-active {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  min-height: 12rem;
}
.js-menu-desktop .mega__panel-leaf-text {
  max-width: 42ch;
  margin: 0;
  color: var(--bs-gray-600);
  font-size: 0.875rem;
}
.js-menu-desktop .mega__panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 1rem;
  color: var(--bs-white);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--bs-primary);
  border-radius: 0.25rem;
}
.js-menu-desktop .mega__vrail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-left: 1px solid var(--color-border, #dfe8e4);
  background: var(--color-background-soft, #f8f7f4);
}
.js-menu-desktop .mega__vitrine {
  position: relative;
  padding: 1.125rem 1.125rem 1.25rem;
  background: var(--bs-white, #fff);
  border: 1px solid var(--color-border, #dfe8e4);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(32, 50, 50, 0.06));
}
.js-menu-desktop .mega__vitrine-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.625rem;
  padding: 0.25rem 0.5rem;
  color: var(--color-primary, #006d6d);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-background-green, #edf8f4);
  border-radius: var(--radius-pill, 999px);
}

/* Encadré sponsorisé du rail : même carte `.gpads-card` que les listes de
   produits (module gpads). Contrairement aux listes (jusqu'à 3 cartes dans un
   encadré `.gpads-slot` avec son propre cadre), le rail n'affiche jamais qu'UNE
   carte : le cadre du `.gpads-slot` est donc retiré (sinon carte dans une carte,
   deux bordures superposées) — seule la carte garde son cadre. */
.js-menu-desktop .mega__vrail .gpads-slot--nav {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.js-menu-desktop .mega__vrail .gpads-slot__cards {
  display: block;
}
.js-menu-desktop .mega__vrail .gpads-slot--nav.gpads-slot--debug .gpads-card {
  border-style: dashed;
  border-color: #c9b96b;
  background: #fffdf3;
}
.js-menu-desktop .mega__vitrine-name {
  margin: 0 0 0.1875rem;
  font-family: var(--font-family-heading, "Poppins", Arial, sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-dark, #0a2e2e);
}
.js-menu-desktop .mega__vitrine-meta {
  margin: 0 0 0.625rem;
  color: var(--color-text-muted, #667572);
  font-size: 0.8125rem;
}
.js-menu-desktop .mega__vitrine-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.js-menu-desktop .mega__vitrine-meter {
  display: inline-flex;
  gap: 0.1875rem;
}
.js-menu-desktop .mega__vitrine-meter i {
  display: block;
  width: 0.9375rem;
  height: 0.4375rem;
  background: var(--color-border-strong, #bdd2ca);
  border-radius: 0.125rem;
}
.js-menu-desktop .mega__vitrine-meter i.on {
  background: var(--color-primary, #006d6d);
}
.js-menu-desktop .mega__vitrine-val {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-dark, #0a2e2e);
}
.js-menu-desktop .mega__vitrine-tag {
  color: var(--color-text-muted, #667572);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.js-menu-desktop .mega__vitrine-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
  padding: 0.5rem 0.9375rem;
  color: var(--bs-white, #fff);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--color-primary, #006d6d);
  border-radius: var(--radius-sm, 8px);
  transition: background 0.15s ease;
}
.js-menu-desktop .mega__vitrine-cta:hover {
  background: var(--color-primary-deep, #0a2e2e);
}
@media (prefers-reduced-motion: reduce) {
  .js-menu-desktop .mega__vitrine-cta {
    transition: none;
  }
}
.js-menu-desktop .mega__foot {
  padding-top: 1rem;
  border-top: 1px solid var(--bs-gray-200);
}
.js-menu-desktop .mega__foot-label {
  display: block;
  margin-bottom: 0.625rem;
  color: var(--bs-gray-600);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.js-menu-desktop .mega__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.js-menu-desktop .mega__chip {
  padding: 0.375rem 0.8125rem;
  color: var(--bs-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  background: rgba(var(--bs-primary-rgb), 0.09);
  border: 1px solid transparent;
  border-radius: 2rem;
}
.js-menu-desktop .mega__chip:hover {
  border-color: var(--bs-primary);
}
.js-menu-desktop .menu-container a.mega__panel-cta, .js-menu-desktop .menu-container a.mega__panel-cta:hover, .js-menu-desktop .menu-container a.mega__panel-cta:focus, .js-menu-desktop .menu-container a.mega__panel-cta:active {
  color: var(--bs-white);
  text-decoration: none;
}
.js-menu-desktop .menu-container a.mega__panel-cta:hover, .js-menu-desktop .menu-container a.mega__panel-cta:focus {
  background: #0a2e2e;
}
.js-menu-desktop .menu-container a.mega__panel-all, .js-menu-desktop .menu-container a.mega__panel-all:hover, .js-menu-desktop .menu-container a.mega__panel-all:focus {
  color: var(--bs-primary);
}
.js-menu-desktop .menu-container a.mega__rail-item, .js-menu-desktop .menu-container a.mega__rail-item:focus {
  color: var(--color-text, #203232);
}
.js-menu-desktop .menu-container a.mega__rail-item:hover, .js-menu-desktop .menu-container a.mega__rail-item.is-active {
  color: var(--color-primary, #006d6d);
}
.js-menu-desktop .menu-container a.mega__dp2-link {
  color: var(--bs-gray-900);
}
.js-menu-desktop .menu-container a.mega__dp2-link:hover, .js-menu-desktop .menu-container a.mega__dp2-link:focus {
  color: var(--bs-primary);
}
.js-menu-desktop .menu-container .mega__dp2--plain a.mega__dp2-link {
  font-weight: 500;
}
.js-menu-desktop .menu-container .mega__dp3 a {
  color: var(--bs-gray-600);
}
.js-menu-desktop .menu-container .mega__dp3 a:hover, .js-menu-desktop .menu-container .mega__dp3 a:focus {
  color: var(--bs-primary);
}
.js-menu-desktop .menu-container a.mega__vitrine-cta,
.js-menu-desktop .menu-container a.mega__vitrine-cta:hover,
.js-menu-desktop .menu-container a.mega__vitrine-cta:focus {
  color: var(--bs-white, #fff);
  text-decoration: none;
}
.js-menu-desktop .menu-container a.mega__chip,
.js-menu-desktop .menu-container a.mega__chip:focus {
  color: var(--bs-primary);
}