/* ============================================================
   Mégamenu — CSS structurel partagé (tous thèmes)
   Les couleurs et typographies sont définies par chaque thème
   via les variables CSS ou des overrides dans son style.css.
   ============================================================ */

/* ── Bloc de référence du panel = le CONTENEUR DE CONTENU du thème ──────────
   Le panel mégamenu doit s'étaler sur toute la largeur du contenu (≈1100-1200px),
   PAS sur la largeur du <nav> .ntc-menu (qui n'est aussi large que ses entrées
   de menu — souvent ~700-900px). On ancre donc le panel sur le conteneur centré
   de chaque thème (position:relative), et on rend .ntc-menu `static` pour qu'il
   ne capte plus le positionnement. Sans ça, un mégamenu à 4 colonnes passait à
   la ligne (2×2) faute de largeur. */
.lag-header-nav-inner,
.cv-header-nav-inner,
.ntc-header-inner {
  position: relative;
}
.ntc-menu {
  position: static;
}

/* ── Trigger L1 ─────────────────────────────────────────────── */
/* Spécificité 0-2-0 pour écraser les règles thème "li { position: relative }" */
.ntc-menu-liste .ntc-has-mega {
  position: static; /* le panel se positionne sur le conteneur, pas le <li> */
}

/* Bouton/lien L1 sans URL propre */
.ntc-menu-label-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* ── Panel mégamenu ─────────────────────────────────────────── */
.ntc-megamenu-panel {
  /* Masqué via visibility pour permettre la transition opacity/transform */
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  /* Délai sur visibility : reste visible le temps du fade-out */
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;

  position: absolute;
  /* Pleine largeur du conteneur par défaut (déterministe, OK sans JS et dans
     tous les navigateurs). Un script partagé (émis par MenuRender) rétrécit
     ensuite la largeur du panel à celle réellement occupée par les colonnes.
     NB : on n'utilise PAS width:fit-content — Safari calcule mal la max-content
     d'un conteneur flex-wrap (sous-dimensionne → colonnes qui passent à la
     ligne). La largeur explicite posée en JS est respectée partout. */
  left: 0;
  right: 0;
  top: 100%;
  z-index: 200;
  padding: 1.75rem 2rem;
  /* block (pas grid) : la grille interne se dimensionne normalement. Reste rendu
     en permanence (visibility/opacity) pour les transitions. */
  display: block;

  /* Couleurs définies par le thème */
  background: var(--mm-panel-bg, #ffffff);
  color:      var(--mm-panel-color, inherit);
  border-top: var(--mm-panel-border-top, 3px solid var(--mm-accent, #1e3a8a));
  box-shadow: var(--mm-panel-shadow, 0 8px 32px rgba(0,0,0,.12));
}

/* Ouverture hover/focus (desktop) */
.ntc-has-mega:hover > .ntc-megamenu-panel,
.ntc-has-mega:focus-within > .ntc-megamenu-panel {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease; /* pas de délai à l'ouverture */
}

/* Ouverture via JS (.ntc-mega-ouvert) — état « ouvert » uniquement.
   Le style accordéon (position:static, border-left…) est volontairement
   confiné au media query mobile : si cette classe se retrouve posée en
   desktop (ex. rotation tablette pendant que le menu est ouvert), le panel
   reste un panneau flottant correct au lieu d'un accordéon cassé. */
.ntc-has-mega.ntc-mega-ouvert > .ntc-megamenu-panel {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

/* ── Grille de colonnes ─────────────────────────────────────── */
/* Flex (et non grid 1fr) : les colonnes gardent une largeur NATURELLE au lieu
   de s'étirer aux extrémités quand il y en a peu, se regroupent au centre, et
   passent à la ligne au-delà de la largeur dispo (jamais de débordement). */
.ntc-megamenu-grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem 2.5rem;
  max-width: var(--mm-grille-max, 1100px);
  margin: 0 auto;
}

/* ── Colonne ─────────────────────────────────────────────────── */
.ntc-megamenu-col {
  display: flex;
  flex-direction: column;
  /* gap = espace entre sections EMPILÉES d'une même colonne (sans effet quand
     la colonne n'a qu'une section). L'espace titre→liens est géré par la marge
     du titre, à l'intérieur de chaque .ntc-megamenu-section. */
  gap: 1.5rem;
  /* largeur FIXE 210px (ni étirement ni rétrécissement). Le script de
     dimensionnement (MenuRender) somme ces largeurs pour ajuster le panel :
     une largeur fixe garantit un calcul exact et un rendu identique partout. */
  flex: 0 0 210px;
  min-width: 0;
  max-width: 210px; /* garde-fou : la colonne ne dépasse jamais 210px */
}
/* Une section = un titre + sa liste de liens (bloc empilable) */
.ntc-megamenu-section {
  display: block;
}

/* Titre de colonne */
.ntc-megamenu-col-titre {
  margin: 0 0 .5rem;
  padding-bottom: .4rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:        var(--mm-col-titre-color, var(--mm-accent, #1e3a8a));
  border-bottom: var(--mm-col-titre-border, 2px solid var(--mm-accent, #1e3a8a));
}

/* Liste de liens */
.ntc-megamenu-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.ntc-megamenu-col ul li a {
  display: block;
  padding: .3rem .4rem;
  border-radius: 4px;
  font-size: .92rem;
  color:      var(--mm-lien-color, inherit);
  text-decoration: none;
  transition: background .15s, color .15s, padding-left .15s;
}
.ntc-megamenu-col ul li a::before {
  content: '›';
  margin-right: .35em;
  opacity: .5;
}
.ntc-megamenu-col ul li a:hover,
.ntc-megamenu-col ul li a:focus {
  background:   var(--mm-lien-hover-bg, rgba(0,0,0,.05));
  color:        var(--mm-lien-hover-color, var(--mm-accent, #1e3a8a));
  padding-left: .75rem;
}

/* ── Mobile : le panel devient un accordéon ─────────────────── */
@media (max-width: 900px) {
  /* Le panel mobile est un accordéon en position:static : il n'a plus besoin
     que le <nav> soit le bloc de référence. On rétablit donc position:static
     sur .ntc-menu, sinon ce <nav> (réduit à zéro en mobile) devient le parent
     de positionnement du burger absolu des thèmes (Civium/Lagune) et le pousse
     hors écran — le burger disparaît. Voir le burger .ntc-menu-toggle, calé
     sur l'en-tête (.cv-header / .lag-header). */
  .ntc-menu {
    position: static;
  }
  /* Les conteneurs ne servent de bloc de référence au panel QU'EN DESKTOP. On
     les remet en static sur mobile, sinon le burger absolu des thèmes s'ancre
     dessus au lieu de l'en-tête et se retrouve mal placé. */
  .lag-header-nav-inner,
  .cv-header-nav-inner,
  .ntc-header-inner {
    position: static;
  }
  .ntc-megamenu-panel {
    /* Sur mobile : display pilote l'affichage (pas besoin de transition) */
    display: none;
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: none;
    transition: none;
    position: static;
    box-shadow: none;
    border-top: none;
    padding: 0;
    /* accordéon pleine largeur (au cas où une largeur inline aurait été posée) */
    width: auto;
    max-width: none;
  }
  /* CSS hover désactivé sur mobile — seul JS (.ntc-mega-ouvert) compte */
  .ntc-has-mega:hover > .ntc-megamenu-panel,
  .ntc-has-mega:focus-within > .ntc-megamenu-panel {
    display: none;
  }
  .ntc-has-mega.ntc-mega-ouvert > .ntc-megamenu-panel {
    /* block (pas grid) : la grille interne remplit alors toute la largeur et
       s'aligne à gauche. En grid, le panel centrait/rétrécissait la grille au
       contenu (~140px), d'où une indentation parasite en accordéon mobile. */
    display: block;
    position: static;
    box-shadow: none;
    border-top: none;
    padding: .5rem 0 .5rem 1rem;
    border-left: 3px solid var(--mm-accent, #1e3a8a);
  }
  .ntc-megamenu-grille {
    /* accordéon mobile : colonnes empilées en pleine largeur */
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .ntc-megamenu-col {
    /* en colonne, flex-basis pilote la HAUTEUR : on le remet à auto pour que
       chaque colonne épouse son contenu (sinon ~210px de vide vertical). */
    flex-basis: auto;
    /* accordéon mobile : colonnes pleine largeur, on lève le plafond desktop */
    max-width: none;
    /* tout est aplati en une liste verticale : on uniformise l'espace entre
       sections (1.5rem desktop) avec celui entre colonnes (gap de la grille). */
    gap: .75rem;
  }
  .ntc-megamenu-col-titre {
    font-size: .78rem;
  }
}

/* ── Accessibilité : réduit les animations si demandé ───────── */
@media (prefers-reduced-motion: reduce) {
  .ntc-megamenu-panel {
    transition: none;
  }
}