/* ============================================================================
   WANO CINÉMA — MAGIE DE NOËL v2 🎄✨
   Décor d'anime nocturne, village enneigé, cheminée, foyer, sapin, enfants,
   souper de Noël, Père Noël interactif, neige 3D et compte à rebours.
   ---------------------------------------------------------------------------
   • 🔇 Aucun son : toute l'ambiance passe par l'image.
   • Préfixe `.wnx-` : n'écrase jamais le design existant du site.
   • Respecte `prefers-reduced-motion` et le réglage « ambiance douce ».
   ========================================================================== */

:root {
  --wnx-red: #e63950;
  --wnx-red-deep: #a3122a;
  --wnx-gold: #ffd23f;
  --wnx-gold-soft: #fff3b0;
  --wnx-green: #2f9e5f;
  --wnx-green-deep: #14603c;
  --wnx-ice: #8fd8ff;
  --wnx-night-1: #050a1c;
  --wnx-night-2: #101f45;
  --wnx-dusk-1: #101c34;
  --wnx-dusk-2: #26406e;
  --wnx-glass-brd: rgba(255, 255, 255, 0.16);
}

/* ---------------------------------------------------------------------------
   0. Socle — empilement et visibilité
   --------------------------------------------------------------------------- */

.wnx-off .wnx-backdrop,
.wnx-off .wnx-deco,
.wnx-off .wnx-scene,
.wnx-off .wnx-snow,
.wnx-off .wnx-ui,
.wnx-off .wnx-banner-slot {
  display: none !important;
}

.nav { z-index: 1100; }

.wnx-backdrop {
  position: fixed;
  inset: -4% -6%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wnx-deco {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.wnx-scene {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}

.wnx-snow {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
}

.wnx-ui {
  position: fixed;
  inset: 0;
  z-index: 6100;
  pointer-events: none;
}

.wnx-banner-slot {
  position: fixed;
  z-index: 6000;
  pointer-events: none;
  left: clamp(10px, 2vw, 26px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  max-width: min(430px, 42vw);
}

/* ---------------------------------------------------------------------------
   1. Ciel d'anime — dégradé, aurore boréale, lune, étoiles filantes
   --------------------------------------------------------------------------- */

.wnx-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(255, 236, 190, 0.22) 0%, rgba(255, 236, 190, 0) 55%),
    radial-gradient(90% 60% at 20% 0%, rgba(120, 190, 255, 0.18) 0%, rgba(120, 190, 255, 0) 60%),
    linear-gradient(178deg, var(--wnx-dusk-1) 0%, var(--wnx-dusk-2) 42%, #3f5a8f 72%, #6d7fae 100%);
  transition: background 1.4s ease;
}

.wnx-night .wnx-sky {
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(255, 240, 200, 0.26) 0%, rgba(255, 240, 200, 0) 55%),
    radial-gradient(90% 70% at 15% 100%, rgba(90, 50, 160, 0.35) 0%, rgba(90, 50, 160, 0) 60%),
    linear-gradient(178deg, var(--wnx-night-1) 0%, var(--wnx-night-2) 48%, #1b2a55 78%, #2b3f7a 100%);
}

.wnx-aurora {
  position: absolute;
  inset: -10% -20% 40%;
  opacity: 0.4;
  filter: blur(38px) saturate(150%);
  mix-blend-mode: screen;
  transition: opacity 1.4s ease;
}

.wnx-aurora span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.wnx-aurora span:nth-child(1) {
  background: linear-gradient(100deg, transparent 12%, rgba(64, 255, 190, 0.5) 38%, rgba(80, 190, 255, 0.34) 58%, transparent 78%);
  animation: wnx-aurora-a 26s ease-in-out infinite alternate;
}

.wnx-aurora span:nth-child(2) {
  background: linear-gradient(80deg, transparent 20%, rgba(190, 110, 255, 0.4) 46%, rgba(90, 255, 210, 0.3) 66%, transparent 86%);
  animation: wnx-aurora-b 34s ease-in-out infinite alternate;
}

.wnx-aurora span:nth-child(3) {
  background: linear-gradient(120deg, transparent 30%, rgba(255, 214, 120, 0.24) 52%, rgba(120, 220, 255, 0.26) 70%, transparent 88%);
  animation: wnx-aurora-c 42s ease-in-out infinite alternate;
}

@keyframes wnx-aurora-a {
  0% { transform: translate3d(-6%, 4%, 0) scaleY(1) skewY(-3deg); opacity: 0.55; }
  50% { transform: translate3d(4%, -3%, 0) scaleY(1.25) skewY(2deg); opacity: 0.9; }
  100% { transform: translate3d(8%, 2%, 0) scaleY(0.9) skewY(-1deg); opacity: 0.6; }
}

@keyframes wnx-aurora-b {
  0% { transform: translate3d(6%, -2%, 0) scaleY(1.1) skewY(2deg); opacity: 0.4; }
  100% { transform: translate3d(-8%, 5%, 0) scaleY(0.85) skewY(-3deg); opacity: 0.8; }
}

@keyframes wnx-aurora-c {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.3; }
  100% { transform: translate3d(5%, -4%, 0) scale(1.2); opacity: 0.65; }
}

.wnx-night .wnx-aurora { opacity: 0.8; }

.wnx-stars-wrap { position: absolute; inset: 0; }

.wnx-stars { position: absolute; inset: 0; width: 100%; height: 100%; }

.wnx-star {
  animation: wnx-twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite;
}

@keyframes wnx-twinkle {
  0%, 100% { opacity: 0.22; }
  45% { opacity: 1; }
  70% { opacity: 0.5; }
}

.wnx-star--big { filter: drop-shadow(0 0 3px rgba(255, 248, 231, 0.9)); }

.wnx-moon-wrap {
  position: absolute;
  top: 4%;
  right: 8%;
  width: clamp(88px, 13vw, 190px);
  animation: wnx-moon-float 32s ease-in-out infinite alternate;
}

.wnx-moon {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 34px rgba(255, 236, 180, 0.5));
}

@keyframes wnx-moon-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-22px, 16px, 0); }
}

.wnx-clouds { position: absolute; inset: 0; }

.wnx-cloud {
  position: absolute;
  height: clamp(26px, 4vw, 56px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(226, 238, 255, 0.26), rgba(180, 200, 235, 0.06));
  filter: blur(9px);
}

.wnx-cloud--1 { top: 12%; width: 34vw; animation: wnx-drift 96s linear infinite; }
.wnx-cloud--2 { top: 24%; width: 22vw; animation: wnx-drift 132s linear infinite reverse; opacity: 0.7; }
.wnx-cloud--3 { top: 6%; width: 44vw; animation: wnx-drift 168s linear infinite; opacity: 0.5; }

@keyframes wnx-drift {
  from { transform: translate3d(-45vw, 0, 0); }
  to { transform: translate3d(145vw, 0, 0); }
}

.wnx-shooting { position: absolute; inset: 0; }

.wnx-shooting span {
  position: absolute;
  top: 12%;
  left: -14%;
  width: 130px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0));
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
  opacity: 0;
  transform: rotate(16deg);
}

.wnx-shooting span:nth-child(1) { animation: wnx-shoot 13s ease-in 3s infinite; }
.wnx-shooting span:nth-child(2) { top: 26%; animation: wnx-shoot 19s ease-in 9s infinite; }

@keyframes wnx-shoot {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(16deg) scaleX(0.3); }
  6% { opacity: 1; }
  22% { opacity: 0; transform: translate3d(120vw, 26vh, 0) rotate(16deg) scaleX(1); }
  100% { opacity: 0; transform: translate3d(120vw, 26vh, 0) rotate(16deg); }
}

/* ---------------------------------------------------------------------------
   2. Montagnes, village enneigé et sapins (3 plans)
   --------------------------------------------------------------------------- */

.wnx-hills-far,
.wnx-hills-mid,
.wnx-hills-near {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 0;
}

.wnx-hills { display: block; width: 100%; height: 100%; }

.wnx-hills-far { height: clamp(150px, 26vh, 300px); opacity: 0.85; }
.wnx-hills-mid { height: clamp(130px, 22vh, 250px); }
.wnx-hills-near { height: clamp(110px, 18vh, 210px); }

.wnx-night .wnx-hills-far { filter: brightness(0.6) saturate(1.1); }
.wnx-night .wnx-hills-mid { filter: brightness(0.52) saturate(1.1); }
.wnx-night .wnx-hills-near { filter: brightness(0.7) saturate(0.9); }

.wnx-window {
  animation: wnx-window-glow 6s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 205, 110, 0.85));
}

@keyframes wnx-window-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.wnx-ground-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  background: radial-gradient(80% 100% at 50% 120%, rgba(255, 196, 110, 0.2), rgba(255, 196, 110, 0) 70%);
  opacity: 0.5;
}

.wnx-night .wnx-ground-glow { opacity: 0.9; }

/* ---------------------------------------------------------------------------
   3. Guirlande du haut, ornements, sucres d'orge, couronne
   --------------------------------------------------------------------------- */

.wnx-garland {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(38px, 6vw, 74px);
}

.wnx-garland-wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.wnx-bulbs { position: absolute; inset: 0; }

.wnx-bulb {
  position: absolute;
  width: 9px;
  height: 13px;
  margin-left: -4.5px;
  border-radius: 50% 50% 46% 46%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c), 0 0 22px var(--c);
  animation: wnx-bulb-pulse 2.6s ease-in-out var(--d) infinite;
  transform-origin: top center;
}

.wnx-bulb::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 2.5px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #6b7280;
}

.wnx-bulb-glow {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 68%);
  animation: wnx-bulb-halo 2.6s ease-in-out var(--d) infinite;
}

@keyframes wnx-bulb-pulse {
  0%, 100% { opacity: 0.42; transform: scale(0.86) rotate(-4deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(4deg); }
}

@keyframes wnx-bulb-halo {
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.6; }
}

.wnx-ornaments {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(110px, 16vw, 190px);
}

.wnx-ornament { animation: wnx-swing 5.4s ease-in-out var(--d) infinite; }

@keyframes wnx-swing {
  0%, 100% { transform: rotate(-4.5deg); }
  50% { transform: rotate(4.5deg); }
}

.wnx-candy {
  position: absolute;
  bottom: -6px;
  width: clamp(32px, 4vw, 58px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  animation: wnx-candy-bob 7s ease-in-out infinite;
}

.wnx-candy--left { left: clamp(4px, 1vw, 18px); }
.wnx-candy--right { right: clamp(4px, 1vw, 18px); animation-delay: -3s; }

@keyframes wnx-candy-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}

.wnx-wreath {
  position: absolute;
  top: clamp(46px, 7vw, 92px);
  right: clamp(10px, 2vw, 40px);
  width: clamp(62px, 8vw, 112px);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
  animation: wnx-wreath-sway 9s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes wnx-wreath-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* ---------------------------------------------------------------------------
   4. Cheminée extérieure — le Père Noël y descend
   --------------------------------------------------------------------------- */

.wnx-stack-wrap {
  position: absolute;
  top: calc(var(--nav-h, 68px) - 6px);
  right: clamp(6px, 3vw, 60px);
  width: clamp(72px, 9vw, 124px);
  z-index: 30;
}

.wnx-stack {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
}

.wnx-stack-mouth {
  position: absolute;
  left: 14%;
  top: 11%;
  width: 72%;
  height: 12px;
}

.wnx-stack-smoke {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 40px;
  height: 90px;
  transform: translateX(-50%);
}

.wnx-stack-smoke span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 236, 250, 0.5), rgba(226, 236, 250, 0));
  animation: wnx-smoke 7s linear infinite;
}

.wnx-stack-smoke span:nth-child(2) { width: 24px; height: 24px; margin-left: -12px; animation-delay: -2.3s; }
.wnx-stack-smoke span:nth-child(3) { width: 14px; height: 14px; margin-left: -7px; animation-delay: -4.6s; }

@keyframes wnx-smoke {
  0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
  18% { opacity: 0.7; }
  100% { transform: translate3d(-34px, -120px, 0) scale(2.6); opacity: 0; }
}

/* Le Père Noël dans le conduit : coordonnées d'écran + clip piloté en direct,
   ce qui donne l'illusion qu'il sort vraiment de la cheminée (briques devant
   ses jambes, puis le buste qui émerge au-dessus de la bouche du conduit). */
.wnx-santa-wrap#wnx-santa-clip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 34;
  clip-path: inset(-60% -60% 100% -60%);
}

.wnx-santa-wrap#wnx-santa-clip .wnx-santa-shadow { display: none; }

/* Le jour de Noël */
body.wnx-is-christmas .wnx-countdown-main {
  box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.6), 0 0 42px rgba(255, 200, 90, 0.5), 0 18px 40px rgba(0, 0, 0, 0.5);
  animation: wnx-christmas-pulse 2.6s ease-in-out infinite;
}

@keyframes wnx-christmas-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

/* la pastille du menu respire doucement */
.christmas-countdown-pill .countdown-pulse { animation-duration: 1.8s; }

.wnx-tlight {
  animation: wnx-tlight 1.8s ease-in-out var(--d, 0s) infinite;
}

@keyframes wnx-tlight {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   5. Le coin cosy : foyer, sapin, enfants, cadeaux
   --------------------------------------------------------------------------- */

.wnx-corner {
  position: absolute;
  bottom: 0;
  z-index: 30;
}

.wnx-corner--left {
  left: 0;
  width: clamp(300px, 36vw, 580px);
  height: clamp(190px, 28vh, 320px);
}

.wnx-corner--right {
  right: 0;
  width: clamp(240px, 27vw, 430px);
  height: clamp(150px, 22vh, 260px);
}

.wnx-hearth-wrap {
  position: absolute;
  left: -1%;
  bottom: -2%;
  width: 66%;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
}

.wnx-fireplace-art { display: block; width: 100%; height: auto; }

.wnx-hearth-glow {
  animation: wnx-hearth 2.6s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes wnx-hearth {
  0%, 100% { opacity: 0.72; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.06); }
}

.wnx-flame {
  transform-origin: center bottom;
  animation: wnx-flame-dance 0.9s ease-in-out infinite alternate;
}

.wnx-flame--a { animation-duration: 0.85s; }
.wnx-flame--b { animation-duration: 0.62s; animation-delay: -0.2s; }
.wnx-flame--c { animation-duration: 1.05s; animation-delay: -0.4s; }
.wnx-flame--d { animation-duration: 0.78s; animation-delay: -0.6s; }

@keyframes wnx-flame-dance {
  from { transform: scaleY(0.86) scaleX(1.04) skewX(-4deg); opacity: 0.86; }
  to { transform: scaleY(1.16) scaleX(0.94) skewX(5deg); opacity: 1; }
}

.wnx-ember { animation: wnx-ember 1.5s ease-in-out var(--d, 0s) infinite alternate; }

@keyframes wnx-ember {
  from { opacity: 0.4; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.25); }
}

.wnx-candle-flame {
  transform-origin: center bottom;
  animation: wnx-candle 0.42s ease-in-out var(--d, 0s) infinite alternate;
  filter: drop-shadow(0 0 6px rgba(255, 190, 90, 0.95));
}

@keyframes wnx-candle {
  from { transform: scaleY(0.9) skewX(-4deg); opacity: 0.85; }
  to { transform: scaleY(1.14) skewX(5deg); opacity: 1; }
}

.wnx-sock {
  transform-origin: top center;
  animation: wnx-sock-sway 4.6s ease-in-out var(--d, 0s) infinite;
}

@keyframes wnx-sock-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3.5deg); }
}

/* Sapin */
.wnx-tree-wrap {
  position: absolute;
  left: 52%;
  bottom: 0;
  width: 40%;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: bottom center;
  animation: wnx-tree-sway 8s ease-in-out infinite;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}

@keyframes wnx-tree-sway {
  0%, 100% { transform: rotate(-0.8deg); }
  50% { transform: rotate(0.8deg); }
}

.wnx-tree { display: block; width: 100%; height: auto; }

.wnx-tree-star {
  transform-origin: 110px 28px;
  animation: wnx-star-shine 9s ease-in-out infinite;
}

@keyframes wnx-star-shine {
  0%, 100% { transform: scale(1) rotate(-6deg); filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.9)); }
  50% { transform: scale(1.14) rotate(6deg); filter: drop-shadow(0 0 18px rgba(255, 240, 160, 1)); }
}

.wnx-presents {
  position: absolute;
  left: 2%;
  right: -8%;
  bottom: -2%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
}

.wnx-presents > svg {
  width: 21%;
  height: auto;
  animation: wnx-present-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes wnx-present-in {
  from { transform: translateY(-26px) scale(0.4) rotate(-14deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Enfants */
.wnx-children {
  position: absolute;
  left: 39%;
  bottom: 1%;
  width: 48%;
  height: 46%;
  display: flex;
  align-items: flex-end;
  gap: 2%;
  z-index: 4;
}

.wnx-child {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  width: 26%;
  transform-origin: bottom center;
  animation: wnx-kid-idle 3.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  -webkit-tap-highlight-color: transparent;
}

.wnx-child--2 { width: 28%; animation-delay: -1.1s; }
.wnx-child--3 { width: 22%; animation-delay: -2.2s; }

.wnx-kid { display: block; width: 100%; height: auto; }

@keyframes wnx-kid-idle {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-5px) rotate(1.2deg); }
}

.wnx-kid-head {
  transform-origin: 30px 42px;
  animation: wnx-kid-look 7s ease-in-out infinite;
}

@keyframes wnx-kid-look {
  0%, 100% { transform: rotate(-3deg); }
  30% { transform: rotate(4deg) translateY(-1px); }
  60% { transform: rotate(-2deg); }
}

.wnx-kid-eyes {
  transform-origin: 30px 28px;
  animation: wnx-kid-blink 5.6s ease-in-out infinite;
}

@keyframes wnx-kid-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

.wnx-kid-armR {
  transform-origin: 46px 46px;
  animation: wnx-kid-wave 3.2s ease-in-out infinite;
}

.wnx-child--2 .wnx-kid-armR { animation-delay: -1.4s; }
.wnx-child--3 .wnx-kid-armR { animation-duration: 2.4s; }

@keyframes wnx-kid-wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(-26deg); }
  80% { transform: rotate(-8deg); }
  90% { transform: rotate(-30deg); }
}

.wnx-child.is-excited { animation: wnx-kid-jump 0.62s cubic-bezier(0.28, 0.84, 0.42, 1) 3; }

@keyframes wnx-kid-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-22px) scale(1.05, 0.96); }
  70% { transform: translateY(0) scale(0.96, 1.05); }
}

/* ---------------------------------------------------------------------------
   6. Le Père Noël
   --------------------------------------------------------------------------- */

.wnx-santa-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 126px;
  height: 148px;
  z-index: 40;
  will-change: transform;
}

.wnx-santa-body {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 50% 100%;
  animation: wnx-santa-breathe 3.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
  -webkit-tap-highlight-color: transparent;
}

.wnx-santa-art { display: block; width: 100%; height: 100%; overflow: visible; }

@keyframes wnx-santa-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.015, 0.985); }
}

.wnx-eyes-panic,
.wnx-mouth-o,
.wnx-sweat,
.wnx-hand-gift { opacity: 0; transition: opacity 0.18s ease; }

.wnx-mouth-smile { opacity: 1; transition: opacity 0.18s ease; }

.wnx-hat-tip { transform-origin: 98px 26px; animation: wnx-hat-flop 3.6s ease-in-out infinite; }

@keyframes wnx-hat-flop {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(7deg); }
}

.wnx-pompom { transform-origin: 108px 52px; animation: wnx-pompom 2.8s ease-in-out infinite; }

@keyframes wnx-pompom {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(3px, 4px) rotate(12deg); }
}

.wnx-eyes { transform-origin: 74px 36px; animation: wnx-santa-blink 6.4s ease-in-out infinite; }

@keyframes wnx-santa-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

.wnx-arm--r { transform-origin: 98px 66px; animation: wnx-arm-idle 4.2s ease-in-out infinite; }
.wnx-arm--l { transform-origin: 52px 66px; animation: wnx-arm-idle 5.1s ease-in-out infinite reverse; }

@keyframes wnx-arm-idle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}

.wnx-leg { transform-origin: top center; }

/* Marche : dandinement + jambes + hotte qui ballotte */
.wnx-santa-wrap.is-walking .wnx-santa-body { animation: wnx-waddle 0.62s ease-in-out infinite; }
.wnx-santa-wrap.is-walking .wnx-leg--l { animation: wnx-step 0.62s ease-in-out infinite; }
.wnx-santa-wrap.is-walking .wnx-leg--r { animation: wnx-step 0.62s ease-in-out infinite reverse; }
.wnx-santa-wrap.is-walking .wnx-sack { transform-origin: 104px 30px; animation: wnx-sack-bob 0.62s ease-in-out infinite; }

@keyframes wnx-waddle {
  0%, 100% { transform: translateY(0) rotate(-2.2deg); }
  50% { transform: translateY(-5px) rotate(2.2deg); }
}

@keyframes wnx-step {
  0%, 100% { transform: rotate(-13deg); }
  50% { transform: rotate(15deg) translateY(-2px); }
}

@keyframes wnx-sack-bob {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg) translateY(-3px); }
}

/* Descente dans la cheminée */
.wnx-santa-wrap.is-sliding .wnx-santa-body { animation: wnx-slide-wiggle 0.5s ease-in-out infinite; }
.wnx-santa-wrap.is-sliding .wnx-arm--r { transform-origin: 98px 66px; animation: wnx-slide-arm 0.5s ease-in-out infinite; }
.wnx-santa-wrap.is-sliding .wnx-leg--l { animation: wnx-step 0.5s ease-in-out infinite; }
.wnx-santa-wrap.is-sliding .wnx-leg--r { animation: wnx-step 0.5s ease-in-out infinite reverse; }

@keyframes wnx-slide-wiggle {
  0%, 100% { transform: rotate(-3deg) scaleY(0.98); }
  50% { transform: rotate(3deg) scaleY(1.02); }
}

@keyframes wnx-slide-arm {
  0%, 100% { transform: rotate(-24deg); }
  50% { transform: rotate(18deg); }
}

/* Remontée */
.wnx-santa-wrap.is-climbing .wnx-santa-body { animation: wnx-climb 0.42s ease-in-out infinite; }
.wnx-santa-wrap.is-climbing .wnx-leg--l { animation: wnx-step 0.42s ease-in-out infinite; }
.wnx-santa-wrap.is-climbing .wnx-leg--r { animation: wnx-step 0.42s ease-in-out infinite reverse; }

@keyframes wnx-climb {
  0%, 100% { transform: translateX(-2px) rotate(-1.5deg); }
  50% { transform: translateX(2px) rotate(1.5deg); }
}

/* Il offre un cadeau */
.wnx-santa-wrap.is-giving .wnx-hand-gift { opacity: 1; }
.wnx-santa-wrap.is-giving .wnx-arm--r { transform-origin: 98px 66px; animation: wnx-give 1.5s ease-in-out infinite; }
.wnx-santa-wrap.is-giving .wnx-santa-body { animation: wnx-give-bow 1.5s ease-in-out infinite; }

@keyframes wnx-give {
  0%, 100% { transform: rotate(6deg); }
  45% { transform: rotate(-34deg) translate(-6px, -4px); }
}

@keyframes wnx-give-bow {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  45% { transform: rotate(5deg) translateY(5px); }
}

/* Il salue */
.wnx-santa-wrap.is-waving .wnx-arm--r { transform-origin: 98px 66px; animation: wnx-wave 1s ease-in-out infinite; }

@keyframes wnx-wave {
  0%, 100% { transform: rotate(-38deg); }
  50% { transform: rotate(-66deg); }
}

/* PANIQUE */
.wnx-santa-wrap.is-panicking .wnx-eyes,
.wnx-santa-wrap.is-fleeing .wnx-eyes { opacity: 0; }

.wnx-santa-wrap.is-panicking .wnx-eyes-panic,
.wnx-santa-wrap.is-fleeing .wnx-eyes-panic,
.wnx-santa-wrap.is-panicking .wnx-mouth-o,
.wnx-santa-wrap.is-fleeing .wnx-mouth-o,
.wnx-santa-wrap.is-panicking .wnx-sweat,
.wnx-santa-wrap.is-fleeing .wnx-sweat { opacity: 1; }

.wnx-santa-wrap.is-panicking .wnx-mouth-smile,
.wnx-santa-wrap.is-fleeing .wnx-mouth-smile { opacity: 0; }

.wnx-santa-wrap.is-panicking .wnx-hand-gift { opacity: 0; }

.wnx-santa-wrap.is-panicking .wnx-santa-body { animation: wnx-panic 0.16s linear infinite; }
.wnx-santa-wrap.is-panicking .wnx-pompom { animation: wnx-pompom 0.3s ease-in-out infinite; }
.wnx-santa-wrap.is-panicking .wnx-sack { transform-origin: 104px 30px; animation: wnx-sack-shake 0.28s ease-in-out infinite; }

@keyframes wnx-panic {
  0% { transform: translate(-2px, 0) rotate(-2.5deg); }
  25% { transform: translate(2px, -2px) rotate(2deg); }
  50% { transform: translate(-2px, 1px) rotate(-1.5deg); }
  75% { transform: translate(2px, -1px) rotate(2.5deg); }
  100% { transform: translate(-2px, 0) rotate(-2.5deg); }
}

@keyframes wnx-sack-shake {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}

.wnx-sweat path { animation: wnx-sweat-drop 0.9s ease-in var(--d, 0s) infinite; }

@keyframes wnx-sweat-drop {
  0% { transform: translateY(-4px) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(16px) scale(1); opacity: 0; }
}

/* Fuite */
.wnx-santa-wrap.is-fleeing .wnx-santa-body { animation: wnx-flee 0.24s ease-in-out infinite; }
.wnx-santa-wrap.is-fleeing .wnx-leg--l { animation: wnx-step 0.2s linear infinite; }
.wnx-santa-wrap.is-fleeing .wnx-leg--r { animation: wnx-step 0.2s linear infinite reverse; }
.wnx-santa-wrap.is-fleeing .wnx-arm--r { transform-origin: 98px 66px; animation: wnx-wave 0.24s ease-in-out infinite; }

@keyframes wnx-flee {
  0%, 100% { transform: translateY(0) rotate(9deg) scaleX(1.04); }
  50% { transform: translateY(-9px) rotate(-4deg) scaleX(0.97); }
}

/* Bulle de dialogue */
.wnx-santa-bubble {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 45;
  width: max-content;
  max-width: min(300px, 54vw);
  padding: 10px 15px 11px;
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(160deg, rgba(255, 252, 245, 0.97), rgba(255, 236, 240, 0.95));
  color: #4a1620;
  font: 600 clamp(12px, 1.05vw, 14.5px)/1.4 'Familjen Grotesk', system-ui, sans-serif;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255, 210, 63, 0.55);
  pointer-events: none;
  will-change: transform;
}

.wnx-santa-bubble::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: linear-gradient(160deg, rgba(255, 252, 245, 0.97), rgba(255, 236, 240, 0.95));
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.wnx-santa-bubble.is-pop { animation: wnx-bubble-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes wnx-bubble-pop {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

/* ---------------------------------------------------------------------------
   7. Cadeaux cliquables
   --------------------------------------------------------------------------- */

.wnx-fx {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.wnx-gift-stage {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
}

.wnx-gift {
  position: absolute;
  z-index: 62;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  animation: wnx-gift-drop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  -webkit-tap-highlight-color: transparent;
}

.wnx-gift-box {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(255, 210, 63, 0.35));
  animation: wnx-gift-idle 2.4s ease-in-out infinite;
}

.wnx-gift-shine {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, 0.5), transparent 62%);
  animation: wnx-gift-halo 2.2s ease-in-out infinite;
}

@keyframes wnx-gift-drop {
  0% { transform: translateY(-60px) scale(0.4) rotate(-25deg); opacity: 0; }
  60% { transform: translateY(6px) scale(1.06) rotate(6deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes wnx-gift-idle {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(4deg); }
}

@keyframes wnx-gift-halo {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 0.85; transform: scale(1.12); }
}

.wnx-gift:hover .wnx-gift-box { animation-duration: 0.7s; }

.wnx-gift.is-opened .wnx-gift-box { animation: wnx-gift-open 0.7s ease-out forwards; }

@keyframes wnx-gift-open {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.5) rotate(14deg); }
  100% { transform: scale(0.2) rotate(60deg) translateY(-40px); opacity: 0; }
}

.wnx-gift.is-stolen {
  animation: wnx-gift-stolen 0.7s cubic-bezier(0.5, 0, 0.9, 0.4) forwards;
  pointer-events: none;
}

@keyframes wnx-gift-stolen {
  0% { transform: none; opacity: 1; }
  30% { transform: translateY(-14px) scale(1.15) rotate(-12deg); }
  100% { transform: translateY(-150px) translateX(70px) scale(0.25) rotate(180deg); opacity: 0; }
}

.wnx-gift--offered .wnx-gift-box { animation-duration: 1.1s; }

.wnx-gift.is-taken { animation: wnx-gift-taken 1.1s ease-in forwards; }

@keyframes wnx-gift-taken {
  0% { transform: none; }
  40% { transform: translateY(-12px) scale(1.12); }
  100% { transform: translateY(6px) scale(0.92); }
}

/* cadeaux offerts au sapin */
.wnx-presents .wnx-gift {
  position: relative;
  left: auto !important;
  top: auto !important;
  width: 21%;
  height: auto;
  aspect-ratio: 1;
  animation: wnx-present-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.wnx-presents .wnx-gift-box { font-size: clamp(15px, 2.3vw, 28px); }
.wnx-presents .wnx-gift-shine { inset: -4px; }

/* ---------------------------------------------------------------------------
   8. Traîneau + rennes
   --------------------------------------------------------------------------- */

.wnx-sleigh-wrap {
  position: absolute;
  left: -460px;
  top: 14vh;
  width: clamp(290px, 33vw, 470px);
  z-index: 38;
}

.wnx-sleigh-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45));
}

.wnx-sleigh-wrap.is-flying { animation: wnx-sleigh-fly 15s cubic-bezier(0.42, 0, 0.58, 1) forwards; }

@keyframes wnx-sleigh-fly {
  0% { transform: translate3d(-6vw, 40px, 0) rotate(3deg); }
  22% { transform: translate3d(28vw, -26px, 0) rotate(-2.5deg); }
  48% { transform: translate3d(58vw, 22px, 0) rotate(2deg); }
  74% { transform: translate3d(86vw, -30px, 0) rotate(-2deg); }
  100% { transform: translate3d(136vw, 12px, 0) rotate(1.5deg); }
}

.wnx-reindeer { animation: wnx-gallop 0.62s ease-in-out var(--d, 0s) infinite; }

@keyframes wnx-gallop {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}

.wnx-rlegs { transform-origin: center top; animation: wnx-legs-run 0.31s linear infinite; }

@keyframes wnx-legs-run {
  0%, 100% { transform: skewX(-9deg); }
  50% { transform: skewX(9deg); }
}

.wnx-wave-arm { transform-origin: 60px 44px; animation: wnx-sleigh-wave 1.5s ease-in-out infinite; }

@keyframes wnx-sleigh-wave {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(24deg); }
}

.wnx-sleigh-glow { animation: wnx-glow-pulse 1.6s ease-in-out infinite; }

@keyframes wnx-glow-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ---------------------------------------------------------------------------
   9. Le souper de Noël
   --------------------------------------------------------------------------- */

.wnx-dinner-wrap {
  position: absolute;
  right: -2%;
  bottom: -1%;
  width: 100%;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
  animation: wnx-dinner-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) both, wnx-dinner-float 9s ease-in-out 1.4s infinite;
}

.wnx-dinner-art { display: block; width: 100%; height: auto; }

@keyframes wnx-dinner-in {
  from { transform: translateY(70px) scale(0.9); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes wnx-dinner-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.wnx-dish {
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.wnx-dish:hover { transform: translateY(-3px) scale(1.03); }

.wnx-dish.is-wiggling { animation: wnx-dish-wiggle 0.85s ease-in-out; }

@keyframes wnx-dish-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-4deg) translateY(-3px); }
  75% { transform: rotate(4deg) translateY(-3px); }
}

.wnx-steam { animation: wnx-steam 3.4s ease-in-out var(--d, 0s) infinite; opacity: 0; }

@keyframes wnx-steam {
  0% { opacity: 0; transform: translateY(6px) scale(0.8); }
  35% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.25); }
}

.wnx-pudding-flame { transform-origin: center bottom; animation: wnx-candle 0.5s ease-in-out var(--d, 0s) infinite alternate; }

.wnx-bubble { animation: wnx-wine-bubble 2.6s ease-in var(--d, 0s) infinite; opacity: 0; }

@keyframes wnx-wine-bubble {
  0% { opacity: 0; transform: translateY(4px); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-12px); }
}

.wnx-dinner-sign { transform-origin: 180px 40px; animation: wnx-sign-sway 6.4s ease-in-out infinite; }

@keyframes wnx-sign-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}

/* ---------------------------------------------------------------------------
   10. Compte à rebours + panneau « Le coin de Noël »
   --------------------------------------------------------------------------- */

.wnx-countdown {
  position: absolute;
  right: clamp(10px, 2vw, 26px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.wnx-countdown-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--wnx-glass-brd);
  background: linear-gradient(140deg, rgba(24, 34, 62, 0.82), rgba(58, 18, 32, 0.78));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff6e2;
  cursor: pointer;
  font-family: 'Familjen Grotesk', system-ui, sans-serif;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.wnx-countdown-main:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 210, 63, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.wnx-cd-tree {
  font-size: 22px;
  line-height: 1;
  animation: wnx-tree-bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(60, 220, 130, 0.55));
}

@keyframes wnx-tree-bob {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

.wnx-cd-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.wnx-cd-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 236, 200, 0.72);
}

.wnx-cd-digits {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: Anton, 'Archivo Black', Impact, sans-serif;
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--wnx-gold-soft);
  text-shadow: 0 0 16px rgba(255, 210, 63, 0.55);
}

.wnx-cd-digits i {
  font: 600 10px/1 'Familjen Grotesk', system-ui, sans-serif;
  font-style: normal;
  color: rgba(255, 236, 200, 0.6);
  margin-right: 4px;
}

.wnx-cd-digits b.is-tick { animation: wnx-tick 0.42s ease-out; }

@keyframes wnx-tick {
  0% { transform: translateY(-5px) scale(1.16); color: #ffffff; text-shadow: 0 0 20px rgba(255, 240, 190, 1); }
  100% { transform: none; }
}

.wnx-cd-spark { font-size: 15px; animation: wnx-spark 2.6s ease-in-out infinite; }

@keyframes wnx-spark {
  0%, 100% { opacity: 0.4; transform: scale(0.85) rotate(-14deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(14deg); }
}

.wnx-countdown-panel {
  width: min(310px, 86vw);
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid var(--wnx-glass-brd);
  background: linear-gradient(160deg, rgba(16, 24, 46, 0.92), rgba(40, 14, 26, 0.88));
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f6ecdc;
  animation: wnx-panel-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wnx-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.wnx-panel-title {
  margin: 0 0 12px;
  font-family: Anton, Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--wnx-gold-soft);
}

.wnx-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13.5px;
}

.wnx-panel-count {
  font-family: Anton, Impact, sans-serif;
  font-size: 17px;
  color: var(--wnx-gold);
}

.wnx-mini-btn {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #f6ecdc;
  font: 600 12.5px/1 'Familjen Grotesk', system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.wnx-mini-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 210, 63, 0.5);
}

.wnx-mini-btn.is-on {
  background: linear-gradient(135deg, rgba(47, 158, 95, 0.65), rgba(20, 96, 60, 0.65));
  border-color: rgba(125, 255, 155, 0.5);
}

.wnx-mini-btn--wide {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(230, 57, 80, 0.4), rgba(163, 18, 42, 0.4));
  border-color: rgba(255, 140, 150, 0.35);
}

.wnx-panel-actions { padding-top: 6px; }

.wnx-panel-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: rgba(246, 236, 220, 0.55);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   11. Bandeau de salutation / citation
   --------------------------------------------------------------------------- */

.wnx-banner {
  position: relative;
  margin: 0;
  padding: 11px 18px 12px;
  border-radius: 16px;
  border: 1px solid var(--wnx-glass-brd);
  background: linear-gradient(140deg, rgba(18, 26, 46, 0.74), rgba(48, 16, 28, 0.62));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff4e2;
  font: 500 clamp(12.5px, 1vw, 14px)/1.45 'Familjen Grotesk', system-ui, sans-serif;
  overflow: hidden;
  animation: wnx-banner-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.wnx-banner-glow {
  position: absolute;
  top: -60%;
  left: -40%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 190, 0.22), transparent);
  transform: rotate(14deg);
  animation: wnx-banner-shine 6s ease-in-out infinite;
}

@keyframes wnx-banner-shine {
  0% { left: -40%; }
  55%, 100% { left: 130%; }
}

.wnx-banner-text { position: relative; }

@keyframes wnx-banner-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   12. Mode nuit profonde (auto après 20 h, ou forcé)
   --------------------------------------------------------------------------- */

body.wnx-night {
  background: radial-gradient(circle at 50% -10%, #101c3a 0%, #070b18 48%, #000000 100%);
}

.wnx-night .wnx-window { filter: drop-shadow(0 0 9px rgba(255, 200, 100, 1)); }
.wnx-night .wnx-garland { filter: saturate(1.25) brightness(1.12); }
.wnx-night .wnx-hearth-glow { opacity: 1; }

.wnx-night .wnx-countdown-main,
.wnx-night .wnx-banner {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 190, 90, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* lueur de veillée près du foyer */
.wnx-night .wnx-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 42% at 14% 96%, rgba(255, 150, 60, 0.18), transparent 70%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   13. Réglages de la page Paramètres
   --------------------------------------------------------------------------- */

.settings-card--xmas { border-color: rgba(255, 210, 63, 0.22); }

.xmas-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 2px;
}

.xmas-stats .stat-pill { text-align: center; }

.xmas-silent-note {
  margin: 4px 0 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted, #a9b1c0);
}

/* ---------------------------------------------------------------------------
   14. Accessibilité, responsive et confort de lecture
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wnx-aurora span,
  .wnx-cloud,
  .wnx-shooting span,
  .wnx-star,
  .wnx-ornament,
  .wnx-wreath,
  .wnx-candy,
  .wnx-tree-wrap,
  .wnx-tree-star,
  .wnx-child,
  .wnx-kid-head,
  .wnx-kid-armR,
  .wnx-santa-body,
  .wnx-sleigh-wrap,
  .wnx-dinner-wrap,
  .wnx-banner-glow,
  .wnx-gift-box,
  .wnx-gift-shine,
  .wnx-stack-smoke span,
  .wnx-bulb,
  .wnx-bulb-glow {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

body.wnx-soft .wnx-shooting,
body.wnx-soft .wnx-clouds,
body.wnx-soft .wnx-aurora span:nth-child(3) {
  display: none;
}

@media (max-width: 1180px) {
  .wnx-corner--right { width: clamp(210px, 30vw, 330px); }
  .wnx-corner--left { width: clamp(270px, 42vw, 440px); }
}

@media (max-width: 900px) {
  .wnx-corner--right { opacity: 0.92; }
  .wnx-banner-slot { max-width: 58vw; }
}

@media (max-width: 760px) {
  .wnx-corner--right { display: none; }
  .wnx-corner--left { width: 70vw; height: clamp(150px, 24vh, 230px); }
  .wnx-stack-wrap { top: calc(var(--nav-h, 60px) - 4px); width: clamp(56px, 17vw, 84px); }
  .wnx-countdown { right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); }
  .wnx-countdown-main { padding: 7px 12px 7px 9px; gap: 7px; }
  .wnx-cd-tree { font-size: 17px; }
  .wnx-cd-spark { display: none; }
  .wnx-banner-slot {
    left: 10px;
    right: 10px;
    max-width: none;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 132px);
  }
  .wnx-wreath { display: none; }
  .wnx-candy { width: 26px; }
  .xmas-stats { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .wnx-corner--left { width: 86vw; }
  .wnx-cd-digits { font-size: 13px; }
  .wnx-cd-label { font-size: 9px; letter-spacing: 0.1em; }
}

/* Pendant un film, la magie se fait discrète */
body.wnx-watching .wnx-backdrop,
body.wnx-watching .wnx-deco {
  opacity: 0.3;
  transition: opacity 0.5s ease;
}

body.wnx-watching .wnx-corner--right,
body.wnx-watching .wnx-banner-slot { display: none; }

body.wnx-watching .wnx-santa-wrap { opacity: 0.8; }