/* ╔══════════════════════════════════════════════════════════╗
   VARIABLES ET BASE

   Couleurs, polices système, remise à zéro et fond de page.
   ╚══════════════════════════════════════════════════════════╝ */

:root {
  --bg: #1a0a2e;
  --font-display: 'Trebuchet MS', Helvetica, sans-serif;
  --font-body: 'Trebuchet MS', Helvetica, sans-serif;
  --bg2: #2d1457;
  --gold: #ffd700;
  --gold2: #ffaa00;
  --accent: #ff4da6;
  --white: #fff8f0;
  --shadow: rgba(255,215,0,0.18);
  --footer-h: 48px;
}

html, body {
  /* Sur mobile : scroll libre. Sur desktop (≥820px) : overflow hidden via media query */
  height: 100%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 10%, #3d0e6e55 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, #1a006655 0%, transparent 60%),
    repeating-linear-gradient(45deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px);
  font-family: var(--font-body);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px calc(var(--footer-h) + 32px);
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}