/* Valenya Online — mise en avant de la page Steam (liste de souhaits).
   Feuille autonome : chargée par l'accueil comme par les pages générées
   (blog, notes de version, guide, classement), d'où ses propres jetons. */

:root {
  --steam-ink:#ece4d2; --steam-muted:#a3a8bf; --steam-gold:#e8b45c; --steam-gold-hi:#f7e0a8;
  --steam-blue:#66c0f4; --steam-blue-deep:#1a3a5c; --steam-panel:#0d1424;
  --steam-line:rgba(102,192,244,.28);
}

/* ---- Bouton liste de souhaits ---- */
.steam-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:8px; border:1px solid rgba(102,192,244,.55);
  background:linear-gradient(180deg,#2a6a9c,#174a75); color:#fff; font-weight:700;
  font-size:15px; letter-spacing:.02em; text-decoration:none; line-height:1.62; font-family:inherit;
  box-shadow:0 6px 24px rgba(102,192,244,.22); transition:transform .15s, box-shadow .15s; }
.steam-btn:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(102,192,244,.38); color:#fff; }
/* Logo Steam (fichier monochrome) peint en couleur du texte via un masque. */
.steam-btn::before, .steam-logo::before { content:""; flex:none; width:1.25em; height:1.25em;
  background:currentColor; -webkit-mask:url(../media/steam/steam-logo.svg) center/contain no-repeat;
  mask:url(../media/steam/steam-logo.svg) center/contain no-repeat; }
/* Le libellé reste dans la ligne de texte : seul le pictogramme est recalé sur la base. */
.steam-logo::before { display:inline-block; margin-right:6px; vertical-align:-0.22em; }
.steam-btn--small { padding:9px 16px; font-size:13px; }

/* ---- Bandeau fin, sous la navigation des pages secondaires ---- */
.steam-band { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center;
  margin:0 auto; padding:12px 16px; border-bottom:1px solid var(--steam-line);
  background:linear-gradient(90deg,rgba(26,58,92,.55),rgba(13,20,36,.9) 50%,rgba(26,58,92,.55));
  color:var(--steam-ink); font-size:14px; text-align:center; }
.steam-band img { width:92px; height:auto; border-radius:4px; box-shadow:0 2px 10px rgba(0,0,0,.4); }
.steam-band p { margin:0; }
.steam-band strong { color:var(--steam-blue); }

/* ---- Section dédiée de l'accueil ---- */
.steam-wishlist { padding:clamp(56px,8vw,96px) 0; background:
  radial-gradient(ellipse at 20% 50%,rgba(102,192,244,.12),transparent 60%),
  linear-gradient(180deg,#060810,#0a1222 50%,#060810); }
.steam-card { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,48px);
  align-items:center; max-width:1080px; margin:0 auto; }
.steam-card-media { position:relative; display:block; border-radius:12px; overflow:hidden;
  border:1px solid var(--steam-line); box-shadow:0 18px 50px rgba(0,0,0,.55); }
.steam-card-media img { width:100%; height:auto; display:block; transition:transform .4s; }
.steam-card-media:hover img { transform:scale(1.03); }
.steam-ribbon { position:absolute; top:14px; left:14px; padding:6px 12px; border-radius:6px;
  background:rgba(6,8,16,.82); border:1px solid var(--steam-line); color:var(--steam-blue);
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.steam-card-body h2 { margin:10px 0 14px; font-size:clamp(28px,4vw,42px); }
.steam-card-body > p { color:var(--steam-muted); font-size:16px; }
.steam-card-body > p + p { margin-top:12px; }
.steam-steps { list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:10px; counter-reset:steam; }
.steam-steps li { counter-increment:steam; display:flex; gap:12px; align-items:baseline; color:var(--steam-ink); }
.steam-steps li::before { content:counter(steam); flex:none; width:26px; height:26px; border-radius:50%;
  display:inline-grid; place-items:center; font-size:13px; font-weight:700; color:#06101c;
  background:var(--steam-blue); }
.steam-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding:0; list-style:none; }
.steam-facts li { padding:5px 11px; border-radius:999px; border:1px solid var(--steam-line);
  color:var(--steam-muted); font-size:12.5px; }

/* ---- Rappel dans la section de téléchargement ---- */
.steam-inline { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:16px auto 0; padding:12px 18px; max-width:640px; border-radius:10px;
  border:1px solid var(--steam-line); background:rgba(26,58,92,.25); }
.steam-inline p { margin:0; color:var(--steam-ink); font-size:14px; }

/* ---- Accroche du héros ---- */
.steam-hero-note { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:7px 14px;
  border-radius:999px; border:1px solid var(--steam-line); background:rgba(6,8,16,.6);
  color:var(--steam-ink); font-size:13px; text-decoration:none; }
.steam-hero-note strong { color:var(--steam-blue); }
.steam-hero-note:hover { border-color:var(--steam-blue); }

@media (max-width:820px) {
  .steam-card { grid-template-columns:minmax(0,1fr); }
  .steam-band img { display:none; }
}
@media (max-width:480px) {
  .steam-card .steam-btn, .steam-inline .steam-btn { width:100%; }
  .steam-band { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .steam-btn, .steam-card-media img { transition:none; }
}

/* ---- Bouton de la navigation de l'accueil, collé à « Jouer gratuitement » ---- */
.nav-steam { gap:0; font-size:12.5px; white-space:nowrap; }
.nav-steam::before { margin-right:8px; width:16px; height:16px; }
@media (max-width:1280px) {
  .nav-steam .nav-cta-long { display:none; }
}