/* ============================================================
   MEGA MENU — styles
   Fichier autonome, à charger APRÈS vide.css dans le <head>.
   Réutilise les variables déjà définies dans vide.css (:root).

   ------------------------------------------------------------
   DÉSACTIVATION RAPIDE (sans toucher au HTML) :
   Ajoutez la classe "mega-disabled" à la balise <body> :

       <body class="mega-disabled">

   → Le déclencheur redevient un lien de menu normal et le
     panneau ne peut plus s'ouvrir. Retirez la classe pour
     réactiver le mega menu à tout moment.

   RETRAIT COMPLET :
   Supprimez ce fichier + sa balise <link> dans le <head>,
   supprimez mega.js + sa balise <script>, et supprimez le bloc
   HTML encadré par les commentaires
   "MEGA MENU START" / "MEGA MENU END" dans VIDE.html.

   ------------------------------------------------------------
   PLUSIEURS MEGA MENUS SUR UNE MÊME PAGE :
   Ces styles sont génériques (classes réutilisables), un même
   fichier CSS gère donc autant de mega menus que nécessaire.
   Le contenu propre à chaque menu (colonnes, liens, sous-thèmes)
   se déclare dans mega.js — voir l'en-tête de ce fichier.
   ============================================================ */

/* --- Interrupteur : body.mega-disabled coupe tout ---
   .mega-menu-item étant masqué en bloc, ceci retire aussi bien le
   lien "MEGA" que sa flèche et son panneau, en desktop comme en
   mobile (même sélecteur utilisé dans les deux contextes). */
body.mega-disabled .mega-menu-item { display: none !important; }

/* ============================
   DÉCLENCHEUR (lien dans .header-nav)
============================ */
.mega-menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

.mega-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
}

.mega-trigger::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
  opacity: 0.6;
  margin-top: -3px;
}

.mega-trigger[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* ============================
   PANNEAU
============================ */
.mega-panel {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  /* Largeur (et hauteur max, optionnelle) calculées par mega.js à partir
     de la config de CHAQUE mega menu (voir "width" / "maxHeight" dans
     MEGA_MENUS), posées en inline-style sur .mega-panel. Les valeurs
     ci-après ne sont qu'un secours si la variable n'est pas définie. */
  width: var(--mega-panel-width, min(760px, 92vw));
  max-height: var(--mega-panel-max-height, none);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--mist-dark);
  border-radius: var(--r-md);
  box-shadow: 0 20px 50px var(--shadow);
  padding: 1.75rem;
  z-index: 150;
  opacity: 0;
}

.mega-menu-item.mega-open .mega-panel {
  display: block;
  animation: megaFadeIn 0.25s ease forwards;
}

@keyframes megaFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Petite flèche décorative pointant vers le déclencheur */
.mega-panel::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: var(--paper);
  border-left: 1px solid var(--mist-dark);
  border-top: 1px solid var(--mist-dark);
}

/* ============================
   CONTENU DU PANNEAU
============================ */
.mega-grid {
  display: grid;
  /* Nombre de colonnes + largeur de la colonne "mise en avant" calculés
     dynamiquement par mega.js selon le contenu de CHAQUE mega menu
     (variable CSS posée en inline-style sur .mega-grid). La valeur
     ci-après (repeat(3,1fr) 1.15fr) n'est qu'un secours si jamais la
     variable n'est pas définie. */
  grid-template-columns: var(--mega-track-columns, repeat(3, 1fr) 1.15fr);
  gap: 1.75rem;
}

/* ============================
   PLUSIEURS RANGÉES DE COLONNES (option "rows" dans mega.js)
   ------------------------------------------------------------
   Quand un menu utilise "rows" (au lieu de "columns") dans mega.js,
   chaque rangée reste une .mega-grid indépendante (donc avec son
   propre nombre de colonnes), et ces rangées sont empilées ici dans
   .mega-rows. La colonne "featured" (si présente) n'appartient plus
   à AUCUNE rangée : elle est posée à côté de l'ensemble des rangées,
   via .mega-rows-wrap (flex).
============================ */
.mega-rows-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}

.mega-rows {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Largeur de la colonne "featured" quand elle est posée à côté de
   .mega-rows (cas "rows" uniquement). Calculée par mega.js à partir
   de "featuredWidth" dans MEGA_MENUS (optionnel), avec un secours ici
   si la variable n'est pas définie. Sans cela, .mega-featured est un
   enfant flex normal (voir règle existante plus bas) : on le fixe ici
   pour qu'il ne s'étire pas sur toute la hauteur des rangées. */
.mega-rows-wrap > .mega-featured {
  flex: 0 0 var(--mega-featured-width, 260px);
}

.mega-col h4 {
  font-family: var(--sans1);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marron);
  margin: 0.3rem 0 0.75rem;
  padding: 0;
}

.mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mega-col li { margin: 0; line-height: 1.3; }

.mega-col li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.4rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--texte);
  transition: background var(--transition);
}

.mega-col li a span.mega-link-text {
  /* Garantit que le texte peut rétrécir/wrapper dans le flex,
     même si un ancêtre impose une largeur minimale sur ses enfants. */
  min-width: 0;
  /* Un style global (menu principal, souvent appliqué via une classe
     ou un sélecteur qui vise spécifiquement les <span> des liens de
     nav) impose ici white-space: nowrap, empêchant un texte long de
     passer à la ligne (il déborde alors hors de la colonne). On force
     donc explicitement le retour à la ligne normal sur ce span précis,
     sans toucher au menu principal. */
  white-space: normal;
  text-align: left;
  font-size: clamp(0.8rem, 2vw, 0.85rem);
}

.mega-col li a:hover {
  background: var(--mist);
  color: var(--texte);
}

.mega-thumb {
  /* Largeur calculée par mega.js pour CE menu précis (voir "thumbWidth"
     dans MEGA_MENUS), posée en variable CSS sur .mega-panel (héritée par
     tous ses liens). Peut aussi être surchargée par lien via un style
     inline (voir "thumbWidth" sur un lien précis) qui prévaut sur ceci.
     80px reste la valeur par défaut si rien n'est défini. */
  width: var(--mega-thumb-width, 48px);
  height: auto;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  opacity: 1;
}

/* Colonne "mise en avant" (image + CTA) */
.mega-featured {
  background: var(--mist);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
}

.mega-featured img {
  border-radius: 0.5rem;
  margin: 0 auto 0.75rem;
  width: 100%;
  max-width: 450px;
}

.mega-featured h4 {
  color: var(--marron);
  margin-bottom: 0.4rem;
}

.mega-featured p {
  font-size: 0.85rem;
  color: var(--texte);
  margin-bottom: 0.9rem;
  line-height: normal;
}

.mega-featured .mega-cta {
  display: inline-block;
  background: var(--paper);
  color: var(--marron);
  border: 1.5px solid var(--marron);
  border-radius: 0.375rem;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background var(--transition), transform var(--transition);
}

.mega-featured .mega-cta:hover {
  transform: translateY(-1px);
}

.mega-btn {
  display: block;
  margin: 0 auto;
  text-align: center;
  background: var(--paper);
  color: var(--marron) !important;
  border: 1.5px solid var(--marron);
}

.mega-btn:hover {
  transform: translateY(-1px);
}

/* ============================
   RESPONSIVE (mobile : menu burger)
============================ */
@media (max-width: 820px) {
  .mega-menu-item {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .mega-trigger {
    justify-content: space-between;
    width: 100%;
  }

  /* Sur tablette/mobile : accordéon repliable (et non plus toujours ouvert),
     pour ne pas cacher en permanence les liens de menu situés en dessous.
     Le clic sur "Outils promotionnels" ouvre/ferme uniquement ce sous-menu
     (voir mega.js : stopImmediatePropagation empêche le script du burger
     menu de refermer tout le menu au passage). */
  .mega-panel {
    position: static;
    display: none;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    padding: 0.25rem 0 0.75rem 1rem;
  }

  .mega-menu-item.mega-open .mega-panel {
    display: block;
    /* Neutralise l'animation "megaFadeIn" du panneau desktop (définie plus
       haut, hors media query) : elle contient un translateX(-50%) destiné
       à centrer le panneau flottant, qui n'a pas lieu d'être ici et qui
       décalait/tronquait l'accordéon sur mobile. */
    animation: none;
    transform: none;
  }

  .mega-panel::before { display: none; }

  .mega-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Cas "rows" : sur mobile, plus de mise en page côte à côte —
     .mega-rows-wrap redevient une simple pile verticale, comme le
     reste de l'accordéon (les rangées elles-mêmes sont déjà en
     1 colonne grâce à la règle .mega-grid ci-dessus). */
  .mega-rows-wrap {
    flex-direction: column;
    gap: 1.25rem;
  }

  .mega-rows {
    gap: 1.25rem;
  }

  .mega-rows-wrap > .mega-featured {
    flex: 1 1 auto;
  }

  /* ────────────────────────────────────────────────────────────
     VERSION MOBILE ALLÉGÉE DU MEGA MENU
     Tout élément (colonne, <li>, image...) qui porte la classe
     "mega-desktop-only" dans VIDE.html est masqué en dessous de 820px.
     C'est volontaire : le mega menu complet (3 liens par catégorie +
     colonne "Kit complet" avec image) est jugé trop encombrant en
     accordéon mobile, donc seul 1 lien par catégorie reste visible.

     → Pour AFFICHER un élément supplémentaire sur mobile :
       retirez la classe "mega-desktop-only" sur son tag dans VIDE.html.
     → Pour EN MASQUER un de plus :
       ajoutez la classe "mega-desktop-only" sur son tag dans VIDE.html.
     → Pour TOUT réafficher sur mobile comme sur desktop :
       commentez ou supprimez la règle ci-dessous (.mega-desktop-only).
     ──────────────────────────────────────────────────────────── */
  .mega-desktop-only {
    display: none !important;
  }

  .mega-featured { text-align: left; }
  .mega-featured img { max-width: 92%; }
  .mega-featured .mega-cta {
  display: block;
  border: 1.5px solid var(--marron) !important;
 margin: 0 auto !important;
    text-align: center;
    align-self: center;
    max-width: 220px;
}
.mega-featured h4 {
  text-align: center;
}
.mega-btn {
  border: 1.5px solid var(--marron) !important;
  border-radius: 100px !important;
  max-width: 220px;
  padding: 5px !important;
}
}