/* ── Variables navbar (complètent celles de style.css) ─── */
:root {
  --nav-bg-dark:  rgba(6,3,15,.82);
  --nav-bg-light: rgba(248,246,255,.92);
  --glass-border-dark:  rgba(255,255,255,.1);
  --glass-border-light: rgba(124,58,237,.18);
  /* Couleurs de dégradé de marque (identiques à accueil.html, qui les
     définit lui-même car il n'utilise pas cette feuille de style) */
  --v1: #7c3aed;
  --v2: #a855f7;
  --p1: #ec4899;
  --b1: #38bdf8;
}

[data-theme="dark"]  { --nav-bg: var(--nav-bg-dark);  --glass-border: var(--glass-border-dark); }
[data-theme="light"] { --nav-bg: var(--nav-bg-light); --glass-border: var(--glass-border-light); }

/* ── Barre ──────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background .3s ease;
}

/* ── Logo ─────────────────────────────────────────────────*/
.nav-logo {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--v2), var(--p1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Liens desktop ────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .2s ease;
}

.nav-links a:hover { color: var(--ink); }

/* ── Zone CTA droite ──────────────────────────────────── */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Bouton thème ─────────────────────────────────────── */
.nav-theme {
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
  flex-shrink: 0;
}

.nav-theme:hover {
  border-color: rgba(124,58,237,.4);
  background: rgba(124,58,237,.08);
}

/* ── Bouton Se connecter ──────────────────────────────── */
.nav-login {
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  transition: all .2s ease;
}

.nav-login:hover { color: var(--ink); border-color: rgba(255,255,255,.2); }

[data-theme="light"] .nav-login { border-color: rgba(124,58,237,.2); }

/* ── Bouton S'inscrire ────────────────────────────────── */
.nav-register {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--v1), var(--p1));
  box-shadow: 0 0 20px rgba(124,58,237,.4);
  transition: all .2s ease;
}

.nav-register:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(124,58,237,.6);
}

/* ── Burger mobile ────────────────────────────────────── */
.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
}

[data-theme="light"] .nav-burger { border-color: rgba(124,58,237,.2); }

/* ── Dropdown mobile ──────────────────────────────────── */
#navbar.nav-mobile-open .nav-links {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 64px;
  left: 0; right: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  gap: 8px;
}

/* ── Offset contenu sous la navbar fixe ─────────────── */
body { padding-top: 64px; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 768px) {
  .nav { padding: 0 20px; }
}

@media (max-width: 480px) {
  .nav-cta .nav-login { display: none; }
}