/* ─────────────────────────────────────────────────────────────────────────
   Navigation principale du site — feuille unique, partagée par toutes les
   pages publiques (landing, contact, documentation, pages légales).

   Elle est volontairement autonome : chaque page définit ses propres
   variables de couleur, et certaines n'ont pas les mêmes. Toutes les
   valeurs ont donc une repli codée en dur, pour qu'un oubli de variable
   ne vide pas la barre — c'est déjà arrivé.

   Le méga-menu n'existe qu'au-delà de 900 px. Dérouler un panneau à deux
   colonnes sur un écran de 375 px n'aide personne : sur téléphone, chaque
   page garde son volet burger et sa liste à plat.
   ───────────────────────────────────────────────────────────────────────── */

.nav-links { display:flex; align-items:center; gap:4px; margin-left:auto; font-size:14px; }
.nav-links > a {
  padding:9px 12px; border-radius:9px; border-bottom:0;
  color:var(--ink-soft, #5B5E63); text-decoration:none;
}
.nav-links > a:hover { color:var(--ink, #17181A); background:var(--paper-3, #F4F3EF); }

.nav-item { position:relative; }
.nav-item > button {
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:14px; color:var(--ink-soft, #5B5E63);
  padding:9px 12px; border-radius:9px;
  display:inline-flex; align-items:center; gap:6px;
}
.nav-item > button:hover,
.nav-item[data-ouvert] > button { color:var(--ink, #17181A); background:var(--paper-3, #F4F3EF); }
.nav-item > button svg { transition:transform .18s ease; }
.nav-item[data-ouvert] > button svg { transform:rotate(180deg); }

.mega {
  /* Centré sous son propre bouton : le panneau se déplie dans l'axe de
     « Produit », pas à côté. --decalage est posé par nav.js quand le panneau
     centré sortirait de la fenêtre — il le ramène dedans sans le décentrer
     davantage que nécessaire. Ancré à droite comme avant, le panneau semblait
     appartenir au bouton voisin. */
  position:absolute; top:calc(100% + 6px); left:50%; right:auto;
  max-width:calc(100vw - 32px);
  transform:translate(calc(-50% + var(--decalage, 0px)), -6px);
  background:var(--paper, #FFFFFF); border:1px solid var(--line, #E8E7E2); border-radius:16px;
  box-shadow:0 30px 70px -34px rgba(23,24,26,.30);
  padding:22px; display:grid; gap:26px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, transform .18s ease, visibility .16s;
}
.nav-item[data-ouvert] .mega {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(calc(-50% + var(--decalage, 0px)), 0);
}
/* Le panneau Produit garde deux colonnes, mais la première peut se comprimer
   plutôt que forcer une largeur. */
.mega-produit { grid-template-columns:minmax(0,300px) minmax(0,1fr); }

.mega-produit    { width:660px; }
.mega-ressources { grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:560px; }

.mega h4 {
  font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep, #8A6E3A); margin:0 0 12px;
}
.mega-liste { display:flex; flex-direction:column; gap:2px; }
.mega-liste a {
  display:block; padding:10px 12px; border-radius:10px; border-bottom:0; text-decoration:none;
  font-size:14px; font-weight:500; color:var(--ink, #17181A); line-height:1.35;
}
.mega-liste a span {
  display:block; margin-top:2px; font-size:12.5px; font-weight:400;
  color:var(--ink-mute, #91949A);
}
.mega-liste a:hover { background:var(--paper-2, #FAFAF8); }

.mega-vedette {
  /* stretch, pas start : la carte doit descendre jusqu'au bas du panneau.
     Alignée en haut, elle laissait un grand vide sous elle — le panneau
     paraissait à moitié rempli. */
  display:flex; flex-direction:column; justify-content:center; align-self:stretch;
  border-bottom:0; text-decoration:none;
  background:var(--paper-2, #FAFAF8); border:1px solid var(--line, #E8E7E2); border-radius:13px;
  padding:18px; color:var(--ink, #17181A);
}
.mega-vedette:hover { background:var(--paper-3, #F4F3EF); }
.mega-vedette .eti {
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep, #8A6E3A);
}
.mega-vedette strong { display:block; margin-top:8px; font-size:16px; font-weight:500; letter-spacing:-.015em; }
.mega-vedette p { margin:6px 0 0; font-size:13px; color:var(--ink-soft, #5B5E63); line-height:1.5; }

@media (max-width:900px) {
  /* Toute la barre disparaît, pas seulement les panneaux : sinon « Tarifs »
     et « Questions » restaient affichés à côté du burger, qui contient déjà
     les mêmes liens. */
  .nav-links, .nav-item, .mega { display:none !important; }
}