:root{
  --red-deep:#5E1017;--red:#8B1A1F;--red-glow:#B5232B;
  --green:#0E6B35;--gold:#F2C879;--cream:#FFF4DC;
  --num:clamp(120px,48vw,200px);--h:1.05em;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--red-deep);color:var(--cream);font-family:'Fredoka','Nunito','Trebuchet MS',system-ui,sans-serif}

.scene{
  position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + 110px) 0 150px;
  background:radial-gradient(circle at 50% 45%,var(--red-glow) 0%,var(--red) 55%,var(--red-deep) 100%);
}

/* Décor : guirlande et cadeaux */
.garland,.gifts{position:absolute;left:0;right:0;margin:0 auto;max-width:520px;z-index:1;pointer-events:none}
.garland{top:env(safe-area-inset-top,0px);animation:drop 1.1s cubic-bezier(.22,1.35,.36,1) both}
.gifts{bottom:0}
.garland svg,.gifts svg{display:block;width:100%;height:auto;overflow:visible}

.bauble{transform-box:fill-box;transform-origin:50% 0;animation:swing 3.4s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.light{animation:twinkle 1.8s ease-in-out infinite}
.light.b{animation-delay:.9s}

.gift{transform-box:fill-box;transform-origin:50% 100%;animation:pop .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(1.3s + var(--i)*.16s)}
.bow{transform-box:fill-box;transform-origin:50% 50%;animation:wiggle 6s ease-in-out infinite;animation-delay:calc(3.5s + var(--i)*1.3s)}

/* Ciel : étoiles, neige, étoile filante (créées par script.js) */
.star,.flake{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.star{background:var(--gold);animation:twinkle var(--t) ease-in-out infinite;animation-delay:var(--d)}
.flake{top:-10px;background:#fff;opacity:.8;animation:fall var(--t) linear infinite;animation-delay:var(--d)}
.shoot{position:absolute;top:18%;left:-10%;width:90px;height:2px;z-index:0;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold));animation:shoot 11s linear infinite 4s}

/* Bandeau central */
.panel{
  position:relative;z-index:2;width:min(86vw,360px);padding:26px 16px 30px;
  background:var(--green);border:3px solid var(--gold);outline:2px solid var(--cream);outline-offset:4px;
  animation:panel-in .6s .15s cubic-bezier(.2,.8,.3,1) both;
}
.intro{font-size:22px}
.label{font-size:30px;font-weight:600;color:#fff}

.odo{display:inline-flex;font-size:var(--num);line-height:1;font-weight:600;color:var(--gold);
  text-shadow:0 .027em 0 #7A5A12;font-variant-numeric:tabular-nums}
.odo.d3{font-size:calc(var(--num)*.7)}
.odo.landed{animation:land .5s cubic-bezier(.34,1.56,.64,1)}
.digit{display:block;width:.6em;height:var(--h);overflow:hidden}
.strip{display:block;transform:translateY(calc(var(--n,0)*var(--h)*-1));
  transition:transform 2s cubic-bezier(.1,.75,.2,1) .7s}
.strip span{display:block;height:var(--h);line-height:var(--h)}

.zz{position:absolute;right:16px;top:8px;color:var(--gold);font-size:20px}
.zz span{position:absolute;right:0;top:0;opacity:0;animation:zfloat 3.6s ease-out infinite}
.zz span:nth-child(2){animation-delay:1.2s;font-size:15px}
.zz span:nth-child(3){animation-delay:2.4s;font-size:11px}

.noel-msg{display:none;flex-direction:column;gap:6px;padding:40px 0}
.noel-msg strong{font-size:56px;line-height:1.1;color:var(--gold)}
.noel-msg span{font-size:24px}
.noel .noel-msg{display:flex}
.noel .count{display:none}

/* Lien */
.link{position:relative;z-index:2;margin-top:32px;min-height:44px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;color:var(--cream);animation:panel-in .6s .6s both}
.link-main{font-size:21px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.link-sub{font-size:14px;opacity:.9}
.link:hover,.link:focus-visible{color:var(--gold)}
.link:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:2px}
.nojs{position:relative;z-index:2;font-size:22px}

/* Confettis */
.confetti{position:absolute;top:-16px;left:var(--l);width:8px;height:14px;background:var(--c);z-index:3;
  pointer-events:none;animation:confetti var(--t) ease-in forwards;animation-delay:var(--d)}

@media (max-height:700px){:root{--num:clamp(100px,38vw,150px)}}

@keyframes drop{from{transform:translateY(-130px)}to{transform:none}}
@keyframes swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes twinkle{50%{opacity:.25}}
@keyframes pop{from{opacity:0;transform:translateY(40px) scale(0)}to{opacity:1;transform:none}}
@keyframes wiggle{0%,8%,100%{transform:rotate(0)}2%{transform:rotate(-8deg)}4%{transform:rotate(8deg)}6%{transform:rotate(-5deg)}}
@keyframes fall{to{transform:translate3d(var(--dx),110vh,0)}}
@keyframes shoot{
  0%,88%{opacity:0;transform:translate3d(0,0,0) rotate(25deg)}
  90%{opacity:1}
  100%{opacity:0;transform:translate3d(130vw,60vw,0) rotate(25deg)}
}
@keyframes panel-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes land{0%{transform:translateY(-10px) scale(1.04)}100%{transform:none}}
@keyframes zfloat{
  0%{opacity:0;transform:translate(0,6px) scale(.7)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(14px,-30px) scale(1.1)}
}
@keyframes confetti{to{transform:translate3d(var(--dx),110vh,0) rotate(720deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .star,.flake,.shoot,.zz{display:none}
}