@font-face{font-family:"Grandstander";src:url(fonts/grandstander-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Andika";src:url(fonts/andika-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url(fonts/andika-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Andika";src:url(fonts/andika-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --wall:#E9E5DE;--paper:#FAF9F5;--ink:#171614;--red:#DA756E;--red-line:#A8433D;
  --text:#1F1D1A;--paper-text:#1F1D1A;--muted:#5B554D;--wall-muted:#5B554D;--focus:#A8433D;
  --shadow:rgba(70,55,40,.26);--blend:normal;--ink-ring:transparent;
  color-scheme:light;
}
/* la nuit : le même mur, lumière éteinte ; les papiers restent des papiers */
:root[data-theme="dark"]{
  --wall:#23252E;--paper:#ECE8DF;--text:#ECE7DE;--wall-muted:#B1AAA0;--focus:#DA756E;
  --shadow:rgba(0,0,0,.55);--blend:multiply;--ink-ring:rgba(236,232,223,.3);color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --wall:#23252E;--paper:#ECE8DF;--text:#ECE7DE;--wall-muted:#B1AAA0;--focus:#DA756E;
    --shadow:rgba(0,0,0,.55);--blend:multiply;--ink-ring:rgba(236,232,223,.3);color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--wall)}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--wall) url(wall.jpg) repeat;background-size:384px 384px;background-blend-mode:var(--blend);
  color:var(--text);font:400 19px/1.5 "Andika",system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.page{position:relative;flex:1;width:100%;max-width:460px;margin:0 auto;padding:12px 20px 36px}
.lang{position:absolute;top:6px;right:10px;display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;font-weight:700;font-size:15px;letter-spacing:.06em;text-decoration:none;color:var(--text)}
/* bouton lune / soleil */
.mode{position:absolute;top:6px;left:10px;z-index:3;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;background:none;color:var(--text);cursor:pointer}
.mode svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode .sun,:root[data-theme="dark"] .mode .moon{display:none}
:root[data-theme="dark"] .mode .sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mode .moon{display:none}
  :root:not([data-theme="light"]) .mode .sun{display:block}
}

/* paper pieces taped on the wall */
.stick{filter:drop-shadow(0 7px 6px var(--shadow))}
.paper{background:var(--paper);color:var(--paper-text)}
.torn-b{clip-path:polygon(0 0,100% 3px,100% calc(100% - 6px),93% 100%,86% calc(100% - 5px),78% calc(100% - 1px),70% calc(100% - 7px),61% 100%,53% calc(100% - 5px),44% calc(100% - 1px),36% calc(100% - 7px),27% 100%,19% calc(100% - 6px),10% calc(100% - 1px),0 calc(100% - 6px))}
.torn-t{clip-path:polygon(0 6px,8% 1px,17% 6px,25% 0,34% 5px,43% 1px,52% 7px,61% 2px,70% 6px,79% 0,88% 5px,95% 1px,100% 5px,100% 100%,0 100%)}

.letters{margin:0;display:flex;justify-content:center;gap:.05em;font-family:"Grandstander","Andika",sans-serif;font-weight:800;line-height:1;letter-spacing:.02em;color:var(--ink)}
.letters .sp{width:.22em}
.r{color:var(--red);-webkit-text-stroke:.03em var(--red-line);paint-order:stroke fill}

/* teaser */
.teaser{display:flex;flex-direction:column;align-items:center;padding-top:30px}
.pumpkin{align-self:flex-start;margin-left:2px;transform:rotate(-5deg)}
.pumpkin .paper{padding:10px 14px 14px}
.pumpkin img{width:132px}
.banner{position:relative;margin-top:16px;transform:rotate(-2deg)}
.banner .letters{font-size:clamp(46px,14.5vw,66px);padding:14px 18px 20px}
.peek{position:absolute;right:12%;top:16px;width:150px;z-index:-1;pointer-events:none}
/* the word, like a dictionary entry */
.defn{position:relative;margin-top:26px;align-self:stretch;transform:rotate(-1deg)}
.defn>.paper{padding:18px 18px 18px}
.vamp{position:absolute;top:-26px;right:-8px;z-index:2;transform:rotate(9deg)}
.vamp .paper{padding:5px 6px 7px}
.vamp img{width:56px}
.hw{margin:0 0 6px;padding-right:52px;font-size:17px;line-height:1.3;color:var(--muted)}
.hw b{margin-right:.2em;font-size:28px;font-weight:700;color:var(--ink)}
.hw .pr{margin-right:.3em}
.senses{margin:0;padding-left:1.35em;font-size:18px;line-height:1.4}
.senses li{margin:0 0 6px;padding-left:.15em}
.senses li::marker{font-weight:700;color:var(--red-line)}
.scribble{display:inline-block;height:.9em;vertical-align:-.12em;border-radius:8px;background:repeating-linear-gradient(105deg,var(--ink) 0 7px,#34312d 7px 10px);transform:rotate(-1.4deg)}
.scribble.s1{width:88%}
.scribble.s2{width:46%;transform:rotate(1deg)}
.more{margin:8px 0 0;font-weight:700;font-size:18px;line-height:1.3;color:var(--red-line)}
.rem{margin:8px 0 0;font-style:italic;font-size:17px;color:var(--muted)}
.oui{position:relative;color:var(--red-line)}
.oui::after{content:"";position:absolute;inset:-.1em -.2em -.06em;border:2px solid var(--red);border-radius:50%;transform:rotate(-4deg)}
.reveal .defn{margin-top:26px}
.count{margin-top:18px;align-self:stretch;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.count .stick:nth-child(1){transform:rotate(-2.5deg)}
.count .stick:nth-child(2){transform:rotate(1.6deg)}
.count .stick:nth-child(3){transform:rotate(-1.2deg)}
.count .stick:nth-child(4){transform:rotate(2.2deg)}
.cell{padding:11px 2px 9px;text-align:center}
.num{display:flex;justify-content:center;font:800 clamp(34px,10.5vw,44px)/1 "Grandstander",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.num span{display:inline-block}
.lab{display:block;margin-top:6px;font-size:14px;line-height:1.2;color:var(--muted)}
.what{margin-top:14px;align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ask{transform:rotate(-2deg)}
.ask .letters{font-size:clamp(28px,8.4vw,36px);padding:10px 14px 16px}
.hat{transform:rotate(3deg)}
.hat .paper{padding:8px 12px 12px}
.hat img{width:108px}
.sub{margin:14px 0 0;align-self:stretch}
.actions{margin-top:18px;align-self:stretch;display:flex;gap:12px}
.btn{flex:1 1 0;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border:0;border-radius:2px;
  background:var(--paper);color:var(--ink);font:700 17px/1.1 "Andika",system-ui,sans-serif;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 14px -10px var(--shadow);transform:rotate(-1deg)}
.btn.ink{background:var(--ink);color:var(--paper);transform:rotate(1deg);
  box-shadow:0 0 0 1px var(--ink-ring),0 10px 14px -10px var(--shadow)}
.btn:active{translate:0 1px}

/* a little life on the wall */
@keyframes sway{0%,100%{rotate:-.6deg}50%{rotate:.6deg}}
@keyframes wobble{0%,84%,100%{rotate:0deg}87%{rotate:-7deg}90%{rotate:6deg}93%{rotate:-3deg}96%{rotate:1deg}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes peek{0%,72%,100%{translate:0 0;rotate:0deg}78%{translate:0 -42px;rotate:-4deg}86%{translate:0 -42px;rotate:3deg}92%{translate:0 0;rotate:0deg}}
@keyframes wave{0%,64%,100%{translate:0 0}70%{translate:0 -7px}76%{translate:0 0}}
@keyframes drop{from{translate:0 -45%;opacity:0}to{translate:0 0;opacity:1}}
@keyframes shake{0%,100%{rotate:-1.6deg}50%{rotate:1.6deg}}
.pumpkin,.banner,.defn,.vamp,.count .stick,.ask,.what .hat{animation:sway 6.4s ease-in-out infinite}
.banner{animation-duration:7.6s;animation-delay:-2s}
.defn{animation-duration:8.2s;animation-delay:-3.4s}
.vamp{animation-duration:5.4s;animation-delay:-1s}
.count .stick:nth-child(2){animation-duration:5.9s;animation-delay:-1.5s}
.count .stick:nth-child(3){animation-duration:7.1s;animation-delay:-3s}
.count .stick:nth-child(4){animation-duration:6.2s;animation-delay:-4.2s}
.ask{animation-duration:6.9s;animation-delay:-2.6s}
.pumpkin img{animation:wobble 7s ease-in-out 1s infinite}
.hat img{animation:bob 2.6s ease-in-out infinite}
.peek{animation:peek 9s ease-in-out 2.5s infinite}
.wave span{animation:wave 4.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * 90ms)}
.num .new{animation:drop .32s ease-out}
/* la troupe : bulles, sommeil, petits gestes */
.teaser,.pumpkin,.what .hat{position:relative}
.cast{cursor:pointer;-webkit-tap-highlight-color:transparent}
.cast:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.bubble{position:absolute;z-index:6;width:max-content;max-width:min(210px,48vw);padding:7px 11px 8px;border-radius:3px;
  background:var(--paper);color:var(--paper-text);font:700 15px/1.25 "Andika",system-ui,sans-serif;text-align:left;
  box-shadow:0 6px 12px -6px var(--shadow);pointer-events:none;animation:pop .35s cubic-bezier(.2,1.2,.4,1) both}
.bubble::after{content:"";position:absolute;width:10px;height:10px;background:inherit;rotate:45deg}
.bubble.out{opacity:0;transition:opacity .25s}
.pumpkin>.bubble{left:calc(100% + 12px);top:14px}
.pumpkin>.bubble::after{left:-4px;top:12px}
.vamp>.bubble{right:calc(100% + 8px);top:-6px;rotate:-9deg}
.vamp>.bubble::after{right:-4px;top:12px}
.what .hat>.bubble{right:12%;bottom:calc(100% + 12px)}
.what .hat>.bubble::after{right:20px;bottom:-4px}
.banner>.bubble{right:4%;bottom:calc(100% + 10px)}
.banner>.bubble::after{right:24px;bottom:-4px}
.defn>.bubble{left:30%;top:60%}
.defn>.bubble::after{left:16px;top:-4px}
.zzz{position:absolute;z-index:4;display:flex;align-items:flex-end;gap:1px;color:var(--text);font:800 19px/1 "Grandstander",sans-serif;pointer-events:none}
.zzz i{font-style:normal;opacity:.8;animation:zz 2.8s ease-in-out infinite both}
.zzz i:nth-child(2){font-size:15px;animation-delay:.45s}
.zzz i:nth-child(3){font-size:12px;animation-delay:.9s}
@keyframes zz{0%{opacity:0;translate:0 6px}30%{opacity:.85}100%{opacity:0;translate:7px -16px}}
.vamp>.zzz{left:-10px;top:-14px}
.what .hat>.zzz{left:4px;top:-12px}
.banner>.zzz{right:14%;top:-18px}
.spark{position:absolute;z-index:6;width:14px;height:14px;pointer-events:none;background:var(--red);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spark .95s ease-out both}
.spark:nth-of-type(even){background:#D57309}
@keyframes spark{0%{opacity:0;translate:0 0;scale:.4}20%{opacity:1}100%{opacity:0;translate:var(--dx) var(--dy);scale:1.15;rotate:140deg}}
@keyframes hop{0%,100%{translate:0 0;scale:1 1}25%{translate:0 2px;scale:1.08 .9}55%{translate:0 -16px;scale:.95 1.06}80%{translate:0 0;scale:1.04 .96}}
@keyframes peekv{0%,100%{translate:0 0;rotate:0deg}30%,72%{translate:-52px 96px;rotate:-16deg}}
@keyframes jump{0%,100%{translate:0 0}45%{translate:0 -12px}}
@keyframes cast{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -18px;rotate:-12deg}62%{translate:0 -8px;rotate:14deg}}
@keyframes wig{0%,100%{translate:0 0}20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-2px 0}80%{translate:2px 0}}
@keyframes twitch{0%,84%,100%{translate:0 0}88%{translate:-2px 0}92%{translate:2px 0}96%{translate:-1px 0}}
@keyframes peek1{0%,100%{translate:0 0;rotate:0deg}25%,75%{translate:0 -44px;rotate:-4deg}50%{translate:0 -44px;rotate:3deg}}
.act-hop{animation:hop .7s ease-in-out!important}
.act-jump{animation:jump .45s ease-out 2!important}
.vamp.act-peekv{animation:peekv 1.5s ease-in-out!important}
.hat.act-cast{animation:cast .9s ease-in-out!important}
.peek.act-peek{animation:peek1 1.8s ease-in-out!important}
.ghosts-asleep .peek{animation:none}
.scribble.wig{animation:wig .5s ease-in-out}
.scribble{transform-origin:12% 50%;transition:rotate .25s ease,translate .25s ease}
.scribble.lift{rotate:-9deg;translate:0 -7px}
.scrib-awake .scribble:not(.wig){animation:twitch 3.4s ease-in-out infinite}
.is-final .count .stick{animation:shake .42s ease-in-out infinite}
.is-final .count .stick:last-child{scale:1.08}
.is-final .peek{animation-duration:2.4s;animation-delay:0s}

/* reveal */
.reveal{display:flex;flex-direction:column;align-items:center;padding-top:30px}
.ghosts{transform:rotate(-3deg)}
.ghosts .paper{padding:14px 18px 22px}
.ghosts img{width:min(62vw,236px)}
.hug{transform-origin:50% 90%;animation:hug 3.8s ease-in-out infinite}
@keyframes hug{0%,100%{scale:1}42%{scale:1.035}58%{scale:1.035}}
.hb:focus{outline:none}
.hb{margin:24px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:inherit}
.hb .w1{transform:rotate(-2deg)}
.hb .w2{transform:rotate(1.4deg)}
.hb .letters{font-size:clamp(29px,8.6vw,44px);padding:10px 14px 16px}
.story{margin-top:28px;align-self:stretch}
.story p{margin:0 0 14px;font-size:20px}
.story .lead{font-weight:700;font-size:28px;line-height:1.2}
.story .love{font-weight:700}
.story .sign{margin:4px 0 0;text-align:right;font-style:italic;font-size:20px}
.card{margin-top:16px;align-self:stretch;transform:rotate(.8deg)}
.card .paper{padding:24px 20px 22px}
.card p{margin:0 0 12px;font-size:18px}
.card .btn{width:100%;margin-top:6px;transform:rotate(-.6deg)}
.close{margin:28px 0 0;font-style:italic;font-size:20px;text-align:center}
.reveal .again{margin-top:16px;flex:none;width:auto;min-width:160px}

/* after 48 hours */
.closed{display:flex;flex-direction:column;align-items:center;padding-top:70px;text-align:center}
.closed .banner{margin:0 0 30px}
.closed p{margin:0 0 12px}
.closed .lead{font-weight:700;font-size:24px;line-height:1.25}
.closed .btn{margin-top:16px;flex:none;min-width:240px}
.closed .redir{margin-top:22px;font-size:15px;color:var(--wall-muted)}

/* footer */
.foot{width:100%;max-width:460px;margin:0 auto;padding:6px 20px 22px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;font-size:15px;color:var(--wall-muted)}
.foot a{color:var(--wall-muted)}
.foot .press{font-size:14px}

/* the 8:30 moment */
@keyframes fall{to{transform:translateY(115vh) rotate(var(--fr,24deg));opacity:.85}}
.is-falling .teaser>*{animation:fall .95s cubic-bezier(.55,0,.85,.4) forwards}
.is-falling .teaser>*:nth-child(2){animation-delay:.06s;--fr:-28deg}
.is-falling .teaser>*:nth-child(3){animation-delay:.12s;--fr:18deg}
.is-falling .teaser>*:nth-child(4){animation-delay:.18s;--fr:-14deg}
.is-falling .teaser>*:nth-child(5){animation-delay:.24s;--fr:30deg}
.is-falling .teaser>*:nth-child(6){animation-delay:.30s;--fr:-20deg}
.is-falling .teaser>*:nth-child(7){animation-delay:.36s;--fr:12deg}
.is-falling .teaser>*:nth-child(8){animation-delay:.42s;--fr:-16deg}
@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes pop{0%{opacity:0;scale:.55}70%{opacity:1;scale:1.07}100%{scale:1}}
.is-open .reveal>*{animation:rise .7s ease-out both}
.is-open .reveal>.ghosts{animation:pop 1s cubic-bezier(.2,1.2,.4,1) both}
.is-open .reveal>:nth-child(2){animation-delay:.45s}
.is-open .reveal>:nth-child(3){animation-delay:.8s}
.is-open .reveal>:nth-child(4){animation-delay:1.05s}
.is-open .reveal>:nth-child(n+5){animation-delay:1.3s}
/* le « oui » se fait entourer au crayon, une fois la définition posée */
@keyframes ring{from{opacity:0;scale:1.8;rotate:-40deg}to{opacity:1;scale:1;rotate:0deg}}
.is-open .oui::after{animation:ring .5s cubic-bezier(.3,1.35,.5,1) 2s both}

/* text pages */
.doc{padding-top:40px}
.doc h1{margin:0 0 18px;font:800 34px/1.1 "Grandstander",sans-serif}
.doc h2{margin:28px 0 8px;font-size:20px}
.doc .paper{padding:24px 20px}
.doc p{margin:0 0 12px;font-size:18px}

/* caption, press kit */
.cap{margin:10px 0 0;font-style:italic;font-size:15px;line-height:1.3;text-align:center;color:var(--muted)}
.doc .stick+.stick{margin-top:20px}
.doc .kicker{font-size:20px;line-height:1.35}
.doc .wait{margin:16px 0 0;color:var(--muted);font-style:italic}
.doc #app h2{margin-top:26px}
.kit{margin:0 0 18px;padding-left:20px;font-size:17px}
.kit li{margin:0 0 10px}
.sw{display:inline-block;width:.9em;height:.9em;margin:0 .3em 0 .15em;vertical-align:-.08em;border:1px solid rgba(0,0,0,.25);border-radius:2px}
.doc .btn{width:100%}
.doc .paper>h2:first-child{margin-top:0}
.doc h1.letters{justify-content:flex-start;font-size:44px}
.doc a{word-break:break-word}

@media (min-width:720px){
  .page,.foot{max-width:560px}
  .teaser{padding-top:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}