/* ============================================================
   OPTI. — Direction artistique "étiquette de prix"
   Néo-brutalisme supermarché : jaune étiquette, noir, stickers
   ============================================================ */
:root{
  --paper:#FAF6EC; --black:#141414; --yellow:#FFD500; --red:#F42B2B;
  --blue:#2B45F4; --pink:#FFB3C7; --mint:#B8F0C9;
  --disp:'Archivo Black',system-ui,sans-serif;
  --ui:'Space Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--ui); background:var(--paper); color:var(--black);
  background-image:radial-gradient(#00000009 1px, transparent 1px);
  background-size:14px 14px;
}
.app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;padding-bottom:84px}

.screen{display:none}
.screen.active{display:block}
.pad{padding:16px 16px 0}

/* ============ ÉCRAN DE BIENVENUE ============ */
.welcome{
  position:fixed;inset:0;z-index:100;background:var(--yellow);
  background-image:radial-gradient(#00000012 1.5px, transparent 1.5px);
  background-size:16px 16px;overflow-y:auto;
}
.welcome[hidden]{display:none}
.w-inner{max-width:480px;margin:0 auto;padding:36px 22px 40px}
.w-brand{font-family:var(--disp);font-size:64px;line-height:.9;letter-spacing:-2px}
.w-brand span{color:var(--red)}
.w-tag{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:3px;margin:10px 0 18px}
.w-pitch{font-size:16px;line-height:1.55;font-weight:500;margin-bottom:20px}
.w-proof{
  background:#fff;border:2.5px solid var(--black);box-shadow:5px 5px 0 var(--black);
  font-family:var(--mono);padding:14px 16px;margin-bottom:22px;transform:rotate(-.6deg);
}
.w-proof-t{font-size:9.5px;font-weight:700;letter-spacing:2px;border-bottom:2px dashed var(--black);padding-bottom:8px;margin-bottom:8px}
.w-line{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0}
.w-line.neg b{color:var(--red)}
.w-total{
  display:flex;justify-content:space-between;align-items:center;border-top:2px dashed var(--black);
  margin-top:8px;padding-top:10px;font-weight:700;
}
.w-total b{font-family:var(--disp);font-size:24px;background:var(--yellow);border:2px solid var(--black);padding:2px 10px;transform:rotate(-2deg)}
.w-cta-link{display:block;text-align:center;text-decoration:none;color:var(--yellow)}
.w-note{font-family:var(--mono);font-size:10px;color:#00000090;text-align:center;line-height:1.6;margin-top:6px}

/* ============ HEADER ============ */
.head{padding:18px 16px 0}
.brandrow{display:flex;align-items:flex-end;justify-content:space-between}
.brand{font-family:var(--disp);font-size:40px;line-height:.9;letter-spacing:-1px}
.brand .dot{color:var(--red)}
.brand small{
  display:block;font-family:var(--ui);font-weight:700;font-size:10.5px;
  letter-spacing:2.5px;margin-top:6px;text-transform:uppercase;
}
.pts{
  font-family:var(--mono);font-weight:700;font-size:13px;background:var(--yellow);
  border:2.5px solid var(--black);padding:8px 11px;box-shadow:3px 3px 0 var(--black);
  transform:rotate(2deg);white-space:nowrap;
}
.ticker{
  margin-top:14px;background:var(--black);color:var(--yellow);overflow:hidden;
  font-family:var(--mono);font-weight:700;font-size:12px;padding:7px 0;white-space:nowrap;
}
.ticker span{display:inline-block;animation:tick 18s linear infinite;padding-right:40px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ FILTRES ============ */
.filters{display:flex;gap:8px;overflow-x:auto;padding:14px 16px 4px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.f{
  font-family:var(--ui);font-weight:700;font-size:12.5px;padding:8px 14px;white-space:nowrap;
  cursor:pointer;background:#fff;border:2.5px solid var(--black);flex-shrink:0;
  text-transform:uppercase;letter-spacing:.3px;
}
.f.on{background:var(--black);color:var(--yellow);transform:rotate(-1.5deg);box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.sortline{
  font-family:var(--mono);font-size:10.5px;color:#00000090;padding:8px 18px 2px;
  text-transform:uppercase;letter-spacing:.5px;
}

/* ============ CARTES OPTIM ============ */
#feed{padding:10px 16px 0}
.deal{
  background:#fff;border:2.5px solid var(--black);box-shadow:5px 5px 0 var(--black);
  margin-bottom:18px;position:relative;
}
.deal:nth-child(even){transform:rotate(.4deg)}
.deal:nth-child(odd){transform:rotate(-.4deg)}
.burst{
  position:absolute;top:-14px;right:-8px;width:64px;height:64px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:13.5px;
  clip-path:polygon(50% 0%,61% 12%,75% 5%,79% 20%,95% 20%,90% 35%,100% 43%,89% 53%,96% 68%,80% 69%,77% 85%,62% 78%,50% 90%,38% 78%,23% 85%,20% 69%,4% 68%,11% 53%,0% 43%,10% 35%,5% 20%,21% 20%,25% 5%,39% 12%);
  transform:rotate(8deg);z-index:2;
}
.burst.top1{background:var(--black);color:var(--yellow)}
.burst.real{background:var(--blue);color:#fff;font-size:11px}
.main{display:flex;gap:12px;padding:14px 14px 12px;cursor:pointer}
.ranknum{
  font-family:var(--disp);font-size:30px;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--black);flex-shrink:0;margin-top:2px;min-width:34px;
}
.demoji{
  width:52px;height:52px;background:var(--pink);border:2.5px solid var(--black);
  display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;
  border-radius:50%;transform:rotate(-4deg);
}
.deal:nth-child(3n) .demoji{background:var(--mint)}
.deal:nth-child(3n+1) .demoji{background:#C9DBFF}
.dinf{flex:1;min-width:0}
.dnm{font-weight:700;font-size:15px;line-height:1.2;text-transform:uppercase;letter-spacing:.2px}
.dstore{font-family:var(--mono);font-size:10.5px;color:#00000099;margin-top:3px}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.tag{
  font-size:9.5px;font-weight:700;padding:3px 7px;border:1.5px solid var(--black);
  text-transform:uppercase;letter-spacing:.3px;background:#fff;
}
.tag.promo{background:var(--yellow)}
.tag.coupon{background:var(--pink)}
.tag.cash{background:var(--mint)}
.tag.spon{background:#fff;border-style:dashed;color:#00000099}
.pricetag{
  flex-shrink:0;align-self:center;background:var(--yellow);border:2.5px solid var(--black);
  padding:8px 10px 7px 16px;position:relative;text-align:right;transform:rotate(1.5deg);
  clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);
}
.pricetag::before{
  content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--black);
}
.now{font-family:var(--disp);font-size:19px;line-height:1}
.was{font-family:var(--mono);font-size:10.5px;text-decoration:line-through 2px solid var(--red);margin-top:2px}
.dfoot{
  display:flex;align-items:center;gap:10px;border-top:2px dashed var(--black);
  padding:9px 14px;font-family:var(--mono);font-size:10px;
}
.verif{font-weight:700}
.verif b{background:var(--mint);padding:1px 4px;border:1.5px solid var(--black)}
.exp{margin-right:auto;color:#00000090}
.share{
  background:var(--black);color:var(--yellow);border:none;font-family:var(--ui);font-weight:700;
  font-size:10.5px;padding:6px 10px;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;
  box-shadow:2.5px 2.5px 0 rgba(0,0,0,.25);
}
.share:active{transform:translate(2px,2px);box-shadow:none}
.empty{display:none;text-align:center;font-family:var(--mono);font-size:12px;padding:36px 24px;color:#00000090}

/* ============ TICKET DE CAISSE ============ */
.back{
  background:#fff;border:2.5px solid var(--black);font-family:var(--ui);font-weight:700;
  font-size:12px;padding:8px 14px;cursor:pointer;margin-bottom:16px;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--black);
}
.ticket{
  background:#fff;border:2.5px solid var(--black);box-shadow:6px 6px 0 var(--black);
  font-family:var(--mono);padding:20px 18px 26px;position:relative;margin-bottom:16px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),97.5% 100%,95% calc(100% - 8px),92.5% 100%,90% calc(100% - 8px),87.5% 100%,85% calc(100% - 8px),82.5% 100%,80% calc(100% - 8px),77.5% 100%,75% calc(100% - 8px),72.5% 100%,70% calc(100% - 8px),67.5% 100%,65% calc(100% - 8px),62.5% 100%,60% calc(100% - 8px),57.5% 100%,55% calc(100% - 8px),52.5% 100%,50% calc(100% - 8px),47.5% 100%,45% calc(100% - 8px),42.5% 100%,40% calc(100% - 8px),37.5% 100%,35% calc(100% - 8px),32.5% 100%,30% calc(100% - 8px),27.5% 100%,25% calc(100% - 8px),22.5% 100%,20% calc(100% - 8px),17.5% 100%,15% calc(100% - 8px),12.5% 100%,10% calc(100% - 8px),7.5% 100%,5% calc(100% - 8px),2.5% 100%,0 calc(100% - 8px));
}
.tk-head{text-align:center;border-bottom:2px dashed var(--black);padding-bottom:12px;margin-bottom:12px}
.tk-head .big-emoji{font-size:40px}
.tk-head h3{font-family:var(--disp);font-size:17px;text-transform:uppercase;margin-top:6px;letter-spacing:.5px}
.tk-head .sub{font-size:10px;margin-top:4px;color:#00000099}
.tk-line{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:7px 0;align-items:baseline}
.tk-line .lbl{flex:1}
.tk-line .lbl small{display:block;font-size:9.5px;color:#00000090;margin-top:1px}
.tk-line .amt{font-weight:700;white-space:nowrap}
.tk-line.neg .amt{color:var(--red)}
.tk-total{
  border-top:2px dashed var(--black);margin-top:10px;padding-top:12px;
  display:flex;justify-content:space-between;align-items:center;
}
.tk-total .l{font-weight:700;font-size:12px;text-transform:uppercase}
.tk-total .l small{display:block;font-weight:400;font-size:9.5px;color:#00000090}
.tk-total .v{
  font-family:var(--disp);font-size:30px;background:var(--yellow);
  border:2.5px solid var(--black);padding:4px 12px;transform:rotate(-2deg);
  box-shadow:3px 3px 0 var(--black);
}
.barcode{
  margin:16px auto 0;height:36px;width:78%;
  background:repeating-linear-gradient(90deg,var(--black) 0 2px,transparent 2px 5px,var(--black) 5px 6px,transparent 6px 10px,var(--black) 10px 13px,transparent 13px 16px);
}
.barcode-num{text-align:center;font-size:9.5px;margin-top:4px;letter-spacing:3px;font-family:var(--mono)}
.sources{font-family:var(--mono);font-size:10px;line-height:1.7;padding:0 2px 14px;color:#000000B0}
.sources a{color:var(--blue);font-weight:700}
.cta{
  width:100%;padding:15px;border:2.5px solid var(--black);background:var(--yellow);
  font-family:var(--ui);font-weight:700;font-size:14px;cursor:pointer;margin-bottom:12px;
  text-transform:uppercase;letter-spacing:.5px;box-shadow:4px 4px 0 var(--black);
}
.cta:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--black)}
.cta.dark{background:var(--black);color:var(--yellow)}
.cta.white{background:#fff}

/* ============ CAGNOTTE ============ */
.wallet{
  background:var(--yellow);border:2.5px solid var(--black);box-shadow:6px 6px 0 var(--black);
  padding:18px;margin-bottom:20px;transform:rotate(-.5deg);
}
.wallet .t{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px}
.wallet .big{font-family:var(--disp);font-size:40px;line-height:1;margin:6px 0 12px}
.wallet .row{display:flex;gap:10px}
.wallet .mini{flex:1;background:#fff;border:2px solid var(--black);padding:9px}
.wallet .mini .v{font-family:var(--disp);font-size:15px}
.wallet .mini .l{font-family:var(--mono);font-size:8.5px;margin-top:2px;text-transform:uppercase}
.sec-t{font-family:var(--disp);font-size:15px;margin:22px 2px 12px;text-transform:uppercase;letter-spacing:.5px}
.sec-t span{background:var(--pink);border:2px solid var(--black);padding:2px 8px;box-shadow:3px 3px 0 var(--black);display:inline-block;transform:rotate(-1deg)}
.parrain{
  background:#fff;border:2.5px solid var(--black);box-shadow:4px 4px 0 var(--black);
  padding:14px;margin-bottom:6px;font-size:12.5px;line-height:1.5;
}
.parrain b{font-family:var(--disp);display:block;font-size:13px;text-transform:uppercase;margin-bottom:3px}
.code{
  display:inline-block;margin-top:9px;background:var(--yellow);border:2px dashed var(--black);
  padding:8px 14px;font-family:var(--mono);font-weight:700;letter-spacing:1px;font-size:12px;
  cursor:pointer;color:var(--black);text-decoration:none;
}
.alertes{border:2.5px solid var(--black);background:#fff;box-shadow:4px 4px 0 var(--black)}
.arow{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:2px dashed var(--black);font-size:12.5px}
.arow:last-child{border-bottom:none}
.arow .ae{font-size:19px}
.arow .at{flex:1;line-height:1.35;font-weight:600}
.arow .at small{display:block;font-family:var(--mono);font-size:9.5px;color:#00000090;font-weight:400}
.arow .rm{background:none;border:2px solid var(--black);font-weight:700;cursor:pointer;padding:4px 8px;font-size:10px}
.alert-empty{font-family:var(--mono);font-size:11px;padding:16px;color:#00000090}
.disclaimer{font-family:var(--mono);text-align:center;font-size:9px;color:#00000080;padding:16px 20px 0;line-height:1.5}

/* ============ TOAST + TABBAR ============ */
.toast{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(16px) rotate(-1deg);
  background:var(--black);color:var(--yellow);font-family:var(--mono);font-weight:700;font-size:11px;
  padding:11px 16px;border:2px solid var(--yellow);opacity:0;transition:.25s;pointer-events:none;
  white-space:nowrap;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) rotate(-1deg)}
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
  background:var(--black);display:flex;
  padding:10px 8px calc(12px + env(safe-area-inset-bottom));z-index:20;
}
.tab{
  flex:1;background:none;border:none;text-align:center;cursor:pointer;color:#ffffff80;
  font-family:var(--ui);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
}
.tab .i{font-size:19px;display:block;margin-bottom:3px;filter:grayscale(1) opacity(.6)}
.tab.on{color:var(--yellow)}
.tab.on .i{filter:none}