:root {
  --night: #3A2A92;
  --night-deep: #2B1F7A;
  --dusk: #4C38AE;
  --lilac: #E6DBFF;
  --snow: #FFF3F2;
  --red: #FF4653;
  --red-d: #E22A45;
  --red-dd: #B91E3C;
  --maroon: #6E1B2C;
  --gold: #FFB52E;
  --gold-d: #E58A1B;
  --mint: #0A8468;
  --mint-d: #07664F;
  --display: 'Chango', 'Arial Black', sans-serif;
  --text: 'Grandstander', 'Trebuchet MS', sans-serif;
  --hand: 'Playpen Sans', 'Comic Sans MS', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--maroon);
  font: 500 1.0625rem/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Le personnage ---------- */
.santa { display: block; width: 100%; height: auto; overflow: visible; --m: 0; }
.santa--bust { overflow: hidden; }
.s-shadow { fill: var(--santa-shadow, #2B1F7A); opacity: .22; }
.s-head { transform-origin: 300px 310px; animation: s-sway 6s ease-in-out infinite; }
.s-body { transform-origin: 300px 530px; animation: s-breath 3.6s ease-in-out infinite; }
.s-arm-l { transform-origin: 200px 300px; animation: s-arm 3.6s ease-in-out infinite; }
.s-arm-r { transform-origin: 400px 330px; }
.s-hand { transform-origin: 550px 248px; animation: s-wiggle 4.800s ease-in-out infinite; }
.s-pom { transform-origin: 432px 104px; animation: s-pom 3.200s ease-in-out infinite; }
.s-pupils { transform-origin: 300px 192px; animation: s-blink 5.200s linear infinite; }
.s-brows { transition: transform .15s; }
.s-jaw { transform: translateY(calc(var(--m) * 9px)); }
.s-mouth-open { transform-origin: 300px 262px; transform: scale(calc(.55 + var(--m) * .45), calc(var(--m) * 1)); }
.s-mouth-closed { opacity: calc(1 - var(--m) * 4); }
.is-talking .s-head { animation: s-talk 1.900s ease-in-out infinite; }
.is-talking .s-brows { transform: translateY(calc(var(--m) * -5px)); }
.is-waving .s-arm-r { animation: s-wave-arm 1.600s ease-in-out 1; }
.is-waving .s-hand { animation: s-wave-hand .4s ease-in-out 4; }

@keyframes s-sway { 50% { transform: rotate(1.4deg); } }
@keyframes s-talk { 0%, 100% { transform: rotate(-1.500deg); } 30% { transform: rotate(1.200deg) translateY(2px); } 65% { transform: rotate(-.5deg) translateY(-2px); } }
@keyframes s-breath { 50% { transform: scale(1.012, .988); } }
@keyframes s-arm { 50% { transform: rotate(-1.500deg); } }
@keyframes s-wiggle { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(8deg); } 96% { transform: rotate(-6deg); } }
@keyframes s-pom { 50% { transform: rotate(9deg); } }
@keyframes s-blink { 0%, 95%, 100% { transform: scaleY(1); } 97.500% { transform: scaleY(.08); } }
@keyframes s-wave-arm { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(-5deg); } }
@keyframes s-wave-hand { 50% { transform: rotate(18deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}