/* Pages légales (terms.html, privacy.html).
   Hors de React et de Tailwind : deux pages statiques, servies telles quelles, qui doivent
   rester lisibles même si le bundle du jeu ne se charge pas. Palette et polices reprises de
   l'application pour que la bascule ne se voie pas. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
}

:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --line: #334155;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #818cf8;
  --accent-strong: #6366f1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
a:hover { color: #a5b4fc; }

.page-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.8);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
}
.page-marque {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.page-marque:hover { color: var(--accent); }
.back {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.back:hover { color: var(--text); }

.wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px 64px; }

.langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.langs button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.langs button:hover { color: var(--text); border-color: #64748b; }
.langs button.active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

h1 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(25px, 4vw, 34px);
  line-height: 1.15;
  margin: 0;
}
.meta { margin: 8px 0 30px; color: var(--muted); font-size: 14px; }

#doc-body h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(17px, 2.2vw, 20px);
  margin: 32px 0 10px;
  color: #fff;
}
#doc-body p { margin: 0 0 14px; }
#doc-body ul { margin: 0 0 14px; padding-left: 20px; }
#doc-body li { margin-bottom: 6px; }
#doc-body strong { color: #fff; }

/* Tableau des données : il doit rester lisible sur un téléphone, donc il se replie en fiches. */
.data-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.data-table th,
.data-table td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { background: var(--surface); color: #fff; font-weight: 600; }

@media (max-width: 560px) {
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .data-table td { border: 0; border-bottom: 1px solid rgba(51, 65, 85, 0.6); }
  .data-table td:last-child { border-bottom: 0; }
  .data-table td:first-child { background: var(--surface); color: #fff; font-weight: 600; }
}

.page-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px 36px;
  border-top: 1px solid rgba(51, 65, 85, 0.6);
  color: var(--muted);
  font-size: 14px;
}
.page-pied .sep { opacity: 0.45; }