:root {
  --fond: #ffffff;
  --texte: #111111;
  --secondaire: #555555;
  --bouton-fond: #ffffff;
  --bouton-bord: #111111;
  --principal-fond: #111111;
  --principal-texte: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #111111;
    --texte: #f2f2f2;
    --secondaire: #b5b5b5;
    --bouton-fond: #111111;
    --bouton-bord: #f2f2f2;
    --principal-fond: #f2f2f2;
    --principal-texte: #111111;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
main {
  max-width: 420px;
  margin: 0 auto;
  padding: 48px 16px;
}
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 28px; }
.bouton {
  display: block;
  padding: 15px 16px;
  border: 2px solid var(--bouton-bord);
  border-radius: 12px;
  background: var(--bouton-fond);
  color: var(--texte);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.bouton.principal {
  background: var(--principal-fond);
  border-color: var(--principal-fond);
  color: var(--principal-texte);
}
.lede { margin: -12px 0 28px; }
.aside { color: var(--secondaire); margin: 24px 0 0; }
.aside a { color: var(--texte); }
[hidden] { display: none !important; }