:root{
  --nuit:#0A0E14;--s1:#141B26;--s2:#1C2532;--trait:#232D3B;--craie:#EEF1F5;--gris:#9AA4B2;--ardoise:#5B6676;--tape:#FF6A13;
  --ease:cubic-bezier(.2,.9,.3,1);
  --display:'Anton',Impact,sans-serif;--body:'IBM Plex Sans Condensed',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#050709;color:var(--craie);font-family:var(--body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input{font:inherit;color:inherit}
body{display:flex;justify-content:center;align-items:center}
#phone{position:relative;width:100%;max-width:430px;height:100dvh;max-height:932px;background:var(--nuit);overflow:hidden;display:flex;flex-direction:column}
@media(min-width:500px){#phone{border-radius:44px;height:min(900px,96dvh);box-shadow:0 0 0 10px #111620,0 30px 80px #000}}
#screen{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative}
#screen::-webkit-scrollbar{display:none}
.page{padding:20px 20px 28px;animation:slideIn 240ms var(--ease)}
.page.back{animation:slideBack 240ms var(--ease)}
@keyframes slideIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideBack{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}

/* typo */
.d{font-family:var(--display);text-transform:uppercase;font-weight:400;line-height:.95}
.h1{font:400 40px/.95 var(--display);text-transform:uppercase}
.h2{font:400 22px/1.05 var(--display)}
.mono{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.lab{font:600 11px var(--mono);letter-spacing:.1em;color:var(--ardoise);text-transform:uppercase}
.lab.o{color:var(--tape)}
.gris{color:var(--gris)}.ard{color:var(--ardoise)}
.p{font:400 15px/1.45 var(--body);color:var(--gris)}
.bold{font-weight:700}
.row{display:flex;align-items:center;gap:12px}.sb{justify-content:space-between}.col{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.grow{flex:1;min-width:0}
.sbar{display:flex;justify-content:space-between;padding:14px 28px 4px;font:600 13px var(--mono);flex-shrink:0}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;width:100%;background:var(--tape);color:var(--nuit);font:400 18px var(--display);letter-spacing:.04em;text-transform:uppercase;transition:transform 90ms,background 90ms}
.btn:active{transform:scale(.97);background:#D95500}
.btn.ghost{background:transparent;border:1.5px solid var(--trait);color:var(--craie)}
.btn.ghost:active{background:var(--s2)}
.btn.dis{background:var(--s2);color:var(--ardoise);pointer-events:none}
.btn.sm{min-height:44px;font-size:15px;width:auto;padding:0 18px}
.link{color:var(--gris);font:600 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center}
.press{transition:transform 90ms,background 90ms}.press:active{transform:scale(.97);background:var(--s2)}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1.5px solid var(--trait);font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.chip.on{background:var(--craie);color:var(--nuit);border-color:var(--craie)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
.chips::-webkit-scrollbar{display:none}
.seg{display:flex;border:1.5px solid var(--trait)}
.seg button{flex:1;min-height:40px;text-align:center;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.seg button.on{background:var(--craie);color:var(--nuit)}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--trait);margin:16px -20px 0;padding:0 20px}
.tabs button{min-height:44px;font:400 18px var(--display);text-transform:uppercase;color:var(--ardoise);position:relative}
.tabs button.on{color:var(--craie)}
.tabs button.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--tape)}

/* tape label */
.tape{display:inline-block;font:400 15px/1.15 var(--display);padding:4px 10px;white-space:nowrap;text-transform:uppercase}
.tape.big{font-size:34px;padding:6px 16px}
.tape.lv-noir{outline:1.5px solid var(--craie)}
.card{background:var(--s1);padding:16px}
.sep{height:1px;background:var(--trait);margin:0 -20px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--s2);display:grid;place-items:center;font:400 14px var(--display);flex-shrink:0;border:1.5px solid var(--trait)}
.avatar.lg{width:56px;height:56px;font-size:20px}
.photo{background:repeating-linear-gradient(135deg,#17202d 0 14px,#1a2432 14px 28px);display:grid;place-items:center;text-align:center;padding:16px;font:600 10px var(--mono);letter-spacing:.08em;color:var(--ardoise);text-transform:uppercase}
.back-btn{width:44px;height:44px;display:grid;place-items:center;font-size:22px;margin-left:-12px}
.dot{width:8px;height:8px;border-radius:50%;background:#1FD17A;display:inline-block}
.dot.live{animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.badge{display:inline-block;background:var(--tape);color:var(--nuit);font:600 10px var(--mono);letter-spacing:.08em;padding:3px 7px}

/* tab bar */
#tabbar{height:88px;flex-shrink:0;background:var(--nuit);border-top:1px solid var(--trait);display:flex;padding-bottom:34px;position:relative}
#tabbar.hide{display:none}
#tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:600 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ardoise);min-height:44px}
#tabbar button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
#tabbar button.on{color:var(--craie)}
#tabbar button.on svg{stroke:var(--tape)}
#tabbar button.entry{flex:none;width:92px}
#tabbar button.entry span.tp{display:block;background:var(--tape);color:var(--nuit);font:400 17px var(--display);padding:9px 14px;transform:rotate(-3deg);margin-top:-18px;box-shadow:0 6px 18px #FF6A1355;letter-spacing:.04em}
#tabbar button.entry.on span.tp{box-shadow:0 0 0 2px var(--craie)}

/* affluence */
.big-num{font:400 132px/.85 var(--display)}
.bars{display:flex;align-items:flex-end;gap:3px;height:64px}
.bars i{flex:1;background:var(--trait);display:block}
.bars i.past{background:#4a5668}.bars i.now{background:#1FD17A}
.sk{background:linear-gradient(90deg,var(--s1) 0%,var(--s2) 50%,var(--s1) 100%);background-size:200% 100%;animation:sweep 1.2s infinite linear}
@keyframes sweep{to{background-position:-200% 0}}

/* bloc row */
.brow{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--trait);min-height:64px}
.brow .tape{min-width:52px;text-align:center}
.st-valide{color:#1FD17A}.st-projet{color:var(--tape)}

/* plan */
.plan{position:relative;background:var(--s1);border:1px solid var(--trait);aspect-ratio:1/1.05;overflow:hidden}
.zone{position:absolute;border:1.5px solid var(--trait);display:flex;align-items:flex-start;padding:6px 8px;font:600 9px var(--mono);letter-spacing:.08em;color:var(--gris);transition:background 90ms}
.zone.on{background:#FF6A1322;border-color:var(--tape);color:var(--craie)}
.zone i{position:absolute;width:7px;height:7px;border-radius:50%}

/* sheet */
.dim{position:absolute;inset:0;background:#000a;z-index:20;animation:fade 200ms}
@keyframes fade{from{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--s1);z-index:21;padding:12px 20px 34px;max-height:88%;overflow-y:auto;animation:up 300ms var(--ease);border-top:3px solid var(--tape)}
@keyframes up{from{transform:translateY(100%)}}
.grab{width:40px;height:4px;background:var(--trait);margin:0 auto 14px}
.toggle{width:50px;height:30px;background:var(--trait);position:relative;flex-shrink:0;transition:background 150ms}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;background:var(--gris);transition:transform 150ms var(--ease)}
.toggle.on{background:var(--tape)}.toggle.on::after{transform:translateX(20px);background:var(--nuit)}
.field{border-bottom:1.5px solid var(--trait);padding:6px 0 8px}
.field input{width:100%;background:none;border:0;outline:0;font:500 18px var(--body);padding-top:4px}
.field:focus-within{border-color:var(--tape)}
.opt{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1.5px solid var(--trait);min-height:60px;width:100%}
.opt.on{border-color:var(--craie);background:var(--s1)}
.progress{display:flex;gap:4px;margin-bottom:6px}.progress i{flex:1;height:3px;background:var(--trait)}.progress i.on{background:var(--tape)}

/* QR */
.qrwrap{background:#fff;color:#0A0E14;min-height:100%}
.qrwrap .page{padding-bottom:12px}

/* validated overlay */
.ov{position:absolute;inset:0;z-index:40;overflow:hidden;display:grid;place-items:center}
.ov .fill{position:absolute;inset:0;transform:translateY(100%);animation:fillUp 320ms var(--ease) forwards}
@keyframes fillUp{to{transform:none}}
.ov .stamp{position:relative;font:400 76px/.9 var(--display);padding:6px 20px;border:6px solid currentColor;transform:scale(2.4) rotate(-8deg);opacity:0;animation:stamp 420ms 340ms cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp{to{transform:scale(1) rotate(-6deg);opacity:1}}
.ov.shake{animation:shake 300ms 700ms}
@keyframes shake{20%{transform:translate(-8px,4px)}40%{transform:translate(8px,-4px)}60%{transform:translate(-5px,2px)}80%{transform:translate(4px,-2px)}}
.ov .flake{position:absolute;width:34px;height:12px;opacity:0;animation:fly 900ms 760ms ease-out forwards}
@keyframes fly{from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.ov .pts{position:absolute;bottom:130px;text-align:center;opacity:0;animation:fade2 300ms 1100ms forwards}
@keyframes fade2{to{opacity:1}}

#toast{position:absolute;left:20px;right:20px;bottom:104px;background:var(--craie);color:var(--nuit);padding:14px 16px;font:600 13px var(--mono);letter-spacing:.04em;z-index:60;transform:translateY(30px);opacity:0;pointer-events:none;transition:all 240ms var(--ease)}
#toast.show{transform:none;opacity:1}
.bignum{font:400 56px/.9 var(--display)}
.stat{background:var(--s1);padding:14px}
.hbar{display:flex;align-items:center;gap:10px;margin:6px 0}
.hbar b{height:22px;display:block}