:root{
  --rouge:#1A6B3A; --rouge-dark:#0F4526; --rouge-light:#2E9E5A;
  --vert:#145C30; --vert-dark:#0A3A1E; --vert-light:#1DB954; --vert-pale:#D4F5E0;
  --or:#D4A017; --or-light:#F9C74F;
  --blanc:#F4FBF6; --gris:#E8F5EC; --gris-dark:#B8D9C4;
  --dark:#071A0E; --mid:#2A5A3A; --text:#0F3020;
  --shadow-r:rgba(26,107,58,0.20); --shadow-v:rgba(20,92,48,0.15);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--gris);color:var(--text);min-height:100vh;}

/* ═══ MOTIF ZELLIGE BACKGROUND ═══ */
body::before{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;
  background-image:
    repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(26,107,58,0.04) 20px,rgba(26,107,58,0.04) 21px),
    repeating-linear-gradient(-45deg,transparent,transparent 20px,rgba(20,92,48,0.03) 20px,rgba(20,92,48,0.03) 21px);
  pointer-events:none;z-index:0;
}

/* ═══ PIN SCREEN ═══ */
.pin-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:100vh;padding:16px;position:relative;z-index:1;overflow-y:auto;
}
.pin-card{
  background:var(--blanc);border-radius:24px;padding:clamp(16px,4vw,36px) clamp(14px,4vw,28px);
  width:100%;max-width:400px;text-align:center;margin:auto;
  box-shadow:0 20px 60px var(--shadow-r), 0 4px 20px var(--shadow-v);
  border:1px solid var(--gris-dark);
  animation:slideUp 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

.mm-logo-wrap{
  margin-bottom:clamp(10px,2vh,20px);
  background:#fff;
  border-radius:22px;
  padding:clamp(6px,1.5vw,12px);
  width:clamp(72px,18vw,120px);
  height:clamp(72px,18vw,120px);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
  box-shadow:0 6px 24px rgba(26,107,58,0.25), 0 2px 8px rgba(0,0,0,0.10);
  border:2px solid rgba(26,107,58,0.15);
}
.mm-logo{width:clamp(54px,14vw,96px);height:clamp(54px,14vw,96px);object-fit:contain;border-radius:10px;}

.pin-brand{font-family:'Playfair Display',serif;font-size:clamp(18px,5vw,26px);font-weight:900;
  background:linear-gradient(135deg,#1A6B3A,#0F4526);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:4px;}
.pin-sub{font-size:clamp(11px,3vw,13px);color:var(--mid);margin-bottom:6px;font-weight:300;}
.pin-divider{width:60px;height:3px;background:linear-gradient(90deg,#1A6B3A,#D4A017);
  border-radius:2px;margin:clamp(6px,1.5vh,12px) auto clamp(8px,2vh,20px);}
.pin-label{font-size:clamp(10px,2.5vw,12px);color:var(--mid);font-weight:500;margin-bottom:clamp(6px,1.5vh,14px);letter-spacing:0.5px;text-transform:uppercase;}

.pin-dots{display:flex;justify-content:center;gap:clamp(8px,3vw,14px);margin-bottom:clamp(12px,3vh,24px);}
.pin-dot{width:clamp(12px,3.5vw,16px);height:clamp(12px,3.5vw,16px);border-radius:50%;border:2px solid var(--gris-dark);
  background:transparent;transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);}
.pin-dot.filled{background:var(--rouge);border-color:var(--rouge);
  box-shadow:0 2px 8px var(--shadow-r);transform:scale(1.15);}

.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,2vw,10px);max-width:260px;margin:0 auto;}
.pin-btn{
  background:var(--blanc);border:1.5px solid var(--gris-dark);border-radius:14px;
  padding:clamp(10px,3vw,16px);font-size:clamp(16px,5vw,22px);font-weight:700;color:var(--dark);cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:all 0.15s;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
  min-height:clamp(44px,12vw,60px);display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.pin-btn:active{background:var(--rouge);color:#fff;border-color:var(--rouge);transform:scale(0.94);}
.pin-btn.del{color:var(--rouge);font-size:clamp(13px,4vw,16px);}
.pin-btn.zero{grid-column:2;}
.pin-error{color:var(--rouge);font-size:clamp(10px,3vw,12px);margin-top:8px;display:none;font-weight:500;}

.pin-footer{margin-top:clamp(10px,2vh,20px);font-size:10px;color:var(--gris-dark);letter-spacing:0.5px;}

/* ── PIN responsive petit écran ── */
@media(max-width:390px){
  .pin-screen{padding:10px;}
  .pin-card{padding:14px 12px;border-radius:18px;}
  .mm-logo-wrap{width:64px;height:64px;padding:6px;}
  .mm-logo{width:52px;height:52px;}
  .pin-brand{font-size:16px;}
  .pin-divider{margin:6px auto 10px;}
  .pin-pad{max-width:100%;gap:6px;}
  .pin-btn{min-height:44px;font-size:18px;padding:8px;}
  .pin-dots{gap:8px;margin-bottom:10px;}
  .pin-dot{width:12px;height:12px;}
}
/* ── PIN écran très petit (SE, petit Android) ── */
@media(max-height:650px){
  .pin-screen{justify-content:flex-start;padding-top:8px;}
  .mm-logo-wrap{width:56px;height:56px;margin-bottom:6px;}
  .mm-logo{width:44px;height:44px;}
  .pin-brand{font-size:16px;}
  .pin-sub{font-size:10px;margin-bottom:2px;}
  .pin-divider{margin:4px auto 6px;}
  .pin-label{margin-bottom:6px;}
  .pin-dots{margin-bottom:8px;}
  .pin-btn{min-height:40px;padding:6px;}
}
/* ── PIN tablette/desktop ── */
@media(min-width:600px){
  .pin-card{max-width:440px;}
  .pin-pad{max-width:280px;}
}

/* ═══ APP COMMON ═══ */
.app{display:none;min-height:100vh;position:relative;z-index:1;}

/* ═══ HEADER ═══ */
.header{
  background:linear-gradient(135deg,#0F4526 0%,#1A6B3A 40%,#2E9E5A 100%);
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 4px 20px var(--shadow-r);position:sticky;top:0;z-index:100;
}
.header-left{display:flex;align-items:center;gap:10px;}
.header-logo{width:32px;height:32px;object-fit:contain;border-radius:8px;background:#fff;padding:3px;box-shadow:0 2px 6px rgba(0,0,0,0.2);}
.header-title{font-family:'Playfair Display',serif;font-size:16px;color:#fff;font-weight:700;}
.header-subtitle{font-size:10px;color:rgba(255,255,255,0.7);margin-top:1px;}
.header-right{display:flex;gap:6px;align-items:center;}
.role-badge{background:rgba(255,255,255,0.2);color:#fff;border-radius:20px;
  padding:3px 10px;font-size:10px;font-weight:700;border:1px solid rgba(255,255,255,0.3);}
.role-badge.caissiere{background:rgba(45,106,79,0.6);border-color:var(--vert-light);}
.refresh-btn{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);
  color:#fff;border-radius:8px;padding:5px 10px;font-size:11px;cursor:pointer;}
.logout-btn{background:none;border:1px solid rgba(255,255,255,0.4);
  color:#fff;border-radius:8px;padding:5px 8px;font-size:11px;cursor:pointer;}
.last-update{font-size:9px;color:rgba(255,255,255,0.6);}

/* ═══ TABS ═══ */
.tabs{
  display:flex;flex-wrap:wrap;gap:0;
  background:var(--rouge-dark);border-bottom:3px solid var(--vert);
  padding:0 4px;
}
.tab{
  flex:1 1 auto;min-width:0;background:none;border:none;border-bottom:3px solid transparent;
  margin-bottom:-3px;padding:10px 6px;color:rgba(255,255,255,0.6);
  font-size:11px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:all 0.2s;white-space:nowrap;text-align:center;
}
.tab.active{color:#fff;border-bottom-color:var(--or);}
.tab:hover{color:rgba(255,255,255,0.9);}

/* ══ RESPONSIVE TABLET ══ */
@media (max-width:768px){
  .tabs{padding:0 2px;}
  .tab{font-size:10px;padding:9px 6px;}
  .header{padding:10px 12px;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .pay-grid{grid-template-columns:repeat(3,1fr);}
}

/* ══ RESPONSIVE MOBILE ══ */
@media (max-width:480px){
  body{padding:0;}
  .header{padding:10px 12px;}
  .header-title{font-size:13px;}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .kpi-value{font-size:16px;}
  .pay-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .pay-amount{font-size:11px;}
  .emp-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .fg.full{grid-column:1;}
  .cart-total-bar strong{font-size:16px;}
  .tab{font-size:10px;padding:9px 8px;}
  .content{padding:10px;}
  .scan-section,.cart-section,.pay-section,.form-box{padding:12px;}
  .modal{max-width:94vw;}
  .confirm-box{max-width:94vw;}
}

/* ══ RESPONSIVE TRÈS PETIT ══ */
@media (max-width:360px){
  .kpi-grid{grid-template-columns:1fr;}
  .tab{font-size:9px;padding:8px 4px;}
  .pay-grid{grid-template-columns:1fr 1fr;gap:6px;}
  .emp-grid{grid-template-columns:1fr;}
  .content{padding:8px;}
}

.content{padding:14px;}
.section{display:none;}
.section.active{display:block;}

/* ═══ LOADING ═══ */
.loading{text-align:center;padding:40px;}
.spinner{width:32px;height:32px;border:3px solid var(--gris-dark);
  border-top-color:var(--rouge);border-radius:50%;
  animation:spin 0.8s linear infinite;margin:0 auto 12px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ══ FILTRE CATÉGORIE MOSAÏQUE ══ */
.cat-mosaic{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-bottom:12px;
}
.cat-tile{
  background:var(--blanc);
  border:2px solid var(--gris-dark);
  border-radius:10px;
  padding:8px 6px;
  text-align:center;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  color:var(--mid);
  transition:all 0.2s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.cat-tile:hover{border-color:var(--vert);color:var(--vert-dark);}
.cat-tile.active{
  background:var(--vert-dark);
  border-color:var(--vert-dark);
  color:#fff;
  box-shadow:0 2px 8px rgba(13,92,46,0.3);
}
.cat-tile-icon{font-size:16px;}
.cat-tile-label{font-size:10px;line-height:1.2;}
@media (max-width:480px){
  .cat-mosaic{grid-template-columns:repeat(3,1fr);gap:4px;}
  .cat-tile{padding:6px 4px;}
  .cat-tile-icon{font-size:14px;}
}

/* ═══ FILTRE BAR ═══ */
.filtre-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.filtre-btn{background:var(--blanc);border:1.5px solid var(--gris-dark);
  border-radius:20px;padding:5px 12px;color:var(--mid);font-size:11px;
  font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s;}
.filtre-btn.active{background:var(--rouge);border-color:var(--rouge);color:#fff;
  box-shadow:0 2px 8px var(--shadow-r);}

/* ═══ KPI CARDS ═══ */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.kpi-card{background:var(--blanc);border-radius:16px;padding:14px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);border-top:4px solid var(--gris-dark);
  transition:transform 0.2s;}
.kpi-card:active{transform:scale(0.97);}
.kpi-card.rouge{border-top-color:var(--rouge);}
.kpi-card.vert{border-top-color:var(--vert);}
.kpi-card.or{border-top-color:var(--or);}
.kpi-card.rouge-light{border-top-color:var(--rouge-light);}
.kpi-label{font-size:9px;color:var(--mid);font-weight:700;text-transform:uppercase;
  letter-spacing:0.8px;margin-bottom:6px;}
.kpi-value{font-size:20px;font-weight:700;color:var(--dark);font-family:'Playfair Display',serif;}
.kpi-sub{font-size:9px;color:var(--gris-dark);margin-top:3px;}

/* ═══ SECTION TITLE ═══ */
.section-title{font-size:12px;font-weight:700;color:var(--rouge);
  text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px;margin-top:4px;
  display:flex;align-items:center;gap:6px;}
.section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#2E9E5A,transparent);}

/* ═══ PAIEMENTS ═══ */
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.pay-card{background:var(--blanc);border-radius:14px;padding:12px;text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.pay-card.wave{border-top:3px solid #1D4ED8;}
.pay-card.orange{border-top:3px solid #EA580C;}
.pay-card.cash{border-top:3px solid var(--vert);}
.pay-icon{font-size:20px;margin-bottom:4px;}
.pay-label{font-size:9px;color:var(--mid);font-weight:700;text-transform:uppercase;}
.pay-amount{font-size:12px;font-weight:700;color:var(--dark);margin-top:4px;}
.pay-pct{font-size:11px;font-weight:700;margin-top:2px;}
.pay-count{font-size:9px;color:var(--gris-dark);margin-top:1px;}
.wave-c{color:#1D4ED8;}.orange-c{color:#EA580C;}.cash-c{color:var(--vert);}

/* ═══ EMPLOYÉES ═══ */
.emp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.emp-card{background:var(--blanc);border-radius:14px;padding:12px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);border-left:4px solid #1A6B3A;}
.emp-name{font-size:12px;font-weight:700;color:var(--dark);margin-bottom:5px;}
.emp-ca{font-size:18px;font-weight:700;color:var(--rouge);font-family:'Playfair Display',serif;}
.emp-detail{font-size:9px;color:var(--mid);margin-top:3px;}

/* ═══ TRANSACTIONS ═══ */
.trx-card{background:var(--blanc);border-radius:12px;padding:12px;margin-bottom:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);border-left:3px solid var(--gris-dark);}
.trx-card:has(.badge-wave){border-left-color:#1D4ED8;}
.trx-card:has(.badge-orange){border-left-color:#EA580C;}
.trx-card:has(.badge-cash){border-left-color:var(--vert);}
.trx-header{display:flex;justify-content:space-between;margin-bottom:5px;}
.trx-id{font-size:10px;color:var(--mid);}
.trx-date{font-size:10px;color:var(--mid);}
.trx-body{display:flex;justify-content:space-between;align-items:center;}
.trx-info{flex:1;}
.trx-produit{font-size:13px;font-weight:700;color:var(--dark);}
.trx-detail{font-size:10px;color:var(--mid);margin-top:2px;}
.trx-right{text-align:right;}
.trx-montant{font-size:14px;font-weight:700;color:var(--rouge);font-family:'Playfair Display',serif;}
.trx-employe{font-size:9px;color:var(--mid);margin-top:2px;}
.pay-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:9px;font-weight:700;margin-top:3px;}
.badge-wave{background:#EFF6FF;color:#1D4ED8;}
.badge-orange{background:#FFF7ED;color:#EA580C;}
.badge-cash{background:var(--vert-pale);color:var(--vert-dark);}

/* ═══ CATALOGUE ═══ */
.search-box{margin-bottom:10px;}
.search-input{width:100%;background:var(--blanc);border:1.5px solid var(--gris-dark);
  border-radius:10px;padding:9px 14px;color:var(--dark);font-size:13px;
  outline:none;font-family:'DM Sans',sans-serif;transition:border-color 0.2s;}
.search-input:focus{border-color:var(--rouge);}
.search-input::placeholder{color:var(--gris-dark);}

.cat-card{background:var(--blanc);border-radius:12px;padding:12px;margin-bottom:8px;
  display:flex;gap:10px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.cat-icon{width:44px;height:44px;border-radius:10px;background:var(--gris);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.cat-info{flex:1;}
.cat-name{font-size:13px;font-weight:700;color:var(--dark);}
.cat-id{font-size:10px;color:var(--mid);margin-top:1px;}
.cat-prix{font-size:11px;color:var(--vert-dark);font-weight:700;margin-top:3px;}
.cat-stock{font-size:10px;margin-top:2px;}
.s-ok{color:var(--vert);}.s-low{color:#D97706;}.s-out{color:var(--rouge);}
.cat-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0;}
.qr-btn{background:var(--gris);border:1px solid var(--gris-dark);border-radius:7px;
  padding:5px 8px;color:var(--mid);font-size:10px;cursor:pointer;font-family:'DM Sans',sans-serif;}
.toggle-actif-btn{border-radius:7px;padding:5px 8px;font-size:10px;cursor:pointer;
  font-family:'DM Sans',sans-serif;border:1px solid;}

/* ═══ FORMULAIRE ═══ */
.form-box{background:var(--blanc);border-radius:16px;padding:16px;margin-bottom:14px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.form-box h3{font-size:14px;color:var(--rouge);font-weight:700;margin-bottom:14px;
  font-family:'Playfair Display',serif;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg.full{grid-column:1/-1;}
.fg label{font-size:10px;color:var(--mid);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.fg input,.fg select{background:var(--gris);border:1.5px solid var(--gris-dark);border-radius:8px;
  padding:8px 10px;color:var(--dark);font-size:13px;outline:none;
  font-family:'DM Sans',sans-serif;transition:border-color 0.2s;}
.fg input:focus,.fg select:focus{border-color:var(--rouge);background:var(--blanc);}
.fg input::placeholder{color:var(--gris-dark);}
.req{color:var(--rouge);}
.submit-btn{width:100%;background:linear-gradient(135deg,#1A6B3A,#0F4526);
  border:none;border-radius:10px;padding:13px;color:#fff;font-size:14px;
  font-weight:700;cursor:pointer;margin-top:10px;font-family:'DM Sans',sans-serif;
  box-shadow:0 4px 14px var(--shadow-r);transition:all 0.2s;}
.submit-btn:active{transform:scale(0.98);}
.qr-prev{display:none;text-align:center;margin-top:10px;padding:12px;
  background:var(--gris);border-radius:10px;}
.qr-prev.show{display:block;}
.qr-prev img{width:100px;height:100px;border-radius:8px;border:2px solid var(--rouge);}
.msg{border-radius:10px;padding:9px;font-size:12px;text-align:center;margin-top:8px;display:none;}
.msg.show{display:block;}
.msg.ok{background:var(--vert-pale);border:1px solid var(--vert);color:var(--vert-dark);}
.msg.err{background:#FEE2E2;border:1px solid var(--rouge);color:var(--rouge-dark);}

/* ═══ CAISSIÈRES ═══ */
.cais-card{background:var(--blanc);border-radius:12px;padding:12px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);border-left:4px solid #1A6B3A;}
.cais-info{flex:1;}
.cais-pseudo{font-size:13px;font-weight:700;color:var(--dark);}
.cais-pin{font-size:11px;color:var(--mid);margin-top:3px;}

/* ═══ VENTE (SCAN) ═══ */
.scan-section{background:var(--blanc);border-radius:16px;padding:14px;margin-bottom:12px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.scan-section h3{font-size:13px;color:var(--rouge);font-weight:700;margin-bottom:10px;
  font-family:'Playfair Display',serif;}
.scan-row{display:flex;gap:8px;}
.scan-input{flex:1;background:var(--gris);border:1.5px solid var(--gris-dark);
  border-radius:10px;padding:10px 12px;color:var(--dark);font-size:14px;
  outline:none;font-family:'DM Sans',sans-serif;transition:border-color 0.2s;}
.scan-input:focus{border-color:var(--rouge);background:var(--blanc);}
.scan-input::placeholder{color:var(--gris-dark);}
.scan-btn{background:linear-gradient(135deg,#1A6B3A,#0F4526);
  border:none;border-radius:10px;padding:10px 14px;color:#fff;
  font-size:12px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;}
.scan-hint{font-size:10px;color:var(--gris-dark);margin-top:6px;}

.prod-preview{display:none;background:linear-gradient(135deg,rgba(26,107,58,0.08),rgba(20,92,48,0.05));
  border-radius:12px;padding:12px;margin-top:10px;border-left:4px solid var(--rouge);}
.prod-preview.show{display:flex;gap:10px;align-items:center;}
.prod-img{width:56px;height:56px;border-radius:10px;background:var(--gris);
  display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.prod-info{flex:1;}
.prod-name{font-size:13px;font-weight:700;color:var(--dark);}
.prod-id{font-size:10px;color:var(--mid);margin-top:2px;}
.prod-price{font-size:13px;color:var(--rouge);font-weight:700;margin-top:3px;}
.prod-stock{font-size:11px;margin-top:3px;}

.qty-row{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap;}
.qty-label{font-size:11px;color:var(--mid);font-weight:500;white-space:nowrap;}
.qty-input{width:70px;background:var(--gris);border:1.5px solid var(--gris-dark);
  border-radius:8px;padding:7px;color:var(--dark);font-size:15px;text-align:center;
  outline:none;font-family:'DM Sans',sans-serif;}
.qty-input:focus{border-color:var(--rouge);}
.subtotal{font-size:13px;color:var(--rouge);font-weight:700;flex:1;text-align:right;
  font-family:'Playfair Display',serif;}
.add-btn{width:100%;background:linear-gradient(135deg,var(--vert-light),var(--vert-dark));
  border:none;border-radius:10px;padding:10px;color:#fff;font-size:13px;
  font-weight:700;cursor:pointer;margin-top:8px;font-family:'DM Sans',sans-serif;
  box-shadow:0 3px 10px var(--shadow-v);}
.add-btn:disabled{background:var(--gris-dark);box-shadow:none;cursor:not-allowed;}

/* ═══ PANIER ═══ */
.cart-section{background:var(--blanc);border-radius:16px;padding:14px;margin-bottom:12px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.cart-section h3{font-size:13px;color:var(--vert-dark);font-weight:700;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Playfair Display',serif;}
.cart-count{background:var(--rouge);color:#fff;border-radius:20px;
  padding:2px 8px;font-size:10px;font-family:'DM Sans',sans-serif;}
.cart-empty{text-align:center;color:var(--gris-dark);font-size:12px;padding:16px 0;}
.cart-item{background:var(--gris);border-radius:10px;padding:10px;
  margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.cart-item-info{flex:1;}
.cart-item-name{font-size:12px;font-weight:700;color:var(--dark);}
.cart-item-total{font-size:12px;font-weight:700;color:var(--rouge);
  font-family:'Playfair Display',serif;white-space:nowrap;}
.cart-remove{background:none;border:none;color:var(--rouge);font-size:18px;cursor:pointer;}
.cart-total-bar{background:linear-gradient(135deg,#0F4526,#1A6B3A);
  border-radius:10px;padding:12px 14px;margin-top:8px;
  display:flex;justify-content:space-between;align-items:center;
  box-shadow:0 4px 14px var(--shadow-r);}
.cart-total-bar span{font-size:13px;color:rgba(255,255,255,0.8);font-weight:700;}
.cart-total-bar strong{font-size:20px;color:#fff;font-weight:700;
  font-family:'Playfair Display',serif;}

/* ═══ PAIEMENT MIXTE ═══ */
.pay-section{background:var(--blanc);border-radius:16px;padding:14px;margin-bottom:12px;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.pay-section h3{font-size:13px;color:var(--rouge);font-weight:700;margin-bottom:8px;
  font-family:'Playfair Display',serif;}
.pay-mix-row{display:flex;align-items:center;gap:8px;background:var(--gris);
  border-radius:10px;padding:10px;margin-bottom:8px;}
.pay-mix-icon{font-size:20px;flex-shrink:0;}
.pay-mix-label{font-size:12px;color:var(--mid);font-weight:700;width:110px;flex-shrink:0;}
.pay-mix-input{flex:1;background:var(--blanc);border-radius:8px;
  padding:7px;color:var(--dark);font-size:13px;outline:none;
  font-family:'DM Sans',sans-serif;transition:border-color 0.2s;}
.pay-mix-input:focus{outline:2px solid var(--rouge);}

.pay-status{text-align:center;font-size:12px;padding:8px;border-radius:8px;
  margin-bottom:10px;font-weight:500;}
.pay-quick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.pay-quick-btn{border-radius:20px;padding:5px 12px;font-size:10px;font-weight:700;
  cursor:pointer;font-family:'DM Sans',sans-serif;border:1.5px solid;transition:all 0.2s;}

.ref-input{width:100%;background:var(--gris);border:1.5px solid var(--gris-dark);
  border-radius:8px;padding:8px 12px;color:var(--dark);font-size:12px;outline:none;
  margin-bottom:8px;font-family:'DM Sans',sans-serif;}
.client-input{width:100%;background:var(--gris);border:1.5px solid var(--gris-dark);
  border-radius:8px;padding:8px 12px;color:var(--dark);font-size:12px;outline:none;
  margin-bottom:10px;font-family:'DM Sans',sans-serif;}
.ref-input:focus,.client-input:focus{border-color:var(--vert);background:var(--blanc);}

.validate-btn{width:100%;background:var(--gris-dark);border:none;border-radius:12px;
  padding:14px;color:var(--mid);font-size:14px;font-weight:700;cursor:not-allowed;
  font-family:'DM Sans',sans-serif;transition:all 0.3s;}
.validate-btn.ready{
  background:linear-gradient(135deg,var(--vert-light),var(--vert-dark));
  color:#fff;cursor:pointer;box-shadow:0 4px 14px var(--shadow-v);}
.validate-btn.ready:active{transform:scale(0.98);}

.scan-err{background:#FEE2E2;border:1px solid var(--rouge);border-radius:8px;
  padding:9px;color:var(--rouge-dark);font-size:12px;text-align:center;
  margin-top:8px;display:none;font-weight:500;}
.scan-err.show{display:block;}

/* ═══ SUCCESS ═══ */
.success-screen{display:none;text-align:center;padding:30px 16px;}
.success-screen.show{display:block;}
.success-icon{font-size:64px;margin-bottom:14px;animation:bounce 0.6s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes bounce{from{transform:scale(0)}to{transform:scale(1)}}
.success-screen h2{font-size:22px;color:var(--vert-dark);margin-bottom:6px;
  font-family:'Playfair Display',serif;}
.success-screen p{font-size:13px;color:var(--mid);margin-bottom:20px;}
.success-details{background:var(--blanc);border-radius:14px;padding:14px;
  text-align:left;margin-bottom:20px;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.success-details div{display:flex;justify-content:space-between;padding:6px 0;
  border-bottom:1px solid var(--gris);font-size:12px;}
.success-details div:last-child{border-bottom:none;}
.success-details span{color:var(--mid);}
.success-details strong{color:var(--dark);font-weight:700;}
.new-sale-btn{background:linear-gradient(135deg,#1A6B3A,#0F4526);
  border:none;border-radius:12px;padding:12px 28px;color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;
  box-shadow:0 4px 14px var(--shadow-r);}

/* ═══ MODAL ═══ */
.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(26,10,8,0.7);z-index:1000;align-items:center;
  justify-content:center;backdrop-filter:blur(4px);}
.overlay.show{display:flex;}
.modal{background:var(--blanc);border-radius:20px;padding:24px;text-align:center;
  max-width:280px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.modal h3{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:4px;
  font-family:'Playfair Display',serif;}
.modal p{font-size:11px;color:var(--mid);margin-bottom:14px;}
.modal img{width:170px;height:170px;border-radius:12px;border:3px solid var(--rouge);margin-bottom:10px;}
.modal-url{font-size:9px;color:var(--mid);background:var(--gris);border-radius:6px;
  padding:6px;word-break:break-all;margin-bottom:12px;}
.modal-close{background:linear-gradient(135deg,#1A6B3A,#0F4526);
  border:none;border-radius:10px;padding:10px;color:#fff;font-size:13px;
  font-weight:700;cursor:pointer;width:100%;font-family:'DM Sans',sans-serif;}

.confirm-box{background:var(--blanc);border-radius:20px;padding:22px;text-align:center;
  max-width:280px;width:90%;border-top:5px solid var(--rouge);
  box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.confirm-box h3{font-size:15px;font-weight:700;color:var(--rouge);margin-bottom:8px;
  font-family:'Playfair Display',serif;}
.confirm-box p{font-size:11px;color:var(--mid);margin-bottom:18px;}
.confirm-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.btn-cancel{background:var(--gris);border:none;border-radius:10px;padding:10px;
  color:var(--dark);font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;}
.btn-del{background:linear-gradient(135deg,#1A6B3A,#0F4526);
  border:none;border-radius:10px;padding:10px;color:#fff;font-size:12px;
  font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;}

.empty{text-align:center;color:var(--gris-dark);font-size:12px;padding:24px;}

/* ═══ FOOTER ═══ */

/* ═══ SEARCH AUTOCOMPLETE ═══ */
.search-autocomplete{position:relative;margin-bottom:10px;}
.search-autocomplete input{
  width:100%;background:var(--gris);border:1.5px solid var(--gris-dark);
  border-radius:10px;padding:10px 14px 10px 36px;color:var(--dark);font-size:13px;
  outline:none;font-family:'DM Sans',sans-serif;transition:border-color 0.2s;}
.search-autocomplete input:focus{border-color:var(--rouge);background:var(--blanc);}
.search-autocomplete input::placeholder{color:var(--gris-dark);}
.search-autocomplete .search-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:14px;pointer-events:none;}
.suggestions{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--blanc);border:1.5px solid var(--gris-dark);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:200;max-height:220px;overflow-y:auto;
  display:none;}
.suggestions.show{display:block;}
.suggestion-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;
  border-bottom:1px solid var(--gris);transition:background 0.15s;}
.suggestion-item:last-child{border-bottom:none;}
.suggestion-item:hover{background:var(--gris);}
.suggestion-item:active{background:var(--vert-pale);}
.sug-icon{font-size:18px;flex-shrink:0;}
.sug-info{flex:1;}
.sug-name{font-size:13px;font-weight:700;color:var(--dark);}
.sug-detail{font-size:10px;color:var(--mid);margin-top:1px;}
.sug-price{font-size:12px;font-weight:700;color:var(--rouge);text-align:right;flex-shrink:0;}
.sug-stock-ok{color:var(--vert);}
.sug-stock-low{color:#D97706;}
.sug-stock-out{color:var(--rouge);}
.selected-product-bar{
  background:linear-gradient(135deg,rgba(26,107,58,0.08),rgba(20,92,48,0.05));
  border-radius:10px;padding:10px 14px;margin-bottom:10px;
  border-left:4px solid var(--rouge);display:none;}
.selected-product-bar.show{display:flex;align-items:center;gap:10px;}
.spb-icon{font-size:24px;}
.spb-info{flex:1;}
.spb-name{font-size:13px;font-weight:700;color:var(--dark);}
.spb-detail{font-size:11px;color:var(--mid);margin-top:2px;}
.spb-clear{background:none;border:none;color:var(--rouge);font-size:18px;cursor:pointer;}

/* ═══ PHOTO UPLOAD ═══ */
.photo-upload-btn{
  background:var(--gris);border:1.5px dashed var(--gris-dark);
  border-radius:8px;padding:6px 10px;color:var(--mid);
  font-size:11px;cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:all 0.2s;text-align:center;display:block;width:100%;margin-top:6px;
}
.photo-upload-btn:hover{border-color:var(--rouge);color:var(--rouge);}
.photo-upload-btn.has-photo{border-color:var(--vert);color:var(--vert);background:var(--vert-pale);}
.cat-img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;}

.photo-modal{background:var(--blanc);border-radius:20px;padding:22px;
  text-align:center;max-width:300px;width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.photo-modal h3{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:4px;
  font-family:'Playfair Display',serif;}
.photo-modal p{font-size:11px;color:var(--mid);margin-bottom:16px;}
.photo-preview-img{width:120px;height:120px;border-radius:12px;object-fit:cover;
  border:3px solid var(--rouge);margin-bottom:12px;display:none;}
.photo-spinner{width:28px;height:28px;border:3px solid var(--gris-dark);
  border-top-color:var(--rouge);border-radius:50%;
  animation:spin 0.8s linear infinite;margin:16px auto;display:none;}
.photo-status{font-size:12px;color:var(--mid);margin-bottom:12px;min-height:18px;}

.app-footer{
  text-align:center;padding:20px 16px;font-size:10px;color:var(--gris-dark);
  border-top:1px solid var(--gris-dark);margin-top:8px;
  background:var(--blanc);
}
.app-footer span{color:var(--rouge);font-weight:700;}