@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');
/* ===== Variables rapides (cohérentes landing) ===== */
:root{
  --ink: #0F172A;
  --ink-2:#334155;
  --line: rgba(255,255,255,.35);

  --violet-1:#8B5CF6; --violet-2:#7C3AED;
  --green-1:#10B981;  --green-2:#059669;

  --blur: 16px;      /* force du verre */
  --sat: 180%;       /* saturation verre */
}

/* ===== Header : verre translucide + halos ===== */
.glass-header{
  position: sticky; top: 0; z-index: 50;
  height: 72px;
  display: block;
  /* couche verre (transparent pour laisser passer les halos du fond) */
  background: rgba(255,255,255,.24);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  border-bottom: 1px solid var(--line);

  /* léger voile de halos internes (bleu/teal/rose) qui se fondent avec le hero */
  background-image:
    linear-gradient(120deg,
      rgba(99,102,241,.10) 0%,
      rgba(6,182,212,.06) 50%,
      rgba(244,114,182,.06) 100%);
}

/* État scrolled : un peu plus dense pour la lisibilité en descente */
.glass-header.scrolled{
  background: rgba(255,255,255,.65);
  background-image:
    linear-gradient(120deg,
      rgba(99,102,241,.06) 0%,
      rgba(6,182,212,.04) 50%,
      rgba(244,114,182,.04) 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border-bottom-color: rgba(255,255,255,.5);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* ===== Contenu interne ===== */
.hdr-inner{
  max-width: 1100px; height: 72px;
  margin: 0 auto; padding: 0 18px;
  display: grid; align-items: center;
  grid-template-columns: auto 1fr auto; gap: 18px;
}

/* Logo */
.brand{ display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-logo{
  height: clamp(56px, 4.6vw, 74px);  /* beaucoup plus visible, adaptatif */
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
  transition: transform .25s ease, filter .25s ease;
}

/* Petit effet d’éclairage au survol */
.brand-logo:hover{
  transform: translateY(-1px) scale(1.03);
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,.12))
    drop-shadow(0 0 14px rgba(139,92,246,.15)); /* léger glow violet */
}


/* Nav */
.nav{
  display: flex; gap: 18px; align-items: center; justify-content: center;
}
.nav-link{
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font: 600 14px/1.2 "Poppins","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  opacity: .9;
  transition: opacity .25s ease, text-shadow .25s ease, transform .25s ease;
}
.nav-link:hover{
  opacity: 1;
  text-shadow: 0 0 6px rgba(59,130,246,.35); /* glow subtil bleu */
  transform: translateY(-1px);
}

/* Actions (boutons) */
.actions{ display: flex; gap: 10px; align-items: center; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font: 700 14px/1 "Poppins","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease;
}

.btn-green{
  background: linear-gradient(180deg, var(--green-1) 0%, var(--green-2) 100%);
  border-color: rgba(16,185,129,.5);
  box-shadow: 0 8px 18px rgba(16,185,129,.22);
}
.btn-green:hover{
  background: linear-gradient(180deg, #34D399 0%, var(--green-1) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(16,185,129,.30);
}

.btn-violet{
  background: linear-gradient(180deg, var(--violet-1) 0%, var(--violet-2) 100%);
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 8px 18px rgba(139,92,246,.22);
}
.btn-violet:hover{
  background: linear-gradient(180deg, #A78BFA 0%, var(--violet-1) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(139,92,246,.30);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .nav{ gap: 14px; }
}
@media (max-width: 720px){
  .hdr-inner{ grid-template-columns: auto auto; gap: 12px; }
  .nav{ display: none; } /* on masquera la nav pour une version burger plus tard */
  .actions .btn{ padding: .55rem 1rem; }
}

/* Liens de navigation */
.nav {
  display: flex;
  gap: 28px;
}

.nav-link {
  font: 600 16px/1.3 'Poppins', system-ui, sans-serif;
  color: rgba(15, 23, 42, .8);
  text-decoration: none;
  position: relative;
  transition: color .25s ease;
}

/* Hover / Focus : un léger halo coloré façon landing */
.nav-link:hover,
.nav-link:focus-visible {
  color: #111827;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #4F46E5, #10B981);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s ease;
  border-radius: 2px;
  opacity: .8;
}

/* Animation au survol */
.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* Variante active */
.nav-link.active {
  color: #111827;
}
.nav-link.active::after {
  transform: scaleX(1);
  opacity: 1;
}