/* style.css — styles partagés entre toutes les pages STEAM VOIX FR */

:root {
  --steam-top:#171a21;
  --steam-bg-grad-a:#1b2838;
  --steam-bg-grad-b:#171d25;
  --panel:#16202d;
  --panel2:#1a2332;
  --line-soft:#2a3f5a;
  --ink:#c7d5e0;
  --ink-bright:#ffffff;
  --dim:#8f98a0;
  --faint:#4c5d6e;
  --bleu:#66c0f4;
  --bleu-link:#66c0f4;
  --bleu-deep:#1387b8;
  --err:#ff6a6a;
  --ok:#66cc33;
  --warn:#ffc82c;
  --metascore-hi:#66cc33;
  --metascore-mid:#ffc82c;
  --metascore-lo:#ff6a6a;
}

*{box-sizing:border-box}

html,body {
  margin:0;
  background:var(--steam-bg-grad-b);
  color:var(--ink);
  font-family:"Motiva Sans","Segoe UI",Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

body {
  background:
    radial-gradient(1400px 500px at 50% -200px,rgba(40,80,120,.45),transparent 70%),
    linear-gradient(180deg,var(--steam-bg-grad-a) 0,var(--steam-bg-grad-b) 480px);
  background-color:var(--steam-bg-grad-b);
  min-height:100vh;
}

a{color:var(--bleu-link);text-decoration:none}
a:hover{color:var(--ink-bright)}

/* ── Topbar ── */
.topbar {
  background:var(--steam-top);
  border-bottom:1px solid #0e1015;
  box-shadow:0 0 18px rgba(0,0,0,.5);
  position:relative;
  z-index:1;
}
.topbar .inner {
  max-width:1100px;
  margin:0 auto;
  padding:14px 22px;
  display:flex;
  align-items:center;
  gap:14px;
}

/* ── Logo ── */
.logo {
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:700;
  font-size:20px;
  letter-spacing:.3px;
  color:#fff;
  text-decoration:none;
}
.logo .badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#2a475e,#0e1c2b);
  box-shadow:inset 0 0 0 1px #3a6a8c,0 0 10px rgba(102,192,244,.25);
}
.logo .badge img{width:22px;height:22px;display:block;border-radius:3px}
.logo .fr{color:var(--bleu)}

/* ── Nav topbar ── */
.topbar-nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
  font-size:13px;
}
.topbar-nav a{color:var(--dim);text-decoration:none;font-weight:500}
.topbar-nav a:hover{color:#fff}
.topbar-nav a.active,.topbar-nav a.nav-active{color:var(--bleu)}
.topbar-nav .user-name{color:var(--bleu);font-weight:600}
.topbar-nav .sep{width:1px;height:16px;background:var(--line-soft);margin:0 4px}

/* ── Boutons nav ── */
.btn-nav {
  background:rgba(102,192,244,.12);
  color:var(--bleu)!important;
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:5px 12px;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}
.btn-nav:hover{background:rgba(102,192,244,.22)!important;color:#fff!important}

/* ── Bouton retour accueil (haut à gauche) ── */
.btn-home {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(102,192,244,.10);
  color:var(--bleu);
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:6px 13px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.btn-home:hover{background:rgba(102,192,244,.2);color:#fff}
.btn-home .arrow{font-size:15px;line-height:1}

/* ── Contenu principal ── */
.topbar,.wrap{position:relative;z-index:1}

/* ── Panneaux / cartes ── */
.panel-card {
  background:linear-gradient(135deg,var(--panel2),var(--panel));
  border:1px solid var(--line-soft);
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.3);
}

/* ── Messages flash ── */
.flash-bar{padding:10px 22px;font-size:13px;text-align:center;position:relative;z-index:1}
.flash-bar.ok{background:rgba(102,204,51,.1);border-bottom:1px solid rgba(102,204,51,.2);color:var(--ok)}

footer{color:var(--faint);font-size:11px;text-align:center;line-height:1.7;margin-top:40px}
footer a{color:var(--dim)}
footer a:hover{color:var(--bleu)}