:root {
  --bg: #e9e4d8; --dot: rgba(0,0,0,.05); --paper: #fffef9; --ink: #222; --ink-2: #5f5a50; --good: #1d7a45; --bad: #c0392b;
  --btn: #fff; --btn-on: #222; --btn-on-ink: #fff; --line: #222;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1b19; --dot: rgba(255,255,255,.05); --paper: #f4f1e8; --ink: #ece7dc; --ink-2: #b4ad9f; --good: #1d7a45; --bad: #c0392b;
    --btn: #2a2825; --btn-on: #f4f1e8; --btn-on-ink: #1c1b19; --line: #ece7dc;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1b19; --dot: rgba(255,255,255,.05); --paper: #f4f1e8; --ink: #ece7dc; --ink-2: #b4ad9f;
  --btn: #2a2825; --btn-on: #f4f1e8; --btn-on-ink: #1c1b19; --line: #ece7dc;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Space Mono", ui-monospace, monospace; background: var(--bg); color: var(--ink); min-height: 100vh;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 14px 14px; }
a { color: inherit; }
main { max-width: 1120px; margin: 0 auto; padding: 0 16px 40px; }

.top { text-align: center; padding: 44px 16px 8px; max-width: 900px; margin: 0 auto; }
.kicker { font-weight: 700; letter-spacing: .14em; font-size: .78rem; text-transform: uppercase; color: var(--ink-2); }
.top h1 { font-family: "Rubik Mono One", monospace; font-size: clamp(1.6rem, 5.4vw, 3rem); letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; }
.lead { margin: 12px auto 0; max-width: 64ch; font-size: .95rem; color: var(--ink-2); }

.desk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; gap: 16px 36px; margin: 26px auto 0; }
.q { min-width: 0; }
.ql { font-weight: 700; font-size: .82rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.ql .hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-2); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button, .cand { font: inherit; font-size: .85rem; font-weight: 700; border: 2px solid var(--line); background: var(--btn); color: var(--ink); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.seg button.on { background: var(--btn-on); color: var(--btn-on-ink); }
.seg button:hover, .cand:hover { transform: translateY(-1px); }

.pick { margin: 26px auto 0; text-align: center; }
.cands { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.cand { border-left: 8px solid var(--c); }
.cand.on { background: var(--btn-on); color: var(--btn-on-ink); box-shadow: 3px 3px 0 var(--c); }
.cmpline { margin-top: 12px; font-size: .88rem; }
.cmpline select { font: inherit; font-weight: 700; border: 2px solid var(--line); background: var(--btn); color: var(--ink); padding: 4px 8px; border-radius: 6px; }

.status { text-align: center; color: var(--ink-2); font-size: .85rem; min-height: 1.2em; margin-top: 18px; }
.verdict { text-align: center; max-width: 60ch; margin: 6px auto 0; font-size: 1.05rem; }
.verdict strong { background: linear-gradient(transparent 55%, rgba(255, 210, 63, .7) 0); }

.counter { display: flex; gap: 30px; justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: 30px 0 10px; }
.receipt { width: 360px; max-width: 100%; background: var(--paper); color: #222; padding: 26px 22px 30px; position: relative; box-shadow: 0 14px 30px rgba(0,0,0,.18); transform: rotate(-1deg); animation: print .5s ease-out; }
.receipt + .receipt { transform: rotate(1.2deg); }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: 12px;
  background: linear-gradient(-45deg, transparent 8px, var(--paper) 0) 0 0 / 16px 12px, linear-gradient(45deg, transparent 8px, var(--paper) 0) 0 0 / 16px 12px; }
.receipt::before { top: -12px; transform: rotate(180deg); }
.receipt::after { bottom: -12px; }
.shop { text-align: center; font-weight: 700; font-size: 1.02rem; border-top: 6px solid var(--c); padding-top: 8px; }
.meta { text-align: center; font-size: .74rem; margin-top: 3px; color: #555; }
.meta.right { text-align: right; }
.sep { border-top: 2px dashed #999; margin: 12px 0; }
.sec { font-weight: 700; font-size: .76rem; letter-spacing: .08em; display: flex; justify-content: space-between; align-items: baseline; }
.sec small { font-weight: 400; letter-spacing: 0; color: #666; }
.sec .cmp { margin-left: auto; }
.line { display: grid; grid-template-columns: 1fr auto 3.6em; gap: 8px; font-size: .86rem; padding: 3px 0; align-items: baseline; }
.receipt .line:not(:has(.dl)) { grid-template-columns: 1fr auto; }
.line .v { font-weight: 700; white-space: nowrap; text-align: right; }
.v.p, .dl.p { color: var(--good); } .v.m, .dl.m { color: var(--bad); }
.dl { font-size: .78rem; text-align: right; color: #777; white-space: nowrap; }
.total { display: grid; grid-template-columns: 1fr auto 3.6em; gap: 8px; font-size: 1.05rem; white-space: nowrap; font-weight: 700; margin-top: 4px; align-items: baseline; }
.receipt .total:not(:has(.dl)) { grid-template-columns: 1fr auto; }
.total .dl { font-size: .95rem; font-weight: 700; }
.barcode { height: 46px; margin: 18px auto 6px; width: 80%; background: repeating-linear-gradient(90deg, #222 0 2px, transparent 2px 4px, #222 4px 7px, transparent 7px 9px, #222 9px 10px, transparent 10px 13px); }
.thanks { text-align: center; font-size: .72rem; }
.stamp { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%) rotate(-12deg); border: 4px solid; font-family: "Rubik Mono One", monospace; padding: 6px 12px; border-radius: 8px; font-size: 1.05rem; opacity: .88; mix-blend-mode: multiply; white-space: nowrap; animation: stamp .35s .45s both cubic-bezier(.2, 1.6, .5, 1); }
@keyframes stamp { from { transform: translateX(-50%) rotate(-12deg) scale(2.2); opacity: 0; } }
.stamp.p { color: var(--good); } .stamp.m { color: var(--bad); } .stamp.s { color: #666; }

.coupons { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 30px; justify-content: center; margin-top: 24px; }
.coupons:empty { display: none; }
.coupon { background: var(--paper); color: #222; border: 3px dashed #999; padding: 14px 16px; position: relative; }
.coupon .ch { font-family: "Rubik Mono One", monospace; font-size: .95rem; }
.coupon.plus .ch { color: var(--good); } .coupon.moins .ch { color: var(--bad); }
.coupon .cs { font-size: .76rem; color: #666; margin-top: 2px; }
.coupon ul { margin: 8px 0 0; padding-left: 18px; font-size: .84rem; }
.coupon li { margin: 4px 0; }

.how { max-width: 760px; margin: 44px auto 0; font-size: .9rem; }
.how h2 { font-family: "Rubik Mono One", monospace; font-size: 1.05rem; margin-bottom: 8px; }
.how p { margin: 8px 0; }
.warn { border-left: 4px solid #c49a2c; padding: 6px 12px; background: rgba(255,255,255,.35); }
.links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn { display: inline-block; background: var(--btn-on); color: var(--btn-on-ink); text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 6px; }
.foot { text-align: center; font-size: .72rem; color: var(--ink-2); padding: 20px 16px 30px; }

@media (max-width: 560px) {
  .desk { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .seg { justify-content: center; }
  .coupons { grid-template-columns: minmax(0, 360px); }
  .receipt, .receipt + .receipt { transform: none; }
  .counter { gap: 34px; }
}
@media (prefers-reduced-motion: reduce) { .receipt, .stamp { animation: none; } }
.receipt .note { font-size: .74rem; color: #555; margin-top: 10px; font-style: italic; }

/* carte de fidélité : inscription aux nouvelles */
.fidelite { max-width: 640px; margin: 34px auto 0; background: linear-gradient(135deg, #2b2a28, #47423a); color: #f4f1e8; border-radius: 16px; padding: 20px 22px; box-shadow: 0 12px 26px rgba(0,0,0,.2); position: relative; overflow: hidden; }
.fidelite::after { content: ""; position: absolute; right: -50px; top: -60px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 210, 63, .18); z-index: 0; }
.fidelite > * { position: relative; z-index: 1; }
.fidelite .fs { padding-right: 40px; }
.fh { font-family: "Rubik Mono One", monospace; font-size: 1rem; letter-spacing: .04em; color: #ffd23f; }
.fs { font-size: .9rem; margin-top: 6px; }
.fr { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.fr input { flex: 1 1 220px; font: inherit; font-size: .95rem; padding: 9px 12px; border-radius: 8px; border: 2px solid #f4f1e8; background: #fffef9; color: #222; }
.fr button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 8px; border: 2px solid #ffd23f; background: #ffd23f; color: #222; cursor: pointer; }
.fr button:disabled { opacity: .6; }
.ok-c { display: flex; gap: 8px; align-items: flex-start; font-size: .76rem; margin-top: 10px; line-height: 1.4; position: relative; z-index: 1; }
.ok-c input { margin-top: 2px; accent-color: #ffd23f; }
.news-msg { font-size: .85rem; margin-top: 8px; min-height: 1.2em; }
.news-msg.ok { color: #9be3b4; } .news-msg.ko { color: #ffb4a3; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* pages légales */
.legal { max-width: 760px; margin: 0 auto; padding: 36px 16px 20px; font-size: .92rem; line-height: 1.6; }
.legal .back { font-size: .85rem; margin-bottom: 14px; }
.legal h1 { font-family: "Rubik Mono One", monospace; font-size: clamp(1.3rem, 4vw, 1.9rem); line-height: 1.2; }
.legal h2 { font-family: "Rubik Mono One", monospace; font-size: 1rem; margin: 26px 0 6px; }
.legal h3 { font-size: .95rem; margin: 16px 0 4px; }
.legal p, .legal li { margin: 6px 0; }
.legal ul { padding-left: 20px; }
.legal .maj { color: var(--ink-2); font-size: .8rem; margin-top: 6px; }
.legal .news-msg { margin-top: 12px; font-weight: 700; }
.legal .btn { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.ok-c a, .foot a { color: inherit; }

/* revenu saisi */
.perso { margin-top: 10px; padding: 10px 12px; border: 2px dashed var(--line); border-radius: 8px; display: grid; gap: 8px; max-width: 420px; }
.perso[hidden] { display: none; }
.pl { font-size: .82rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; justify-content: space-between; }
.pin { display: inline-flex; align-items: center; gap: 6px; }
.perso input, .perso select { font: inherit; font-weight: 700; border: 2px solid var(--line); background: var(--btn); color: var(--ink); padding: 4px 8px; border-radius: 6px; }
.perso input { width: 8em; text-align: right; }
.pn { font-size: .72rem; color: var(--ink-2); }

/* citation de pied de page */
.citation { max-width: 620px; margin: 40px auto 0; padding: 0 16px; text-align: center; }
.citation blockquote { font-size: 1rem; font-style: italic; line-height: 1.5; }
.citation figcaption { margin-top: 6px; font-size: .78rem; color: var(--ink-2); }