/* =============================================================================
 * SERIGRAPHIE-BOUTIQUE — Mega Menu restyle v0.2.0
 * =============================================================================
 * Dépendances : tokens.css, halftone.css
 *
 * Stratégie : respecter 100% du HTML natif ePages/VilkasRock du mega menu
 * et appliquer uniquement un restyle CSS par-dessus. Zéro modification de
 * structure, zéro dépendance au JS ePages (.init() natif reste actif).
 *
 * Classes natives ePages ciblées :
 * - .ep-megamenu                       → conteneur principal (ul horizontal)
 * - .ep-megamenu-first-level-element   → univers principal (Sérigraphie, etc.)
 * - .ep-megamenu-container             → panneau dépliable au hover
 * - .ep-megamenu-second-level-group    → groupe de colonnes (ul)
 * - .ep-megamenu-second-level-element  → colonne (Flashage, Fournitures...)
 * - .ep-megamenu-third-level-element   → sous-catégorie (lien final)
 * - .ep-megamenu-more                  → bouton "Voir plus" (affichage ePages)
 *
 * Ne pas modifier l'HTML ni les attributs style inline gérés par ePages JS.
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * Conteneur principal : ul horizontal
 * ------------------------------------------------------------------------- */
.ep-megamenu.HorizontalDisplay {
  display: flex;
  gap: var(--sb-sp-6);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sb-font-sans);
  background: transparent;
  border: none;
}

/* ---------------------------------------------------------------------------
 * Univers principal (premier niveau) — lien + marker actif
 * ------------------------------------------------------------------------- */
.ep-megamenu-first-level-element {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ep-megamenu-first-level-element > a {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-sp-2);
  padding: var(--sb-sp-3) var(--sb-sp-2);

  /* Bump de 14px à 16px pour meilleure lisibilité desktop */
  font-size: var(--sb-fs-base);
  font-weight: var(--sb-fw-medium);
  color: var(--sb-text-primary);
  text-decoration: none;

  border-bottom: 2px solid transparent;
  transition:
    color var(--sb-duration-fast) var(--sb-ease-out),
    border-bottom-color var(--sb-duration-fast) var(--sb-ease-out);
}

.ep-megamenu-first-level-element > a:hover,
.ep-megamenu-first-level-element.is-hovered > a,
.ep-megamenu-first-level-element.ep-megamenu-active > a {
  color: var(--sb-color-accent);
  border-bottom-color: var(--sb-color-accent);
}

/* Active marker natif ePages (page courante) */
.ep-megamenu-first-level-element > a .active-marker {
  display: none;
}

.ep-megamenu-first-level-element > a.is-current,
.NavigationElement.activeNavigationElement > a {
  color: var(--sb-color-ink);
  border-bottom-color: var(--sb-color-ink);
}

/* Marque visuelle pour l'univers détecté par adaptive-home.js */
.ep-megamenu-first-level-element.is-your-universe > a::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: var(--sb-radius-pill);
  background-color: var(--sb-color-accent);
  margin-right: var(--sb-sp-2);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * Panneau dépliable (mega container)
 * NOTE : .ep-megamenu-container est masqué par défaut via style inline (ePages JS).
 * On restyle uniquement l'apparence, pas la visibilité.
 * ------------------------------------------------------------------------- */
.ep-megamenu-container {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 720px;
  background-color: var(--sb-color-paper);
  border: 1px solid var(--sb-color-cendre);
  border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-md);
  padding: var(--sb-sp-6) var(--sb-sp-8);
  z-index: var(--sb-z-dropdown);
  overflow: hidden;
}

.ep-megamenu-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    var(--sb-color-ink) 1px,
    transparent 1.5px
  );
  background-size: 14px 14px;
  opacity: 0.04;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Groupe de colonnes (ul) — grid multi-colonnes
 * ------------------------------------------------------------------------- */
.ep-megamenu-second-level-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sb-sp-6) var(--sb-sp-8);
  position: relative;
}

/* ---------------------------------------------------------------------------
 * Colonne (second niveau) — titre thématique
 * ------------------------------------------------------------------------- */
.ep-megamenu-second-level-element {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sb-sp-2);
}

.ep-megamenu-second-level-element > a {
  /* Bump de 12px à 14px pour titres de colonnes du panneau déroulant */
  font-size: var(--sb-fs-sm);
  font-weight: var(--sb-fw-medium);
  color: var(--sb-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--sb-ls-wider);
  text-decoration: none;
  padding: var(--sb-sp-1) 0;
  margin-bottom: var(--sb-sp-2);
  border-bottom: 1px solid var(--sb-color-cendre-soft);
  transition: color var(--sb-duration-fast) var(--sb-ease-out);
}

.ep-megamenu-second-level-element > a:hover {
  color: var(--sb-color-accent);
}

/* ---------------------------------------------------------------------------
 * ul interne de sous-catégories (3e niveau)
 * ------------------------------------------------------------------------- */
.ep-megamenu-second-level-element > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sb-sp-1);
}

/* ---------------------------------------------------------------------------
 * Sous-catégorie (3e niveau) — lien final
 * ------------------------------------------------------------------------- */
.ep-megamenu-third-level-element {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ep-megamenu-third-level-element > a {
  display: block;
  /* Bump de 14px à 15px pour sous-catégories cliquables */
  font-size: 15px;
  font-weight: var(--sb-fw-regular);
  color: var(--sb-text-primary);
  text-decoration: none;
  padding: var(--sb-sp-1) 0 var(--sb-sp-1) var(--sb-sp-3);
  border-left: 2px solid transparent;
  transition:
    color var(--sb-duration-fast) var(--sb-ease-out),
    border-left-color var(--sb-duration-fast) var(--sb-ease-out),
    padding-left var(--sb-duration-fast) var(--sb-ease-out);
}

.ep-megamenu-third-level-element > a:hover {
  color: var(--sb-color-accent);
  border-left-color: var(--sb-color-accent);
  padding-left: var(--sb-sp-4);
}

/* ---------------------------------------------------------------------------
 * Bouton "Voir plus" (ePages affiche auto quand trop d'items)
 * ------------------------------------------------------------------------- */
.ep-megamenu-more {
  list-style: none;
  margin: var(--sb-sp-2) 0 0;
  padding: 0;
}

.ep-megamenu-more > a {
  display: inline-block;
  font-size: var(--sb-fs-xs);
  font-weight: var(--sb-fw-medium);
  color: var(--sb-color-accent);
  text-decoration: none;
  padding: var(--sb-sp-1) 0;
  font-style: italic;
}

.ep-megamenu-more > a::after {
  content: " →";
  transition: transform var(--sb-duration-fast) var(--sb-ease-out);
}

.ep-megamenu-more > a:hover::after {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
 * Masquer "Ressources" du mega menu desktop pour optimiser l'espace.
 * Les liens Ressources restent accessibles via le footer (col dédiée).
 *
 * ⚠️ À l'injection en prod, identifier la Category-ID exacte de "Ressources"
 * dans le mega natif et cibler avec le bon sélecteur.
 * Exemple (à adapter selon MBO ePages) :
 *   .ep-megamenu-first-level-element.Category-XXXXXX { display: none; }
 *
 * Alternative plus safe : masquer via aria-label ou texte, ou supprimer
 * la catégorie "Ressources" directement dans la MBO si elle n'est qu'un
 * alias vers des pages CMS.
 * ------------------------------------------------------------------------- */
/* Placeholder à activer après identification de la Category ID en MBO :
.ep-megamenu-first-level-element.Category-RESSOURCES_ID { display: none; }
*/

/* ---------------------------------------------------------------------------
 * Parent wrapper (ePages) — zones englobantes
 * ------------------------------------------------------------------------- */
.NavBarTop.HorizontalNavBar {
  background-color: var(--sb-color-paper);
  border-bottom: 1px solid var(--sb-color-cendre);
}

.NavBarTop .SizeContainer.custom-container {
  max-width: var(--sb-container-max-width);
  margin: 0 auto;
  padding: 0 var(--sb-sp-6);
}

/* ---------------------------------------------------------------------------
 * Responsive : on cache le mega menu desktop sur petits écrans.
 * Le drawer mobile (src/js/modules/mobile-drawer.js) prend le relais.
 *
 * !important nécessaire car ePages JS applique display: inline-block inline
 * qui gagne sur une règle CSS standard. Scope strict .ep-megamenu donc sûr.
 * Les wrappers natifs (.NavBarTop, .NavBarTopWrap, etc.) sont aussi cachés
 * pour récupérer la hauteur verticale qu'ils occupent.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .ep-megamenu,
  .ep-megamenu.HorizontalDisplay,
  .NavBarTop.HorizontalNavBar,
  .NavBarTopWrap {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ep-megamenu-first-level-element > a,
  .ep-megamenu-third-level-element > a,
  .ep-megamenu-more > a::after {
    transition: none;
  }
  .ep-megamenu-third-level-element > a:hover {
    padding-left: var(--sb-sp-3);
  }
}