@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg: 220 15% 6%;
  --bg-card: 220 13% 10%;
  --primary: 215 25% 50%;
  --text: 220 15% 95%;
  --muted: 220 12% 58%;
  --border: 220 12% 18%;
}

.light {
  --bg: 220 15% 97%;
  --bg-card: 0 0% 100%;
  --primary: 215 25% 45%;
  --text: 220 15% 10%;
  --muted: 220 10% 45%;
  --border: 220 15% 88%;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Onest', sans-serif;
  background: hsl(var(--bg));
  color: hsl(var(--text));
  transition: background-color 0.3s ease, color 0.3s ease;
}

html { scroll-behavior: smooth; }

.bg-body { background-color: hsl(var(--bg)); }
.bg-card { background-color: hsl(var(--bg-card)); }
.text-main { color: hsl(var(--text)); }
.text-muted { color: hsl(var(--muted)); }
.text-accent { color: hsl(var(--primary)); }
.bg-accent { background-color: hsl(var(--primary)); }
.border-main { border-color: hsl(var(--border)); }

.text-gradient {
  background: linear-gradient(to right, hsl(var(--primary)), hsl(210 60% 60%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card {
  background: hsla(var(--bg-card), 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsla(var(--border), 0.3);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.light .glass-card {
  background: hsla(var(--bg-card), 0.85);
  border-color: hsla(var(--border), 0.6);
}

.nav-blur {
  background: hsla(var(--bg), 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.game-card {
  background: hsl(var(--bg-card));
  border: 1px solid hsla(var(--border), 0.3);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.game-card:hover { border-color: hsla(var(--primary), 0.4); }

.game-card.popular {
  border-color: hsla(var(--primary), 0.4);
}

.btn-primary {
  background: hsl(var(--primary));
  color: #fff;
  transition: opacity 0.2s ease;
}
.btn-primary:hover { opacity: 0.9; }

.btn-outline {
  border: 1px solid hsla(var(--border), 0.4);
  background: hsla(var(--bg-card), 0.3);
  color: hsl(var(--text));
  transition: background-color 0.2s ease;
}
.btn-outline:hover { background: hsla(var(--bg-card), 0.6); }
.light .btn-outline { border-color: hsla(var(--border), 0.6); }

.coming-soon {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
}
.coming-soon::after {
  content: 'Bientôt disponible';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: hsl(var(--primary));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  white-space: nowrap;
  z-index: 10;
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: hsl(var(--bg)); }
::-webkit-scrollbar-thumb { background: hsla(var(--primary), 0.3); border-radius: 999px; }

.hero-overlay {
  background: linear-gradient(to top, hsl(var(--bg)), hsla(var(--bg), 0.8), hsla(var(--bg), 0.4));
}

.section-alt {
  background: hsla(var(--bg-card), 0.3);
}

#mobile-menu { display: none; }
#mobile-menu.open { display: flex; }

.footer-link { transition: color 0.2s ease; }
.footer-link:hover { color: hsl(var(--text)); }

.theme-toggle {
  background: hsla(var(--border), 0.3);
  border: 1px solid hsla(var(--border), 0.4);
  color: hsl(var(--text));
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover {
  background: hsla(var(--border), 0.5);
}

.check-icon { color: hsl(var(--primary)); flex-shrink: 0; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

body { animation: fadeIn 0.5s ease-out; }

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.promo-banner {
  background: linear-gradient(90deg, hsla(var(--primary), 0.15), hsla(var(--primary), 0.05));
  border: 1px solid hsla(var(--primary), 0.3);
  animation: slideDown 0.5s ease-out 0.2s both;
}

.promo-code {
  background: hsla(var(--primary), 0.2);
  border: 1px dashed hsla(var(--primary), 0.6);
  letter-spacing: 0.15em;
}