/* ══════════════════════════════════════════
   RAPLAY — CSS Global centralisé
   ══════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --bg:#080808; --surface:#141414; --surface2:#1c1c1c; --border:#2a2a2a;
  --purple:#7c3aed; --purple2:#6d28d9; --purple-light:#a78bfa; --purple-dim:#4c1d95;
  --text:#f0ede8; --text-muted:#6b6560;
  --red:#ff3232; --green:#3ddc84;
  --font-display:'Bebas Neue',sans-serif;
  --font-body:'Syne',sans-serif;
  --font-mono:'DM Mono',monospace;
  --nav-h:64px;
}

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);min-height:100vh;overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:1000;opacity:0.6;
}

/* ── Nav ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:var(--nav-h);
  background:rgba(8,8,8,0.92);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(124,58,237,0.2);
}
.nav-logo{
  font-family:var(--font-display);font-size:2rem;letter-spacing:0.1em;
  background:linear-gradient(135deg,var(--purple),var(--purple-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-decoration:none;
}
.nav-links{display:flex;gap:28px;list-style:none;}
.nav-links a{
  color:var(--text-muted);text-decoration:none;font-size:0.8rem;
  font-weight:600;letter-spacing:0.12em;text-transform:uppercase;transition:color 0.2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--purple-light);}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;}
.nav-burger span{display:block;width:24px;height:2px;background:var(--text-muted);transition:all 0.3s;border-radius:2px;}
.nav-mobile{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;
  background:rgba(8,8,8,0.98);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(124,58,237,0.2);
  padding:16px 0;z-index:890;
  flex-direction:column;
}
.nav-mobile.open{display:flex;}
.nav-mobile a{
  padding:14px 28px;color:var(--text-muted);text-decoration:none;
  font-size:0.9rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,0.04);transition:color 0.2s,background 0.2s;
}
.nav-mobile a:hover,.nav-mobile a.active{color:var(--purple-light);background:rgba(124,58,237,0.06);}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
  border-radius:6px;font-family:var(--font-body);font-size:0.85rem;
  font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;border:none;transition:all 0.2s;text-decoration:none;
}
.btn-purple{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;}
.btn-purple:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,0.45);}
.btn-outline{background:transparent;color:var(--purple-light);border:1px solid var(--purple-dim);}
.btn-outline:hover{border-color:var(--purple);background:rgba(124,58,237,0.08);}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);border-color:#555;}

/* ── Footer ── */
footer{
  padding:36px 40px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;text-align:center;
}
.footer-links{justify-content:center;}
.footer-logo{
  font-family:var(--font-display);font-size:1.5rem;letter-spacing:0.1em;
  background:linear-gradient(135deg,var(--purple),var(--purple-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;}
.footer-links a{
  font-size:0.75rem;color:var(--text-muted);text-decoration:none;
  font-family:var(--font-mono);transition:color 0.2s;
}
.footer-links a:hover{color:var(--purple-light);}
.footer-text{font-size:0.72rem;color:var(--text-muted);font-family:var(--font-mono);}

/* ── Divider ── */
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,237,0.3),transparent);margin:0 40px;}

/* ── Sections ── */
.section{padding:80px 40px;max-width:1200px;margin:0 auto;}
.section-label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--purple-light);margin-bottom:12px;}
.section-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);letter-spacing:0.03em;line-height:1;margin-bottom:16px;}
.section-desc{color:var(--text-muted);font-size:0.95rem;line-height:1.7;max-width:520px;margin-bottom:48px;}

/* ── Reveal animation ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── Badge "Bientôt disponible" ── */
/* Style unifié pour toutes les GameCard en construction (accueil, jeux, blindtest, tierlist).
   Texte + contour jaune orangé. À utiliser via class="construction-badge". */
.construction-badge{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:#f59e0b;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:4px;padding:6px 12px;display:inline-block;margin-top:8px;text-transform:uppercase;}

/* ══════════════════════════════════════════
   RESPONSIVE — Mobile first
   ══════════════════════════════════════════ */
@media(max-width:768px){
  nav{padding:0 20px;}
  .nav-links{display:none !important;}
  .nav-burger{display:flex;}
  .section{padding:48px 20px;}
  .divider{margin:0 20px;}
  footer{padding:24px 20px;}
  .footer-links{gap:14px;}
}

/* ── Badge "NOUVEAU" sur GameCard / ThemeCard / PresetCard ──
   Pastille en haut-gauche, z-index élevé pour passer au-dessus de l'overlay.
   Activée serveur-side via la colonne new_until (auto-disparition après 7 j). */
.badge-new-pill{
  position:absolute;
  top:14px; left:14px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:linear-gradient(135deg,#ff3d6e,#ff6b9d);
  color:#fff;
  font-family:var(--font-mono,"SF Mono",ui-monospace,monospace);
  font-size:0.62rem;
  letter-spacing:0.18em;
  font-weight:700;
  padding:5px 10px 5px 8px;
  border-radius:20px;
  box-shadow:0 4px 14px rgba(255,61,110,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
  pointer-events:none;
  text-shadow:0 1px 1px rgba(0,0,0,0.2);
}
.badge-new-pill::before{
  content:"✦";
  font-size:0.8rem;
  letter-spacing:0;
}

/* Variante bottom-right pour les cartes de tierlists (où le badge en haut
   à gauche recouvrirait le titre). */
.badge-new-pill.badge-new-pill--br{
  top:auto; left:auto;
  bottom:14px; right:14px;
}