*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0b0710; --bg2:#150b18; --card:#1b1020; --card2:#241430;
  --fram:#d4006a; --fram-d:#a4004f; --fram-l:#ff3d93;
  --gold:#ffb340; --text:#f5eef2; --muted:#a08aa0; --line:#2c1c34;
  --ok:#2ec27e; --cash:#2ec27e; --card-c:#3b9dff;
}
body{font-family:'Outfit',system-ui,sans-serif;background:var(--bg);color:var(--text);
  min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.screen{min-height:100dvh;display:flex;flex-direction:column}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;color:inherit}

/* ===== LOGIN ===== */
#screen-login{align-items:center;justify-content:center;position:relative;
  background:radial-gradient(120% 80% at 50% -10%,#2a0f2e 0%,var(--bg) 55%)}
.login-aura{position:absolute;width:480px;height:480px;border-radius:50%;top:-160px;
  background:radial-gradient(circle,rgba(212,0,106,.35),transparent 60%);filter:blur(20px);pointer-events:none}
.login-card{position:relative;width:min(92vw,400px);padding:32px 26px 26px;text-align:center;
  background:linear-gradient(180deg,rgba(36,20,48,.85),rgba(20,11,24,.9));
  border:1px solid var(--line);border-radius:28px;backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
.brand{font-size:11px;letter-spacing:.18em;color:var(--muted);font-weight:600;display:flex;gap:7px;align-items:center;justify-content:center}
.brand b{color:var(--fram-l)}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--fram-l);box-shadow:0 0 12px var(--fram-l)}
.login-card h1{font-size:40px;font-weight:900;margin:10px 0 2px;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,#e7b8d2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{color:var(--muted);font-size:14px;margin-bottom:22px}
.pin-display{display:flex;gap:14px;justify-content:center;margin-bottom:26px}
.pin-display span{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);transition:.2s}
.pin-display span.on{background:var(--fram);border-color:var(--fram);box-shadow:0 0 16px var(--fram)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pin-pad button{height:64px;border-radius:18px;font-size:24px;font-weight:700;
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);
  box-shadow:0 6px 18px -8px #000,inset 0 1px 0 rgba(255,255,255,.05);transition:.1s}
.pin-pad button:active{transform:scale(.94);background:var(--card2)}
.pin-pad .pin-ok{background:linear-gradient(180deg,var(--fram-l),var(--fram-d));border-color:transparent;
  box-shadow:0 8px 22px -6px var(--fram-d)}
.pin-pad .pin-sec{color:var(--muted)}
.login-err{color:#ff6b8a;font-size:13px;height:18px;margin-top:14px;font-weight:600}
.login-hint{color:var(--muted);font-size:12px;margin-top:6px;opacity:.6}

/* ===== CAISSE ===== */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px calc(14px + env(safe-area-inset-top,0));padding-top:max(14px,env(safe-area-inset-top));
  background:linear-gradient(180deg,rgba(11,7,16,.96),rgba(11,7,16,.6));backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.brand-mini{font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:700;display:flex;gap:6px;align-items:center}
.seller{font-size:18px;font-weight:800;margin-top:2px}
.logout{width:42px;height:42px;border-radius:13px;background:var(--card);border:1px solid var(--line);font-size:18px;color:var(--muted)}
.search-row{padding:12px 16px 6px}
.search-row input{width:100%;height:46px;padding:0 16px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);color:var(--text);font-size:15px;font-family:inherit;outline:none}
.search-row input:focus{border-color:var(--fram)}
.grid{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:10px 16px 130px;align-content:start}
.tile{position:relative;border-radius:20px;padding:16px 14px 14px;text-align:left;min-height:118px;
  background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);
  box-shadow:0 10px 26px -14px #000,inset 0 1px 0 rgba(255,255,255,.04);
  display:flex;flex-direction:column;justify-content:space-between;transition:.12s;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 100% 0,rgba(212,0,106,.16),transparent 60%);pointer-events:none}
.tile:active{transform:scale(.97)}
.tile.out{opacity:.5}
.tile-photo{width:100%;height:96px;border-radius:14px;overflow:hidden;margin-bottom:10px;padding:6px;
  background:var(--bg2);display:flex;align-items:center;justify-content:center}
.tile.has-photo .tile-photo{background:#fff}
.tile-photo img{width:100%;height:100%;object-fit:contain;object-position:center}
.tile-noimg{font-size:30px;opacity:.35}
.tile-name{font-size:14px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.tile-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px}
.tile-price{font-size:19px;font-weight:900;color:#fff}
.tile-price small{font-size:11px;font-weight:600;color:var(--muted);margin-left:2px}
.tile-stock{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:rgba(46,194,126,.14);color:var(--cash)}
.tile-stock.low{background:rgba(255,179,64,.16);color:var(--gold)}
.tile-stock.out{background:rgba(255,107,138,.16);color:#ff6b8a}
.tile-stock.order{background:rgba(120,140,255,.16);color:#9db0ff}
.tile.order{opacity:1}
.tile-badge{position:absolute;top:10px;right:10px;background:var(--fram);color:#fff;font-size:12px;font-weight:800;
  min-width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 7px;
  box-shadow:0 4px 12px -2px var(--fram-d);animation:pop .2s}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* ===== TPE bar ===== */
.till{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom,0));
  background:linear-gradient(180deg,rgba(27,16,32,.6),rgba(11,7,16,.98));backdrop-filter:blur(16px);
  border-top:1px solid var(--line);box-shadow:0 -20px 40px -20px #000;animation:up .25s}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.till-info{flex:1}
.till-count{font-size:12px;color:var(--muted);font-weight:600}
.till-total{font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.till-btn{height:56px;padding:0 26px;border-radius:18px;font-size:17px;font-weight:800;
  background:linear-gradient(180deg,var(--fram-l),var(--fram-d));color:#fff;
  box-shadow:0 12px 30px -8px var(--fram-d);transition:.1s}
.till-btn:active{transform:scale(.96)}

/* ===== Sheet ===== */
.sheet-overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;background:linear-gradient(180deg,var(--card2),var(--bg2));border:1px solid var(--line);
  border-radius:28px 28px 0 0;padding:10px 22px calc(28px + env(safe-area-inset-bottom,0));text-align:center;
  box-shadow:0 -30px 60px -10px #000;animation:slideup .28s cubic-bezier(.2,.9,.3,1)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 16px}
.sheet-name{font-size:18px;font-weight:800;line-height:1.3}
.sheet-price{color:var(--fram-l);font-weight:800;font-size:15px;margin:6px 0 18px}
.qtybox{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:18px}
.qtybox button{width:54px;height:54px;border-radius:16px;font-size:26px;font-weight:700;
  background:var(--card);border:1px solid var(--line)}
.qtybox button:active{transform:scale(.92)}
.qtybox span{font-size:32px;font-weight:900;min-width:54px}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.mode{height:54px;border-radius:16px;font-size:15px;font-weight:700;background:var(--card);border:1px solid var(--line);color:var(--muted)}
.mode.active[data-mode=cash]{background:rgba(46,194,126,.16);border-color:var(--cash);color:var(--cash)}
.mode.active[data-mode=card]{background:rgba(59,157,255,.16);border-color:var(--card-c);color:var(--card-c)}
.sheet-add{width:100%;height:56px;border-radius:18px;font-size:17px;font-weight:800;
  background:linear-gradient(180deg,var(--fram-l),var(--fram-d));color:#fff;box-shadow:0 12px 30px -10px var(--fram-d)}
.sheet-add:active{transform:scale(.97)}
.sheet-cancel{width:100%;height:46px;margin-top:8px;background:none;color:var(--muted);font-weight:600;font-size:14px}

/* ===== Toast ===== */
.toast{position:fixed;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-120%);
  z-index:80;background:var(--card2);border:1px solid var(--line);padding:12px 20px;border-radius:14px;
  font-weight:600;font-size:14px;box-shadow:0 16px 40px -12px #000;transition:transform .3s;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ===== Feuille paiement ===== */
.pay-total{font-size:42px;font-weight:900;letter-spacing:-.02em;margin:10px 0 4px;
  background:linear-gradient(180deg,#fff,#e7b8d2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pay-sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.pay-modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.pay-mode{height:108px;border-radius:20px;font-size:16px;font-weight:800;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--card)}
.pay-mode span{font-size:16px}
.pay-mode:first-child{font-size:38px}.pay-mode{font-size:38px}
.pay-mode.cash{background:rgba(46,194,126,.12);border-color:rgba(46,194,126,.4);color:var(--cash)}
.pay-mode.card{background:rgba(59,157,255,.12);border-color:rgba(59,157,255,.4);color:var(--card-c)}
.pay-mode:active{transform:scale(.96)}

/* ===== Parfums ===== */
.tile-flav{display:block;font-size:11px;font-weight:600;color:var(--gold);margin-top:3px}
.sheet-flavors{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 4px}
.flav-btn{padding:9px 14px;border-radius:13px;font-size:14px;font-weight:700;background:var(--card);
  border:1px solid var(--line);color:var(--text);display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.1}
.flav-btn small{font-size:10px;font-weight:600;color:var(--muted)}
.flav-btn.active{background:rgba(212,0,106,.16);border-color:var(--fram);color:#fff}
.flav-btn.out{opacity:.45}

/* ===== ADMIN ===== */
body:not(.is-admin) .admin-only{display:none!important}
.admin-tabs{display:flex;gap:8px;padding:12px 16px 4px;overflow-x:auto}
.atab{flex:0 0 auto;padding:10px 14px;border-radius:13px;font-size:14px;font-weight:700;background:var(--card);border:1px solid var(--line);color:var(--muted)}
.atab.active{background:rgba(212,0,106,.16);border-color:var(--fram);color:#fff}
.apane{padding:8px 16px 40px}
.solde-card{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:24px;padding:24px 22px;text-align:center;box-shadow:0 16px 40px -18px #000}
.solde-h{font-size:12px;letter-spacing:.1em;color:var(--muted);font-weight:700;text-transform:uppercase}
.solde-big{font-size:48px;font-weight:900;letter-spacing:-.02em;margin:6px 0 2px;background:linear-gradient(180deg,#fff,#e7b8d2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.solde-lbl{color:var(--gold);font-size:13px;font-weight:700;margin-bottom:18px}
.solde-rows{display:flex;flex-direction:column;gap:2px;text-align:left}
.solde-rows>div{display:flex;justify-content:space-between;padding:11px 4px;border-bottom:1px solid var(--line);font-size:15px}
.solde-rows>div span{color:var(--muted)}.solde-rows>div b{font-weight:800}
.solde-rows .tot{border-bottom:none;font-size:17px}.solde-rows .tot b{color:var(--fram-l)}
.cloture-btn{width:100%;margin-top:20px;height:54px;border-radius:16px;font-size:16px;font-weight:800;background:linear-gradient(180deg,var(--fram-l),var(--fram-d));color:#fff;box-shadow:0 12px 30px -10px var(--fram-d)}
.add-prod{width:100%;height:48px;margin-bottom:14px;border-radius:14px;font-weight:700;font-size:15px;background:var(--card2);border:1px dashed var(--fram);color:var(--fram-l)}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px}
.pcard-h{font-size:15px;font-weight:800;margin-bottom:12px}
.pcard-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pcard-top .pcard-h{margin:0;flex:1}
.pcard-photo{position:relative;width:64px;flex:0 0 64px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pcard-photo img{width:64px;height:64px;border-radius:12px;object-fit:contain;background:#fff;padding:3px}
.pcard-noimg{width:64px;height:64px;border-radius:12px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:26px;opacity:.4}
.photo-btn{font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);color:var(--fram-l);white-space:nowrap}
.photo-del{font-size:11px;font-weight:700;padding:4px 8px;border-radius:8px;background:rgba(255,107,138,.1);border:1px solid rgba(255,107,138,.3);color:#ff6b8a;white-space:nowrap}
.del-flav{background:rgba(255,107,138,.12);border:1px solid rgba(255,107,138,.3);color:#ff6b8a;border-radius:8px;width:32px;height:32px;font-size:14px;flex:0 0 32px}
.pcard-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.save-grp{flex:1;min-width:130px;height:44px;border-radius:12px;font-weight:800;font-size:14px;background:linear-gradient(135deg,var(--fram),var(--fram-d));color:#fff;border:none}
.pcard-actions .add-flav{margin:0;flex:0 0 auto;width:auto;padding:0 14px;height:44px}
.del-prod{height:44px;padding:0 14px;border-radius:12px;font-weight:700;font-size:13px;background:rgba(255,107,138,.1);border:1px solid rgba(255,107,138,.3);color:#ff6b8a}
.order-row{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-size:13px;font-weight:600;color:#9db0ff;flex-wrap:wrap}
.order-row input[type=checkbox]{width:20px;height:20px;accent-color:#7d8cff}
.order-row .p-delay{flex:1;min-width:120px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:inherit;font-size:13px;padding:8px 10px}
.sheet-order{display:block;font-size:13px;font-weight:700;color:#9db0ff;margin-top:4px}
.price-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.price-row label{flex:1;min-width:120px;font-size:11px;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:4px}
.price-row input,.vstock{background:var(--bg2);border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:inherit;font-size:15px;font-weight:700;padding:9px 11px;outline:none}
.price-row input:focus,.vstock:focus{border-color:var(--fram)}
.ht-note{font-size:11px;font-weight:700;color:var(--gold);margin-top:4px;letter-spacing:.01em}
.vlist{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.vrow{display:flex;align-items:center;gap:10px;font-size:14px}
.vname{flex:1;font-weight:600}
.vstock{width:80px;text-align:center}.vu{font-size:12px;color:var(--muted)}
.vstock-ro{font-weight:700;color:var(--muted)}
.eye-flav{background:var(--bg2);border:1px solid var(--line);color:var(--muted);border-radius:8px;width:32px;height:32px;font-size:14px;flex:0 0 32px}
.vrow.is-hidden{opacity:.5}
.vrow.is-hidden .vname{text-decoration:line-through}
.hide-tag{display:inline-block;margin-left:8px;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(160,138,160,.2);color:var(--muted);vertical-align:middle}
.eye-group{height:44px;padding:0 14px;border-radius:12px;font-weight:700;font-size:13px;background:var(--bg2);border:1px solid var(--line);color:var(--muted)}
.pcard-hidden{opacity:.62;border-style:dashed}
.pcard-hidden .pcard-h::after{content:" · masqué";color:var(--muted);font-size:12px;font-weight:600}
.add-flav{margin-top:12px;width:100%;height:42px;border-radius:12px;font-weight:700;font-size:13px;background:var(--bg2);border:1px solid var(--line);color:var(--muted)}

/* ===== Paiement espèces (rendu monnaie) ===== */
.cash-line{display:flex;justify-content:space-between;align-items:center;margin:14px 0 4px;font-size:15px;color:var(--muted);font-weight:600}
.cash-line b{font-size:24px;font-weight:900;color:#fff}
.cash-sub{font-size:13px;color:var(--muted);font-weight:600;margin:10px 0 8px;text-align:left}
.cash-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cash-chip{flex:1;min-width:72px;height:46px;border-radius:12px;font-weight:800;font-size:14px;background:var(--bg2);border:1px solid var(--line);color:var(--text)}
.cash-chip.exact{background:rgba(46,194,126,.14);border-color:rgba(46,194,126,.4);color:var(--cash)}
.cash-chip:active{transform:scale(.95)}
#cash-given{width:100%;height:56px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);color:#fff;font-family:inherit;font-size:22px;font-weight:800;text-align:center;outline:none;margin-bottom:12px}
#cash-given:focus{border-color:var(--cash)}
.cash-change-box{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(46,194,126,.12);border:1px solid rgba(46,194,126,.3);margin-bottom:14px}
.cash-change-box span{font-size:14px;font-weight:700;color:var(--cash)}
.cash-change-box b{font-size:28px;font-weight:900;color:var(--cash)}
.cash-change-box b.neg{color:#ff6b8a}

/* ===== Recherche VosFactures (liaison réf) ===== */
.prod-tools{display:flex;gap:8px;margin-bottom:14px}
.prod-tools .add-prod{margin:0;flex:1}
.vf-sync{flex:0 0 auto;padding:0 16px;height:48px;border-radius:14px;font-weight:700;font-size:14px;background:var(--card2);border:1px solid var(--line);color:var(--gold);white-space:nowrap}
.vf-sub{font-size:13px;color:var(--muted);margin:6px 0 12px}
#vf-q{width:100%;height:52px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);color:#fff;font-family:inherit;font-size:17px;font-weight:600;padding:0 16px;outline:none;margin-bottom:12px}
#vf-q:focus{border-color:var(--fram)}
.vf-results{max-height:46vh;overflow:auto;text-align:left;display:flex;flex-direction:column;gap:8px}
.vf-hint{color:var(--muted);font-size:14px;text-align:center;padding:18px}
.vf-item{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;transition:.1s}
.vf-item:active{transform:scale(.98);border-color:var(--fram)}
.vf-it-main{font-size:14px;font-weight:700;line-height:1.25}
.vf-it-sub{font-size:12px;color:var(--muted);margin-top:3px}
.vf-code{font-weight:800;color:var(--gold);font-family:ui-monospace,monospace}
.vf-tag{display:inline-block;margin-left:8px;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(46,194,126,.14);color:var(--cash);vertical-align:middle;letter-spacing:.02em}
.vf-tag.none{background:rgba(255,179,64,.14);color:var(--gold)}

/* ===== Récap panier ===== */
.cart-list{max-height:46vh;overflow:auto;margin:14px 0 4px;text-align:left}
.cart-item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.ci-info{flex:1}.ci-name{font-size:14px;font-weight:700;line-height:1.2}
.ci-q{font-size:12px;color:var(--muted);margin-top:2px}
.ci-tot{font-weight:800;font-size:15px}
.ci-del{width:34px;height:34px;border-radius:10px;background:rgba(255,107,138,.12);color:#ff6b8a;font-size:14px;font-weight:700;border:1px solid rgba(255,107,138,.3)}
.ci-del:active{transform:scale(.9)}
.cart-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 16px;font-size:16px}
.cart-foot b{font-size:24px;font-weight:900;color:var(--fram-l)}

/* a11y : respect du réglage "réduire les animations" */
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--fram-l);outline-offset:2px}

/* ===== Paiement carte (QR) ===== */
.cardpay-sheet{text-align:center}
.cardpay-amt{font-size:34px;font-weight:900;margin:6px 0 16px;background:linear-gradient(180deg,#fff,#e7b8d2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cardpay-qrbox{width:230px;height:230px;margin:0 auto 18px;background:#fff;border-radius:20px;padding:14px;box-shadow:0 16px 40px -12px #000}
.cardpay-qrbox img{width:100%;height:100%;image-rendering:pixelated}
.cardpay-status{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:15px;color:var(--gold)}
.spin{width:16px;height:16px;border:3px solid rgba(255,179,64,.3);border-top-color:var(--gold);border-radius:50%;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.cardpay-hint{font-size:13px;color:var(--muted);margin:10px 0 4px}
#cardpay-done{padding:30px 0 10px}
.done-check{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(180deg,#2ee88f,#109e63);color:#fff;font-size:54px;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px -10px rgba(46,194,126,.6);animation:pop .3s}
.done-txt{font-size:22px;font-weight:900;color:var(--cash)}
.done-amt{font-size:18px;font-weight:700;color:var(--muted);margin-top:4px}
.solde-rows .keep{border-top:1px dashed var(--line);margin-top:4px;padding-top:14px}
.solde-rows .keep b{color:var(--gold)}

/* ===== Bénéfice cumulé ===== */
.cumul-card{background:linear-gradient(135deg,#2a0f3a,#1a0a26);border:1px solid var(--fram-d);border-radius:22px;padding:20px;text-align:center;margin-bottom:14px;box-shadow:0 14px 36px -16px var(--fram-d),inset 0 1px 0 rgba(255,255,255,.06);position:relative;overflow:hidden}
.cumul-card::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 0,rgba(255,61,147,.2),transparent 60%);pointer-events:none}
.cumul-lbl{font-size:12px;letter-spacing:.08em;color:var(--fram-l);font-weight:700;text-transform:uppercase}
.cumul-val{font-size:38px;font-weight:900;letter-spacing:-.02em;margin:4px 0 2px;background:linear-gradient(180deg,#fff,#ffcfe5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cumul-sub{font-size:11px;color:var(--muted)}

/* ===== Historique ===== */
.histo-h{font-size:14px;font-weight:800;margin:6px 0 10px;color:var(--text)}
.histo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.hr-main{font-size:14px;font-weight:700;line-height:1.2}
.hr-sub{font-size:12px;color:var(--muted);margin-top:2px}
.histo-row b{font-weight:800;font-size:15px;white-space:nowrap}
.hr-empty{color:var(--muted);text-align:center;padding:20px;font-size:14px}
#ap-histo>.histo-h:nth-of-type(2){margin-top:22px}

/* ===== Facture revendeur (basique) ===== */
.hr-click{cursor:pointer}.hr-eye{font-size:11px;color:var(--fram-l);font-weight:700;margin-left:4px}
.fac-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:12px;overflow:auto}
.fac-paper{background:#fff;color:#1a1a1a;width:min(94vw,420px);border-radius:14px;padding:22px;font-size:13px}
.fac-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #a4004f;padding-bottom:12px;margin-bottom:12px}
.fac-title{font-size:17px;font-weight:900;color:#a4004f}.fac-sub{font-size:11px;color:#777;font-weight:600}
.fac-meta{text-align:right;font-size:11px;color:#555;font-weight:600}
.fac-to{font-size:12px;color:#333;margin-bottom:14px}
.fac-table{width:100%;border-collapse:collapse;font-size:12px}
.fac-table th{text-align:left;border-bottom:1px solid #ddd;padding:6px 4px;color:#888;font-weight:700;font-size:11px}
.fac-table td{padding:7px 4px;border-bottom:1px solid #f0f0f0}
.fac-table td:nth-child(2),.fac-table td:nth-child(3),.fac-table td:nth-child(4),.fac-table th:nth-child(2),.fac-table th:nth-child(3),.fac-table th:nth-child(4){text-align:right}
.fac-tot{margin-top:14px}
.fac-tot>div{display:flex;justify-content:space-between;padding:4px 0;font-size:13px}
.fac-tot .ttc{border-top:2px solid #a4004f;margin-top:6px;padding-top:8px;font-size:16px;font-weight:900;color:#a4004f}
.fac-actions{display:flex;gap:10px}
.fac-print,.fac-close{height:48px;padding:0 22px;border-radius:14px;font-weight:700;font-size:15px}
.fac-print{background:linear-gradient(180deg,var(--fram-l),var(--fram-d));color:#fff}
.fac-close{background:var(--card2);color:var(--text);border:1px solid var(--line)}
@media print{body *{visibility:hidden}.fac-paper,.fac-paper *{visibility:visible}.fac-paper{position:fixed;inset:0;margin:auto;box-shadow:none}.fac-actions{display:none}}

/* ============================================================
   ✨ DESIGN PRO — couche premium (additive, non destructive)
   ============================================================ */

/* Fond ambiant vivant : halos colorés qui dérivent lentement */
#screen-caisse,#screen-admin{position:relative;isolation:isolate}
#screen-caisse::before,#screen-admin::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 4%,rgba(212,0,106,.16),transparent 62%),
    radial-gradient(40% 32% at 92% 16%,rgba(132,72,210,.13),transparent 60%),
    radial-gradient(50% 40% at 50% 108%,rgba(255,61,147,.10),transparent 62%);
  animation:auraDrift 22s ease-in-out infinite alternate}
@keyframes auraDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-26px,0) scale(1.06)}}

/* Grain de lumière très subtil sur tout l'écran (texture premium) */
#screen-caisse::after,#screen-admin::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 50% 0,rgba(255,255,255,.03),transparent 45%)}

/* Tuiles : apparition en cascade (au 1er chargement) + finition plus riche */
.grid.stagger .tile{animation:tileIn .5s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i,0) * 38ms)}
@keyframes tileIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
.tile::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,61,147,.55),transparent);opacity:.7;pointer-events:none}
.tile{box-shadow:0 14px 34px -16px #000,0 2px 6px -4px #000,inset 0 1px 0 rgba(255,255,255,.05)}
.tile:active{transform:scale(.96) translateY(1px)}
.tile-name{font-weight:800}
.tile-price{text-shadow:0 0 22px rgba(255,61,147,.25)}
.tile.has-photo .tile-photo{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 16px -10px #000}

/* Tuile « sur commande » : liseré bleu lumineux distinctif */
.tile.order::after{background:linear-gradient(90deg,transparent,rgba(120,140,255,.7),transparent)}
.tile.order{box-shadow:0 14px 34px -16px #000,0 0 0 1px rgba(120,140,255,.18) inset}

/* Barre de recherche : focus plus vivant */
.search-row input{transition:border-color .15s,box-shadow .15s,background .15s}
.search-row input:focus{box-shadow:0 0 0 3px rgba(212,0,106,.18);background:var(--card2)}

/* Barre TPE : reflet en haut + total qui respire */
.till{box-shadow:0 -20px 40px -20px #000,inset 0 1px 0 rgba(255,255,255,.05)}
.till-total{background:linear-gradient(180deg,#fff,#ffd9ec);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.till-btn{position:relative;overflow:hidden}
.till-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);
  animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,72%{left:-60%}88%,100%{left:130%}}

/* Onglets admin : pilule active avec léger glow */
.atab{transition:.15s}
.atab.active{box-shadow:0 6px 18px -8px var(--fram-d)}

/* Cartes produit admin : survol/press plus tactile */
.pcard{transition:transform .12s,box-shadow .12s,border-color .12s}
.pcard:active{transform:scale(.995)}
.save-grp{box-shadow:0 10px 24px -10px var(--fram-d)}

/* Feuilles : barre de préhension plus visible */
.sheet-grab{background:linear-gradient(90deg,var(--fram-d),var(--fram-l));opacity:.5}

/* Boutons de paiement : halo au survol pressé */
.pay-mode{transition:transform .12s,box-shadow .12s,filter .12s}
.pay-mode.cash:active{box-shadow:0 12px 30px -12px rgba(46,194,126,.6)}
.pay-mode.card:active{box-shadow:0 12px 30px -12px rgba(59,157,255,.6)}

/* Badge panier : pulsation discrète */
.tile-badge{box-shadow:0 4px 14px -2px var(--fram-d),0 0 0 3px rgba(212,0,106,.18)}

/* Decompte reglement facture */
.fac-settle{margin-top:16px;border-top:1px dashed #ccc;padding-top:10px}
.fac-settle-h{font-size:11px;font-weight:800;color:#a4004f;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.fac-settle>div{display:flex;justify-content:space-between;padding:3px 0;font-size:12px;color:#333}
.fac-settle .settle-final{border-top:2px solid #a4004f;margin-top:6px;padding-top:8px;font-size:15px;font-weight:900;color:#a4004f}

.fac-settle .settle-mid{border-top:1px solid #ddd;margin-top:4px;padding-top:6px;font-weight:800;color:#222}

.caisse-jour{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0;padding:8px 12px;background:#1c1230;border:1px solid #3a2a4a;border-radius:12px;font-size:13px}
.caisse-jour .cj-h{font-weight:800;color:#ff4fa3;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.caisse-jour .cj-i{color:#bbb}
.caisse-jour .cj-i b{color:#fff;font-weight:800;margin-left:3px}
.caisse-jour .cj-tot{margin-left:auto;color:#fff}


/* >>> ANIM-LAYER-CLAUDE >>> */
/* 1 - entree d'ecran */
@keyframes scrIn{from{opacity:0}to{opacity:1}}
.screen:not([hidden]){animation:scrIn .3s ease both}
/* 2 - cascade tuiles (1er chargement, hook .stagger pose par le JS) */
@keyframes tileIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.grid.stagger .tile{animation:tileIn .44s cubic-bezier(.2,.8,.25,1) both}
.grid.stagger .tile:nth-child(1){animation-delay:.02s}
.grid.stagger .tile:nth-child(2){animation-delay:.06s}
.grid.stagger .tile:nth-child(3){animation-delay:.10s}
.grid.stagger .tile:nth-child(4){animation-delay:.14s}
.grid.stagger .tile:nth-child(5){animation-delay:.18s}
.grid.stagger .tile:nth-child(6){animation-delay:.22s}
.grid.stagger .tile:nth-child(7){animation-delay:.26s}
.grid.stagger .tile:nth-child(8){animation-delay:.30s}
.grid.stagger .tile:nth-child(9){animation-delay:.34s}
.grid.stagger .tile:nth-child(10){animation-delay:.38s}
.grid.stagger .tile:nth-child(n+11){animation-delay:.42s}
/* 3 - survol (pointeur) */
@media (hover:hover){
.tile{transition:transform .16s ease, box-shadow .25s ease}
.tile:hover{transform:translateY(-3px)}
.tile:active{transform:scale(.96)}
.tile.has-photo:hover .tile-photo img{transform:scale(1.06)}
}
.tile-photo img{transition:transform .3s ease}
/* 4 - halo Encaisser (2 respirations a l'apparition) */
@keyframes tillGlow{0%,100%{box-shadow:0 12px 30px -8px var(--fram-d)}50%{box-shadow:0 14px 40px -6px var(--fram),0 0 0 1px rgba(255,61,147,.3)}}
.till-btn{animation:tillGlow 2.3s ease-in-out 2}
/* 5 - focus recherche */
.search-row input{transition:border-color .2s ease, box-shadow .2s ease}
.search-row input:focus{box-shadow:0 0 0 4px rgba(212,0,106,.14)}
/* 6 - ombre photo */
.tile.has-photo .tile-photo{box-shadow:0 4px 14px -6px rgba(0,0,0,.5)}
/* <<< ANIM-LAYER-CLAUDE <<< */

/* >>> AI-BOX-CLAUDE >>> */
#sheet-ai{margin:8px 0 6px}
.ai-box{background:linear-gradient(180deg,rgba(212,0,106,.09),rgba(212,0,106,.02));border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:8px;text-align:left}
.ai-title{font-size:15px;font-weight:800;margin-bottom:12px}
.ai-suggest{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ai-suggest button{font-size:13px;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--text);padding:8px 13px;border-radius:999px;transition:.12s}
.ai-suggest button:active{transform:scale(.95);border-color:var(--fram)}
.ai-inrow{display:flex;gap:8px}
.ai-inrow input{flex:1;height:48px;padding:0 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:15px;transition:.2s}
.ai-inrow input:focus{border-color:var(--fram);box-shadow:0 0 0 4px rgba(212,0,106,.14)}
.ai-inrow button{width:48px;height:48px;border-radius:14px;background:linear-gradient(180deg,var(--fram-l),var(--fram-d));color:#fff;font-size:18px;font-weight:800;flex:none}
.ai-inrow button:active{transform:scale(.94)}
.ai-answer{margin-top:14px;animation:fade .3s}
.ai-text{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:15px;line-height:1.55;white-space:pre-wrap}
.ai-source{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--fram-l)}
.ai-typing{display:inline-flex;gap:6px;padding:16px}
.ai-typing i{width:9px;height:9px;border-radius:50%;background:var(--fram-l);animation:blink 1.2s infinite both}
.ai-typing i:nth-child(2){animation-delay:.2s}
.ai-typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
/* <<< AI-BOX-CLAUDE <<< */