@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --brun: #6f4e37;
  --brun-fonce: #4a3423;
  --creme: #fdf6ec;
  --or: #d4a24c;
  --vert: #2e7d32;
  --rouge: #c62828;
  --ombre: 0 4px 18px rgba(74, 52, 35, 0.08);
  --ombre-hover: 0 10px 28px rgba(74, 52, 35, 0.14);
}

body {
  background-color: var(--creme);
  font-family: 'Poppins', 'Segoe UI', Tahoma, Arial, sans-serif;
}

.topbar {
  background-color: var(--brun-fonce);
  z-index: 1030;
}

.sidebar {
  width: 230px;
  min-height: calc(100vh - 56px);
  background-color: var(--brun);
  flex-shrink: 0;
}

.sidebar .nav-link {
  color: #f2e5d5;
  padding: 0.65rem 1rem;
  border-left: 3px solid transparent;
}

.sidebar .nav-link i {
  margin-right: 8px;
  width: 18px;
  display: inline-block;
  text-align: center;
}

.sidebar .nav-link:hover {
  background-color: rgba(255,255,255,0.08);
  color: #fff;
}

.sidebar .nav-link.active {
  background-color: rgba(255,255,255,0.15);
  border-left-color: var(--or);
  color: #fff;
  font-weight: 600;
}

.content {
  min-height: calc(100vh - 56px);
}

.card-stat {
  border: none;
  border-radius: 12px;
  color: #fff;
}
.card-stat.bg-1 { background: linear-gradient(135deg, #6f4e37, #4a3423); }
.card-stat.bg-2 { background: linear-gradient(135deg, #d4a24c, #b17f2f); }
.card-stat.bg-3 { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
.card-stat.bg-4 { background: linear-gradient(135deg, #c62828, #8e0000); }

.table thead {
  background-color: var(--brun);
  color: #fff;
}

.badge-stock-bas {
  background-color: #c62828;
}

.pos-produit {
  cursor: pointer;
  transition: transform 0.1s;
  border-radius: 10px;
}
.pos-produit:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ===== Tableau de bord premium ===== */

.dash-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--or);
}

.dash-titre {
  font-weight: 700;
  color: var(--brun-fonce);
}

.btn-premium {
  background: linear-gradient(135deg, var(--brun), var(--brun-fonce));
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: var(--ombre);
  transition: box-shadow 0.15s, transform 0.15s;
}
.btn-premium:hover {
  color: #fff;
  box-shadow: var(--ombre-hover);
  transform: translateY(-1px);
}

.btn-premium-outline {
  background: #fff;
  color: var(--brun-fonce);
  border: 1px solid #e6d8c6;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.btn-premium-outline:hover {
  background: #fbf2e4;
  border-color: var(--or);
  color: var(--brun-fonce);
}

.kpi-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--ombre);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  height: 100%;
  transition: box-shadow 0.15s, transform 0.15s;
  border: 1px solid rgba(74,52,35,0.05);
}
.kpi-card:hover {
  box-shadow: var(--ombre-hover);
  transform: translateY(-2px);
}
.kpi-card.kpi-alerte {
  border: 1px solid rgba(198,40,40,0.25);
}

.kpi-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
}
.bg-icon-1 { background: linear-gradient(135deg, #6f4e37, #4a3423); }
.bg-icon-2 { background: linear-gradient(135deg, #d4a24c, #b17f2f); }
.bg-icon-3 { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
.bg-icon-4 { background: linear-gradient(135deg, #c62828, #8e0000); }

.kpi-label {
  font-size: 0.78rem;
  color: #8a7a6a;
  font-weight: 500;
}
.kpi-valeur {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brun-fonce);
  line-height: 1.3;
}
.kpi-trend {
  font-size: 0.75rem;
  font-weight: 500;
}
.kpi-trend.trend-up { color: var(--vert); }
.kpi-trend.trend-down { color: var(--rouge); }

.card-premium {
  border: none;
  border-radius: 16px;
  box-shadow: var(--ombre);
  overflow: hidden;
}
.card-premium-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  color: var(--brun-fonce);
  background: #fffaf2;
  border-bottom: 1px solid #f2e6d5;
}
.voir-tout {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--or);
  text-decoration: none;
}
.voir-tout:hover { color: var(--brun-fonce); }

.table-premium thead {
  background: #fffaf2;
  color: var(--brun-fonce);
}
.table-premium td, .table-premium th {
  vertical-align: middle;
}

.chip {
  background: #f2e6d5;
  color: var(--brun-fonce);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.barre-fond {
  background: #f2e6d5;
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
}
.barre-remplissage {
  background: linear-gradient(90deg, var(--or), var(--brun));
  height: 100%;
  border-radius: 10px;
}

/* ===== Point de vente premium ===== */

.pos-recherche {
  position: relative;
  width: 320px;
  max-width: 100%;
}
.pos-recherche i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #b8a891;
}
.pos-recherche input {
  padding-left: 38px;
  border-radius: 30px;
  border: 1px solid #e6d8c6;
  background: #fff;
}

.chips-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip-cat {
  border: 1px solid #e6d8c6;
  background: #fff;
  color: var(--brun-fonce);
  border-radius: 30px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s;
}
.chip-cat:hover { border-color: var(--or); }
.chip-cat.active {
  background: linear-gradient(135deg, var(--brun), var(--brun-fonce));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--ombre);
}

.pos-produit {
  cursor: pointer;
  background: #fff;
  border-radius: 14px;
  padding: 1rem 0.75rem;
  text-align: center;
  box-shadow: var(--ombre);
  border: 1px solid rgba(74,52,35,0.05);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pos-produit:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-hover);
}
.pos-produit-avatar {
  width: 44px;
  height: 44px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--or), var(--brun));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.pos-produit-nom {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--brun-fonce);
  min-height: 2.2em;
}
.pos-produit-prix {
  color: var(--or);
  font-weight: 700;
  font-size: 1rem;
  margin: 0.15rem 0;
}
.pos-produit-stock {
  font-size: 0.7rem;
  color: #a08d76;
}
.pos-produit-stock.stock-bas {
  color: var(--rouge);
  font-weight: 600;
}

.pos-body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--creme);
}
.pos-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.pos-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brun-fonce), var(--brun));
  color: #fff;
  padding: 0.6rem 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  z-index: 10;
}
.pos-quitter {
  color: #fff;
  font-size: 1.2rem;
  opacity: 0.85;
  line-height: 1;
}
.pos-quitter:hover { color: #fff; opacity: 1; }
.pos-brand { font-weight: 700; white-space: nowrap; }
.pos-tag {
  background: rgba(255,255,255,0.15);
  padding: 0.15rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pos-user { font-size: 0.85rem; opacity: 0.9; white-space: nowrap; }
.pos-topbar .pos-recherche input { background: #fff; }

.pos-corps {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.pos-colonne-produits {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}
.pos-colonne-panier {
  width: 380px;
  flex-shrink: 0;
  background: #fff;
  border-left: 1px solid #eee2d0;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 18px rgba(74,52,35,0.05);
}
.pos-panier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: var(--brun-fonce);
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}

.panier-vide {
  text-align: center;
  padding: 2rem 0.5rem;
  color: #b8a891;
}
.panier-vide i { font-size: 1.8rem; }

.ligne-panier {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f2e6d5;
}
.stepper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: #fbf2e4;
  border-radius: 20px;
  padding: 0.15rem 0.4rem;
}
.stepper button {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--brun-fonce);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stepper span {
  min-width: 18px;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
}
.ligne-total {
  min-width: 60px;
  text-align: right;
  font-weight: 600;
  font-size: 0.85rem;
}
.ligne-suppr {
  border: none;
  background: none;
  color: var(--rouge);
  opacity: 0.7;
}
.ligne-suppr:hover { opacity: 1; }

.total-panier {
  border-top: 2px dashed #e6d8c6;
  border-bottom: 2px dashed #e6d8c6;
  padding: 0.75rem 0;
}

.paiement-groupe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.paiement-btn {
  border: 1px solid #e6d8c6;
  background: #fff;
  border-radius: 10px;
  padding: 0.5rem 0.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--brun-fonce);
  transition: all 0.15s;
}
.paiement-btn.active {
  background: linear-gradient(135deg, var(--brun), var(--brun-fonce));
  color: #fff;
  border-color: transparent;
}

.quick-cash {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.quick-cash-btn {
  border: 1px solid #e6d8c6;
  background: #fbf2e4;
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brun-fonce);
}
.quick-cash-btn:hover { background: #f2e0c4; }

.monnaie-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f3ea;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  color: var(--brun-fonce);
  transition: background 0.2s, color 0.2s;
}
.monnaie-box.monnaie-positive {
  background: #e6f4ea;
  color: var(--vert);
}

.toast-conteneur {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast-message {
  background: #fff;
  border-left: 4px solid var(--rouge);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  box-shadow: var(--ombre-hover);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brun-fonce);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
}
.toast-message.show { opacity: 1; transform: translateY(0); }
.toast-message.toast-success { border-left-color: var(--vert); }

@media (max-width: 991.98px) {
  .pos-body { height: auto; overflow: visible; }
  .pos-shell { height: auto; }
  .pos-corps { flex-direction: column; overflow: visible; }
  .pos-colonne-produits { overflow: visible; }
  .pos-colonne-panier { width: 100%; border-left: none; border-top: 1px solid #eee2d0; }
  .pos-topbar { flex-wrap: wrap; }
  .pos-recherche { order: 3; width: 100%; }
  #zonePanier { flex-grow: 0; max-height: 45vh; overflow-y: auto; }
}

@media (max-width: 576px) {
  .ligne-panier { flex-wrap: wrap; row-gap: 0.5rem; }
  .ligne-panier > div:first-child { flex: 1 1 100%; }
  .ligne-panier .stepper { order: 2; }
  .ligne-panier .ligne-total { order: 3; margin-left: auto; }
  .ligne-panier .ligne-suppr { order: 4; }
  .sidebar {
    position: fixed;
    left: -230px;
    top: 56px;
    transition: left 0.2s;
    height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .sidebar.show {
    left: 0;
  }
}

/* ===== Point de vente 2026 : surface de travail ===== */
.pos-body {
  --pos-ink: #30251e;
  --pos-muted: #84766d;
  --pos-line: #eadfd4;
  --pos-paper: #fffdf9;
  background: #f3eee7;
  color: var(--pos-ink);
}
.pos-topbar {
  min-height: 76px;
  padding: .75rem 1.35rem;
  background: #2f241e;
  box-shadow: 0 6px 24px rgba(47,36,30,.16);
}
.pos-identite,.pos-operateur,.pos-marque,.pos-heure,.pos-user {
  display: flex;
  align-items: center;
}
.pos-identite { gap: .7rem; min-width: 250px; }
.pos-logo {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; color: #37291f; background: #e8b45c; font-size: 1.15rem;
}
.pos-marque,.pos-heure,.pos-user { flex-direction: column; align-items: flex-start; line-height: 1.15; }
.pos-marque strong { font-size: .9rem; }
.pos-marque small,.pos-user small,.pos-heure small { color: #bfb3aa; font-size: .65rem; margin-top: .25rem; }
.pos-marque small { color: #d8c9bd; }
.pos-marque small i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6dcc8a; margin-right: 5px; }
.pos-operateur { gap: .65rem; min-width: 270px; justify-content: flex-end; }
.pos-heure { padding-right: .75rem; border-right: 1px solid rgba(255,255,255,.14); }
.pos-heure strong { font-size: 1rem; letter-spacing: .04em; }
.pos-avatar-user { width: 36px; height: 36px; display:grid; place-items:center; border-radius:50%; background:#5b473b; color:#f3c572; font-weight:700; }
.pos-user strong { font-size: .78rem; }
.pos-deconnexion,.pos-quitter {
  width: 36px; height: 36px; display:grid; place-items:center; color:#d8cdc5;
  border-radius:10px; text-decoration:none; transition:.15s ease;
}
.pos-deconnexion:hover,.pos-quitter:hover { color:#fff; background:rgba(255,255,255,.1); }
.pos-recherche { width: min(430px, 36vw); }
.pos-recherche input {
  height: 44px; padding-left: 42px; padding-right: 52px;
  border: 1px solid rgba(255,255,255,.12); background:#493930!important;
  color:#fff; box-shadow:none;
}
.pos-recherche input::placeholder { color:#c8bbb2; }
.pos-recherche input:focus { border-color:#e8b45c; box-shadow:0 0 0 3px rgba(232,180,92,.16); color:#fff; }
.pos-recherche i { color:#d7c9be; }
.pos-recherche kbd {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);
  color:#d7c9be; font:600 .63rem Poppins,sans-serif; padding:.2rem .38rem; border-radius:5px;
}
.pos-catalogue-entete { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:1rem; }
.pos-catalogue-entete span,.pos-panier-header small {
  display:block; text-transform:uppercase; letter-spacing:.11em; color:#b07a2e; font-size:.66rem; font-weight:700;
}
.pos-catalogue-entete h1 { margin:.15rem 0 0; font-size:1.35rem; font-weight:700; color:var(--pos-ink); }
.pos-catalogue-entete p { margin:0; color:var(--pos-muted); font-size:.73rem; }
.pos-catalogue-entete p strong { color:var(--pos-ink); font-size:.92rem; }
.chips-categories { flex-wrap:nowrap; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:thin; }
.chip-cat { flex:0 0 auto; padding:.48rem .9rem; border-color:#ddd1c5; background:rgba(255,255,255,.78); }
.chip-cat span { margin-left:.25rem; opacity:.65; font-size:.7rem; }
.chip-cat.active { background:#3b2d25; box-shadow:0 5px 14px rgba(59,45,37,.16); }
.pos-colonne-produits { padding:1.35rem 1.5rem 2rem; }
.pos-produit {
  position:relative; min-height:176px; padding:1rem; overflow:hidden;
  border:1px solid #e8ddd2; border-radius:16px; text-align:left; box-shadow:0 3px 12px rgba(64,45,32,.055);
}
.pos-produit:hover,.pos-produit:focus-visible { border-color:#d5a04b; transform:translateY(-2px); box-shadow:0 12px 24px rgba(64,45,32,.12); outline:none; }
.pos-produit-haut { display:flex; align-items:center; justify-content:space-between; }
.pos-produit-avatar { margin:0 0 .75rem; width:42px; height:42px; border-radius:12px; background:#f2dfbd; color:#745023; }
.pos-alerte-stock { align-self:flex-start; color:#c55c4b; font-size:.72rem; }
.pos-produit-nom { display:block; min-height:2.6em; font-size:.86rem; }
.pos-produit-prix { display:block; margin:.35rem 0 .1rem; color:#3f2c20; font-size:1.02rem; }
.pos-produit-stock { display:block; font-size:.66rem; }
.pos-produit-plus {
  position:absolute; right:.8rem; bottom:.8rem; width:30px; height:30px;
  display:grid; place-items:center; border-radius:9px; background:#f5eee5; color:#684b37; transition:.15s ease;
}
.pos-produit:hover .pos-produit-plus { background:#3b2d25; color:#fff; }
.pos-aucun-resultat { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--pos-muted); text-align:center; gap:.35rem; }
.pos-aucun-resultat[hidden] { display:none; }
.pos-aucun-resultat>i { font-size:1.7rem; color:#bba998; }
.pos-aucun-resultat strong { color:var(--pos-ink); }
.pos-aucun-resultat span { font-size:.78rem; }
.pos-aucun-resultat button { margin-top:.5rem; border:1px solid #ddd0c4; background:#fff; color:#594337; border-radius:9px; padding:.4rem .75rem; font-size:.75rem; }
.pos-colonne-panier { width:410px; padding:1.25rem 1.35rem; background:var(--pos-paper); box-shadow:-8px 0 30px rgba(59,45,37,.07); }
.pos-panier-header { margin-bottom:1rem; }
.pos-panier-header>span:first-child { display:flex; flex-direction:column; gap:.18rem; }
.pos-panier-header strong { font-size:1.14rem; }
.pos-badge-articles { background:#f0e6da; color:#5e4636; border-radius:20px; padding:.3rem .65rem; font-size:.68rem; font-weight:700; }
.pos-champ-label { display:flex; justify-content:space-between; align-items:center; margin:0 0 .35rem; color:#514138; font-size:.72rem; font-weight:600; }
.pos-champ-label small { color:#a2958b; font-size:.62rem; font-weight:500; }
.pos-colonne-panier .form-select,.pos-montant .form-control { min-height:42px; border-color:#ded3ca; border-radius:10px; font-size:.78rem; box-shadow:none; }
.pos-colonne-panier .form-select:focus,.pos-montant .form-control:focus { border-color:#ba8540; box-shadow:0 0 0 3px rgba(186,133,64,.12); }
.pos-zone-panier,#zonePanier { margin:.35rem -.25rem 0; padding:0 .25rem; }
.panier-vide { display:flex; flex-direction:column; align-items:center; padding:2rem .75rem; }
.panier-vide[hidden] { display:none; }
.panier-vide>span { width:48px; height:48px; display:grid; place-items:center; background:#f4ece3; border-radius:15px; color:#a28167; margin-bottom:.6rem; }
.panier-vide>span i { font-size:1.25rem; }
.panier-vide strong { color:#5a493e; font-size:.82rem; }
.panier-vide p { max-width:230px; margin:.3rem 0 0; font-size:.69rem; line-height:1.55; }
.ligne-panier { padding:.7rem 0; gap:.45rem; }
.ligne-panier>div:first-child { min-width:0; }
.ligne-panier .fw-semibold { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#46362c; }
.ligne-panier .text-muted { font-size:.64rem!important; }
.stepper { gap:.2rem; padding:.18rem .3rem; border-radius:9px; }
.stepper button { width:24px; height:24px; box-shadow:none; }
.ligne-total { min-width:82px; font-size:.75rem; }
.ligne-suppr { width:26px; height:26px; padding:0; font-size:.7rem; }
.pos-sous-total { display:flex; justify-content:space-between; margin-top:.65rem; padding-top:.7rem; border-top:1px solid var(--pos-line); color:var(--pos-muted); font-size:.72rem; }
.pos-sous-total strong { color:#68574c; font-weight:600; }
.total-panier { display:flex; justify-content:space-between; align-items:baseline; margin:.45rem 0 .8rem; padding:.65rem 0; border-top:1px dashed #d9cabd; border-bottom:1px dashed #d9cabd; }
.total-panier span { font-size:.82rem; font-weight:600; }
.total-panier strong { font-size:1.4rem; color:#30251e; }
.paiement-btn { min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; border-radius:11px; font-size:.68rem; }
.paiement-btn i { font-size:1rem; }
.paiement-btn.active { background:#3b2d25; box-shadow:0 5px 12px rgba(59,45,37,.15); }
.pos-montant { position:relative; }
.pos-montant input { padding-right:50px; font-size:1rem!important; font-weight:700; }
.pos-montant>span { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#9a8b81; font-size:.7rem; font-weight:600; }
.quick-cash { display:grid; grid-template-columns:1.5fr repeat(5,1fr); gap:.3rem; margin-top:.4rem; }
.quick-cash-btn { padding:.32rem .2rem; background:#f4ede5; border-color:#e3d7cb; border-radius:7px; font-size:.65rem; }
.quick-exact { color:#855b24; }
.monnaie-box { margin-top:.45rem; padding:.55rem .7rem; font-size:.7rem; }
.monnaie-box strong { font-size:.84rem; }
.monnaie-box.monnaie-insuffisante { background:#fff0ed; color:#b64b3d; }
.pos-zone-masquee { max-height:0; opacity:0; overflow:hidden; margin:0; }
.pos-actions { display:grid; gap:.35rem; margin-top:.7rem; }
.pos-actions .btn-premium { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 1rem; border-radius:12px; background:#2f7a4b; box-shadow:0 7px 16px rgba(47,122,75,.2); }
.pos-actions .btn-premium:hover { background:#286a41; }
.pos-actions .btn-premium:disabled { background:#d7d0c9; color:#938980; box-shadow:none; }
.pos-actions kbd { background:rgba(255,255,255,.16); color:inherit; font-size:.6rem; }
.pos-btn-vider { border:0; background:transparent; color:#9b5a52; padding:.35rem; font-size:.68rem; }
.pos-btn-vider:disabled { opacity:.35; }
.toast-message { display:flex; align-items:center; gap:.5rem; }

@media (max-width: 1100px) {
  .pos-colonne-panier { width:370px; }
  .pos-operateur { min-width:auto; }
  .pos-heure,.pos-user { display:none; }
}
@media (max-width: 991.98px) {
  .pos-body,.pos-shell { height:auto; min-height:100vh; }
  .pos-topbar { position:sticky; top:0; min-height:68px; }
  .pos-identite { min-width:auto; }
  .pos-marque,.pos-operateur .pos-avatar-user { display:none; }
  .pos-recherche { order:initial; width:55%; }
  .pos-colonne-panier { width:100%; max-height:none; }
}
@media (max-width: 576px) {
  .pos-topbar { padding:.65rem .75rem; gap:.5rem; }
  .pos-logo,.pos-deconnexion { display:none; }
  .pos-recherche { width:calc(100% - 82px); }
  .pos-colonne-produits { padding:1rem .75rem; }
  .pos-catalogue-entete h1 { font-size:1.05rem; }
  .pos-catalogue-entete p { display:none; }
  .pos-produit { min-height:156px; padding:.8rem; }
  .pos-colonne-panier { padding:1rem; }
  .quick-cash { grid-template-columns:repeat(3,1fr); }
  .quick-exact { grid-column:span 3; }
}

/* ===== Encaissement en fenêtre modale ===== */
.pos-paiement-modal .modal-dialog { max-width: 510px; }
.pos-paiement-modal .modal-content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(47, 36, 30, .28);
}
.pos-paiement-modal .modal-header {
  padding: 1.2rem 1.35rem .9rem;
  border-bottom: 1px solid #eee3d9;
  background: #fffdf9;
}
.pos-paiement-modal .modal-title {
  margin-top: .15rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #30251e;
}
.pos-modal-eyebrow {
  display: block;
  color: #a66d23;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pos-paiement-modal .modal-body {
  padding: 1.15rem 1.35rem;
  background: #fff;
}
.pos-modal-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.15rem;
  padding: .9rem 1rem;
  border-radius: 13px;
  background: #f4ede5;
  color: #6e5d52;
  font-size: .78rem;
}
.pos-modal-total strong {
  color: #30251e;
  font-size: 1.45rem;
}
.pos-paiement-modal .paiement-btn { min-height: 64px; }
.pos-paiement-modal .pos-montant input { min-height: 50px; font-size: 1.15rem !important; }
.pos-paiement-modal .monnaie-box { min-height: 48px; }
.pos-paiement-modal .modal-footer {
  display: grid;
  grid-template-columns: .7fr 1.5fr;
  gap: .55rem;
  padding: .9rem 1.35rem 1.2rem;
  border-top: 1px solid #eee3d9;
  background: #fffdf9;
}
.pos-modal-annuler {
  min-height: 46px;
  border: 1px solid #ded3ca;
  color: #6f6158;
  border-radius: 11px;
}
.pos-modal-confirmer {
  min-height: 46px;
  border-radius: 11px;
  background: #2f7a4b;
  box-shadow: 0 7px 16px rgba(47,122,75,.2);
}
.pos-modal-confirmer:hover { background: #286a41; }
.pos-modal-confirmer:disabled {
  background: #d7d0c9;
  color: #938980;
  box-shadow: none;
}
.modal-backdrop.show { opacity: .62; }
@media (max-width: 576px) {
  .pos-paiement-modal .modal-dialog { margin: .65rem; }
  .pos-paiement-modal .modal-content { border-radius: 16px; }
  .pos-paiement-modal .modal-header,
  .pos-paiement-modal .modal-body { padding-left: 1rem; padding-right: 1rem; }
  .pos-paiement-modal .modal-footer { grid-template-columns: 1fr; padding: .8rem 1rem 1rem; }
  .pos-modal-annuler { order: 2; }
}



/* =========================================================
   DESIGN SYSTEM 2026 - couche globale (surcharge les styles de base)
   Le point de vente (.pos-*) conserve ses propres styles ci-dessus.
   ========================================================= */
:root {
  --bg: #f6f1ea;
  --surface: #ffffff;
  --ink: #2f241e;
  --ink-soft: #5e4d42;
  --muted: #85776d;
  --line: #e9dfd4;
  --accent: #c8862f;
  --accent-soft: #f7ead4;
  --brand: #3b2d25;
  --brand-2: #6f4e37;
  --ok: #2f7a4b;
  --ok-soft: #e4f3ea;
  --danger: #b64b3d;
  --danger-soft: #fbe9e5;
  --warn-soft: #fdf1d8;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(47, 36, 30, .05), 0 2px 8px rgba(47, 36, 30, .04);
  --shadow-md: 0 8px 24px rgba(47, 36, 30, .10);
  --topbar-h: 64px;
  --sidebar-w: 248px;
  --bs-primary: #6f4e37;
  --bs-primary-rgb: 111, 78, 55;
  --bs-body-color: #2f241e;
  --bs-border-color: #e9dfd4;
  --bs-link-color: #8a5a2b;
  --bs-link-hover-color: #5e3d1e;
  --ombre: var(--shadow-sm);
  --ombre-hover: var(--shadow-md);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-size: .9rem;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { color: var(--ink); letter-spacing: -.01em; }
h3 { font-size: 1.4rem; font-weight: 700; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(200, 134, 47, .45); outline-offset: 2px; border-radius: 6px; }
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 3000;
  background: var(--brand); color: #fff; padding: .55rem .9rem; border-radius: 8px; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 10px; color: #fff; }

/* ---------- Barre superieure ---------- */
.app-topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.25rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.app-burger {
  display: none; width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font-size: 1.5rem; line-height: 1;
}
.app-burger:hover { background: var(--accent-soft); }
.app-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); font-weight: 700; }
.app-brand:hover { color: var(--ink); }
.app-brand-logo {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(135deg, #e8b45c, #c8862f); color: #3b2d25; font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(200, 134, 47, .3);
}
.app-brand-nom { font-size: .98rem; letter-spacing: -.01em; }
.app-topbar-droite { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.app-date { color: var(--muted); font-size: .78rem; margin-right: .5rem; }
.app-user {
  display: flex; align-items: center; gap: .6rem; padding: .3rem .75rem .3rem .3rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 40px;
}
.app-user-avatar {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: #f3c572; font-weight: 700; font-size: .85rem;
}
.app-user-texte { display: flex; flex-direction: column; line-height: 1.15; }
.app-user-texte strong { font-size: .78rem; }
.app-user-texte small { color: var(--muted); font-size: .66rem; }
.app-icone-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  color: var(--ink-soft); text-decoration: none; transition: background .15s, color .15s;
}
.app-icone-btn:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------- Mise en page ---------- */
.app-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-h)); }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h)); min-height: 0; overflow-y: auto;
  background: var(--brand); padding: 1rem .75rem 1.5rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sidebar .nav-section {
  margin: 1.1rem .75rem .4rem; color: #a99b90; font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.sidebar .nav-section:first-child { margin-top: .2rem; }
.sidebar .nav-link {
  display: flex; align-items: center; gap: .7rem;
  color: #dccfc3; padding: .55rem .75rem; margin-bottom: 2px;
  border-left: 0; border-radius: 10px; font-size: .84rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.sidebar .nav-link i { margin: 0; width: 20px; font-size: 1.05rem; text-align: center; opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar .nav-link.active {
  background: linear-gradient(135deg, #e8b45c, #c8862f); color: #2b1f17; font-weight: 700;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
.sidebar .nav-link.active i { opacity: 1; }
.sidebar-overlay { display: none; }
.content { flex: 1; min-width: 0; min-height: 0; padding: 1.75rem 2rem 3rem !important; }
.content > h3:first-child, .content > .page-entete { margin-bottom: 1.25rem !important; }
.page-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.page-entete h3 { margin: 0; }

/* ---------- Cartes ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-header {
  background: #fbf7f1; border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0 !important; padding: .85rem 1.15rem; color: var(--ink);
}
.card-body { padding: 1.15rem; }
.card-premium { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-premium-header { background: #fbf7f1; border-bottom: 1px solid var(--line); }
.kpi-card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.kpi-card:hover { box-shadow: var(--shadow-md); }
.kpi-icon { border-radius: 13px; box-shadow: 0 6px 14px rgba(47, 36, 30, .15); }
.kpi-valeur { font-size: 1.4rem; letter-spacing: -.02em; }

/* ---------- Boutons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: .85rem; padding: .5rem 1rem; transition: transform .12s, box-shadow .15s, background .15s, border-color .15s; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .32rem .7rem; font-size: .78rem; border-radius: 8px; }
.btn-primary, .btn-dark { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.btn-primary:hover, .btn-dark:hover, .btn-primary:focus, .btn-dark:focus { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-success { background: var(--ok); border-color: var(--ok); }
.btn-success:hover { background: #266a40; border-color: #266a40; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #9d3e32; border-color: #9d3e32; }
.btn-outline-primary { color: var(--brand-2); border-color: #d9c8b6; }
.btn-outline-primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.btn-outline-secondary { color: var(--ink-soft); border-color: #ddd0c4; background: #fff; }
.btn-outline-secondary:hover { background: #f3ece3; color: var(--ink); border-color: #cdbdae; }
.btn-outline-danger { color: var(--danger); border-color: #ecc5be; }
.btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-premium { background: linear-gradient(135deg, var(--brand-2), var(--brand)); border-radius: var(--radius-sm); }
.btn-premium-outline { border-radius: var(--radius-sm); border-color: #ddd0c4; }
.btn-premium-outline:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Formulaires ---------- */
.form-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .35rem; }
.form-control, .form-select {
  min-height: 42px; border: 1px solid #ddd0c4; border-radius: var(--radius-sm);
  background-color: #fff; font-size: .88rem; color: var(--ink);
}
textarea.form-control { min-height: 0; }
.form-control::placeholder { color: #b3a699; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(200, 134, 47, .15); }
.form-control:disabled, .form-select:disabled { background: #f4eee7; }
.input-group-text { background: #f4eee7; border-color: #ddd0c4; color: var(--muted); font-size: .8rem; }
.form-check-input:checked { background-color: var(--brand-2); border-color: var(--brand-2); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(200, 134, 47, .15); border-color: var(--accent); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--danger); }

/* ---------- Tableaux ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; font-size: .85rem; }
.table thead, .table-premium thead { background: #fbf7f1; color: var(--muted); }
.table thead th {
  background: #fbf7f1; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; border-bottom: 1px solid var(--line); padding: .8rem 1rem; white-space: nowrap;
}
.table td { padding: .75rem 1rem; vertical-align: middle; border-color: #f0e8de; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #fbf6ee; }
.table tfoot td { background: #fbf7f1; border-top: 1px solid var(--line); }
.table-responsive { border-radius: 0 0 var(--radius) var(--radius); }
.card > .table-responsive:first-child, .card > .table:first-child { border-radius: var(--radius); }
.table td .btn + .btn, .table td form + .btn, .table td .btn + form { margin-left: .25rem; }

/* ---------- Badges, alertes ---------- */
.badge { font-weight: 600; letter-spacing: .01em; padding: .38em .7em; border-radius: 20px; }
.badge.bg-success { background: var(--ok-soft) !important; color: var(--ok) !important; }
.badge.bg-secondary { background: #efe8df !important; color: #6e5d52 !important; }
.badge.bg-danger { background: var(--danger-soft) !important; color: var(--danger) !important; }
.badge.bg-warning { background: var(--warn-soft) !important; color: #8a5a10 !important; }
.badge-stock-bas { background: var(--danger-soft) !important; color: var(--danger) !important; }
.chip { background: #f3ece3; }
.alert {
  display: flex; align-items: flex-start; gap: .6rem; border: 0; border-left: 4px solid;
  border-radius: var(--radius-sm); font-size: .85rem; font-weight: 500; box-shadow: var(--shadow-sm);
  transition: opacity .4s, transform .4s;
}
.alert.is-hiding { opacity: 0; transform: translateY(-6px); }
.alert-success { background: var(--ok-soft); border-left-color: var(--ok); color: #1f5a37; }
.alert-danger { background: var(--danger-soft); border-left-color: var(--danger); color: #8d3a2f; }
.alert-warning { background: var(--warn-soft); border-left-color: var(--accent); color: #7a5214; }
.alert-info { background: #e8f1f8; border-left-color: #4a86b5; color: #2c5878; }

/* ---------- Modales, pagination, divers ---------- */
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(47, 36, 30, .28); }
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-weight: 700; }
.pagination .page-link { color: var(--brand-2); border-color: var(--line); }
.pagination .active > .page-link { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.nav-tabs .nav-link.active { color: var(--brand-2); border-bottom-color: var(--accent); font-weight: 600; }
hr { border-color: var(--line); opacity: 1; }
::selection { background: #f0d3a1; }
.text-muted { color: var(--muted) !important; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty-state i { font-size: 2rem; color: #c9b8a6; }

/* ---------- Connexion ---------- */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bg); }
.login-visuel {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 3rem; color: #f4eadf; overflow: hidden;
  background: radial-gradient(circle at 20% 15%, rgba(232, 180, 92, .28), transparent 45%),
              radial-gradient(circle at 85% 90%, rgba(200, 134, 47, .22), transparent 40%), #2f241e;
}
.login-visuel .app-brand { color: #fff; }
.login-visuel h2 { color: #fff; font-size: 2.1rem; font-weight: 700; line-height: 1.2; max-width: 420px; }
.login-visuel p { color: #cdbfb3; max-width: 400px; }
.login-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.login-points li { display: flex; align-items: center; gap: .7rem; color: #e7dacd; font-size: .88rem; }
.login-points i { color: #e8b45c; }
.login-formulaire { display: grid; place-items: center; padding: 2rem; }
.login-carte { width: 100%; max-width: 400px; }
.login-carte h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .3rem; }
.login-carte .sous-titre { color: var(--muted); margin-bottom: 1.75rem; }
.login-carte .btn-connexion { width: 100%; min-height: 46px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border: 0; box-shadow: var(--shadow-md); }
.login-carte .btn-connexion:disabled { opacity: .75; }
.mdp-champ { position: relative; }
.mdp-champ .form-control { padding-right: 46px; }
.mdp-bascule { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); width: 38px; height: 38px; border-radius: 8px; }
.mdp-bascule:hover { background: #f3ece3; color: var(--ink); }
@media (max-width: 860px) {
  .login-page { grid-template-columns: 1fr; }
  .login-visuel { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .app-burger { display: inline-grid; place-items: center; }
  .app-date, .app-user-texte { display: none; }
  .app-user { padding: .3rem; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; z-index: 1040;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: none;
  }
  .sidebar.show { transform: translateX(0); box-shadow: 12px 0 40px rgba(0, 0, 0, .3); }
  .sidebar-overlay.show { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 1035; background: rgba(47, 36, 30, .45); }
  .content { padding: 1.1rem 1rem 2.5rem !important; }
  .table thead th, .table td { padding: .65rem .75rem; }
}
@media (max-width: 576px) {
  .app-brand-nom { display: none; }
  h3 { font-size: 1.2rem; }
  .sidebar { position: fixed; left: 0; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .app-topbar, .sidebar, .sidebar-overlay, .skip-link { display: none !important; }
  .content { padding: 0 !important; }
  body { background: #fff; }
}

/* ---------- Composants de pages (produits / stock / achats) ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem; margin-bottom: 1.1rem; }
.stat-pill { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat-pill > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: #9a6418; font-size: 1.1rem; }
.stat-pill.ok > i { background: var(--ok-soft); color: var(--ok); }
.stat-pill.alerte > i { background: var(--danger-soft); color: var(--danger); }
.stat-pill small { display: block; color: var(--muted); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stat-pill strong { font-size: 1.1rem; letter-spacing: -.01em; }
.outils-liste { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.recherche-champ { position: relative; min-width: 240px; }
.recherche-champ i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #b3a699; pointer-events: none; }
.recherche-champ .form-control { padding-left: 38px; border-radius: 30px; }
.avatar-init { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #f2dfbd; color: #745023; font-weight: 700; font-size: .75rem; }
.cellule-produit { display: flex; align-items: center; gap: .75rem; }
.cellule-produit strong { display: block; font-size: .87rem; }
.cellule-produit small { color: var(--muted); font-size: .72rem; }
.ligne-inactive { opacity: .55; }
.stock-bar { height: 6px; background: #f0e8de; border-radius: 6px; overflow: hidden; min-width: 70px; margin-top: .3rem; }
.stock-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--ok); }
.stock-bar.bas > span { background: var(--danger); }
.stock-bar.moyen > span { background: var(--accent); }
.marge { font-size: .72rem; font-weight: 600; color: var(--ok); }
.marge.neg { color: var(--danger); }
.mvt-icone { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 9px; font-size: .9rem; }
.mvt-entree { background: var(--ok-soft); color: var(--ok); }
.mvt-sortie { background: var(--danger-soft); color: var(--danger); }
.mvt-ajust { background: var(--warn-soft); color: #8a5a10; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .65rem .4rem; text-align: center; border: 1px solid #ddd0c4; border-radius: var(--radius-sm); cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--ink-soft); transition: all .15s; }
.seg label small { font-weight: 400; color: var(--muted); font-size: .66rem; }
.seg input:checked + label { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-md); }
.seg input:checked + label small { color: #d8cdc5; }
.seg input:focus-visible + label { outline: 3px solid rgba(200, 134, 47, .45); outline-offset: 2px; }
.total-modal { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; background: #f4ede5; border-radius: var(--radius-sm); font-weight: 600; }
.total-modal strong { font-size: 1.2rem; }
.aucun-resultat-ligne td { text-align: center; color: var(--muted); padding: 2rem 1rem; }
@media (max-width: 576px) { .recherche-champ { min-width: 0; flex: 1 1 100%; } .outils-liste { width: 100%; } }

/* ---------- Retouches de mise en page ---------- */
.table td.text-end, .table th.text-end, .kpi-valeur, .stat-pill strong, .ligne-total { white-space: nowrap; }
.kpi-valeur { font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.kpi-card { padding: 1rem 1.1rem; gap: .8rem; }
.sidebar { scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.content { max-width: 1480px; }
.table-responsive { overflow-x: auto; }
.stat-strip { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 1199.98px) { :root { --sidebar-w: 216px; } .content { padding: 1.4rem 1.25rem 3rem !important; } }

/* ---------- Onglets ateliers ---------- */
.onglets-ateliers a.chip-cat { text-decoration: none; display: inline-flex; align-items: center; }
.onglets-ateliers a.chip-cat:not(.active):hover { color: var(--brun-fonce); }

/* ---------- Logo Mon Repere (embleme MR dore, fond transparent) ---------- */
.app-brand-logo, .pos-logo { background: #2f241e; padding: 3px; overflow: hidden; box-shadow: 0 4px 10px rgba(47, 36, 30, .25); }
.app-brand-logo img, .pos-logo img, .fp-marque .logo img, .apercu-ticket .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fp-marque .logo, .apercu-ticket .logo { padding: 3px; overflow: hidden; }