:root {
  --couleur-fond: #fbf3e4;
  --couleur-texte: #3b2418;
  --couleur-texte-doux: #6b4f3f;
  --couleur-accent: #a8481f;
  --couleur-accent-actif: #86371a;
  --couleur-sur-accent: #ffffff;
  --espace-s: .75rem;
  --espace-m: 1.5rem;
  --rayon: .75rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --couleur-fond: #2a1d16;
    --couleur-texte: #f7ead9;
    --couleur-texte-doux: #d9bfa8;
    --couleur-accent: #e8935f;
    --couleur-accent-actif: #f0a97d;
    --couleur-sur-accent: #2a1d16;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
}
main { width: 100%; max-width: 32rem; padding: var(--espace-m); text-align: center; }
.entete { margin: 0 0 var(--espace-s); }
.logo { width: 4rem; height: 4rem; }
.etiquette { text-transform: uppercase; letter-spacing: .1em; font-size: .9rem; color: var(--couleur-texte-doux); }
h1 { font-size: 2.5rem; margin: .5rem 0 1rem; }
#definition { font-size: 1.25rem; line-height: 1.5; }
#phrase { font-size: 1rem; line-height: 1.5; font-style: italic; color: var(--couleur-texte-doux); margin: .75rem 0 0; }
#phrase[hidden] { display: none; }
button {
  margin-top: var(--espace-m);
  min-height: 3.5rem;
  min-width: 12rem;
  padding: .75rem 2rem;
  font-size: 1.25rem;
  border: 0;
  border-radius: var(--rayon);
  background: var(--couleur-accent);
  color: var(--couleur-sur-accent);
  cursor: pointer;
  transition: background-color .15s ease;
}
button:active { background: var(--couleur-accent-actif); }
.texte { font-size: 1.15rem; line-height: 1.6; }
.lien { display: inline-block; margin-top: var(--espace-m); padding: .75rem 1rem; font-size: 1.1rem; color: var(--couleur-accent); }
.bouton { display: inline-block; margin-top: var(--espace-m); min-height: 3.5rem; min-width: 12rem; padding: .9rem 2rem; font-size: 1.25rem; border-radius: var(--rayon); background: var(--couleur-accent); color: var(--couleur-sur-accent); text-decoration: none; transition: background-color .15s ease; }
.bouton:active { background: var(--couleur-accent-actif); }
#message { min-height: 1.5rem; margin: .75rem 0 0; font-size: 1rem; color: var(--couleur-accent); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}