/* Roulette -- feuille de style unique.
   Noir violace, vert citron, violet : les trois couleurs du logo.
   Formes anguleuses, lueurs discretes, rien de criard. */

:root {
  /* --- Marque, relevee au pixel dans les fichiers du logo --- */
  --lime: #c4ff2e;
  --lime-soft: #d8ff6e;
  --violet: #8a2ae3;
  --violet-soft: #c9a3f5;
  --ink: #0b0310;

  /* --- Surfaces, teintees violet plutot que grises --- */
  --bg: #08020e;
  --bg-2: #0d0416;
  --surface: #120720;
  --surface-2: #1a0c2c;
  --surface-3: #241239;
  --border: #2a1442;
  --border-strong: #3d1f5c;

  --text: #f4f0fa;
  --text-dim: #b3a7c6;   /* 8.5:1 sur --surface */
  --text-faint: #8d80a4; /* 5.4:1 sur --surface */

  --on-lime: var(--ink);
  --violet-dim: #4a1d75;
  --danger: #ff6b6b;
  --danger-dim: #5f2733;
  --gray: #6f6482;

  /* --- Rayons : anguleux, pas de pastilles --- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;

  /* --- Lueurs et ombres --- */
  --ring-lime: 0 0 0 1px rgba(196, 255, 46, .3);
  --glow-lime: 0 0 28px -8px rgba(196, 255, 46, .55);
  --glow-violet: 0 0 48px -12px rgba(138, 42, 227, .55);
  --shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 12px 32px -12px rgba(0, 0, 0, .8);

  --font-display: "Rajdhani", "Segoe UI Semibold", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Colonne pleine hauteur : sans ca, une page courte laissait le pied de page
   flotter au milieu de l'ecran. `main` absorbe l'espace restant. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* Fond en couches : halo violet en haut, souffle vert a droite, puis
     l'encre. Le tout fixe, pour que le decor ne defile pas avec le texte. */
  background:
    radial-gradient(1100px 560px at 50% -240px, rgba(138, 42, 227, .30), transparent 72%),
    radial-gradient(760px 420px at 92% 6%, rgba(196, 255, 46, .045), transparent 70%),
    radial-gradient(900px 500px at 4% 40%, rgba(138, 42, 227, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* Texture : une trame de points a peine visible, qui evite le fond plat. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: radial-gradient(rgba(196, 255, 46, .055) 1px, transparent 1px);
  background-size: 32px 32px;
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 .45em;
}

h1 { font-size: 38px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--lime); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--lime-soft); text-decoration: underline; }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lime);
  color: var(--on-lime);
  padding: 10px 16px;
  font-weight: 700;
  z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------------ entete */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(rgba(8, 2, 14, .96), rgba(8, 2, 14, .88));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Filet lumineux sous la barre : elle se detache du contenu sans trait dur. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 255, 46, .35), rgba(138, 42, 227, .35), transparent);
}

/* L'entete occupe toute la fenetre : logo a gauche, compte a droite. */
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 74px;
  max-width: none;
  padding: 0 28px;
}

.brand { display: flex; align-items: center; flex: none; }
.brand:hover { text-decoration: none; }
.brand img {
  display: block;
  height: 42px;
  width: auto;
  transition: filter .2s ease, transform .2s ease;
}
.brand:hover img {
  filter: drop-shadow(0 0 12px rgba(196, 255, 46, .5));
  transform: scale(1.04);
}

/* Pas de retour a la ligne : les six entrees, la marque et le compte tiennent
   sur une ligne jusqu'au point de rupture, ou le menu prend le relais. */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.nav a {
  position: relative;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}

/* Le repere de la page courante est une barre posee en haut du bouton. Elle
   est toujours dans le DOM et ne fait qu'apparaitre : on anime une opacite et
   une echelle, jamais une taille, donc rien ne bouge au survol. */
.nav a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24%;
  right: 24%;
  height: 2px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(196, 255, 46, .8);
  opacity: 0;
  transform: scaleX(.3);
  transition: opacity .18s ease, transform .18s ease;
}

.nav a:hover { background: rgba(138, 42, 227, .14); color: var(--text); text-decoration: none; }
.nav a:hover::before { opacity: .6; transform: scaleX(1); }

.nav a[aria-current="page"] {
  color: var(--lime);
  background: rgba(196, 255, 46, .07);
}
.nav a[aria-current="page"]::before { opacity: 1; transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--border-strong); }

/* -------------------------------------------------------------- compte Steam */

.account { display: flex; align-items: center; gap: 10px; flex: none; }

/* Discret : pas de cadre, juste un fond au survol. */
.account-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: 14px;
  color: var(--text-dim);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.account-user:hover {
  text-decoration: none;
  background: rgba(138, 42, 227, .12);
  border-color: var(--border);
  color: var(--text);
}

/* La taille vient du JS ; la forme, d'ici : ailleurs un avatar est rond,
   celui de l'entete est carre. */
.account-user .avatar { border-radius: var(--r-sm); }
.account-user .avatar-fallback { font-size: 16px; }

.account-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

/* Un pseudo Steam peut faire quarante caracteres : on le coupe plutot que de
   laisser l'entete s'etirer. Le pseudo entier reste en infobulle. */
.account-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  object-fit: cover;
  flex: none;
}
.avatar-fallback {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* ------------------------------------------------------------------ boutons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .08s ease;
}
.btn:hover {
  background: var(--surface-3);
  border-color: var(--violet);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--glow-violet);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* L'appel a l'action le plus fort de la page. */
.btn-primary {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--on-lime);
  font-weight: 700;
  box-shadow: var(--glow-lime);
}
.btn-primary:hover {
  background: var(--lime-soft);
  border-color: var(--lime-soft);
  color: var(--on-lime);
  box-shadow: 0 0 36px -6px rgba(196, 255, 46, .75);
}

/* Serveur injoignable : le bouton passe en contour au lieu de palir. Un vert
   plein delave donnait l'impression d'un bouton casse plutot que d'une action
   momentanement indisponible. Le texte garde 5:1 de contraste. */
.btn-primary[aria-disabled="true"] {
  opacity: 1;
  background: transparent;
  border-color: rgba(196, 255, 46, .32);
  color: rgba(196, 255, 46, .65);
  box-shadow: none;
}

.btn-steam { background: #1b2838; border-color: #2a3f5a; color: #fff; }
.btn-steam:hover { background: #24394f; border-color: #3a5675; color: #fff; box-shadow: none; }

.btn-ghost { background: transparent; border-color: var(--border); }
.btn-sm { min-height: 34px; padding: 6px 13px; font-size: 14px; }
.btn-lg {
  min-height: 58px;
  padding: 15px 38px;
  font-size: 19px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.btn-danger { border-color: var(--danger-dim); color: var(--danger); }
.btn-danger:hover { background: #2e131c; border-color: #7d3243; color: #ffa0a0; box-shadow: none; }

/* -------------------------------------------------------------------- cartes */

.card {
  position: relative;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Une carte cliquable reagit ; une carte de contenu reste sage. */
a.card:hover {
  border-color: var(--violet);
  transform: translateY(-3px);
  box-shadow: var(--shadow), var(--glow-violet);
  text-decoration: none;
}
a.card:hover h3 { color: var(--lime); }
.card h3 { transition: color .18s ease; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

main { padding: 44px 0 80px; flex: 1 0 auto; }
main.flush { padding-top: 0; }

.page-head { margin-bottom: 30px; }
.page-head h1 {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}
.page-head p { color: var(--text-dim); max-width: 62ch; }

section + section { margin-top: 52px; }

/* Titre de section avec un filet lumineux a gauche. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.section-head h2 {
  position: relative;
  margin: 0;
  padding-left: 15px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.section-head h2::before {
  content: "";
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(var(--lime), var(--violet));
}

/* ------------------------------------------------------------------ banniere */

.hero {
  position: relative;
  overflow: hidden;
  padding: 44px 0 64px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(760px 320px at 50% -40px, rgba(138, 42, 227, .34), transparent 70%),
    linear-gradient(var(--bg-2), transparent 85%);
}

/* Decor : une roue cranteee qui tourne lentement, tres en retrait. Clin d'oeil
   a la roulette sans tomber dans le casino. */
.hero-deco {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translate(-50%, -52%);
  pointer-events: none;
  opacity: .5;
}
.hero-deco svg { width: 100%; height: 100%; }
.hero-ring-spin { transform-origin: 50% 50%; animation: tourne 90s linear infinite; }
.hero-ring-spin-rev { transform-origin: 50% 50%; animation: tourne 140s linear infinite reverse; }

@keyframes tourne { to { transform: rotate(360deg); } }

/* Degrade de sortie : le bas de la banniere se fond dans la page. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(transparent, var(--bg));
}

.hero .wrap { position: relative; z-index: 2; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(26, 12, 44, .6);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero-kicker .tick {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}

.hero h1 { margin: 0 0 16px; }
.hero-logo {
  display: block;
  width: min(440px, 86%);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 40px rgba(196, 255, 46, .28));
}
.hero .tagline {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 52ch;
  margin: 0 auto 34px;
}

/* ------------------------------------------------- panneau d'etat du serveur */

.server-panel {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 30px;
  text-align: left;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background:
    linear-gradient(150deg, rgba(36, 18, 57, .9), rgba(18, 7, 32, .96));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Equerres lumineuses aux coins : silhouette anguleuse sans clip-path, ce qui
   laisse l'ombre portee fonctionner. */
.server-panel::before,
.server-panel::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--lime);
  opacity: .75;
  pointer-events: none;
}
.server-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: var(--r) 0 0 0; }
.server-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--r) 0; }

.sp-count { flex: none; }

.player-count-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.player-count {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--text);
}
.player-count .slash { color: var(--text-faint); font-weight: 400; margin: 0 2px; }
.player-count .max { color: var(--text-dim); font-size: .62em; }

.status-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-dim);
}

/* Le point d'etat, avec son halo qui bat quand le serveur repond. */
.dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gray);
  flex: none;
}
.dot.online { background: var(--lime); }
.dot.online::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--lime);
  animation: pulse 2.2s ease-out infinite;
}
.dot.offline { background: var(--danger); }

@keyframes pulse {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Separateur vertical entre les trois zones du panneau. */
.sp-rule {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(transparent, var(--border-strong) 25%, var(--border-strong) 75%, transparent);
}

.sp-meta { flex: 1 1 auto; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
/* align-items evite que la boite d'adresse s'etire sur toute la colonne :
   etiree, elle ressemblait a un champ de saisie. */
.sp-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.sp-key {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sp-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-cta { flex: none; width: 272px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sp-cta .btn-lg { width: 100%; }
.sp-hint { margin: 0; font-size: 12.5px; color: var(--text-faint); text-align: center; }

.connect-cmd {
  display: inline-block;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  color: var(--lime);
  background: rgba(196, 255, 46, .07);
  border: 1px solid rgba(196, 255, 46, .2);
  border-radius: var(--r-xs);
  padding: 5px 10px;
  word-break: break-all;
}

/* ------------------------------------------------------ rejoindre en 3 etapes */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 24px 22px 22px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color .18s ease, transform .18s ease;
}
.steps li:hover { border-color: var(--violet); transform: translateY(-2px); }

/* Le numero, en grand et tres en retrait, derriere l'icone. */
.steps li::before {
  content: "0" counter(step);
  position: absolute;
  top: 10px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
  opacity: .12;
}
.step-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: rgba(138, 42, 227, .16);
  color: var(--lime);
}
.steps li strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
}
.steps li span { color: var(--text-dim); font-size: 14.5px; }

/* ---------------------------------------------------------------- annonces */

.announcement {
  position: relative;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px 24px;
  margin-bottom: 18px;
  transition: border-color .18s ease;
}
.announcement:hover { border-color: var(--border-strong); }
.announcement.pinned { border-color: var(--violet-dim); }
.announcement.pinned::before {
  content: "Epingle";
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-soft);
  margin-bottom: 9px;
}

.announcement-head {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.announcement h2, .announcement h3 { margin: 0; }

.meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 15px;
}
.meta .sep { opacity: .45; }

.prose { white-space: pre-line; color: var(--text); }
.prose + .announcement-actions { margin-top: 18px; }

.announcement-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}
.tag-update { color: var(--violet-soft); border-color: var(--violet-dim); }
.tag-event { color: var(--lime); border-color: #46621a; }
.tag-maintenance { color: var(--danger); border-color: var(--danger-dim); }

.badge-admin {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--violet);
  padding: 2px 7px;
  border-radius: var(--r-xs);
}

/* ------------------------------------------------------------- commentaires */

.comments { margin-top: 22px; }
.comment {
  display: flex;
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid var(--border);
}
.comment-body { flex: 1 1 auto; min-width: 0; }
.comment-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-size: 13px;
}
.comment-head strong { font-size: 14px; }
.comment-head time { color: var(--text-faint); }

.composer { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.composer-actions { display: flex; align-items: center; gap: 11px; justify-content: flex-end; }

/* ------------------------------------------------------------- formulaires */

label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }

input[type="text"], input[type="search"], textarea, select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  min-height: 44px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(138, 42, 227, .18);
  outline: none;
}
textarea { min-height: 112px; resize: vertical; line-height: 1.6; }

.field { margin-bottom: 18px; }
.field-row { display: flex; gap: 18px; flex-wrap: wrap; }
.field-row > * { flex: 1 1 200px; }

.check { display: flex; align-items: center; gap: 9px; font-weight: 400; }
.check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--lime); }

.hint { font-size: 13px; color: var(--text-faint); margin-top: 7px; }

/* --------------------------------------------------------------- messages */

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--violet);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 13px 17px;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.notice-error { border-left-color: var(--danger); color: #ffb3b3; }
.notice-ok { border-left-color: var(--lime); color: #dbf5a4; }

.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-faint);
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: rgba(18, 7, 32, .5);
}

/* --------------------------------------------------------------- tableaux */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); }
th {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  background: rgba(26, 12, 44, .5);
}
tbody tr { transition: background .14s ease; }
tbody tr:hover { background: rgba(138, 42, 227, .1); }
td.num { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--font-display); font-size: 15px; }
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
}

.rank { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-dim); }
.rank-1 { color: var(--lime); }
.rank-2 { color: var(--text-dim); }
.rank-3 { color: var(--violet-soft); }

.player-cell { display: flex; align-items: center; gap: 11px; }

/* ------------------------------------------------------------------ divers */

.stat-row { display: flex; gap: 18px; flex-wrap: wrap; }
.stat {
  flex: 1 1 150px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
}
.stat .value { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; }
.stat .label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 4px;
}

.price { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--lime); }
.price .period { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-dim); }

.perks { list-style: none; padding: 0; margin: 18px 0 0; }
.perks li { padding: 8px 0 8px 26px; position: relative; border-top: 1px solid var(--border); font-size: 14px; }
.perks li::before { content: "+"; position: absolute; left: 6px; color: var(--lime); font-weight: 700; }

.card-highlight { border-color: var(--violet-dim); box-shadow: var(--glow-violet); }

details.faq-item {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 11px;
  transition: border-color .18s ease;
}
details.faq-item:hover { border-color: var(--border-strong); }
details.faq-item summary {
  padding: 15px 19px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::before { content: "+"; color: var(--lime); font-weight: 700; width: 12px; }
details.faq-item[open] summary::before { content: "\2212"; }
details.faq-item .answer { padding: 0 19px 17px 42px; color: var(--text-dim); }

/* ---------------------------------------------------------------- pied de page */

.site-footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(var(--bg-2), var(--bg));
  padding: 36px 0;
  font-size: 14px;
  color: var(--text-faint);
}
.site-footer .wrap { display: flex; gap: 26px; flex-wrap: wrap; justify-content: space-between; }
.footer-brand { display: flex; gap: 15px; align-items: flex-start; }
.footer-brand img { width: 42px; height: 42px; flex: none; border-radius: var(--r-sm); }
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--lime); }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }

.muted { color: var(--text-dim); }
.small { font-size: 13px; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Apparition douce du contenu de la banniere au chargement. */
.reveal { animation: monte .6s cubic-bezier(.22, .8, .3, 1) backwards; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .14s; }
.reveal-3 { animation-delay: .23s; }
.reveal-4 { animation-delay: .32s; }

@keyframes monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ mobile */

/* Le menu deroulant prend le relais des que les six entrees ne tiennent plus
   sur une ligne a cote de la marque et du compte. */
@media (max-width: 880px) {
  .site-header .wrap { flex-wrap: wrap; gap: 12px; min-height: 0; padding: 10px 20px; }
  .nav-toggle { display: block; order: 3; }
  .account { order: 2; margin-left: auto; }
  .nav {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 12px 13px; }
  /* En colonne, une barre en haut de chaque entree n'aurait pas de sens. */
  .nav a::before { display: none; }

  .server-panel { flex-direction: column; align-items: stretch; gap: 20px; text-align: center; }
  .sp-rule { display: none; }
  .sp-count { align-self: center; }
  .sp-meta { flex-direction: row; justify-content: center; gap: 32px; }
  .sp-item { align-items: center; }
  .sp-cta { width: 100%; max-width: 340px; align-self: center; }
  .player-count { font-size: 52px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .hero-deco { width: 560px; height: 560px; }
}

@media (max-width: 720px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 32px; }
  h2 { font-size: 23px; }
}

@media (max-width: 560px) {
  /* Le bouton Steam se reduit a son icone, et la pastille du compte a la
     photo : sans ca, marque + compte + Menu ne tiennent pas sur une ligne. */
  .account .btn-steam .btn-label { display: none; }
  .account .btn-steam { padding: 6px 11px; }
  .account-user { padding: 5px; }
  .account-user .account-id { display: none; }

  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 32px 0 48px; }
  .hero .tagline { font-size: 15.5px; margin-bottom: 26px; }
  .server-panel { padding: 22px 18px; }
  .sp-meta { flex-direction: column; gap: 14px; }
  .player-count { font-size: 46px; }
  main { padding: 32px 0 60px; }
  .wrap { padding: 0 16px; }
  section + section { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}