:root {
  --fond: #f1f6f9;
  --carte: #ffffff;
  --texte: #1b2733;
  --doux: #55657a;
  --bord: #d3dee7;
  --marine: #12303f;
  --eau: #0b6b8a;
  --ambre: #fbbf24;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0c1a24;
    --carte: #13232f;
    --texte: #e6eef4;
    --doux: #9db0c1;
    --bord: #24394a;
    --eau: #7dd3f0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.entete {
  background: linear-gradient(165deg, #1c3f52 0%, #12303f 60%, #0d2430 100%);
  color: #fff;
  padding: 20px 16px;
}
.entete .dedans { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.entete img { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.entete .jeu { font-size: 1.15rem; font-weight: 700; color: var(--ambre); margin: 0; }
.entete .studio { margin: 0; font-size: 0.9rem; color: #a5e8ff; }
.entete a { color: inherit; text-decoration: none; }

.langues { max-width: 760px; margin: 16px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.langues a {
  padding: 6px 14px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--carte);
  color: var(--texte);
  text-decoration: none;
  font-size: 0.95rem;
}
.langues a[aria-current="true"] { background: var(--marine); border-color: var(--marine); color: #fff; font-weight: 600; }

main { max-width: 760px; margin: 16px auto 40px; padding: 0 16px; }
main section {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 8px 22px 22px;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}
/* Sans JavaScript, toutes les langues restent visibles l'une sous l'autre. */
.js main section[data-langue] { display: none; }
.js main section[data-langue].actif { display: block; }

h1 { font-size: 1.45rem; line-height: 1.3; margin: 18px 0 10px; }
h2 { font-size: 1.1rem; margin: 26px 0 6px; }
p { margin: 10px 0; }
ul { margin: 10px 0; padding-left: 22px; }
li { margin: 4px 0; }
a { color: var(--eau); }

.liens { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liens a {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--bord);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

footer { max-width: 760px; margin: 0 auto 32px; padding: 0 16px; color: var(--doux); font-size: 0.9rem; }