/* =========================================================
   HEADER / NAV – GLOBAL
========================================================= */

:root{
  --bg:#050507;
  --blue-1:#0ea5ff;
  --blue-2:#3b82f6;
}

header.nav{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  z-index:60;

  background:linear-gradient(
    180deg,
    rgba(5,5,7,0.6),
    rgba(5,5,7,0.25)
  );

  border-bottom:1px solid rgba(255,255,255,0.03);
  backdrop-filter:blur(6px);
  transition:box-shadow .3s ease;
}

/* Logo */
header.nav img{
  height:120px;
  width:auto;
  max-width:300px; /* ← contrôle la longueur */
}

/* Navigation */
header.nav nav{
  display:flex;
  gap:20px;
  align-items:center;
}

header.nav nav a{
  color:#b9d9ff;
  text-decoration:none;
  font-weight:500;
  padding:6px 4px;
  position:relative;
  letter-spacing:0.4px;
  transition:color .25s ease;
  font-size:15px;
}

/* Underline animated */
header.nav nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:linear-gradient(90deg, var(--blue-1), var(--blue-2));
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
  opacity:0.85;
}

header.nav nav a:hover{
  color:#d9ecff;
}

header.nav nav a:hover::after{
  transform:scaleX(1);
}

/* Active link */
header.nav nav a.active{
  color:#ffffff;
  font-weight:600;
}

header.nav nav a.active::after{
  transform:scaleX(1);
}