/* ─────────────────────────────────────────────────────────────────────────
   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 {
  position:absolute; top:calc(100% + 10px); left:0; transform:translateY(-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:translateY(0); }
/* Ressources est la dernière entrée déroulante : ancrée à droite, elle ne
   pousse jamais la page vers la droite. */
.nav-item[data-menu="ressources"] .mega { left:auto; right:0; }

.mega-produit    { grid-template-columns:300px 1fr; width:660px; }
.mega-ressources { grid-template-columns:1fr 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 {
  display:flex; flex-direction:column; justify-content:center; align-self:start;
  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; }
}