:root{
  --paper:#f4efe4; --ink:#14110f; --fire:#ff4b1f; --steel:#9aa3a8; --code:#7cff6b;
  --t:0;
  --display:'Archivo Black',Impact,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
html.free{scroll-snap-type:none}
body{background:var(--ink);color:var(--paper);font-family:var(--mono);line-height:1.5;overflow-x:hidden}
@media (hover:hover) and (pointer:fine){ body,button,a,input{cursor:none} }
a{color:inherit}
::selection{background:var(--fire);color:var(--ink)}
#hero ::selection,#add ::selection,#chaleur ::selection{background:var(--ink);color:var(--paper)}
.tk ::selection,.receipt ::selection,#contra ::selection{background:var(--fire);color:var(--ink)}
h1,h2{font-family:var(--display);text-transform:uppercase;line-height:.9;letter-spacing:-.01em}
section{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,5vh,4rem) clamp(1rem,5vw,4rem);position:relative;scroll-snap-align:start}
.label{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:1rem}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--paper);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}
#stack :focus-visible,#contra :focus-visible,.receipt :focus-visible{outline-color:var(--ink);box-shadow:0 0 0 6px var(--paper)}

/* cursor */
#cur{position:fixed;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--paper);pointer-events:none;z-index:999;transition:width .2s,height .2s;transform:translate(-50%,-50%)}
#cur.big{width:56px;height:56px}
@media (hover:none){#cur{display:none}}

/* HERO */
#hero{display:grid;align-content:center;justify-content:stretch;gap:1.2rem;padding-block:2rem;background:var(--fire);color:var(--ink);overflow:hidden}
#hero h1{font-size:clamp(3rem,min(13vw,16vh),11rem);white-space:nowrap}
#hero h1 span{display:inline-block;transition:transform .3s}
#hero h1 span:hover{transform:translateY(-.08em) rotate(-4deg)}
.hero-row{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;justify-content:space-between}
.hero-row p{max-width:34ch;font-weight:700}
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:0;padding:1rem 1.6rem;font-family:var(--display);text-transform:uppercase;font-size:1.1rem;transition:transform .15s,background .15s}
.btn:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:5px 5px 0 var(--paper)}
#ticketprint{background:var(--paper);color:var(--ink);width:min(300px,100%);padding:1rem 1.2rem 2rem;font-size:.8rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),95% 100%,90% calc(100% - 12px),85% 100%,80% calc(100% - 12px),75% 100%,70% calc(100% - 12px),65% 100%,60% calc(100% - 12px),55% 100%,50% calc(100% - 12px),45% 100%,40% calc(100% - 12px),35% 100%,30% calc(100% - 12px),25% 100%,20% calc(100% - 12px),15% 100%,10% calc(100% - 12px),5% 100%,0 calc(100% - 12px));
  transform:rotate(2deg);min-height:200px}
#ticketprint b{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:.5rem}
#ticketprint .line{opacity:0;transform:translateY(-6px);transition:.4s}
#ticketprint .line.on{opacity:1;transform:none}
.scrollhint{font-size:.8rem;font-weight:700;animation:bob 1.6s infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* PASS */
#pass{background:var(--ink)}
#pass h2{font-size:clamp(2rem,min(7vw,11vh),5.5rem);margin-bottom:1rem}
.intro{max-width:52ch;opacity:.85;margin-bottom:1.2rem}
.counter{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.bar{flex:1;min-width:140px;height:10px;background:#2b2622;position:relative}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--fire);transition:width .5s}
.rail{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:flex-start}
.tk{background:var(--paper);color:var(--ink);width:min(260px,100%);padding:1rem 1.1rem 1.8rem;position:relative;text-align:left;border:0;display:block;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),92% 100%,84% calc(100% - 10px),76% 100%,68% calc(100% - 10px),60% 100%,52% calc(100% - 10px),44% 100%,36% calc(100% - 10px),28% 100%,20% calc(100% - 10px),12% 100%,4% calc(100% - 10px),0 100%);
  transition:transform .25s;transform:rotate(var(--r,0deg))}
.tk:hover{transform:rotate(0) translateY(-8px)}
.tk .no{font-size:.7rem;letter-spacing:.15em;opacity:.6}
.tk .age{font-family:var(--display);font-size:2.6rem;line-height:1;margin:.3rem 0 .5rem}
.tk .ttl{font-weight:700;text-transform:uppercase;font-size:.85rem}
.tk .body{max-height:0;overflow:hidden;transition:max-height .5s,margin .3s;font-size:.85rem}
.tk.open .body{margin-top:.8rem}
.tk .stamp{position:absolute;right:.6rem;top:.8rem;border:3px solid var(--fire);color:var(--fire);font-family:var(--display);padding:.1rem .4rem;font-size:.9rem;transform:rotate(-12deg) scale(2.2);opacity:0;pointer-events:none}
.tk.done .stamp{animation:stamp .35s forwards}
@keyframes stamp{to{opacity:1;transform:rotate(-12deg) scale(1)}}
.tk .fire{margin-top:.8rem;background:var(--ink);color:var(--paper);border:0;padding:.4rem .8rem;font-size:.75rem;text-transform:uppercase;display:none}
.tk.open:not(.done) .fire{display:inline-block}
.tk.soft{background:#e8dccb}
.tk.soft .age{font-size:2.2rem}

/* CHALEUR */
#chaleur{background:color-mix(in srgb,var(--fire) calc((1 - var(--t))*100%),#06100a);color:color-mix(in srgb,var(--ink) calc((1 - var(--t))*100%),var(--code));transition:none}
#chaleur h2{font-size:clamp(2rem,min(7vw,11vh),5.5rem);margin-bottom:.8rem}
.slider{display:flex;align-items:center;gap:1rem;margin:.6rem 0 1.4rem;font-weight:700;text-transform:uppercase;font-size:.85rem}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:8px;background:currentColor;opacity:.9;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;background:var(--paper);border:4px solid var(--ink);border-radius:50%}
input[type=range]::-moz-range-thumb{width:26px;height:26px;background:var(--paper);border:4px solid var(--ink);border-radius:50%}
.pairs{display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem 2.5rem}
.pair{display:grid;grid-template-columns:1fr;border-bottom:2px solid currentColor;padding:.4rem 0;font-family:var(--display);font-size:clamp(1.1rem,min(2.6vw,4.5vh),2rem);text-transform:uppercase;position:relative;min-height:1.4em}
.pair small{font-family:var(--mono);font-size:.75rem;text-transform:none;opacity:.75;display:block;font-weight:400;margin-top:.2rem}
.pair .w{transition:opacity .2s}
#chaleur .verdict{margin-top:1.2rem;max-width:56ch;font-weight:700}

/* CONTRADICTIONS */
#contra{background:var(--paper);color:var(--ink)}
#contra h2{font-size:clamp(2rem,min(7vw,11vh),5.5rem);margin-bottom:1.2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.card{perspective:900px;height:min(320px,38vh);min-height:230px;background:none;border:0;text-align:left}
.card .in{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.card.flip .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between;border:3px solid var(--ink)}
.face h3{font-family:var(--display);font-size:clamp(1.3rem,3.4vh,2rem);text-transform:uppercase;line-height:.95}
.front{background:var(--paper)}
.back{background:var(--ink);color:var(--paper);transform:rotateY(180deg)}
.back h3{color:var(--fire)}
.tap{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;opacity:.6}

/* INATTEIGNABLE */
#inatt{background:var(--ink)}
#inatt h2{font-size:clamp(2rem,min(7vw,11vh),5.5rem);margin-bottom:1rem}
#arena{position:relative;flex:1;min-height:180px;border:2px dashed #4a423b;margin-top:.8rem;overflow:hidden}
#run{position:absolute;left:calc(50% - 90px);top:calc(50% - 25px);transition:left .25s cubic-bezier(.3,1.6,.5,1),top .25s cubic-bezier(.3,1.6,.5,1);background:var(--fire);color:var(--ink);border:0;padding:1rem 1.4rem;font-family:var(--display);text-transform:uppercase}
#run.caught{background:var(--code);transition:none;transform:scale(1.1)}
#msg{margin-top:.6rem;font-weight:700;min-height:2.6em}
#tries{opacity:.6;font-size:.8rem}

/* ADDITION */
#add{background:var(--fire);color:var(--ink);display:grid;place-items:center;justify-content:stretch}
.receipt{background:var(--paper);width:min(460px,100%);padding:1.4rem 1.4rem 2.2rem;font-size:.82rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),94% 100%,88% calc(100% - 14px),82% 100%,76% calc(100% - 14px),70% 100%,64% calc(100% - 14px),58% 100%,52% calc(100% - 14px),46% 100%,40% calc(100% - 14px),34% 100%,28% calc(100% - 14px),22% 100%,16% calc(100% - 14px),10% 100%,4% calc(100% - 14px),0 100%);transform:rotate(-1.5deg)}
.receipt h2{font-size:2.2rem;margin-bottom:.6rem}
.receipt .r{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed #999;padding:.22rem 0}
.receipt .tot{font-family:var(--display);font-size:1.5rem;border-top:3px solid var(--ink);border-bottom:0;margin-top:.6rem;padding-top:.6rem}
.receipt p{margin:.8rem 0}
.receipt .tot{align-items:baseline}
.receipt .tot span:last-child{text-align:right;line-height:1.05}
.receipt .btn{width:100%;text-align:center;text-decoration:none}
footer{scroll-snap-align:end;background:var(--ink);padding:1.5rem;font-size:.75rem;opacity:.6;text-align:center}

/* progress + live */
#prog{position:fixed;top:0;left:0;height:5px;width:0;background:var(--paper);z-index:990;transition:background-color .2s}
.live{font-size:.8rem;font-weight:700;min-height:1.2em}

/* STACK */
#stack{background:var(--paper);color:var(--ink)}
#stack h2{font-size:clamp(2rem,min(7vw,11vh),5.5rem);margin-bottom:1rem}
/* MEUBLE À TIROIRS */
.cabinet{background:var(--fire);border:4px solid var(--ink);padding:clamp(.7rem,1.8vh,1.4rem) clamp(.9rem,2vh,1.6rem);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.4vh,1rem) clamp(1rem,2vw,2rem);align-items:start;width:100%;max-width:1500px;box-shadow:8px 8px 0 var(--ink)}
.cabinet{margin-bottom:6.5rem}
.drawer{position:relative}
.dfront{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:clamp(2.4rem,7.6vh,5.6rem);background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-family:var(--display);transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.dfront:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.drawer.open .dfront{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.plate{background:var(--paper);border:2px solid var(--ink);padding:.1rem 1rem;text-transform:uppercase;font-size:clamp(.95rem,2.8vh,1.9rem);letter-spacing:.02em;transform:rotate(-1deg)}
.handle{position:absolute;right:1.2rem;top:50%;width:clamp(46px,8.5vh,100px);height:clamp(10px,1.9vh,20px);margin-top:calc(clamp(10px,1.9vh,20px) / -2);border-radius:8px;background:linear-gradient(#f6f8f9,#aab2b6 55%,#6c757a);box-shadow:0 2px 0 rgba(0,0,0,.45)}
.dbox{position:absolute;left:0;right:0;top:100%;z-index:3;overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.3,1,.4,1)}
.drawer.open{z-index:6}
.dinner{margin:0 .6rem;padding:.8rem .9rem .9rem;background:var(--ink);color:var(--paper);border:3px solid var(--ink);border-top:0;font-size:clamp(.85rem,2vh,1.3rem);line-height:1.5}
.dinner p{font-weight:700}
.dinner small{display:block;margin-top:.5rem;font-weight:400;opacity:.8}
.bocaux{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.bocaux a{background:var(--paper);color:var(--ink);border:2px solid var(--paper);padding:.25rem .7rem;font-size:clamp(.75rem,2vh,1.2rem);font-weight:700;text-decoration:none;transition:background .15s,transform .15s}
.bocaux a:nth-child(odd){transform:rotate(-1.5deg)}
.bocaux a:nth-child(even){transform:rotate(1deg)}
.bocaux a:hover,.bocaux a:focus-visible{background:var(--fire);transform:rotate(0) translateY(-2px)}
@media (max-width:700px){.cabinet{grid-template-columns:1fr}}

/* GAME */
#game{background:#1d1a17}
#game .intro{max-width:70ch}
#game h2{font-size:clamp(2rem,min(7vw,11vh),5.5rem);margin-bottom:1rem}
.hud{display:flex;gap:1.5rem;flex-wrap:wrap;font-weight:700;margin:.6rem 0}
#field{position:relative;flex:1;min-height:200px;border:2px dashed #4a423b;overflow:hidden;user-select:none;-webkit-user-select:none}
.ord{position:absolute;width:104px;background:var(--paper);color:var(--ink);padding:.45rem .5rem;font-size:.7rem;font-weight:700;border:0;text-align:left;animation:pop .2s}
.ord i{display:block;height:4px;background:var(--fire);margin-top:.35rem;transform-origin:left;animation:burn var(--life) linear forwards}
@keyframes burn{to{transform:scaleX(0)}}
@keyframes pop{from{transform:scale(.3)}}
#fieldmsg{position:absolute;inset:0;display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;text-align:center;padding:1rem;background:rgba(20,17,15,.92)}
#fieldmsg[hidden]{display:none}
#fieldmsg input{background:var(--paper);color:var(--ink);border:0;padding:.7rem 1rem;font:inherit;font-weight:700;width:200px}
#board{margin-top:.8rem;padding-left:1.5rem;max-width:560px;columns:2;max-height:5.6rem;overflow:auto;font-size:.85rem}
#board li{padding:.15rem 0}

/* TERMINAL */
#term{background:#06100a;color:var(--code);height:100vh;height:100svh;justify-content:flex-start}
#term h2{font-size:clamp(2rem,min(7vw,11vh),5.5rem);margin-bottom:1rem}
#term .intro{margin-bottom:0}
#term ::selection{background:var(--code);color:#06100a}
.shell{border:2px solid var(--code);padding:1rem;flex:1;min-height:140px;overflow:auto;font-size:.9rem;margin-top:1.5rem}
.shell .ln{white-space:pre-wrap;word-break:break-word}
.prompt{display:flex;gap:.5rem}
.prompt input:focus-visible{outline:none;box-shadow:none}
.prompt input{flex:1;background:none;border:0;color:inherit;font:inherit;outline:none;caret-color:var(--code);min-width:0}

@media (max-height:780px){
  #ticketprint{min-height:0}
  #ticketprint .line:nth-child(n+8){display:none}
  .scrollhint{display:none}
}

/* 100 vh exact sur écran de bureau ; en dessous, hauteur mini 100 vh */
@media (min-width:821px) and (min-height:560px){
  section{height:100vh;height:100svh;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
  section::-webkit-scrollbar{display:none}
  #hero{overflow:hidden}
  #pass{height:auto;min-height:100svh;overflow:visible}
}
@media (max-width:820px){.pairs{grid-template-columns:1fr}}

/* CLOCHE */
.bell-fixed{position:fixed;right:1rem;bottom:1rem;z-index:980;display:flex;align-items:flex-end;gap:.7rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:bellSlide .8s cubic-bezier(.2,1.2,.4,1) both}
.bell-fixed[hidden]{display:none}
@keyframes bellSlide{from{transform:translateX(130%)}}
.bell{position:relative;width:190px;height:150px;zoom:.5;flex:none;background:none;border:0;padding:0;transform-origin:50% 100%}
.bell>span{position:absolute;display:block;left:50%;transform:translateX(-50%)}
.b-base{bottom:0;width:190px;height:34px;border-radius:95px 95px 16px 16px/34px 34px 16px 16px;background:linear-gradient(#2b2b2b,#050505)}
.b-rim{bottom:22px;width:168px;height:20px;border-radius:10px;background:linear-gradient(#f6f8f9,#aab2b6 55%,#6c757a);box-shadow:0 3px 0 rgba(0,0,0,.4)}
.b-dome{bottom:36px;width:140px;height:84px;border-radius:70px 70px 6px 6px/84px 84px 6px 6px;background:radial-gradient(ellipse at 32% 28%,#fff 0,#e6e9eb 22%,#aeb6ba 58%,#6d767b 100%)}
.b-dome::before{content:"";position:absolute;left:22px;top:14px;width:34px;height:16px;border-radius:50%;background:rgba(255,255,255,.8);transform:rotate(-25deg);filter:blur(2px)}
.b-dome::after{content:"";position:absolute;left:64px;bottom:18px;width:11px;height:11px;border-radius:50%;background:rgba(0,0,0,.45)}
.b-knob{bottom:112px;width:20px;height:28px;border-radius:7px 7px 4px 4px;background:linear-gradient(90deg,#8d969b,#fff 40%,#8d969b);transition:transform .08s}
.b-knob::before{content:"";position:absolute;left:50%;top:-7px;width:30px;height:8px;border-radius:5px;background:linear-gradient(#fff,#9aa3a8);transform:translateX(-50%)}
.bell:active .b-knob,.bell.ring .b-knob{transform:translateX(-50%) translateY(7px)}
.bell.ring{animation:ring .75s ease-in-out}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-11deg)}30%{transform:rotate(9deg)}45%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}
.bell-hint{position:relative;margin-bottom:.6rem;max-width:170px;padding:.55rem .7rem;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font-size:.72rem;font-weight:700;line-height:1.3}
.bell-hint::after{content:"";position:absolute;right:-8px;bottom:12px;width:12px;height:12px;background:var(--paper);border-right:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}

@media (max-width:600px){
  #hero{gap:.9rem}
  #ticketprint{min-height:0;padding-bottom:1.6rem;font-size:.72rem}
  #ticketprint .line:nth-child(n+8){display:none}
  .scrollhint{display:none}
  #field{height:340px}
  #arena{height:280px}
  .bell-hint{display:none}
}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
.confetti{position:fixed;top:-20px;width:8px;height:14px;z-index:998;pointer-events:none}

/* écrans de bureau peu hauts (portables 13") : on resserre pour garder 100 vh exact */
@media (min-width:821px) and (max-height:680px){
  section{padding-block:1rem}
  #hero h1{font-size:clamp(3rem,min(13vw,13vh),11rem)}
  section h2{font-size:clamp(1.8rem,min(7vw,9vh),4.5rem)}
  .intro{margin-bottom:.6rem;font-size:.85rem}
  .pair{padding:.2rem 0}
  .pair small{display:none}
  #chaleur .verdict{margin-top:.6rem}
  .slider{margin:.3rem 0 .8rem}
  .receipt{padding:1rem 1.2rem 1.8rem}
  .receipt h2{font-size:1.7rem;margin-bottom:.3rem}
  .receipt .r{padding:.12rem 0}
  .receipt p{margin:.5rem 0;font-size:.75rem}
  .receipt .tot{font-size:1.2rem;margin-top:.3rem;padding-top:.3rem}
}

/* meuble : taille compacte sur les portables peu hauts (≤ 780 px) */
@media (max-height:780px){
  .cabinet{padding:.7rem .9rem;gap:.5rem 1rem}
  .dfront{height:clamp(2.3rem,5.4vh,3.2rem)}
  .plate{font-size:.95rem}
  .handle{width:46px;height:10px;margin-top:-5px}
  .dinner{font-size:.82rem}
  .bocaux a{font-size:.72rem}
}