/* Pages « Best games » : mêmes couleurs que le rapport (clair par défaut, sombre en option), mise en page de lecture */
:root {
  --accent: #118DFF; --accent-dark: #08467F; --accent-mid: #0D6ABF; --gold: #8A6100;
  --fg: #252423; --fg2: #605E5C; --bg: #FFFFFF; --bg-light: #F3F2F1; --neutral: #C8C6C4; --row-alt: #EAF4FF; --canvas: #EAEAEA;
  --font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: "DIN", "DIN Alternate", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-dark: #3D8FD9; --accent-mid: #5AB0FF; --gold: #E5B94A; --fg: #F3F2F1; --fg2: #C8C6C4; --bg: #252423;
    --bg-light: #323130; --neutral: #484644; --row-alt: #1C3552; --canvas: #161514; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --accent-dark: #3D8FD9; --accent-mid: #5AB0FF; --gold: #E5B94A; --fg: #F3F2F1; --fg2: #C8C6C4; --bg: #252423;
  --bg-light: #323130; --neutral: #484644; --row-alt: #1C3552; --canvas: #161514; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.5; }
a { color: var(--accent-mid); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--neutral);
}
#bar .brand { font-family: var(--font-title); font-size: 16px; font-weight: 600; color: var(--fg); text-decoration: none; }
#bar nav { display: flex; flex-wrap: wrap; gap: 8px; }
#bar nav a { font-size: 13px; text-decoration: none; color: var(--fg); border: 1px solid var(--accent-dark); border-radius: 14px; padding: 4px 12px; }
#bar nav a:hover { background: var(--bg-light); }
main, footer { max-width: 860px; margin: 0 auto; padding-inline: 16px; }
main { padding-block: 16px 8px; }
.crumbs { margin: 0 0 8px; font-size: 13px; color: var(--fg2); }
h1 { font-family: var(--font-title); font-size: 28px; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
h2 { font-family: var(--font-title); font-size: 20px; margin: 0 0 8px; text-wrap: balance; }
.lead { margin: 0 0 16px; color: var(--fg2); max-width: 70ch; }
.lead b { color: var(--fg); font-variant-numeric: tabular-nums; }
section { background: var(--bg); border: 1px solid var(--neutral); padding: 16px; margin-bottom: 16px; }
section ul { margin: 0; padding-left: 20px; max-width: 75ch; }
section li { margin-bottom: 6px; }
section > p { margin: 8px 0 0; max-width: 75ch; }
.note { margin: 0 0 12px !important; color: var(--fg2); }

/* classement : une ligne par jeu (rang, titre, plateforme, année, note), une ligne sur deux colorée */
.scroll { overflow-x: auto; }
table.top { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
table.top th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg2); font-weight: 600; text-align: left; padding: 6px 10px; border-bottom: 2px solid var(--fg); white-space: nowrap; }
table.top td { padding: 8px 10px; white-space: nowrap; }
table.top tbody tr:nth-child(even) { background: var(--row-alt); }
table.top .rk { width: 44px; text-align: center; font-family: var(--font-title); font-size: 18px; font-weight: 600; color: var(--fg2); }
table.top th.rk { font-size: 11px; }
table.top tbody tr:first-child .rk { color: var(--gold); }
table.top.few .rk { display: none; }
table.top .t { font-weight: 600; white-space: normal; }
table.top th.t { font-weight: 600; }
table.top .t a { color: var(--fg); text-decoration: none; }
table.top .t a:hover { color: var(--accent-mid); text-decoration: underline; }
table.top .p { color: var(--fg2); }
table.top .p a { color: inherit; }
table.top .y { color: var(--fg2); text-align: right; width: 60px; }
table.top .sc { text-align: right; width: 70px; font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--accent-mid); }
table.top .sc a { color: inherit; text-decoration: none; }
table.top .sc a:hover { text-decoration: underline; }
table.top th.sc, table.top th.y { font-size: 11px; color: var(--fg2); font-family: var(--font); font-weight: 600; }
table.top.few .sc { color: var(--fg2); }

/* page d'accueil des listes et liens entre listes */
ul.idx { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 20px; }
ul.idx li { margin: 0; }
section h3 { font-family: var(--font-title); font-size: 15px; margin: 14px 0 6px; color: var(--fg2); }
section h3:first-of-type { margin-top: 0; }
.rel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; max-width: none !important; }
.rel a { font-size: 13px; text-decoration: none; color: var(--fg); border: 1px solid var(--neutral); border-radius: 14px; padding: 3px 11px; }
.rel a:hover { border-color: var(--fg2); }
footer { padding-block: 0 32px; font-size: 13px; color: var(--fg2); }
footer p { margin: 0 0 4px; }
@media (max-width: 480px) {
  h1 { font-size: 23px; }
  section { padding: 12px 8px; }
  table.top td, table.top th { padding: 7px 5px; }
  table.top .rk { width: 28px; }
  table.top .y { width: auto; }
}
/* listes longues : numéros de page sous le tableau (50 jeux par page) */
nav.pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
nav.pages button { min-width: 34px; height: 34px; padding: 0 8px; font: 600 14px var(--font); font-variant-numeric: tabular-nums; color: var(--fg); background: var(--bg); border: 1px solid var(--neutral); border-radius: 17px; cursor: pointer; }
nav.pages button:hover { border-color: var(--fg2); background: var(--bg-light); }
nav.pages button[aria-current] { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; cursor: default; }
nav.pages button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }