:root{
  --canvas:#f1ebdd; --paper:#fdf9ee; --cream:#fdf5e4; --ink:#0f2e1f; --soft:#6f7d6a; --line:#e3dcc6; --line-d:#d5cbaf;
  --leaf:#1b5e3f; --leaf-d:#12402a; --pepper:#c63a2b; --pepper-d:#a52e22; --mango:#e8a13c; --mango-d:#cf8b24; --passion:#e56b2f; --sage:#a8b99d; --lime:#86c545;
  --serif:Georgia,'Times New Roman',serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{--canvas:#10251a;--paper:#163021;--ink:#f3ecd8;--soft:#9db09a;--line:#28402f;--line-d:#365241;--leaf:#237049;}}
*{box-sizing:border-box;}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;}
.wrap{max-width:420px;margin:0 auto;padding:22px 16px 50px;}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
.h-serif{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;}
.muted{color:var(--soft);}
.med svg,.bdg svg,.pv svg{width:100%;height:100%;display:block;}

/* carte membre */
.card{position:relative;border-radius:24px;padding:18px;color:var(--cream);background:var(--leaf);box-shadow:0 6px 0 var(--leaf-d);}
.cardtop{display:flex;justify-content:space-between;align-items:flex-start;}
.club{display:flex;align-items:center;gap:6px;font-family:var(--serif);font-style:italic;font-weight:700;font-size:14px;} .club svg{width:18px;height:18px;}
.lvlwrap{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border-radius:999px;padding:4px 11px 4px 5px;font-size:12px;font-weight:800;white-space:nowrap;} .lvlwrap .med{width:22px;height:22px;}
.lvlwrap.flip{animation:flip .6s cubic-bezier(.3,1.5,.5,1);} @keyframes flip{0%{transform:rotateY(0)}45%{transform:rotateY(90deg) scale(1.1)}100%{transform:rotateY(0)}}
.cnum{font-family:var(--mono);font-weight:700;font-size:60px;line-height:.86;letter-spacing:-.04em;margin-top:12px;} .cnum.bump{animation:bump .5s cubic-bezier(.3,1.7,.4,1);} @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.24);color:var(--mango)}100%{transform:scale(1)}}
.cnum small{font-family:var(--mono);font-size:11px;font-weight:700;margin-left:8px;opacity:.85;letter-spacing:.12em;text-transform:uppercase;}
.streak{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;margin-top:8px;opacity:.95;} .streak svg{width:17px;height:17px;} .streak .fl{display:inline-flex;animation:spin 9s linear infinite;} @keyframes spin{to{transform:rotate(360deg)}}
.prog{margin-top:14px;} .prog .lab{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:6px;} .prog .lab b{font-family:var(--mono);}
.track{height:12px;border-radius:7px;background:rgba(255,255,255,.24);overflow:hidden;} .track>i{display:block;height:100%;width:0;border-radius:7px;background:var(--mango);transition:width .7s cubic-bezier(.34,1.56,.4,1);}
.sec{margin-top:16px;} .sec h4{margin:0 0 10px;font-family:var(--serif);font-size:15px;}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;} .bdg{aspect-ratio:1;border-radius:16px;background:var(--paper);border:2px solid var(--line);box-shadow:0 3px 0 var(--line);display:grid;place-items:center;} .bdg svg{width:62%;height:62%;} .bdg.pop{animation:bp .7s cubic-bezier(.3,1.7,.4,1);} @keyframes bp{0%{transform:scale(.3) rotate(-25deg)}55%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1)}}
.reward{margin-top:14px;display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:18px;font-weight:800;font-size:13.5px;color:#5a3d10;background:var(--mango);box-shadow:0 5px 0 var(--mango-d);} .reward.locked{background:var(--paper);color:var(--soft);border:2px dashed var(--line-d);box-shadow:none;}
.qrbox{margin-top:16px;background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:16px;text-align:center;} .qrbox canvas,.qrbox img,.qrbox table{margin:0 auto;} .qrbox .code{font-family:var(--mono);font-weight:700;letter-spacing:.14em;margin-top:8px;font-size:13px;} .qrbox p{margin:10px 0 0;font-size:12px;color:var(--soft);}

/* boutons / champs */
.btn{appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:800;border-radius:16px;font-size:16px;padding:15px;color:#fff;width:100%;transition:transform .08s,box-shadow .08s;}
.btn.p{background:var(--pepper);box-shadow:0 6px 0 var(--pepper-d);} .btn.g{background:var(--leaf);box-shadow:0 6px 0 var(--leaf-d);} .btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--leaf-d);} .btn.p:active{box-shadow:0 1px 0 var(--pepper-d);}
.field{margin-bottom:14px;} .field label{display:block;font-size:12.5px;font-weight:800;margin-bottom:6px;} .field input{width:100%;font:inherit;font-size:15px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;} .check input{margin-top:2px;width:18px;height:18px;flex:none;}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:12px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:70;} #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#celebrate{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:65;} #celebrate .c{background:var(--paper);border:3px solid var(--line);border-radius:24px;padding:22px 28px;text-align:center;box-shadow:0 8px 0 var(--line),0 30px 50px -20px rgba(0,0,0,.25);transform:scale(.4);opacity:0;} #celebrate.show .c{animation:celeb 1.9s cubic-bezier(.3,1.6,.4,1) forwards;} @keyframes celeb{0%{transform:scale(.4) rotate(-6deg);opacity:0}14%{transform:scale(1.06) rotate(2deg);opacity:1}75%{transform:scale(1);opacity:1}100%{transform:scale(.97);opacity:0}} #celebrate .cm{width:84px;height:84px;margin:0 auto;} #celebrate .t{font-family:var(--serif);font-weight:700;font-size:20px;margin-top:8px;} #celebrate .t b{color:var(--pepper);font-style:italic;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}