:root {
  color: #19322b;
  background: #f8f5ec;
  font-family: system-ui, sans-serif;
  color-scheme: light;
  --page: #f8f5ec;
  --ink: #19322b;
  --heading: #0e3028;
  --muted: #59665f;
  --accent: #24604e;
  --notice: #f1ead8;
}

:root[data-theme="dark"] {
  color: #e5efe9;
  background: #101d19;
  color-scheme: dark;
  --page: #101d19;
  --ink: #e5efe9;
  --heading: #edf8f1;
  --muted: #a9b9b1;
  --accent: #84c9aa;
  --notice: #322f22;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
}

main {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 80px;
}

a {
  color: var(--accent);
}

.brand {
  display: inline-block;
  margin-bottom: 48px;
  color: var(--heading);
  font-family: Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  text-decoration: none;
}

.notice {
  padding: 14px 16px;
  border-left: 4px solid #d99f37;
  background: var(--notice);
  line-height: 1.55;
}

h1,
h2 {
  color: var(--heading);
  font-family: Georgia, serif;
}

h1 {
  font-size: clamp(2.2rem, 7vw, 3.7rem);
}

h2 {
  margin-top: 32px;
  font-size: 1.25rem;
}

p,
li {
  color: var(--muted);
  line-height: 1.7;
}

.theme-toggle {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 10;
  display: grid;
  width: 48px;
  height: 48px;
  place-content: center;
  padding: 0;
  border: 1px solid rgba(21, 62, 51, 0.2);
  border-radius: 50%;
  color: #fff8e8;
  background: #173f33;
  box-shadow: 0 10px 30px rgba(14, 48, 40, 0.24);
  cursor: pointer;
  font-size: 1.35rem;
}

.theme-toggle span { grid-area: 1 / 1; line-height: 1; }
.theme-toggle__sun { opacity: 0; }
:root[data-theme="dark"] .theme-toggle { color: #1b3028; background: #f0c96f; border-color: rgba(255,255,255,.16); box-shadow: 0 10px 32px rgba(0,0,0,.38); }
:root[data-theme="dark"] .theme-toggle__moon { opacity: 0; }
:root[data-theme="dark"] .theme-toggle__sun { opacity: 1; }

button:focus-visible,
a:focus-visible { outline: 3px solid rgba(217,159,55,.55); outline-offset: 3px; }

@media (max-width: 520px) {
  .theme-toggle { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 44px; height: 44px; }
}

/* L'appel à jouer des pages de présentation (guide, questions fréquentes). */
.cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  color: #fff8e8;
  background: #173f33;
  font-weight: 700;
  text-decoration: none;
}

:root[data-theme="dark"] .cta { color: #1b3028; background: #f0c96f; }