/* Idle Snek — l'écran LCD du jeu (palette Classique, Jour / Nuit comme le téléphone). */
:root {
  --lcd: #c7f0d8;
  --ink: #43523d;
  --ink-deep: #2a3526;
  --ghost: rgba(67, 82, 61, 0.07);
  --display: "Press Start 2P", monospace;
  --body: "Pixelify Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lcd: #43523d;
    --ink: #c7f0d8;
    --ink-deep: #262f23;
    --ghost: rgba(199, 240, 216, 0.08);
  }
}
:root[data-theme="dark"] {
  --lcd: #43523d;
  --ink: #c7f0d8;
  --ink-deep: #262f23;
  --ghost: rgba(199, 240, 216, 0.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--lcd);
  color: var(--ink);
  font: 18px/1.5 var(--body);
}
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--ink); color: var(--lcd); text-decoration: none; }

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 4px solid var(--ink);
}
.brand { font: 16px/1 var(--display); text-decoration: none; letter-spacing: 1px; }
.lang { display: flex; gap: 8px; }
.lang a {
  font: 10px/1 var(--display);
  text-decoration: none;
  padding: 8px 10px;
  border: 3px solid var(--ink);
}
.lang a[aria-current="true"] { background: var(--ink); color: var(--lcd); }

h1 { font: 20px/1.5 var(--display); margin: 32px 0 8px; overflow-wrap: anywhere; }
h2 {
  font: 12px/1.6 var(--display);
  margin: 40px 0 12px;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--lcd);
}
h3 { font: 600 20px/1.3 var(--body); margin: 24px 0 6px; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 20px; }
li { margin-bottom: 8px; }
b, strong { font-weight: 600; }
.meta { font-size: 15px; opacity: 0.8; }
article + article { margin-top: 64px; padding-top: 32px; border-top: 4px dashed var(--ink); }
article[hidden] + article { margin-top: 0; padding-top: 0; border-top: 0; }

footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 4px solid var(--ink);
  font-size: 15px;
}

/* Accueil */
.hero { padding: 48px 0 24px; }
.hero h1 { font-size: 28px; margin: 0 0 16px; }
.panel { background: var(--ghost); border: 3px solid var(--ink); padding: 16px; margin: 16px 0; }

@media (max-width: 480px) {
  body { font-size: 17px; }
  h1 { font-size: 16px; }
  .hero h1 { font-size: 22px; }
  h2 { font-size: 11px; }
}