:root {
  /* Fond Navy profond (Slate 950/900 mix) */
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;

  --card: 222 47% 11%;
  --card-foreground: 210 40% 98%;

  --popover: 222 47% 11%;
  --popover-foreground: 210 40% 98%;

  /* Cyan/Teal pour le primaire */
  --primary: 180 70% 50%;
  --primary-foreground: 222 47% 11%;

  --secondary: 217 32% 17%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217 32% 17%;
  --muted-foreground: 215 20% 65%;

  --accent: 217 32% 17%;
  --accent-foreground: 210 40% 98%;

  --destructive: 0 62% 30%;
  --destructive-foreground: 210 40% 98%;

  --border: 217 32% 20%;
  --input: 217 32% 20%;
  --ring: 180 70% 50%;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  /* Ajout du gradient de fond subtil */
  background-image: radial-gradient(circle at 50% 0%, hsl(222 47% 15%), transparent 70%);
  background-attachment: fixed;
}

.glass-nav {
  background-color: hsla(var(--background) / 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsla(var(--border) / 0.5);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.nav-link.active {
  border: 1px solid white;
}