/* Pass Caillou : noir et jaune, communs à Chamas Tacos et Columbus Café */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Source+Sans+3:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
:root{
  --bg:#EDEDEA; --surface:#FFFFFF; --surface-2:#F6F6F3; --fg:#17181A; --muted:#62656A; --line:#DCDBD5;
  --accent:#F2B21B; --accent-ink:#17181A; --accent-soft:#FCEFCB; --accent-line:#C98F00;
  --pass:#17181A; --pass-ink:#FAFAF7; --pass-muted:#ABA899;
  --good:#1D7A45; --good-soft:#E1F3E8; --warn:#A35B12; --bad:#B23A2B; --bad-soft:#FBE7E4;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0F1011; --surface:#1A1B1D; --surface-2:#202124; --fg:#EDECE8; --muted:#A3A19A; --line:#2F3033;
  --accent:#F5BE3A; --accent-soft:#3A2F12; --accent-line:#F5BE3A;
  --pass:#232427; --good:#5FD08D; --good-soft:#163A27; --warn:#E59A4F; --bad:#F08A7C; --bad-soft:#3A1C18; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
h2{font-size:1.12rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
a{color:inherit}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted,.note{color:var(--muted)}
.note{font-size:.86rem}
.small{font-size:.78rem}
.wrap{max-width:480px;margin:0 auto;padding-inline:16px;padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(40px + env(safe-area-inset-bottom,0px));display:grid;gap:16px}
.wrap.wide{max-width:1100px}
.stack{display:grid;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}

button{font:inherit;cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:11px 16px;font-weight:700;font-size:1rem}
.btn.full{width:100%}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--accent-line)}
.btn.dark{background:var(--pass);color:var(--pass-ink);border-color:var(--pass)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:6px 12px;font-size:.88rem;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
label.f{display:grid;gap:5px;font-size:.9rem;color:var(--muted)}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=password],input[type=date],input[type=datetime-local],select,textarea{
  font:inherit;font-size:1rem;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.35}
.check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--accent-line)}
.tel-wrap{display:flex;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.tel-wrap:focus-within{outline:2px solid var(--accent-line);outline-offset:2px}
.tel-wrap.bad{border-color:var(--bad)} .tel-wrap.ok{border-color:var(--good)}
.tel-prefix{display:flex;align-items:center;padding:0 12px;background:var(--surface-2);border-right:1px solid var(--line);font-weight:600;font-family:var(--mono)}
.tel-wrap input{border:0!important;border-radius:0!important;font-family:var(--mono);letter-spacing:.08em;outline:none!important}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.msg{border-radius:10px;padding:10px 12px;font-size:.92rem;background:var(--good-soft);border:1px solid var(--good);display:grid;gap:2px}
.msg.err{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.msg.info{background:var(--accent-soft);border-color:var(--accent-line);color:var(--fg)}

/* Pass */
.pass{position:relative;overflow:hidden;background:radial-gradient(circle at 108% -14%,rgba(242,178,27,.95) 0 23%,transparent 23.4%),radial-gradient(circle at 112% 6%,rgba(242,178,27,.22) 0 36%,transparent 36.4%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),var(--pass);color:var(--pass-ink);border-radius:20px;padding:18px;display:grid;gap:14px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.pass>*{position:relative}
.pass-brand{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.01em}
.pass-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pass-mid{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.pass-pts{font-family:var(--mono);font-size:2.3rem;line-height:1}
.pass-pts small{font-family:var(--body);font-size:.8rem;color:var(--pass-muted);display:block;margin-top:4px}
.pass-foot{display:flex;justify-content:space-between;font-size:.8rem;color:var(--pass-muted);gap:8px;flex-wrap:wrap}
.qr{background:#fff;border-radius:10px;padding:6px;flex:none;display:grid;place-items:center}
.qr img,.qr canvas{display:block;image-rendering:pixelated}
.tier{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid currentColor;white-space:nowrap;background:rgba(0,0,0,.35)}
.tier.t0{color:#E9E7DF} .tier.t1{color:#fff} .tier.t2{color:#17181A;background:#F2B21B;border-color:#F2B21B}
.logos{display:flex;align-items:center}
.logos img{width:38px;height:38px;border-radius:50%;border:2px solid var(--pass);margin-left:-9px;background:#fff}
.logos img:first-child{margin-left:0}
.logos.lg img{width:46px;height:46px;border:3px solid var(--bg);margin-left:-10px}
.logo{width:38px;height:38px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--line)}
.logo.sm{width:20px;height:20px;box-shadow:none}
.logo.prog{display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:800;font-family:var(--display);box-shadow:none}
.progress{display:grid;gap:5px;font-size:.85rem;color:var(--muted)}
.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;padding:10px 9px;color:var(--muted);font-weight:600;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--fg);box-shadow:inset 0 -3px 0 var(--accent)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px 4px 4px;font-size:.85rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.chip.nologo{padding-left:11px}
.chip[aria-pressed="true"]{border-color:var(--accent-line);color:var(--fg);background:var(--accent-soft);font-weight:600}
.list{display:grid;gap:8px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:12px}
.item .l{flex:1;min-width:0}
.item .l b{display:block;font-weight:600}
.item .l span{font-size:.84rem;color:var(--muted)}
.item .r{text-align:right;flex:none;font-size:.86rem}
.ok{color:var(--good);font-weight:600}
.plus{color:var(--good)} .minus{color:var(--bad)}
.ch{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px}
.ch.done{border-color:var(--good);background:var(--good-soft)}
.brands{display:flex;gap:6px;flex-wrap:wrap}
.brands span{font-size:.8rem;border-radius:999px;padding:3px 10px 3px 3px;border:1px solid var(--line);color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.brands span img{width:22px;height:22px;border-radius:50%;filter:grayscale(1);opacity:.45}
.brands span.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--fg);font-weight:600}
.brands span.on img{filter:none;opacity:1}
.game{gap:10px}
.game .eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#F2B21B;font-weight:700}
.game h3{font-size:1.25rem}
.game .tk{display:flex;align-items:baseline;gap:8px}
.game .tk b{font-family:var(--mono);font-size:2.2rem;font-weight:500;line-height:1;color:#F2B21B}
.game .tk span{color:var(--pass-muted);font-size:.86rem}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);font-weight:700;font-size:1.15rem}
.qty output{font-family:var(--mono);font-size:1.15rem;min-width:2ch;text-align:center}
.lot{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.lot.top{border-color:var(--accent-line);background:var(--accent-soft)}
.lot-ic{width:42px;height:42px;border-radius:12px;background:var(--pass);display:grid;place-items:center;flex:none;color:#F2B21B;font-family:var(--display);font-weight:800}
.lot .rk{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.lot b{display:block}
.win{border:2px solid var(--good);background:var(--good-soft);border-radius:12px;padding:12px;display:grid;gap:4px}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(12px + env(safe-area-inset-top,0px));z-index:50;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.2);font-size:.92rem;max-width:min(440px,calc(100% - 32px));transition:opacity .3s}
.toast.hide{opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.legal{font-size:.76rem;color:var(--muted);line-height:1.4}

/* Écrans restaurant */
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:820px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.kpi .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.kpi .v{font-family:var(--mono);font-size:1.3rem;margin-top:2px;overflow-wrap:anywhere}
.kpi .s{font-size:.8rem;color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:8px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td input,td select{padding:6px 8px;font-size:.92rem}
.scanbox{border-radius:12px;overflow:hidden;background:#000;min-height:220px}
.scanbox video{width:100%!important;display:block}
.member{display:flex;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.big-num{font-family:var(--mono);font-size:1.6rem}