/* =========================================================
   CAISSEV2 — STYLE INCROYABLE (iPad first)
   Palette: bleu #7595c4 / beige #e4e9d8
   ========================================================= */

/* =========================
   TOKENS / THEME
   ========================= */
:root{
  --blue:#7595c4;
  --blue-2:#5f7fb4;
  --beige:#e4e9d8;
  --bg: var(--beige);

  --text:#1f2430;
  --muted: rgba(31,36,48,.72);

  --card: rgba(255,255,255,.86);
  --card-solid:#fff;

  --border: 1px solid rgba(10,10,20,.10);
  --border-strong: 2px solid rgba(10,10,20,.12);

  --shadow-xs: 0 6px 16px rgba(0,0,0,.06);
  --shadow-sm: 0 10px 24px rgba(0,0,0,.08);
  --shadow-md: 0 18px 40px rgba(0,0,0,.12);
  --shadow-lg: 0 28px 60px rgba(0,0,0,.16);

  --radius-xs: 12px;
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 28px;

  --ring: 0 0 0 5px rgba(117,149,196,.22);
  --ring-strong: 0 0 0 6px rgba(117,149,196,.28);

  --success:#27ae60;
  --danger:#e74c3c;
  --warn:#f1c40f;

  --tap: .985; /* micro scale tap */
}

/* =========================
   RESET / BASE
   ========================= */
*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(117,149,196,.25), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(228,233,216,.92), rgba(228,233,216,1));
  color:var(--text);
}

/* Type scale */
h1,h2,h3,h4,h5{
  margin:0 0 12px;
  color:var(--text);
  font-weight:1000;
  letter-spacing:-.02em;
}
h1{ font-size:28px; }
h2{ font-size:24px; }
h3{ font-size:20px; }
p{ margin:0 0 10px; color:var(--muted); font-weight:700; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
hr{
  border:0; height:1px;
  background: rgba(0,0,0,.10);
  margin:14px 0;
}

/* Layout container */
.container{
  padding:18px;
  text-align:center;
  max-width:1200px;
  margin:0 auto;
}

/* Helpers */
.hidden{ display:none!important; }
.muted{ opacity:.75; font-weight:800; }
.center{ text-align:center; }
.right{ text-align:right; }

/* =========================
   GLOBAL COMPONENTS
   ========================= */

/* Cards (reusable) */
.card{
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card-solid{
  background: var(--card-solid);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-pad{ padding:16px; }

/* Buttons (generic) */
button,.button,.btn-connect{
  appearance:none;
  border:none;
  border-radius: 18px;
  padding: 12px 14px;
  font-weight:1000;
  font-size:16px;
  cursor:pointer;
  background: rgba(0,0,0,.08);
  color: var(--text);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  transition: transform .06s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
button:active,.button:active,.btn-connect:active{ transform: scale(var(--tap)); }
button:hover,.button:hover,.btn-connect:hover{ background: rgba(0,0,0,.10); }

/* Primary */
.button.primary, button.primary, .btn-connect{
  background: var(--blue);
  color:#fff;
  box-shadow: 0 18px 32px rgba(117,149,196,.35);
}
.button.primary:hover, button.primary:hover, .btn-connect:hover{ background: var(--blue-2); }

/* Danger */
.button.danger, button.danger{
  background: rgba(231,76,60,.14);
  color: #b22222;
  box-shadow: 0 14px 24px rgba(231,76,60,.14);
}
.button.danger:hover, button.danger:hover{ background: rgba(231,76,60,.18); }

/* Link-button */
.btn-link{
  background: transparent;
  box-shadow:none;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.10);
}
.btn-link:hover{ background: rgba(255,255,255,.65); }

/* Inputs */
input, select, textarea{ font-family: inherit; }
input[type="text"], input[type="password"], input[type="number"], select, textarea{
  width:100%;
  padding:14px 14px;
  border-radius: 18px;
  border: var(--border-strong);
  background: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  transition: box-shadow .16s ease, border-color .16s ease, transform .06s ease, background .16s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: rgba(117,149,196,.95);
  box-shadow: var(--ring);
}
input:active, select:active{ transform: scale(.997); }

/* Labels */
label{
  display:block;
  text-align:left;
  font-weight:1000;
  margin:0 0 7px;
}

/* =========================
   HEADER
   ========================= */
.main-header{
  position: sticky;
  top:0;
  z-index:999;
  padding:12px 0;
  background: linear-gradient(180deg, rgba(117,149,196,.96), rgba(117,149,196,.90));
  border-bottom: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}
.header-content.centered-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}
.logo-link{ display:inline-flex; }
.logo-header{
  width:78px;height:78px;
  object-fit:cover;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}

/* =========================
   HOME (tiles legacy)
   ========================= */
.welcome-title{
  text-align:center;
  color: var(--text);
  font-size: 34px;
  margin: 26px 0 8px;
}
.welcome-subtitle{
  text-align:center;
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 18px;
  font-weight: 800;
}
.tile-menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:18px;
}
.tile-link{
  width: 220px;
  padding: 18px 16px;
  border-radius: var(--radius-md);
  color:#fff;
  background: linear-gradient(135deg, rgba(117,149,196,.98), rgba(95,127,180,.96));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 46px rgba(117,149,196,.28);
  font-weight: 1000;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.tile-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 28px 60px rgba(117,149,196,.34);
  filter: brightness(1.02);
}
.tile-link:active{ transform: scale(var(--tap)); }
.logout-link{
  background: linear-gradient(135deg, rgba(231,76,60,.98), rgba(192,57,43,.98));
  box-shadow: 0 22px 46px rgba(231,76,60,.20);
}

/* =========================
   LOGIN
   ========================= */
.main-centered{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: calc(100vh - 120px);
  padding: 18px;
}
.login-container{
  width:100%;
  max-width: 430px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.88);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align:center;
}
.login-container h2{ margin-bottom: 14px; font-size: 26px; }
.login-container form{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.login-container input{ border-radius: 18px; }

/* =========================
   ALERTS
   ========================= */
.confirmation, .error-message{
  max-width: 860px;
  margin: 12px auto;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-weight: 1000;
  text-align:center;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow-sm);
}
.confirmation{
  background: rgba(39,174,96,.14);
  color: #1f7a44;
  border-color: rgba(39,174,96,.28);
}
.error-message{
  background: rgba(231,76,60,.14);
  color: #b22222;
  border-color: rgba(231,76,60,.28);
}

/* =========================
   COMMANDE / POPUP
   ========================= */
#popup{
  display:none;
  position:fixed;
  inset: 10% auto auto 50%;
  transform: translateX(-50%);
  width: min(780px, 94vw);
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(117,149,196,.40);
  border-radius: var(--radius-lg);
  padding: 16px;
  z-index: 9999;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-height: 86vh;
  overflow: auto;
}
.close-btn{
  position: sticky;
  top:0;
  float:right;
  margin-left:auto;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius: 16px;
  background: rgba(117,149,196,.12);
  border: 1px solid rgba(117,149,196,.22);
  color: var(--blue);
  font-weight:1000;
  cursor:pointer;
}
.close-btn:active{ transform: scale(var(--tap)); }

/* Tabs */
.tabs{
  display:flex;
  gap:10px;
  margin: 10px 0 10px;
}
.tabs button{
  flex:1;
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: none;
}
.tabs button.active{
  background: rgba(117,149,196,.16);
  border-color: rgba(117,149,196,.35);
  color: var(--text);
}
.tab-content{
  display:none;
  background: rgba(250,250,250,.70);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-md);
  padding: 12px;
}
.tab-content.active{ display:block; }

/* Notification */
#notif{
  display:none;
  padding: 12px 14px;
  background: rgba(39,174,96,.14);
  color: #1f7a44;
  border: 1px solid rgba(39,174,96,.26);
  margin: 10px 0;
  border-radius: var(--radius-md);
  text-align:center;
  font-weight:1000;
}

/* Cat buttons + search */
.cat-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.cat-btn{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  font-weight: 1000;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  transition: transform .06s ease, background .16s ease, border-color .16s ease;
}
.cat-btn:hover{ background: rgba(255,255,255,.88); }
.cat-btn.active{
  background: rgba(117,149,196,.16);
  border-color: rgba(117,149,196,.38);
}
.cat-btn:active{ transform: scale(var(--tap)); }

.search-box{
  display:flex;
  justify-content:center;
  margin-bottom: 12px;
}
.search-box input{ max-width: 420px; }

/* Produits */
.produit-group{ display:none; }
.produit-group:first-of-type{ display:block; }

.produit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin: 6px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 1000;
  cursor:pointer;
  box-shadow: 0 14px 24px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}
.produit:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.10);
  filter: brightness(1.02);
}
.produit:active{ transform: scale(var(--tap)); }

/* Liste temporaire */
.temp-list{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.temp-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-xs);
  font-weight: 900;
}
.temp-list button{
  width:42px;height:42px;
  border-radius: 16px;
  background: rgba(231,76,60,.14);
  color:#b22222;
  box-shadow:none;
}

/* =========================
   POPUP SOUS-PRODUITS
   ========================= */
.popup-overlay{
  position:fixed;
  inset:0;
  background: rgba(10,10,20,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 10000;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.popup-inner{
  width: min(520px, 92vw);
  background: rgba(255,255,255,.92);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 16px;
  text-align:center;
  position:relative;
}
.close-btn-popup{
  position:absolute;
  top:12px; right:14px;
  width:42px;height:42px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(117,149,196,.12);
  border: 1px solid rgba(117,149,196,.22);
  color: var(--blue);
  cursor:pointer;
}
.close-btn-popup:active{ transform: scale(var(--tap)); }

.popup-inner input[type="checkbox"]{ display:none; }
.popup-inner label{
  display:inline-block;
  margin: 8px 6px;
  cursor:pointer;
}
.popup-inner label span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 2px solid rgba(117,149,196,.55);
  background: rgba(255,255,255,.76);
  font-weight: 1000;
  box-shadow: 0 12px 22px rgba(0,0,0,.06);
  transition: transform .06s ease, background .16s ease, box-shadow .16s ease;
}
.popup-inner label span:active{ transform: scale(var(--tap)); }
.popup-inner input[type="checkbox"]:checked + span{
  background: rgba(117,149,196,.18);
  box-shadow: 0 18px 34px rgba(117,149,196,.22);
}

/* =========================================================
   ZONES PLAN (Commande) — #zone + #cmd_canvas + .table
   Objectif : responsive + pas de coupe + même DA
   ========================================================= */
#zone{
  width:100%;
  max-width:1100px;                 /* desktop normal */
  margin: 10px auto 18px;
  position:relative;

  height:560px;                     /* hauteur de référence */
  border-radius: var(--radius-lg);
  border: 2px dashed rgba(0,0,0,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.35)),
    radial-gradient(900px 520px at 20% 20%, rgba(117,149,196,.16), transparent 55%);
  box-shadow: var(--shadow-md);

  overflow: visible;                /* IMPORTANT : pas de coupe */
  touch-action:none;                /* drag/scroll mieux sur tablette */
}

#cmd_canvas{
  position:relative;
  width:1100px;                     /* taille “référence” */
  height:560px;
  transform-origin: top left;
  will-change: transform;
}

/* tables (commande.php) */
.table{
  position:absolute;
  width:82px;height:82px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(117,149,196,.98), rgba(95,127,180,.96));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight: 1000;
  padding: 6px;
  cursor:pointer;
  user-select:none;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
  transition: transform .10s ease, filter .18s ease;
}
.table:hover{ filter: brightness(1.02); }
.table:active{ transform: scale(var(--tap)); }
.table.ouverte{
  background: linear-gradient(135deg, rgba(39,174,96,.96), rgba(25,145,80,.96));
}

@media (max-width:900px){
  #zone{ height:420px; }
}
@media (max-width:768px){
  .table{ width:66px; height:66px; font-size:12px; }
}
@media (max-width:600px){
  #zone{ height:340px; }
}

/* =========================
   PAIEMENT UI (payui-*) — in commande.php
   ========================= */
.payui{
  background: rgba(255,255,255,.90);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-md);
}
.payui-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.payui-total,.payui-rest{
  font-weight:1000;
  font-size:18px;
  background: rgba(117,149,196,.12);
  border: 1px solid rgba(117,149,196,.25);
  padding: 10px 12px;
  border-radius: 999px;
}
.payui-bar{
  width:100%;
  height:12px;
  border-radius:999px;
  background: rgba(0,0,0,.10);
  overflow:hidden;
  margin: 10px 0 6px;
}
#pay_bar_fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(117,149,196,.95), rgba(95,127,180,.95));
  transition: width .2s ease;
}
.payui-hint{
  font-weight: 900;
  opacity:.80;
  margin-bottom: 10px;
}
.payui-form label{ font-weight:1000; margin: 10px 0 6px; }
.payui-form input[type="number"]{ border-radius: 18px; }


.payui-quick{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
  margin: 12px 0;
}
.payui-mini{
  border-radius: 18px;
  padding: 10px 12px;
  font-weight: 1000;
  background: rgba(0,0,0,.08);
  box-shadow: 0 12px 20px rgba(0,0,0,.06);
}
.payui-mini.primary{
  background: var(--blue);
  color:#fff;
  box-shadow: 0 18px 34px rgba(117,149,196,.30);
}
.payui-mini.danger{
  background: rgba(231,76,60,.14);
  color:#b22222;
}

.payui-fields{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
}
.payui-field input{ border-radius: 18px; }

.payui-sum{
  margin-top:12px;
  font-weight: 1000;
  opacity:.88;
  background: rgba(250,250,250,.75);
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 10px 12px;
}

.payui-paybtn{
  width:100%;
  margin-top: 12px;
  padding: 16px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 1000;
  background: linear-gradient(135deg, rgba(117,149,196,.98), rgba(95,127,180,.96));
  color:#fff;
  box-shadow: 0 22px 44px rgba(117,149,196,.34);
}
.payui-paybtn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

/* Change box */
.payui-change{
  margin: 10px 0 12px;
  background: rgba(117,149,196,.10);
  border: 1px solid rgba(117,149,196,.20);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.payui-change-title{ font-weight:1000; margin-bottom: 10px; }
.payui-change-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:10px;
}
.payui-give{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }

/* =========================================================
   PLAN TABLE "DA" (pt-*) — plan_table.php
   ========================================================= */
.pt-wrap{ max-width:1100px; margin:0 auto; padding:16px; }
.pt-card{
  background: rgba(255,255,255,.88);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pt-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pt-title{ font-size: 28px; }
.pt-sub{ margin: 6px 0 0; opacity:.78; font-weight:900; }
.pt-controls{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.pt-btn{ border-radius:18px; }
.pt-btn.primary{ background: var(--blue); color:#fff; box-shadow: 0 18px 32px rgba(117,149,196,.30); }

/* Plan container + canvas : no crop */
.pt-zone{
  width:100%;
  height:560px;
  position:relative;
  border-radius: var(--radius-lg);
  border: 2px dashed rgba(0,0,0,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.30)),
    radial-gradient(900px 520px at 20% 20%, rgba(117,149,196,.16), transparent 55%);
  overflow: visible;                /* IMPORTANT : pas de coupe */
  margin-top: 14px;
  box-shadow: var(--shadow-md);
  touch-action:none;
}

.pt-canvas{
  position:relative;
  width:1100px;
  height:560px;
  transform-origin: top left;
  will-change: transform;
}

.pt-table-wrap{ position:absolute; width:96px; height:110px; }
.pt-table{
  position:absolute;
  left:8px; top:22px;
  width:80px; height:80px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:#fff;
  font-weight: 1000;
  padding:6px;
  cursor:grab;
  user-select:none;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
  background: linear-gradient(135deg, rgba(117,149,196,.98), rgba(95,127,180,.96));
}
.pt-table:active{ cursor:grabbing; transform: scale(var(--tap)); }
.pt-table.ouverte{
  background: linear-gradient(135deg, rgba(39,174,96,.96), rgba(25,145,80,.96));
}
.pt-table[contenteditable="true"]:focus{
  outline:none;
  box-shadow: var(--ring-strong), 0 18px 34px rgba(0,0,0,.18);
}
.pt-del{
  position:absolute;
  right:0; top:0;
  width:30px; height:30px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(231,76,60,.92);
  color:#fff;
  border: 2px solid rgba(255,255,255,.70);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}
.pt-del:active{ transform: scale(var(--tap)); }
.pt-hint{ text-align:center; opacity:.78; font-weight:900; margin-top:10px; }

/* =========================
   KDS (Bar/Cuisine) - kds-*
   ========================= */
.kds-wrap{ max-width:1100px; margin:0 auto; padding:16px; }
.kds-card{
  background: rgba(255,255,255,.88);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.kds-title{ font-size: 28px; }
.kds-tabs{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.kds-tabbtn{
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(117,149,196,.12);
  border: 1px solid rgba(117,149,196,.25);
  box-shadow: 0 12px 20px rgba(0,0,0,.06);
  font-weight: 1000;
}
.kds-tabbtn:active{ transform: scale(var(--tap)); }

.kds-tab{ display:none; margin-top: 14px; }
.kds-tab.active{ display:block; }

.kds-empty{
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(250,250,250,.75);
  border: 1px dashed rgba(0,0,0,.18);
  font-weight: 1000;
  opacity:.82;
}

.kds-order{
  background: rgba(255,255,255,.92);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-md);
  margin-bottom: 14px;
}
.kds-orderhead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.kds-ordertitle{ font-weight:1000; font-size:18px; }
.kds-orderbadge{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(117,149,196,.12);
  border: 1px solid rgba(117,149,196,.25);
  font-weight: 1000;
}

.kds-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 10px;
}
.kds-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.kds-line:last-child{ border-bottom:none; }
.kds-lab{ font-size:16px; font-weight:900; }
.kds-acts{ display:flex; gap:10px; flex-wrap:wrap; }

.kds-btn{
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(0,0,0,.08);
  box-shadow: 0 12px 20px rgba(0,0,0,.06);
}
.kds-btn.primary{
  background: var(--blue);
  color:#fff;
  box-shadow: 0 18px 34px rgba(117,149,196,.28);
}
.kds-btn:active{ transform: scale(var(--tap)); }

/* Save categorie: alert block */
.sp-alert{
  padding:12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 1000;
  box-shadow: var(--shadow-sm);
  margin: 12px 0;
}
.sp-alert-error{
  background: rgba(231,76,60,.14);
  border-color: rgba(231,76,60,.28);
  color: #b22222;
}

/* =========================================================
   MENU ADMIN (ma-*) — UI premium
   ========================================================= */
.ma-page{max-width:1100px;margin:0 auto;padding:16px}

/* Hero */
.ma-hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(117,149,196,.35), rgba(228,233,216,.75));
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  margin-bottom:14px;
}
.ma-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.08);
  font-weight:1000;letter-spacing:.08em;font-size:12px;
}
.ma-hero h1{margin:8px 0 6px;font-size:30px;font-weight:1000}
.ma-hero p{margin:0;opacity:.75;font-weight:800}
.ma-hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Buttons */
.ma-btn{
  border:none;
  border-radius:16px;
  padding:12px 14px;
  font-weight:1000;
  cursor:pointer;
  background:rgba(0,0,0,.08);
  color:#000;
  text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  transition:transform .06s ease, background .2s ease, box-shadow .2s ease;
}
.ma-btn:active{transform:scale(.99)}
.ma-btn-primary{
  background:#7595c4;color:#fff;
  box-shadow:0 14px 26px rgba(117,149,196,.35);
}
.ma-btn-soft{
  background:rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.08);
}
.ma-btn-ghost{ background:rgba(0,0,0,.06); }
.ma-btn-danger{
  background:rgba(231,76,60,.14);
  color:#b22222;
}

/* Alert */
.ma-alert{
  padding:12px 14px;border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  font-weight:1000;
  box-shadow:0 12px 26px rgba(0,0,0,.08);
  margin-bottom:14px;
}
.ma-alert-error{
  background:rgba(231,76,60,.14);
  border-color:rgba(231,76,60,.28);
  color:#b22222;
}

/* Grid categories */
.ma-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

/* Category card */
.ma-cat{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.08);
  border-radius:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  overflow:hidden;
}
.ma-cat-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px;
  background:linear-gradient(180deg, rgba(117,149,196,.12), rgba(255,255,255,.0));
}
.ma-cat-title{display:flex;gap:12px;align-items:center}
.ma-cat-icon{
  width:44px;height:44px;border-radius:16px;
  background:rgba(117,149,196,.16);
  border:1px solid rgba(117,149,196,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.ma-cat-name{font-weight:1000;font-size:18px}
.ma-cat-meta{opacity:.75;font-weight:800;font-size:13px;margin-top:2px}
.ma-cat-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Rename collapsible */
.ma-rename{
  padding:0 14px 14px;
  display:block;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}
.ma-rename.is-open{max-height:220px}
.ma-rename-row{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:10px;
}
.ma-rename-row input{
  flex:1;
  min-width:240px;
  width:100%;
  padding:14px 14px;
  border-radius:18px;
  border:2px solid rgba(0,0,0,.10);
  font-size:18px;
  font-weight:900;
}
.ma-rename-row input:focus{
  outline:none;
  border-color:rgba(117,149,196,.95);
  box-shadow:0 0 0 5px rgba(117,149,196,.20);
}
.ma-mini{margin-top:8px;font-size:13px;font-weight:800;opacity:.75}

/* Empty */
.ma-empty{
  margin:0 14px 14px;
  padding:14px;
  border-radius:18px;
  background:#fafafa;
  border:1px dashed rgba(0,0,0,.16);
  font-weight:900;
  opacity:.75;
}

/* Products list */
.ma-products{padding:0 14px 14px}
.ma-prod{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:12px;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  margin-top:12px;
}
.ma-prod-main{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.ma-prod-name{font-weight:900}
.ma-prod-pills{display:flex;gap:8px;flex-wrap:wrap}
.ma-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 10px;border-radius:999px;
  background:rgba(117,149,196,.12);
  border:1px solid rgba(117,149,196,.25);
  font-weight:1000;
}
.ma-pill-soft{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.08);
}
.ma-prod-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Sous produits chips */
.ma-subwrap{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(0,0,0,.12);
}
.ma-subchip{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 18px rgba(0,0,0,.06);
  font-weight:900;
}
.ma-subname{opacity:.9}
.ma-subprice{
  padding:6px 10px;border-radius:999px;
  background:rgba(117,149,196,.12);
  border:1px solid rgba(117,149,196,.22);
  font-weight:1000;
}
.ma-subbtn{
  width:32px;height:32px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  background:rgba(231,76,60,.14);
  color:#b22222;
  font-weight:1000;
}
.ma-subbtn:active{transform:scale(.99)}

/* Responsive */
@media(max-width:700px){
  .ma-hero h1{font-size:22px}
  .ma-cat-name{font-size:16px}
}

/* =========================================================
   SAVE PRODUIT (sp-*) — INCROYABLE / tactile / premium
   (version unique : l'ancien doublon a été supprimé)
   ========================================================= */
.sp-page{max-width:1100px;margin:0 auto;padding:16px}

/* HERO ultra premium */
.sp-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:18px;
  border-radius:26px;
  background:
    radial-gradient(900px 260px at 15% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(117,149,196,.40), rgba(228,233,216,.85));
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 22px 54px rgba(0,0,0,.12);
  overflow:hidden;
  margin-bottom:14px;
}
.sp-hero:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 200px at 85% 10%, rgba(117,149,196,.20), transparent 65%),
    radial-gradient(380px 180px at 10% 80%, rgba(0,0,0,.07), transparent 70%);
  pointer-events:none;
}
.sp-hero-title{position:relative}
.sp-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  font-weight:1000;
  letter-spacing:.10em;
  font-size:12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sp-hero-title h1{
  margin:10px 0 6px;
  font-size:34px;
  font-weight:1000;
  letter-spacing:-.02em;
}
.sp-hero-title p{
  margin:0;
  opacity:.78;
  font-weight:850;
}
.sp-hero-actions{
  position:relative;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Cards glass */
.sp-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.08);
  border-radius:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow:hidden;
}
.sp-form{padding:16px}

/* Grid */
.sp-grid{
  display:grid;
  grid-template-columns:1.6fr .7fr .7fr;
  gap:12px;
}
@media(max-width:980px){.sp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.sp-grid{grid-template-columns:1fr}}

.sp-field label{
  display:block;
  font-weight:1000;
  margin:0 0 7px;
  letter-spacing:-.01em;
}
.sp-field input,
.sp-field select{
  width:100%;
  padding:14px 14px;
  border-radius:18px;
  border:2px solid rgba(0,0,0,.10);
  background:#fff;
  font-size:18px;
  font-weight:900;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .05s ease,
    background .15s ease;
}
.sp-field input::placeholder{opacity:.55;font-weight:800}
.sp-field input:focus,
.sp-field select:focus{
  outline:none;
  border-color:rgba(117,149,196,.95);
  box-shadow:0 0 0 6px rgba(117,149,196,.18);
  background:linear-gradient(180deg, rgba(117,149,196,.06), #fff);
}
.sp-field input:active,
.sp-field select:active{transform:scale(.995)}
.sp-field-wide{grid-column:1 / -1}
.sp-mini{
  margin-top:7px;
  font-size:13px;
  font-weight:850;
  opacity:.74;
}

/* Divider */
.sp-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.10), transparent);
  margin:16px 0;
}

/* TVA chips */
.sp-chips{display:flex;gap:10px;flex-wrap:wrap}
.sp-chip input{display:none}
.sp-chip span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.92);
  font-weight:1000;
  cursor:pointer;
  min-width:88px;
  transition:
    transform .06s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease;
}
.sp-chip span:active{transform:scale(.99)}
.sp-chip input:checked + span{
  border-color:rgba(117,149,196,.95);
  background:
    radial-gradient(120px 40px at 50% 0%, rgba(255,255,255,.70), rgba(255,255,255,0)),
    rgba(117,149,196,.16);
  box-shadow:0 14px 30px rgba(117,149,196,.22);
}

/* Switch premium */
.sp-switch{
  display:flex;
  gap:12px;
  align-items:center;
  padding:16px 14px;
  border-radius:22px;
  background:rgba(117,149,196,.10);
  border:1px solid rgba(117,149,196,.22);
  cursor:pointer;
  user-select:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.sp-switch input{display:none}
.sp-switch-ui{
  width:60px;height:36px;border-radius:999px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(0,0,0,.10);
  position:relative;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.14);
  flex:0 0 auto;
}
.sp-switch-ui:after{
  content:"";
  width:28px;height:28px;border-radius:999px;
  background:linear-gradient(180deg, #fff, rgba(255,255,255,.86));
  position:absolute;top:3px;left:3px;
  box-shadow:0 12px 22px rgba(0,0,0,.20);
  transition:transform .18s ease;
}
.sp-switch input:checked + .sp-switch-ui{ background:rgba(117,149,196,.96); }
.sp-switch input:checked + .sp-switch-ui:after{ transform:translateX(24px); }
.sp-switch-text{ font-weight:1000; line-height:1.15; }
.sp-switch-text small{
  display:block;
  font-weight:850;
  opacity:.75;
  margin-top:6px;
}

/* Sub card */
.sp-subcard{
  margin-top:12px;
  padding:14px;
  border-radius:24px;
  background:
    radial-gradient(700px 220px at 10% 0%, rgba(117,149,196,.10), transparent 60%),
    #fafafa;
  border:1px dashed rgba(0,0,0,.18);
}
.sp-subhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.sp-subtitle{font-size:18px;font-weight:1000}

/* sub rows */
.sp-sublist{display:flex;flex-direction:column;gap:10px}
.sp-subrow{
  display:grid;
  grid-template-columns: 1fr 200px 50px;
  gap:10px;
  align-items:center;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  padding:10px;
  box-shadow:0 14px 28px rgba(0,0,0,.08);
}
@media(max-width:700px){
  .sp-subrow{grid-template-columns:1fr 1fr 50px}
}
.sp-subrow input{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:2px solid rgba(0,0,0,.10);
  font-size:16px;
  font-weight:900;
  background:#fff;
}
.sp-subrow input:focus{
  outline:none;
  border-color:rgba(117,149,196,.95);
  box-shadow:0 0 0 5px rgba(117,149,196,.18);
}

/* Buttons */
.sp-btn{
  border:none;
  border-radius:16px;
  padding:12px 14px;
  font-weight:1000;
  cursor:pointer;
  background:rgba(0,0,0,.08);
  color:#000;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .06s ease, box-shadow .18s ease, background .2s ease;
}
.sp-btn:hover{box-shadow:0 14px 26px rgba(0,0,0,.10)}
.sp-btn:active{transform:scale(.99)}
.sp-btn-primary{
  background:#7595c4;
  color:#fff;
  box-shadow:0 18px 34px rgba(117,149,196,.30);
}
.sp-btn-primary:hover{box-shadow:0 22px 44px rgba(117,149,196,.36)}
.sp-btn-soft{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.08);
}
.sp-btn-big{
  padding:14px 18px;
  font-size:18px;
  border-radius:18px;
}

/* Icon delete */
.sp-iconbtn{
  width:50px;height:50px;border-radius:18px;
  border:none;
  cursor:pointer;
  background:rgba(231,76,60,.14);
  color:#b22222;
  font-weight:1000;
  transition:transform .06s ease;
}
.sp-iconbtn:active{transform:scale(.99)}

/* Sticky actions */
.sp-actions{
  position:sticky;
  bottom:10px;
  margin-top:14px;
  padding:12px;
  border-radius:22px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 24px 56px rgba(0,0,0,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.sp-preview{flex:1}
.sp-preview-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(117,149,196,.12);
  border:1px solid rgba(117,149,196,.25);
  font-weight:1000;
}
.sp-actions-right{display:flex;gap:10px;flex-wrap:wrap}

/* Alert */
.sp-alert{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  font-weight:1000;
  box-shadow:0 16px 36px rgba(0,0,0,.10);
  margin-bottom:14px;
}
.sp-alert-error{
  background:rgba(231,76,60,.14);
  border-color:rgba(231,76,60,.28);
  color:#b22222;
}

/* Responsive */
@media(max-width:700px){
  .sp-hero-title h1{font-size:24px}
  .sp-actions{bottom:0;border-radius:18px}
}

/* =========================================================
   HOME (index.php) — home-*
   ========================================================= */
.home-page{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}
.home-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(117,149,196,.35), rgba(228,233,216,.75));
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 16px 36px rgba(0,0,0,.10);
}
.home-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(0,0,0,.08);
  font-weight:1000;
  letter-spacing:.08em;
  font-size:12px;
}
.home-title{ margin:8px 0 6px; font-size:32px; font-weight:1000; }
.home-subtitle{ margin:0; opacity:.78; font-weight:800; }
.home-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.home-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
  color:#000;
  font-weight:1000;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.home-pill:hover{
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 26px rgba(0,0,0,.10);
}
.home-pill:active{ transform:scale(.99); }

.home-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

.home-card{
  display:block;
  text-decoration:none;
  color:#000;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:transform .08s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}

.home-card:before{
  content:"";
  position:absolute;
  inset:-80px -120px auto auto;
  width:240px;
  height:240px;
  border-radius:999px;
  background:rgba(117,149,196,.16);
  filter: blur(2px);
}

.home-card:hover{
  transform: translateY(-2px);
  box-shadow:0 22px 46px rgba(0,0,0,.14);
}
.home-card:active{ transform: translateY(0); }

.home-card-icon{ font-size:34px; line-height:1; margin-bottom:10px; }
.home-card-title{ font-weight:1000; font-size:18px; margin-bottom:6px; }
.home-card-desc{
  opacity:.78;
  font-weight:800;
  font-size:14px;
  line-height:1.35;
}
.home-card-tag{
  display:inline-flex;
  margin-top:12px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(117,149,196,.12);
  border:1px solid rgba(117,149,196,.25);
  font-weight:1000;
  font-size:12px;
}

.home-bottom{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

.home-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  background:rgba(231,76,60,.14);
  color:#b22222;
  font-weight:1000;
  text-decoration:none;
  border:1px solid rgba(231,76,60,.25);
}

@media (max-width:980px){
  .home-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:700px){
  .home-hero{ align-items:flex-start; flex-direction:column; }
  .home-hero-actions{ justify-content:flex-start; }
  .home-title{ font-size:26px; }
  .home-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   HOME stats + history (index.php) — home-stats / home-history
   ========================================================= */
.home-stats{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.home-stat{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:14px;
  box-shadow:0 16px 34px rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
}
.home-stat:before{
  content:"";
  position:absolute;
  inset:-90px -140px auto auto;
  width:260px;height:260px;border-radius:999px;
  background:rgba(117,149,196,.14);
}
.home-stat-top{font-weight:1000;opacity:.78}
.home-stat-val{font-weight:1000;font-size:30px;margin-top:8px}
.home-stat-sub{margin-top:6px;font-weight:800;opacity:.70;font-size:13px}

.home-history{
  margin-top:14px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.home-history-title{font-weight:1000;font-size:18px}
.home-history-sub{font-weight:800;opacity:.7;margin-top:4px;font-size:13px}
.home-history-empty{
  margin-top:10px;
  background:#fafafa;
  border:1px dashed rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
  font-weight:900;
  opacity:.75;
}
.home-history-list{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.home-history-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px;
  box-shadow:0 10px 18px rgba(0,0,0,.06);
}
.home-history-left{display:flex;align-items:center;gap:10px}
.home-history-date{font-weight:1000}
.home-history-badge{
  padding:6px 10px;border-radius:999px;
  background:rgba(117,149,196,.12);
  border:1px solid rgba(117,149,196,.25);
  font-weight:1000;
  font-size:12px;
}
.home-history-total{font-weight:1000;font-size:16px}

@media (max-width:980px){
  .home-stats{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:700px){
  .home-stats{grid-template-columns:1fr;}
}

/* ===== Clôture (clo-*) ===== */
.clo-wrap{max-width:900px;margin:20px auto;padding:16px}
.clo-card{background:#fff;border-radius:16px;padding:18px;border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.clo-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.clo-btns a{padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:900}
.clo-x{background:#7595c4;color:#fff}
.clo-z{background:#e74c3c;color:#fff}
.clo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:800px){.clo-grid{grid-template-columns:1fr}}
.clo-box{background:#fafafa;border:1px dashed rgba(0,0,0,.18);border-radius:14px;padding:14px}
.clo-box h3{margin:0 0 10px}
.clo-total{font-size:18px;font-weight:1000}
.clo-hr{opacity:.25;margin:12px 0}
.clo-subtitle{font-weight:1000;margin-bottom:6px}

/* =========================================================
   INDEX (ix-*) — Home premium, responsive, DA bistro moderne
   ========================================================= */
.ix-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}

/* HERO */
.ix-hero{
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
  border-radius:24px;
  padding:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.ix-badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(117,149,196,.12);
  border:1px solid rgba(117,149,196,.25);
  font-weight:1000;
  letter-spacing:.08em;
  font-size:12px;
}

.ix-title{
  margin:10px 0 6px;
  font-size:32px;
  font-weight:1000;
}

.ix-sub{
  margin:0;
  opacity:.80;
  font-weight:800;
  line-height:1.35;
}

.ix-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.ix-meta-pill{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(117,149,196,.10);
  border:1px solid rgba(117,149,196,.20);
  font-weight:900;
}

.ix-meta-k{opacity:.75;font-weight:1000}
.ix-meta-v{font-weight:1000}

.ix-hero-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
}

.ix-cta{
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 26px rgba(0,0,0,.08);
  min-width:260px;
}

.ix-cta-primary{
  background:#7595c4;
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 16px 30px rgba(117,149,196,.35);
}

.ix-cta-soft{
  background:rgba(255,255,255,.70);
  color:#111;
}

.ix-cta-emoji{font-size:28px}
.ix-cta-title{display:block;font-weight:1000;font-size:18px;line-height:1.1}
.ix-cta-sub{display:block;opacity:.85;font-weight:900;margin-top:4px;font-size:13px}

/* STATS */
.ix-stats{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

.ix-stat{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.ix-stat-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.ix-stat-label{
  font-weight:1000;
  opacity:.75;
}

.ix-stat-icon{font-size:20px}

.ix-stat-val{
  font-size:32px;
  font-weight:1000;
  margin-top:8px;
}

.ix-stat-foot{
  margin-top:6px;
  opacity:.75;
  font-weight:800;
  font-size:13px;
}

.ix-stat-highlight{
  background:linear-gradient(135deg, rgba(117,149,196,.20), rgba(255,255,255,1));
  border-color:rgba(117,149,196,.30);
}

.ix-mini-link{
  display:inline-flex;
  margin-top:10px;
  text-decoration:none;
  font-weight:1000;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(117,149,196,.12);
  border:1px solid rgba(117,149,196,.22);
  color:#000;
}

/* GRID MODULES */
.ix-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

.ix-tile{
  text-decoration:none;
  color:#111;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition:transform .06s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ix-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(0,0,0,.10);
}

.ix-tile:active{transform:translateY(0)}

.ix-tile-emoji{font-size:28px}
.ix-tile-title{font-weight:1000;font-size:18px}
.ix-tile-sub{opacity:.78;font-weight:800}

.ix-tile-danger{
  border-color:rgba(231,76,60,.28);
  background:linear-gradient(135deg, rgba(231,76,60,.10), rgba(255,255,255,1));
}

/* RESPONSIVE */
@media (max-width:980px){
  .ix-stats{grid-template-columns:1fr}
  .ix-grid{grid-template-columns:repeat(2,1fr)}
  .ix-cta{min-width:240px}
}
@media (max-width:700px){
  .ix-grid{grid-template-columns:1fr}
  .ix-title{font-size:26px}
  .ix-cta{width:100%}
  .ix-meta-pill{width:100%;justify-content:space-between}
}

/* =========================
   STATS / RANGE BUTTONS
   ========================= */
.range-btns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.range-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.70);
  color:#000;
  text-decoration:none;
  padding:12px 16px;
  border-radius:999px;
  font-weight:1000;
  letter-spacing:.01em;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  user-select:none;
}
.range-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(0,0,0,.12);
  border-color:rgba(117,149,196,.35);
}
.range-btn:active{
  transform:translateY(0);
  box-shadow:0 8px 16px rgba(0,0,0,.10);
}
.range-btn.is-active{
  background:rgba(117,149,196,.16);
  border-color:rgba(117,149,196,.75);
  color:#1d2a3a;
  box-shadow:0 16px 30px rgba(117,149,196,.25);
}
.range-btn.is-active::before{
  content:"";
  width:10px;height:10px;
  border-radius:999px;
  background:var(--blue);
  box-shadow:0 0 0 6px rgba(117,149,196,.18);
}
@media (max-width:700px){
  .range-btn{
    width:100%;
    justify-content:center;
    padding:14px 16px;
    font-size:16px;
  }
}

/* =========================
   RESPONSIVE / iPad ergonomics
   ========================= */
@media (max-width:768px){
  .tabs{ flex-direction:column; }
  #popup{ inset: 4% auto auto 50%; width: 95vw; max-height: 92vh; }
  .payui-modes{ grid-template-columns: 1fr; }
  .payui-fields{ grid-template-columns: 1fr; }
  .payui-change-grid{ grid-template-columns: 1fr; }
}
@media (max-width:700px){
  h1{ font-size:24px; }
  h2{ font-size:20px; }
  .pt-title,.kds-title{ font-size:22px; }
}

/* =========================================================
   RECAP (recap.php) — UI “WOUAH” (isolé .recap-*)
   Palette compatible: bleu #7595c4 / beige #e4e9d8
   Ne touche à rien d'autre.
   ========================================================= */

.recap-wrap{
  margin-top: 8px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Header */
.recap-head{
  padding: 14px 14px 12px;
  background:
    radial-gradient(700px 220px at 15% 0%, rgba(117,149,196,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.40));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.recap-title{
  font-weight: 1000;
  font-size: 18px;
  letter-spacing: -.01em;
}

.recap-sub{
  margin-top: 4px;
  font-weight: 900;
  opacity: .72;
  font-size: 13px;
}

/* List */
.recap-list{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card item */
.recap-item{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 12px 22px rgba(0,0,0,.08);
  overflow: hidden;
  position: relative;
}

.recap-item::before{
  content:"";
  position:absolute;
  inset:-90px -140px auto auto;
  width:260px;height:260px;border-radius:999px;
  background: rgba(117,149,196,.14);
  pointer-events:none;
}

/* Row top */
.recap-row{
  padding: 12px 12px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}

.recap-left{
  min-width: 0;
  flex: 1;
}

.recap-name{
  font-weight: 1000;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Meta pills */
.recap-meta{
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.recap-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(117,149,196,.12);
  border: 1px solid rgba(117,149,196,.22);
  font-weight: 1000;
  font-size: 12px;
  line-height: 1;
}

/* Right side */
.recap-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.recap-price{
  font-weight: 1000;
  font-size: 16px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

/* Delete button */
.recap-del{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(231,76,60,.22);
  background: rgba(231,76,60,.12);
  color: #b22222;
  cursor: pointer;
  font-weight: 1000;
  box-shadow: 0 12px 20px rgba(231,76,60,.10);
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
}
.recap-del:hover{
  background: rgba(231,76,60,.16);
  box-shadow: 0 16px 30px rgba(231,76,60,.14);
}
.recap-del:active{
  transform: scale(.985);
}

/* Sous-produits block */
.recap-sous{
  padding: 10px 12px 12px;
  border-top: 1px dashed rgba(0,0,0,.12);
  background: rgba(250,250,250,.60);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recap-sousline{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
}

.recap-sousname{
  font-weight: 950;
  opacity: .9;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recap-sousprice{
  font-weight: 1000;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(117,149,196,.10);
  border: 1px solid rgba(117,149,196,.20);
  flex: 0 0 auto;
}

/* Footer total */
.recap-foot{
  padding: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(600px 200px at 85% 0%, rgba(117,149,196,.16), transparent 60%),
    rgba(255,255,255,.70);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recap-total-label{
  font-weight: 1000;
  font-size: 14px;
  opacity: .78;
}

.recap-total-val{
  font-weight: 1000;
  font-size: 20px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(117,149,196,.95), rgba(95,127,180,.95));
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 34px rgba(117,149,196,.28);
}

/* ticket total */
.recap-ticket-btn{
  padding: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(600px 200px at 85% 0%, rgba(117,149,196,.16), transparent 60%),
    rgba(255,255,255,.70);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Empty state */
.recap-empty{
  padding: 14px;
  border-radius: 18px;
  background: rgba(250,250,250,.75);
  border: 1px dashed rgba(0,0,0,.18);
  font-weight: 950;
  opacity: .82;
  text-align: center;
}

/* Responsive tweaks */
@media (max-width: 700px){
  .recap-row{
    flex-direction: column;
    align-items: stretch;
  }
  .recap-right{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .recap-price{
    flex: 1;
    text-align: center;
  }
}


.produit{
  padding: 8px 10px !important;     /* ↓ avant 10-12px */
  margin: 5px !important;           /* ↓ un peu moins d’espace */
  font-size: 14px !important;       /* ↓ texte plus compact */
  border-radius: 16px !important;   /* légèrement moins “gros” */
  box-shadow: 0 10px 18px rgba(0,0,0,.06) !important; /* plus léger */
}

/* Optionnel : sur petits écrans, encore un peu plus compact */
@media (max-width: 700px){
  .produit{
    padding: 7px 9px !important;
    font-size: 13px !important;
  }
}