/* ============================================================
   NAV.CSS — Règles navigation communes à toutes les pages
   Inclus par les pages partenaires et spa-velo (toutes langues)
   Les pages index utilisent style.css qui contient les mêmes règles
   ============================================================ */

/* ── HAMBURGER ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none;
  cursor: pointer; padding: 4px;
  border-radius: 6px; flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── LANG SWITCHER ── */
.lang-switcher {
  display: flex; align-items: center; gap: 3px;
  background: #ede8dc; border-radius: 100px; padding: 4px;
}
.lang-btn {
  padding: 4px 10px; border-radius: 100px;
  border: none; background: transparent;
  font-family: inherit; font-size: 0.75rem; font-weight: 700;
  color: #4a5f5f; cursor: pointer;
  transition: all 0.2s ease; letter-spacing: 0.04em;
  text-decoration: none; display: inline-flex; align-items: center;
}
.lang-btn.active, .lang-btn:hover { background: #2c5454; color: #ffffff; }
/* Protège la couleur du bouton actif contre les règles .nav-links a.active des pages */
.nav-lang-list .lang-btn.active,
.nav-lang-list .lang-btn:hover { color: #ffffff; }

/* Section langue dans le menu burger — cachée sur desktop */
.nav-lang-mobile { display: none; }

/* ── MOBILE (≤ 768px) ── */
@media (max-width: 768px) {
  /* Layout : logo à gauche, hamburger à droite */
  .nav-inner { grid-template-columns: auto 1fr; }

  /* Hamburger visible, sombre sur fond de header clair */
  .nav-hamburger { display: flex; color: #2c5454; }
  .nav-hamburger span { background: currentColor; }
  .nav-hamburger.open { color: #2c5454; }

  /* Logo agrandi (sans changer la hauteur du header) */
  .nav-brand svg { height: 56px !important; }

  /* CTA masqué dans la nav (redondant avec le hero) */
  .nav-right .btn { display: none; }

  /* Menu burger ouvert */
  .nav-links.open {
    display: flex !important; flex-direction: column;
    align-items: flex-start; gap: 16px;
    position: absolute; top: 66px; left: 0; right: 0;
    padding: 20px 24px; z-index: 998;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }
  .nav-links.open li, .nav-links.open a { font-size: 1rem; }

  /* Sélecteur de langue masqué du header */
  .lang-switcher { display: none !important; }

  /* Section langue dans le burger */
  .nav-lang-mobile { display: block; width: 100%; }
  .nav-lang-divider { border-top: 1px solid rgba(44,84,84,0.15); margin: 8px 0 12px; }
  .nav-lang-list { display: flex; gap: 6px; flex-wrap: wrap; }
}