/* ===== Base ===== */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  margin:0; background:#0b1020; color:#eef2ff;
}
a { color:#8ab4ff; text-decoration:none }
header, footer { background:#0d1328; padding:12px 16px; border-bottom:1px solid #1b2450 }
main { max-width:980px; margin:24px auto; padding:0 16px; }
.card { background:#0f1835; border:1px solid #1b2450; border-radius:12px; padding:16px; margin:12px 0; }
.btn { background:#405cf5; color:white; border:0; padding:10px 14px; border-radius:10px; cursor:pointer; }

.btn.secondary { background:#263260 }
input, select {
  width: 280px;         /* largeur fixe des champs */
  max-width: 100%;      /* ne pas dépasser le conteneur en mobile */
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #1b2450;
  background: #0c1530;
  color: #eef2ff;
}

form .row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
form .row > div { display:flex; flex-direction:column; gap:8px; }
.danger { color:#ff6b6b }
.success { color:#00d084 }
nav a { margin-right:12px }

/* ===== Jeux : grille & cartes ===== */
.games-section { margin: 24px 0; }
.games-title { margin-bottom: 12px; }
.games-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.game-card {
  position: relative; overflow: hidden;
  padding: 16px; border-radius: 16px;
  background: radial-gradient(1200px 400px at -10% -20%, rgba(255,255,255,.07), rgba(255,255,255,.01) 40%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration: none; color: inherit;
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  border-color: rgba(255,255,255,.22);
}
.game-card__top { display:flex; justify-content:flex-end; height: 0; }
.badge {
  display:inline-block; font-size:11px; padding: 4px 8px; border-radius:999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(6px);
}
.badge-new { background: linear-gradient(90deg,#6ee7f9,#a78bfa); color:#0b1020; border:0; }
.badge-gold { background: linear-gradient(90deg,#ffd974,#ff9f43); color:#341e00; border:0; }
.game-card__icon { font-size:42px; line-height:1; margin: 16px 0 10px; }
.game-card h4 { margin: 0 0 6px; }
.game-card p { margin: 0; opacity:.9; }

/* ===== Champs compacts pour les formulaires d'auth ===== */
.form-compact .input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* largeur fixe + anti-étirement */
.form-compact input,
.form-compact select,
.form-compact textarea {
  width: 280px !important;
  max-width: 100%;
  flex: 0 0 280px !important;  /* annule tout flex:1 inline */
}

/* bouton œil aligné correctement */
.form-compact .btn.secondary {
  height: 42px;              /* à ajuster si besoin */
  line-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}


/* Hero des pages jeux */
.hero-game {
  border-radius: 18px; padding: 32px; margin-bottom: 16px;
  color: #fff; overflow: hidden; position: relative;
}
.gradient-hero {
  background: linear-gradient(135deg, #2b1055 0%, #6f42c1 40%, #0ea5e9 100%);
}
.hero-game::after {
  content:""; position:absolute; inset:-40%; background:
    radial-gradient(closest-side, rgba(255,255,255,.18), transparent 60%);
  animation: pulse 8s ease-in-out infinite;
}
.hero-game__content { position: relative; z-index: 1; }

/* Shine effect */
.shine::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.24) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.shine:hover::before{ transform: translateX(120%); }

/* Reveal on scroll */
.reveal { opacity:0; transform: translateY(16px); transition: .6s ease; }
.reveal.revealed { opacity:1; transform:none; }

/* Tilt shadow accent */
.tilt { will-change: transform; }
@keyframes pulse { 0%,100%{transform:translate(0,0)} 50%{transform:translate(6%, -4%)} }

/* Bouton orange (retrait) */
.btn.warning {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #111;
}
.btn.warning:hover {
  background: #d97706;
  border-color: #d97706;
  color: #111;
}

/* Ligne de boutons avec espace */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ===== Header + Drawer ===== */
:root{
  --header-h: 56px;
  --z-header: 1000;
  --z-overlay: 999;
  --z-drawer: 1001;
}

.site-header{
  position: sticky; top: 0; z-index: var(--z-header);
  background:#0b1220; color:#fff; border-bottom:1px solid #1b2450;
}
.header-inner{
  height: var(--header-h);
  display:flex; align-items:center; gap:12px; padding:0 12px;
}
.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; background:transparent; color:#fff; border-radius:8px;
}
.hamburger:focus-visible{ outline:2px solid #61dafb; outline-offset:2px; }

.brand{ display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:600; }
.header-actions{ margin-left:auto; display:flex; gap:8px; }
.btn-small{
  display:inline-flex; align-items:center; height:32px; padding:0 10px;
  border-radius:8px; background:#1f2a44; color:#fff; text-decoration:none; font-size:14px;
}
.btn-small:hover{ background:#243253; }

/* Nav desktop (visible ≥1024px) */
.nav-desktop{ display:none; gap:16px; padding:8px 12px; }
.nav-desktop a{ color:#dbe3ff; text-decoration:none; padding:8px 10px; border-radius:8px; }
.nav-desktop a:hover{ background: rgba(255,255,255,.06); }

@media (min-width: 1024px){
  .hamburger{ display:none; }
  .nav-desktop{
    display:flex;
    border-top:1px solid rgba(255,255,255,.06);
  }
}

/* Overlay & Drawer mobile */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:var(--z-overlay); opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:86vw; max-width:320px;
  background:#0b1220; color:#fff; z-index:var(--z-drawer);
  transform:translateX(-100%); transition:transform .22s ease;
  display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.08);
}
.drawer-header{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer-title{ font-weight:600; }
.drawer-close{ width:36px; height:36px; border:0; background:transparent; color:#fff; border-radius:8px; }
.drawer-nav{ display:flex; flex-direction:column; padding:8px; }
.drawer-nav a{ color:#e8eeff; text-decoration:none; padding:12px 10px; border-radius:10px; }
.drawer-nav a:hover{ background: rgba(255,255,255,.06); }
.drawer-nav hr{ border:0; height:1px; background: rgba(255,255,255,.08); margin:8px 0; }

.drawer.is-open{ transform:translateX(0); }
.drawer-overlay.is-visible{ opacity:1; pointer-events:auto; }

.body-lock{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .drawer, .drawer-overlay{ transition:none; }
}

/* Option : adoucir l’ancien spacing nav global */
header nav a { margin-right:0; }

/* --- Patch anti-doublon : pas de drawer sur desktop --- */
@media (min-width: 1024px){
  .drawer,
  .drawer-overlay{
    display: none !important;
  }
}
/* Sécurité : drawer toujours hors écran par défaut */
.drawer{
  transform: translateX(-100%) !important;
}
/* --- Hotfix visibilité nav/drawer --- */

/* Cacher la nav desktop en mobile, SANS discussion */
@media (max-width: 1023px){
  .nav-desktop { display: none !important; }
}

/* Cacher le drawer & l’overlay en desktop, SANS discussion */
@media (min-width: 1024px){
  .drawer,
  .drawer-overlay {
    display: none !important;
  }
  /* le bouton hamburger ne sert que sur mobile */
  .hamburger { display: none !important; }
}

/* Assurer que l'attribut [hidden] masque bien l'overlay sur tous moteurs */
.drawer-overlay[hidden] { display: none !important; }

/* Sécurité : le drawer est hors écran tant qu’il n’est pas ouvert */
.drawer { transform: translateX(-100%) !important; }

/* Quand ouvert, il glisse : */
.drawer.is-open { transform: translateX(0) !important; }

/* Overlay actif cliquable */
.drawer-overlay.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}