:root{
  --ink:#1b2724;--muted:#5e6c65;--line:#dce3dd;--paper:#f5f7f4;--white:#fff;--green:#23584f;--green-soft:#e8f0ec;--danger:#a33a2a;--danger-soft:#f8e9e6;
  --shop:#23584f;
  --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:Newsreader,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:16px/1.5 var(--font)}
a{color:var(--green);font-weight:600}
button{font:inherit}
.demo-bandeau{background:#fff4d6;color:#5b4300;border-bottom:1px solid #f0dca4;text-align:center;font-size:13px;line-height:1.4;padding:8px 16px}
.page{max-width:460px;margin:0 auto;padding:24px 16px 48px}
.page-large{max-width:760px}
.marque{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 18px}
.marque b{color:var(--ink)}
h1{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.08;font-size:clamp(30px,8vw,40px);margin:0 0 10px}
h2{font-family:var(--display);font-weight:500;letter-spacing:-.01em;font-size:24px;line-height:1.15;margin:0 0 10px}
.intro{color:var(--muted);margin:0 0 22px}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border:0;border-radius:14px;background:var(--green);color:#fff;font-weight:650;font-size:16px;padding:14px 18px;cursor:pointer;text-decoration:none}
.bouton:hover{filter:brightness(1.08)}
.bouton:disabled{opacity:.55;cursor:wait}
.bouton-secondaire{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.bouton-or{background:#b7791f}
.bouton:focus-visible,input:focus-visible{outline:3px solid #2c6686;outline-offset:2px}
.pile{display:grid;gap:10px}
.note{font-size:13px;color:var(--muted);line-height:1.5}
.erreur{background:var(--danger-soft);color:var(--danger);border-radius:12px;padding:12px 14px;font-size:14px;margin:12px 0}
.ok{background:var(--green-soft);color:var(--green);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;margin:12px 0}
.cache{display:none!important}

/* La carte */
.carte{position:relative;border-radius:22px;background:var(--shop);color:#fff;padding:22px 20px 20px;box-shadow:0 18px 40px rgba(27,39,36,.22);overflow:hidden}
.carte::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.carte-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.carte-nom{font-family:var(--display);font-size:28px;line-height:1.05;letter-spacing:-.01em;margin:0}
.carte-type{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin:6px 0 0}
.carte-compte{font-size:13px;font-weight:650;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 10px;white-space:nowrap}
.tampons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 14px}
.tampon{aspect-ratio:1;border-radius:50%;border:2px dashed rgba(255,255,255,.45);display:grid;place-items:center;font-size:13px;color:rgba(255,255,255,.55)}
.tampon.plein{border:0;background:#fff;color:var(--shop);font-size:20px}
.tampon.nouveau{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.carte-objectif{font-size:14px;opacity:.92;margin:0}
.recompense{display:flex;gap:12px;align-items:center;background:#fff7e6;color:#5b4300;border:1px solid #f0d9a0;border-radius:16px;padding:14px 16px;margin:16px 0 0;font-weight:600}
.recompense span{font-size:26px}
.qr-boite{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin:16px 0 0;text-align:center}
.qr-boite svg,.qr-boite img{width:190px;height:190px;display:block;margin:0 auto}
.code-court{font:700 22px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;margin:12px 0 4px}
.celebration{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(27,39,36,.55);padding:16px}
.celebration div{background:#fff;border-radius:22px;max-width:360px;width:100%;padding:28px 22px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.celebration p{font-size:44px;margin:0 0 6px}
.astuce{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:16px 0 0;font-size:14px;color:#33423d}
.astuce strong{display:block;margin-bottom:4px;color:var(--ink)}

/* Caisse */
.panneau{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin:0 0 14px}
.champ{display:block;width:100%;min-height:52px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:600 18px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;background:#fff;color:var(--ink)}
label{display:block;font-size:14px;font-weight:600;margin:0 0 6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.stat b{display:block;font-size:24px;font-family:var(--display);font-weight:500}
.stat span{font-size:12px;color:var(--muted)}
.camera{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:1;margin:0 0 12px}
.camera video{width:100%;height:100%;object-fit:cover;display:block}
.camera .viseur{position:absolute;inset:18%;border:3px solid rgba(255,255,255,.85);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.resultat-carte{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px}
.jauge{height:12px;border-radius:999px;background:var(--green-soft);overflow:hidden;margin:6px 0 4px}
.jauge i{display:block;height:100%;background:var(--green);border-radius:999px;transition:width .3s}
.barre-haut{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px}
.lien-bouton{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:14px;padding:6px}

/* Affiche */
.affiche{background:#fff;border-radius:24px;border:1px solid var(--line);padding:36px 28px;text-align:center}
.affiche h1{font-size:44px}
.affiche .qr-grand svg{width:260px;height:260px}
.affiche .etapes{display:grid;gap:8px;text-align:left;max-width:360px;margin:22px auto 0;font-size:16px}
@media print{.demo-bandeau,.pas-imprimer{display:none!important}body{background:#fff}.affiche{border:0}}
@media (prefers-reduced-motion:reduce){.tampon.nouveau{animation:none}}