/* Mise en page de la page démo (le design system est dans design-system/) */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 16px; background: var(--band); color: var(--on-band); border-radius: var(--radius-pill); }
.skip:focus { left: 16px; }
.site-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); box-sizing: border-box; }
.site-section { padding: var(--space-16) 0; }
.site-section--sunken { background: var(--surface-sunken); }
.site-section--band { background: var(--band); color: var(--on-band); }
.site-section--band .site-title { color: var(--on-band); }
.site-section--band .site-kicker { color: var(--band-accent); }
.site-kicker { margin: 0 0 var(--space-2); color: var(--gold-ink); }
.site-title { margin: 0 0 var(--space-8); max-width: 22ch; font: 700 clamp(28px, 4vw, 44px)/1.08 var(--font-display); color: var(--ink); font-variant-ligatures: none; }
.site-lead { margin: 0 0 var(--space-6); color: var(--ink-muted); max-width: 46ch; }
.site-universes { --gk-min: 170px; gap: var(--space-4); }
.site-troupe { --gk-min: 140px; gap: var(--space-8) var(--space-6); }
.site-gazette { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: var(--space-8); align-items: start; margin-top: var(--space-6); }
.site-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); justify-items: center; align-items: start; --gk-social-w: 100%; }
.site-socials .gk-social { max-width: 260px; }
.site-socials .gk-wanted { width: 100%; max-width: 240px; box-sizing: border-box; }
.site-scenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-6); --gk-scenario-w: 100%; }
.site-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-12); align-items: center; }
.site-chat { display: grid; gap: var(--space-4); }
.site-dice { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: center; }
.site-dice .site-title { margin-bottom: var(--space-3); }
.site-footer { background: var(--band); color: var(--on-band); padding: var(--space-12) 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.site-footer__logo { width: 240px; height: auto; }
.site-footer p { margin: 0; font: italic 400 16px/1.5 var(--font-serif); color: var(--on-band); }
@media (max-width: 900px) {
  .site-gazette, .site-split, .site-dice { grid-template-columns: 1fr; }
  .site-dice { justify-items: start; }
  .site-section { padding: var(--space-12) 0; }
}
@media (max-width: 560px) {
  .site-wrap { padding: 0 var(--space-4); }
  .site-troupe { --gk-min: 140px; gap: var(--space-6) var(--space-3); }
  .gk-gazette__cols { columns: 1; }
}