:root{
  --cream:        #f3ead6;
  --cream-2:      #efe2c6;
  --ink:          #1c1813;
  --ink-soft:     #4a4135;
  --tomato:       #ff5230;
  --tomato-deep:  #d83716;
  --blue:         #2b62d6;
  --sun:          #ffce3a;
  --leaf:         #2f9e6b;
  --card:         #fbf5e6;
  --line:         rgba(28,24,19,.14);
  --shadow:       12px 12px 0 rgba(28,24,19,.92);
  --shadow-soft:  0 18px 40px -22px rgba(28,24,19,.55);
  --ease:         cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  min-height:100dvh;
  overflow-x:hidden;
  position:relative;
  line-height:1.5;
}

/* grain — uniquement sur pseudo fixe, pointer-events none */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999;
  pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* blobs décoratifs flottants */
.blob{position:fixed; border-radius:50%; filter:blur(2px); opacity:.5; z-index:0; pointer-events:none; will-change:transform}
.blob.b1{width:42vmax;height:42vmax;left:-14vmax;top:-12vmax;background:radial-gradient(circle at 35% 35%, var(--sun), transparent 70%);animation:drift 19s var(--ease) infinite alternate}
.blob.b2{width:36vmax;height:36vmax;right:-12vmax;top:18vmax;background:radial-gradient(circle at 60% 40%, var(--tomato), transparent 68%);opacity:.32;animation:drift 23s var(--ease) infinite alternate-reverse}
.blob.b3{width:30vmax;height:30vmax;left:6vmax;bottom:-14vmax;background:radial-gradient(circle at 50% 50%, var(--blue), transparent 70%);opacity:.28;animation:drift 27s var(--ease) infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vmax,3vmax,0) scale(1.12)}}

/* canvas confettis (fin de décompte) */
.confetti-canvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9998}

/* marquee */
.marquee{
  position:relative; z-index:3;
  background:var(--ink); color:var(--cream);
  border-bottom:3px solid var(--ink);
  overflow:hidden; white-space:nowrap;
  padding:.55rem 0; font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem;
}
.marquee__track{display:inline-block; padding-left:100%; animation:scroll 26s linear infinite; will-change:transform}
.marquee span{padding:0 1.4rem}
.marquee b{color:var(--sun)}
@keyframes scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}

.wrap{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:clamp(1.2rem,4vw,3rem) clamp(1rem,4vw,2.5rem) 3rem}

/* header */
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.sticker{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--sun); color:var(--ink);
  border:3px solid var(--ink); border-radius:999px;
  padding:.4rem .9rem; font-weight:700; font-size:.8rem; letter-spacing:.02em;
  transform:rotate(-4deg); box-shadow:4px 4px 0 var(--ink);
}
.sticker .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 0 rgba(47,158,107,.6);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(47,158,107,.55)}50%{box-shadow:0 0 0 8px rgba(47,158,107,0)}}
.live{font-family:"Bricolage Grotesque";font-weight:700;font-variant-numeric:tabular-nums}

/* hero title */
.hero{margin:clamp(1.6rem,5vw,3.2rem) 0 clamp(1rem,3vw,1.8rem)}
.kicker{font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--ink-soft)}
.hero h1{
  font-family:"Bricolage Grotesque";
  font-weight:800; line-height:.86; letter-spacing:-.02em;
  font-size:clamp(3.2rem,13vw,9rem);
  margin-top:.3rem;
}
.hero h1 .swing{display:inline-block;transform:rotate(-3deg);transform-origin:bottom left}
.hero h1 .pop{color:var(--tomato); -webkit-text-stroke:2px var(--ink); text-shadow:5px 5px 0 var(--ink)}
.hero p.lead{margin-top:1rem; max-width:48ch; color:var(--ink-soft); font-size:clamp(1rem,2.4vw,1.18rem)}
.hero p.lead b{color:var(--ink)}

/* countdown */
.count{margin-top:clamp(1.4rem,4vw,2.4rem); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(1rem,3vw,2rem); align-items:end}
@media (max-width:820px){.count{grid-template-columns:1fr}}

.days{
  background:var(--card); border:3px solid var(--ink); border-radius:2rem;
  box-shadow:var(--shadow); padding:clamp(1.2rem,4vw,2.2rem); position:relative; overflow:hidden;
  transform:rotate(-1deg);
}
.days::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(45deg, rgba(255,82,48,.06) 0 14px, transparent 14px 28px);pointer-events:none}
.days .num{
  font-family:"Bricolage Grotesque"; font-weight:800; line-height:.82;
  font-size:clamp(5.5rem,22vw,12rem); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--ink); text-shadow:6px 6px 0 var(--tomato);
}
.days .lbl{display:flex;align-items:center;gap:.6rem;margin-top:.2rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.9rem,2.5vw,1.1rem)}
.days .lbl::after{content:"";flex:1;height:3px;background:var(--ink);border-radius:2px}

.hms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,2vw,1rem)}
.unit{
  background:var(--card); border:3px solid var(--ink); border-radius:1.3rem;
  padding:1rem .5rem .8rem; text-align:center; box-shadow:6px 6px 0 var(--ink);
}
.unit:nth-child(1){transform:rotate(2deg);background:#fff6df}
.unit:nth-child(2){transform:rotate(-2deg)}
.unit:nth-child(3){transform:rotate(1.5deg);background:#ffeede}
.unit .v{
  font-family:"Bricolage Grotesque"; font-weight:800;
  font-size:clamp(2rem,8vw,3.4rem); line-height:1; font-variant-numeric:tabular-nums;
  display:block;
}
.unit.tick .v{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(1.18) translateY(-2px)}60%{transform:scale(.97)}100%{transform:scale(1)}}
.unit .u{display:block;margin-top:.35rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--ink-soft)}

/* progress + meta */
.meta{margin-top:clamp(1.6rem,4vw,2.4rem); display:grid; grid-template-columns:1fr; gap:1.1rem}
.bar-card{background:var(--card);border:3px solid var(--ink);border-radius:1.4rem;padding:1.1rem 1.3rem;box-shadow:var(--shadow-soft)}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;font-weight:600}
.bar-top .who{font-family:"Bricolage Grotesque";font-weight:700;font-size:clamp(1.05rem,3vw,1.4rem)}
.bar-top .pct{font-variant-numeric:tabular-nums;color:var(--tomato-deep);font-weight:700}
.bar{margin-top:.75rem;height:18px;background:var(--cream-2);border:3px solid var(--ink);border-radius:999px;overflow:hidden;position:relative}
.bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--tomato) 0 12px,var(--tomato-deep) 12px 24px);transition:width 1s linear}
.bar small{position:absolute;inset:0;display:grid;place-items:center;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);mix-blend-mode:overlay}
.note{font-size:.9rem;color:var(--ink-soft)}
.note b{color:var(--ink)}
.bar-card .note{margin-top:.7rem}

/* rotating caption */
.caption{
  margin-top:clamp(1.4rem,4vw,2.2rem);
  border:3px dashed var(--ink); border-radius:1.4rem; padding:1rem 1.3rem;
  background:rgba(255,255,255,.35);
  display:flex; align-items:center; gap:.9rem; min-height:64px;
}
.caption .q{
  flex-shrink:0; width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:var(--cream);border:3px solid var(--ink);font-family:"Bricolage Grotesque";font-weight:800;
  transform:rotate(-6deg);
}
.caption p{font-weight:500;font-size:clamp(1rem,2.6vw,1.2rem);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.caption p.swap{opacity:0;transform:translateY(6px)}

/* celebration banner (mandat terminé) */
.party{display:none;margin-top:1.4rem;border:3px solid var(--ink);border-radius:1.4rem;background:var(--sun);box-shadow:var(--shadow);padding:1.1rem 1.3rem;font-weight:700}
.party.on{display:block;animation:pop .6s var(--ease)}
.party b{font-family:"Bricolage Grotesque"}

footer{margin-top:clamp(2rem,6vw,3.4rem);padding-top:1.4rem;border-top:3px solid var(--ink);color:var(--ink-soft);font-size:.82rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between;align-items:center}
footer a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
footer a:hover{color:var(--tomato-deep)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}