/* ============ Header ============ */
.header{
  background:#7C4DFF;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  padding:1rem 2rem;
  position:sticky; top:0; z-index:1000;
}

/* ============ Navbar layout (MOBILE par défaut) ============ */
/* Grille: [burger][logo centré][placer vide] */
.navbar{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
}

/* Logo */
.logo{ justify-self:center; }
.logo a{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.logo img{ height:32px; }
.logo span{
  font-weight:bold; font-size:1.2rem;
  padding:.2rem .7rem; color:#fff; background:#9abaff; border-radius:6px;
}

/* Liens (style commun)*/ 
.nav-links{ list-style:none; display:flex; gap:1.5rem; margin:0; padding:0; }
.nav-links a{ text-decoration:none; color:#fff; font-weight:500; transition:color .2s; }
.nav-links a:hover{ color:#3165D4; }

/* Boutons */
.btn{ text-decoration:none; }
.btn.btn-outline{ background:transparent; border:1px solid #fff; color:#fff; padding:.5rem .9rem; border-radius:.6rem; }
.btn.btn-filled{ background:#fff; color:#7C4DFF; padding:.5rem .9rem; border-radius:.6rem; font-weight:700; }

/* Burger*/ 
.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:transparent; border:1px solid rgba(255,255,255,.35);
  border-radius:10px; padding:0 10px; cursor:pointer;
}
.nav-toggle .bar{ display:block; width:100%; height:2px; background:#fff; border-radius:2px; }

/* Cacher les éléments "desktop" en mobile */
.desktop-only{ display:none; }

/* Panneau mobile (fermé par défaut) */
.nav-drawer{
  position:absolute; top:100%; left:1rem; right:1rem;
  display:none; flex-direction:column; gap:1rem;
  padding:.9rem; background:#6c3fff; border-radius:.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.14); z-index:2000;
}
html.nav-open .nav-drawer{ display:flex; }

.drawer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.nav-drawer .drawer-links a{ color:#fff !important; text-decoration:none; padding:.5rem .25rem; display:block; }
.drawer-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* ============ DESKTOP (>=1024px) ============ */
/* Layout: [logo gauche][liens centrés][boutons droite] */
@media (min-width:1024px){
  .navbar{ grid-template-columns:auto 1fr auto; }

  .nav-toggle{ display:none; }
  .logo{ justify-self:start; }

  .desktop-only{ display:flex; }

  .nav-links{
    grid-column:2; justify-self:center;
    display:flex; gap:1.5rem; margin:0; padding:0; list-style:none;
  }
  .nav-buttons{
    grid-column:3; justify-self:end;
    display:flex; gap:.75rem;
  }

  /* Forcer la fermeture/masquage du panneau mobile en desktop */
  .nav-drawer{ display:none !important; }}