/* =====================================================
   GES BOUTIQUE v3 — Design Système Premium
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Palette principale — plus chaude et profonde */
  --bg:          #f0f2f8;
  --panel:       #ffffff;
  --panel-2:     #f8fafc;
  --ink:         #0d1b2e;
  --ink-2:       #2d3f55;
  --ink-3:       #5a7085;
  --muted:       #94a3b8;
  --line:        #e1e8f0;
  --line-light:  #f5f7fb;

  /* Accent — orange MariaBoutik */
  --accent:      #F57C00;
  --accent-2:    #FF9800;
  --accent-3:    #FFF3E0;
  --accent-dark: #E65100;

  /* Sidebar — bleu-marine premium */
  --sb-bg:       #0a1628;
  --sb-glass:    rgba(255,255,255,.04);
  --sb-hover:    rgba(255,255,255,.08);
  --sb-active:   rgba(245,124,0,.22);
  --sb-text:     #c4a47f;
  --sb-active-t: #FFF3E0;
  --sb-border:   rgba(255,255,255,.07);

  /* Sémantiques */
  --success:     #059669;
  --success-bg:  #ecfdf5;
  --success-2:   #bbf7d0;
  --warn:        #dc2626;
  --warn-bg:     #fef2f2;
  --warn-2:      #fecaca;
  --info:        #2563eb;
  --info-bg:     #eff6ff;
  --amber:       #d97706;
  --amber-bg:    #fffbeb;

  /* Métriques */
  --m-blue:    #2563eb; --m-blue-bg:   #eff6ff;
  --m-teal:    #0d9488; --m-teal-bg:   #f0fdfa;
  --m-indigo:  #4f46e5; --m-indigo-bg: #eef2ff;
  --m-green:   #059669; --m-green-bg:  #ecfdf5;
  --m-orange:  #ea580c; --m-orange-bg: #fff7ed;
  --m-purple:  #7c3aed; --m-purple-bg: #faf5ff;
  --m-rose:    #e11d48; --m-rose-bg:   #fff1f2;
  --m-amber:   #d97706; --m-amber-bg:  #fffbeb;

  /* Ombres — plus douces */
  --sh-xs:  0 1px 3px rgba(13,27,46,.05);
  --sh-sm:  0 2px 10px rgba(13,27,46,.07), 0 1px 3px rgba(13,27,46,.04);
  --sh:     0 6px 24px rgba(13,27,46,.09), 0 2px 8px rgba(13,27,46,.04);
  --sh-lg:  0 20px 60px rgba(13,27,46,.13), 0 8px 24px rgba(13,27,46,.07);
  --sh-xl:  0 32px 80px rgba(13,27,46,.18);

  /* Géométrie */
  --r-xs: 4px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px;

  /* Transitions */
  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* =====================================================   RESET   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
/* Défilement fluide iOS sur tous les conteneurs scrollables */
* { -webkit-tap-highlight-color: transparent; }
[class*="overflow"],[class*="scroll"],
.bc-table-container,.modal-box,.table-wrap,.customer-history-list,
.main,.sidebar,.notif-list { -webkit-overflow-scrolling: touch; }

/* ── Barre de chargement globale ── */
#global-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 99999; pointer-events: none;
}
#global-progress.active {
  background: linear-gradient(90deg, #E65100, #FF9800, #FFB74D, #FF9800, #E65100);
  background-size: 200% 100%;
  animation: progress-slide 1.2s linear infinite;
}
@keyframes progress-slide {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

body {
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  display: grid;
  grid-template-columns: 248px minmax(0,1fr);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, textarea, select { font: inherit; }
a { text-decoration: none; color: inherit; }
h1,h2,h3,h4,h5 { line-height: 1.3; }
img { max-width: 100%; }

/* =====================================================   SCROLLBAR   ===================================================== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.45); }

/* =====================================================   LOGIN   ===================================================== */
.login-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #040d18 0%, #071628 40%, #0a2440 70%, #0c3050 100%);
  overflow: hidden;
}

.login-screen::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 65% 35%, rgba(245,124,0,.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 20% 70%, rgba(234,88,12,.12) 0%, transparent 50%);
  pointer-events: none;
}

.login-screen::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.login-card {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(30px);
  border-radius: var(--r-xl);
  padding: 48px 44px 40px;
  width: min(420px, 92vw);
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(255,255,255,.1);
  text-align: center;
  animation: loginPop .5s var(--spring);
  position: relative;
  z-index: 1;
}

@keyframes loginPop {
  from { opacity:0; transform: scale(.88) translateY(20px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

.login-logo {
  margin-bottom: 22px;
  display: flex; justify-content: center;
}

.brand-mark-lg {
  width: 84px; height: 84px;
  border-radius: 20px;
  background: #ffffff;
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(245,124,0,.35);
  overflow: hidden;
}

.brand-mark-lg img { width: 80px; height: 80px; object-fit: contain; }

.login-title { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; }
.login-sub   { color: var(--muted); font-size: 14px; margin: 6px 0 28px; }

.login-error {
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid #fca5a5; border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 13px; margin-bottom: 16px;
  animation: shake .35s ease;
}

@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)} 80%{transform:translateX(-3px)}
}

.login-form { display: grid; gap: 14px; text-align: left; }
.login-form label { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; display: grid; gap: 6px; }
.login-btn { width: 100%; padding: 13px; font-size: 15px; font-weight: 700; margin-top: 4px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; text-align: center; }
.login-credit { text-align: center; margin-top: 10px; font-size: 12px; opacity: .5; }

/* Hints de rôles sous le formulaire */
.login-roles-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; font-size: 11px; color: var(--muted);
  flex-wrap: wrap;
}
.role-hint-item strong { color: var(--ink-2); }
.role-hint-sep { opacity: .4; }

/* =====================================================   SIDEBAR   ===================================================== */
.sidebar {
  background: linear-gradient(180deg, #0d1e35 0%, #0a1628 60%, #07111e 100%);
  color: var(--sb-text);
  padding: 18px 10px 16px;
  /* ── Fixé : reste en place pendant le défilement ── */
  height: 100vh;
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; /* contenu géré par .nav */
  z-index: 100;
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: 3px 0 24px rgba(0,0,0,.18);
}

.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px 18px;
  border-bottom: 1px solid var(--sb-border);
  margin-bottom: 6px;
  flex-shrink: 0; /* reste toujours visible en haut */
}

.brand-mark {
  width: 42px; height: 42px; border-radius: 10px;
  background: #ffffff;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(245,124,0,.35);
  flex-shrink: 0; overflow: hidden;
}

.brand-mark img { width: 38px; height: 38px; object-fit: contain; }
.brand strong { color: #f1f5f9; font-size: 14px; font-weight: 800; display: block; letter-spacing: -.2px; }
.brand small  { color: var(--sb-text); font-size: 11px; display: block; margin-top: 1px; opacity: .7; }

/* Label de groupe nav */
.nav-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: rgba(143,179,200,.4);
  padding: 12px 12px 4px; margin-top: 4px;
}

.nav {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* Ascenseur discret */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,152,0,.25) transparent;
}
.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  background: rgba(255,152,0,.25); border-radius: 99px;
}
.nav::-webkit-scrollbar-thumb:hover { background: rgba(255,152,0,.5); }

.nav button {
  border: 0; background: transparent;
  color: var(--sb-text);
  padding: 9px 14px; border-radius: var(--r);
  text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500;
  transition: background .18s var(--ease), color .18s var(--ease), transform .12s;
  position: relative; letter-spacing: .01em;
}

.nav button svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .6; transition: opacity .15s, transform .2s; }
.nav button:hover { background: var(--sb-hover); color: #dde8f0; }
.nav button:hover svg { opacity: .9; transform: scale(1.08); }
.nav button:active { transform: scale(.96); }

.nav button.active {
  background: linear-gradient(135deg, rgba(245,124,0,.28) 0%, rgba(230,81,0,.18) 100%);
  color: #FFF3E0;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(245,124,0,.25);
}
.nav button.active svg { opacity: 1; }
.nav button.active::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: linear-gradient(180deg, #FF9800, #F57C00);
  border-radius: 0 3px 3px 0;
  box-shadow: 2px 0 8px rgba(255,152,0,.4);
}

.nav-badge {
  margin-left: auto;
  background: var(--warn); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 99px;
  display: none; animation: popIn .3s var(--spring);
}
.nav-badge.show { display: block; }

.sidebar-footer {
  border-top: 1px solid var(--sb-border);
  padding-top: 12px;
  margin-top: 8px;
  flex-shrink: 0; /* reste toujours visible en bas */
}

/* ── Carte utilisateur connecté ── */
.sb-user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-user-avatar {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.sb-user-avatar.administrateur { background: linear-gradient(135deg,#7c3aed,#a855f7); }
.sb-user-avatar.commercial      { background: linear-gradient(135deg,#E65100,#FF9800); }
.sb-user-info { display: flex; flex-direction: column; min-width: 0; }
.sb-user-name {
  font-size: 13px; font-weight: 700; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-role { font-size: 10px; color: rgba(148,163,184,.7); margin-top: 1px; }

.logout-btn {
  display: flex; align-items: center; gap: 8px;
  color: var(--sb-text); padding: 9px 12px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s;
}
.logout-btn svg { width: 15px; height: 15px; }
.logout-btn:hover { background: rgba(239,68,68,.15); color: #fca5a5; }

.sidebar-toggle {
  display: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 10px;
  cursor: pointer; flex-direction: column; gap: 4px;
  flex-shrink: 0; align-self: center;
}
.sidebar-toggle span { display: block; width: 18px; height: 2px; background: var(--ink-2); border-radius: 1px; transition: .2s; }

/* =====================================================   MAIN   ===================================================== */
.main {
  min-width: 0; padding: 22px 28px;
  height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.topbar-left h1 {
  font-size: 20px; font-weight: 800; color: var(--ink);
  letter-spacing: -.5px;
}
.topbar-left p { color: var(--muted); margin-top: 2px; font-size: 12px; }

/* Bannière bienvenue intégrée dans la topbar */
.topbar-welcome {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
  padding: 5px 12px;
  background: var(--accent-bg, rgba(245,124,0,.07));
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.topbar-welcome #dash-greeting {
  font-weight: 700; color: var(--ink); font-size: 13px;
}
.topbar-welcome .dash-date {
  color: var(--muted); font-size: 11px;
}

.topbar-right { display: flex; align-items: center; gap: 10px; }

/* Clock badge dans topbar */
.clock-badge {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 99px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  box-shadow: var(--sh-xs);
}
.clock-badge svg { width: 13px; height: 13px; color: var(--accent); }

/* Refresh btn */
.refresh-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center;
  cursor: pointer; color: var(--ink-3);
  box-shadow: var(--sh-xs);
  transition: background .15s, transform .3s var(--ease), color .15s;
}
.refresh-btn svg { width: 15px; height: 15px; transition: transform .5s var(--ease); }
.refresh-btn:hover { background: var(--line-light); color: var(--accent); }
.refresh-btn.spinning svg { transform: rotate(360deg); }

.search-wrap { position: relative; }
.search-wrap.inline-search { margin-bottom: 12px; }
.search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none;
}
.search-wrap input { width: min(300px,80vw); padding-left: 34px; }
.inline-search input { width: 100%; }

/* =====================================================   VUES   ===================================================== */
.view { display: none; animation: fadeUp .3s var(--ease); }
.view.active { display: block; }

/* Vue articles : occupe tout l'espace disponible */
#articles.view.active {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
#articles > .panel {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
#articles-list-wrap.bc-list-wrap {
  flex: 1; min-height: 0;
  /* Pas de border-radius sur le contenu — gardé uniquement sur le panel "Base articles" */
  border-radius: 0;
  border-left: 0; border-right: 0; border-bottom: 0;
  box-shadow: none;
  margin: 0;
}
.hidden { display: none !important; }

@keyframes fadeUp {
  from { opacity:0; transform: translateY(14px); }
  to   { opacity:1; transform: translateY(0); }
}

/* =====================================================   DASHBOARD   ===================================================== */

/* Bannière bienvenue */
.dash-welcome {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #0a1628 0%, #0f2744 50%, #0d3d60 100%);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
}
.dash-welcome-text { display: flex; flex-direction: column; gap: 2px; }
.dash-welcome-text span:first-child { font-size: 15px; font-weight: 700; color: #e0f7fc; }
.dash-date { font-size: 12px; color: var(--sb-text); }
.dash-update-badge {
  font-size: 11px; color: var(--sb-text);
  background: rgba(255,255,255,.06); border-radius: 99px;
  padding: 4px 12px; border: 1px solid var(--sb-border);
}

/* ── 6 KPI CARDS GRADIENT ── */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.dk-card {
  border-radius: var(--r-lg);
  padding: 14px 12px 12px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 10px;
  box-shadow: var(--sh), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .22s var(--spring), box-shadow .22s var(--ease);
  cursor: default;
  animation: dkIn .4s var(--spring) both;
}
.dk-card:nth-child(1){animation-delay:.05s}
.dk-card:nth-child(2){animation-delay:.10s}
.dk-card:nth-child(3){animation-delay:.15s}
.dk-card:nth-child(4){animation-delay:.20s}
.dk-card:nth-child(5){animation-delay:.25s}
.dk-card:nth-child(6){animation-delay:.30s}

@keyframes dkIn {
  from { opacity:0; transform: translateY(20px) scale(.96); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

.dk-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

/* Shine overlay */
.dk-shine {
  position: absolute; top: -40%; right: -20%;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}

/* Couleurs par carte */
.dk-today  { background: linear-gradient(135deg, #E65100 0%, #FF9800 100%); }
.dk-month  { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
.dk-profit { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); }
.dk-clients{ background: linear-gradient(135deg, #db2777 0%, #f472b6 100%); }
.dk-stock  { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }
.dk-alert  { background: linear-gradient(135deg, #dc2626 0%, #f87171 100%); }
.dk-credit { background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%); }

/* Icône */
.dk-icon-wrap {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.18);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.dk-icon-wrap svg { width: 15px; height: 15px; stroke: #fff; }

/* Corps */
.dk-body { flex: 1; min-width: 0; }
.dk-label {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,.75);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px;
}
.dk-value {
  font-size: 15px; font-weight: 900; color: #fff;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -.3px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-sub {
  font-size: 9px; color: rgba(255,255,255,.6);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Badge trend */
.dk-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 800;
  background: rgba(255,255,255,.22);
  color: #fff; border-radius: 99px;
  padding: 2px 6px; white-space: nowrap;
}

/* Ligne Évolution + Ventes par jour : 2/3 + 1/3 */
.dash-chart-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
.dash-chart-row .dash-chart-main { margin-bottom: 0; }

/* Chart plein largeur */
.dash-chart-main { margin-bottom: 16px; }

/* ── Panel Évolution des ventes — redesign épuré ── */
.evo-chart-panel {
  padding: 0; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
}

/* Nouveau header */
.evo-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  gap: 12px; flex-wrap: wrap;
}

.evo-title-block {
  display: flex; align-items: center; gap: 12px;
}

.evo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #E65100, #FF9800);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245,124,0,.35);
}
.evo-icon svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.5; }

.evo-title { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.evo-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Droite du header */
.evo-hdr-right {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

/* Stats inline */
.evo-stat-row {
  display: flex; align-items: center; gap: 0;
}
.evo-stat-item {
  display: flex; align-items: center; gap: 6px; padding: 0 14px;
}
.evo-stat-item:first-child { padding-left: 0; }
.evo-dot-sm {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.evo-stat-lbl {
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .35px; white-space: nowrap;
}
.evo-stat-v {
  font-size: 12px; font-weight: 800; color: var(--ink);
  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}
.evo-stat-sep2 {
  width: 1px; height: 24px; background: var(--line); flex-shrink: 0;
}

/* Période dropdown */
.evo-period-wrap {
  position: relative; display: flex; align-items: center;
}
.evo-period-sel {
  appearance: none; -webkit-appearance: none;
  background: var(--line-light); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 6px 30px 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--ink);
  cursor: pointer; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.evo-period-sel:hover { border-color: var(--accent-2); }
.evo-period-sel:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(245,124,0,.12); }
.evo-sel-chev {
  position: absolute; right: 8px; pointer-events: none;
  width: 14px; height: 14px; stroke: var(--muted); stroke-width: 2.5;
}

/* Ancien sélecteur — compatibilité */
.evo-period-btn {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: none; border: none; border-radius: 5px;
  padding: 5px 12px; cursor: pointer;
}
.evo-period-btn.active { background: var(--accent-2); color: #fff; }

/* Canvas */
.evo-canvas-wrap {
  padding: 12px 16px 14px;
  position: relative;
  height: 210px;
}
.evo-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

/* ── Panel Ventes par jour — liste style ── */
.vpj-panel { }
.vpj-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.vpj-title {
  font-size: 14px; font-weight: 800; color: var(--ink);
}
.vpj-list {
  display: flex; flex-direction: column; gap: 9px;
}
.vpj-row {
  display: flex; align-items: center; gap: 10px;
}
.vpj-avatar {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.vpj-info {
  flex: 1; min-width: 0;
}
.vpj-day {
  font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 3px;
}
.vpj-bar-track {
  height: 5px; background: var(--line-light); border-radius: 99px; overflow: hidden;
}
.vpj-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.vpj-count {
  font-size: 10px; color: var(--muted); white-space: nowrap;
}
.vpj-amount {
  font-size: 11px; font-weight: 800; color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap; text-align: right; flex-shrink: 0; min-width: 68px;
}

/* 2 colonnes */
.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
/* Rangées du dashboard à panneaux de hauteur égale :
   les listes s'étirent pour occuper tout le panneau (pas de vide) */
.dash-eq { align-items: stretch; }
.dash-eq > .panel { display: flex; flex-direction: column; }
.dash-eq .compact-list,
.dash-eq .activity-feed-wrap,
.dash-eq .dash-pred-wrap { flex: 1; }
.dash-eq .compact-list { grid-auto-rows: 1fr; align-content: stretch; }
.dash-eq .compact-list .compact-row { height: 100%; }
/* Les graphiques s'étirent pour remplir leur panneau */
.dash-eq > .panel > canvas { flex: 1; height: auto !important; min-height: 200px; }

.dash-two-col > .panel > canvas {
  height: 175px; width: 100% !important;
}
/* Doughnut "Top articles vendus" — même hauteur que Revenus vs Dépenses */
#chart-articles {
  height: 175px !important;
  max-height: 175px;
}

/* Compatibilité anciens IDs */
.kpi-trend.up   { background: var(--success-2); color: var(--success); }
.kpi-trend.down { background: var(--warn-2);    color: var(--warn); }
.kpi-trend.flat { background: var(--amber-bg);  color: var(--amber); }

/* =====================================================   PANELS   ===================================================== */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  box-shadow: var(--sh-sm);
  transition: box-shadow .2s;
}
.panel:hover { box-shadow: var(--sh); }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}

.panel h2 { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.1px; }
.panel-head-right { display: flex; align-items: center; gap: 8px; }

/* Chart panel */
.chart-panel canvas { width: 100% !important; }

/* =====================================================   MÉTRIQUES (section compacte)   ===================================================== */
.metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px; margin-bottom: 20px;
}

.metric {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px;
  box-shadow: var(--sh-xs);
  display: flex; align-items: center; gap: 12px;
}

.metric-icon {
  font-size: 22px; width: 42px; height: 42px;
  border-radius: var(--r-sm); background: var(--line-light);
  display: grid; place-items: center; flex-shrink: 0;
}

.metric-body span { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; display: block; }
.metric-body strong { font-size: 18px; font-weight: 800; color: var(--ink); font-family: 'JetBrains Mono', monospace; display: block; }

/* =====================================================   TABLEAUX   ===================================================== */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; min-width: 500px; }

thead th {
  padding: 12px 14px;
  background: #f5f6f8;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  text-align: left; white-space: nowrap;
}
thead th:first-child { border-radius: var(--r-sm) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--r-sm) 0 0; }

tbody td {
  padding: 0 14px; height: 46px; border-bottom: 1px solid #f0f4f8;
  color: var(--ink-2); vertical-align: middle; font-size: 13px;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: #fef8f3; }
tbody tr:hover .row-actions .list-menu-btn,
tbody tr:hover .art-menu-btn { opacity: 1; }
.row-actions .art-menu-btn,
.row-actions .list-menu-btn { opacity: .45; transition: opacity .15s, transform .15s; }
.row-actions .art-menu-btn.active,
.row-actions .list-menu-btn.active { opacity: 1; transform: scale(.92); }

/* Badges dans tableaux */
.code-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  font-weight: 600; background: var(--line-light);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 2px 7px; color: var(--accent-dark);
  white-space: nowrap;
}

/* Table commandes ventes */
.order-num-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800;
  color: var(--accent-2); background: rgba(245,124,0,.08);
  border: 1px solid rgba(245,124,0,.2); border-radius: var(--r-xs);
  padding: 3px 8px; white-space: nowrap; letter-spacing: -.2px;
}
.sales-lines-badge {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 600; color: var(--muted);
  background: var(--line-light); border: 1px solid var(--line);
  border-radius: 99px; padding: 1px 7px; white-space: nowrap;
}
.sales-lines-badge.single { opacity: .6; }
.profile-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--ink-2);
  background: var(--line-light); border: 1px solid var(--line);
  border-radius: 99px; padding: 3px 9px;
}
.tva-badge {
  display: inline-block; margin-left: 5px;
  font-size: 9px; font-weight: 800; color: #d97706;
  background: #fef3c7; border: 1px solid #fde68a;
  border-radius: 99px; padding: 1px 6px;
  vertical-align: middle;
}

/* ── Modal paiement ── */
.pay-modal-box {
  max-width: 520px;
  width: min(520px, 95vw);
  transition: width .25s var(--ease), max-width .25s var(--ease);
}
/* Tailles Petit / Moyen / Grand (sélecteur dans l'en-tête) */
.pay-modal-box.msize-md { max-width: min(880px, 96vw); width: min(880px, 96vw); }
.pay-modal-box.msize-lg { max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
@media (max-width: 520px) {
  .pay-modal-box {
    width: 100vw;
    max-width: 100vw;
    max-height: 95vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .pay-stats-row { gap: 7px; }
  .pay-stat-card { padding: 10px 8px; }
  .pay-stat-num  { font-size: 14px; }
}

.pay-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 18px;
}
/* Cartes récap — jeu de couleurs de l'historique (bordure colorée + fond teinté) */
.pay-stat-card {
  background: #fff; border: 2px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 10px;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 4px;
  text-align: center;
}
.pay-stat-num { font-size: 16px; font-weight: 900; color: #1a1a1a; font-family: 'JetBrains Mono', monospace; word-break: break-word; }
.pay-stat-lbl { font-size: 9.5px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: .03em; }
/* Total commande → orange | Déjà réglé → vert | Reste à payer → rouge */
.pay-stats-row .pay-stat-card:nth-child(1) { border-color: var(--accent); background: #fff8f2; }
.pay-stats-row .pay-stat-card:nth-child(1) .pay-stat-num { color: var(--accent); }
.pay-stat-paid  { border-color: #27ae60 !important; background: #f0fdf5 !important; }
.pay-stat-paid    .pay-stat-num { color: #1a6e2e !important; }
.pay-stat-balance { border-color: #c0392b !important; background: #fff8f2 !important; }
.pay-stat-balance .pay-stat-num { color: #c0392b !important; }
.pay-stat-balance.settled { border-color: #27ae60 !important; background: #f0fdf5 !important; }
.pay-stat-balance.settled .pay-stat-num { color: #1a6e2e !important; }
.pay-status-badge {
  font-size: 10px; font-weight: 700; border-radius: 20px;
  padding: 2px 8px; margin-top: 4px;
}
.pay-status-badge.partial { background: #fef3c7; color: #92400e; }
.pay-status-badge.paid    { background: #d1fae5; color: #065f46; }
.pay-status-badge.unpaid  { background: #fee2e2; color: #991b1b; }

.pay-section-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

#pay-history-wrap { border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.pay-history-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.pay-history-table col.col-date   { width: 30%; }
.pay-history-table col.col-amount { width: 30%; }
.pay-history-table col.col-note   { width: 32%; }
.pay-history-table col.col-act    { width: 8%; }
.pay-history-table thead th {
  text-align: left; padding: 9px 10px;
  font-size: 10px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .03em;
  background: #3d3d3d;
}
.pay-history-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-history-table tbody tr:nth-child(even) { background: var(--line-light); }
.pay-history-table tbody tr:hover { background: var(--accent-3); }
.pay-history-table tbody tr:last-child td { border-bottom: none; }
html.dark .pay-stat-card { background: #1e293b; }
html.dark .pay-stats-row .pay-stat-card:nth-child(1) { background: rgba(245,124,0,.12); }
html.dark .pay-stat-paid, html.dark .pay-stat-balance.settled { background: rgba(39,174,96,.12) !important; }
html.dark .pay-stat-balance { background: rgba(192,57,43,.12) !important; }
html.dark .pay-stat-num { color: #f1f5f9; }
html.dark .pay-history-table tbody td { color: var(--ink-2); }

.pay-history-amount { font-weight: 700; color: #16a34a; }
.pay-history-del { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; padding: 2px 4px; border-radius: 4px; }
.pay-history-del:hover { color: var(--error); background: #fee2e2; }

.pay-form-row { display: flex; gap: 12px; margin-bottom: 10px; }
.pay-label-short { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pay-label-short input { width: 100%; }

/* ── Statut paiement ventes ── */
.pay-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; border-radius: 99px;
  padding: 3px 9px; white-space: nowrap;
}
.pay-badge.paid    { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.pay-badge.partial { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.pay-badge.unpaid  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Prévisions rupture — description tronquée */
#predictions-table td:nth-child(1) { width: 90px; }
#predictions-table td:nth-child(2) { max-width: 0; width: 100%; }
.pred-desc {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 12px;
  cursor: default;
}

.stock-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 22px;
  border-radius: 99px; font-size: 12px; font-weight: 700;
  padding: 0 8px; font-family: 'JetBrains Mono', monospace;
}
.stock-pill.ok  { background: var(--success-2); color: var(--success); }
.stock-pill.low { background: var(--warn-2);    color: var(--warn); }

.threshold-tag {
  font-size: 11px; color: var(--muted);
  background: var(--line-light); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 2px 6px;
}
.threshold-tag.warn { background: var(--warn-bg); border-color: #fca5a5; color: var(--warn); }

.row-actions { white-space: nowrap; display: flex; gap: 5px; align-items: center; }

.empty { text-align: center; color: var(--muted); padding: 32px; font-size: 13px; }

/* =====================================================   FORMULAIRES   ===================================================== */
form { display: grid; gap: 12px; }

label {
  display: grid; gap: 5px;
  color: var(--ink-3); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
}

input, textarea, select {
  width: 100%;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 12px; color: var(--ink); background: #fafbfd;
  font-size: 13px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(245,124,0,.1);
}

input:hover:not(:focus), select:hover:not(:focus) { border-color: #b0c4d8; background: #fff; }

input.readonly-field { background: var(--line-light); color: var(--ink-3); cursor: default; }
textarea { resize: vertical; min-height: 60px; }

.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.field-3col  { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* =====================================================   BOUTONS   ===================================================== */
.primary {
  border: 0;
  background: linear-gradient(135deg, #E65100 0%, #F57C00 50%, #FF9800 100%);
  color: #fff; border-radius: var(--r-sm);
  padding: 10px 18px; font-weight: 700; font-size: 13px;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .15s var(--spring), box-shadow .15s;
  box-shadow: 0 2px 10px rgba(245,124,0,.35), 0 1px 3px rgba(245,124,0,.2);
  letter-spacing: .01em;
}
.primary:hover  { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245,124,0,.5); }
.primary:active { transform: scale(.96) translateY(0); }

.btn-outline {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  border-radius: var(--r-sm); padding: 9px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-outline:hover { background: var(--line-light); border-color: #cbd5e1; }
.btn-outline svg { width: 14px; height: 14px; }
.btn-outline.small { padding: 6px 10px; font-size: 12px; }
.btn-outline.success { border-color: var(--success); color: var(--success); }
.btn-outline.success:hover { background: rgba(16,185,129,.08); }

.sale-edit-preview {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel-2, var(--line-light)); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 14px; margin: 10px 0 4px;
}
.sale-edit-preview .sep-row { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.sale-edit-preview span { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }
.sale-edit-preview strong { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 800; color: var(--ink); }

.btn-danger {
  border: 1px solid #fca5a5; background: var(--warn-bg); color: var(--warn);
  border-radius: var(--r-sm); padding: 9px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s;
}
.btn-danger:hover { background: var(--warn-2); }

.btn-sm {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  border-radius: var(--r-sm); padding: 5px 9px;
  font-size: 12px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .1s;
  display: inline-flex; align-items: center; gap: 4px;
}
.btn-sm:hover   { background: var(--line-light); border-color: #cbd5e1; }
.btn-sm:active  { transform: scale(.93); }
.btn-sm.danger  { color: var(--warn); border-color: #fca5a5; }
.btn-sm.danger:hover { background: var(--warn-bg); }
.btn-sm.info    { color: var(--info); border-color: #93c5fd; }
.btn-sm.info:hover   { background: var(--info-bg); }

/* Ripple */
.btn-sm { position: relative; overflow: hidden; }
.btn-sm::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(245,124,0,.15); border-radius: inherit;
  transform: scale(0); opacity: 1;
  transition: transform .4s var(--ease), opacity .4s;
}
.btn-sm.ripple::after { transform: scale(2.5); opacity: 0; }

.btn-group { display: flex; gap: 4px; }

.tab-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-3);
  border-radius: var(--r-sm); padding: 5px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s;
}
.tab-btn:hover { border-color: var(--accent-2); color: var(--accent); }
.tab-btn.active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* =====================================================   DROPDOWN   ===================================================== */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--sh);
  min-width: 168px; z-index: 50; display: none; overflow: hidden;
  animation: dropIn .15s var(--ease);
}
.dropdown-menu.show { display: block; }

@keyframes dropIn {
  from { opacity:0; transform: translateY(-6px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

.dropdown-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; color: var(--ink-2); font-size: 13px;
  transition: background .1s;
}
.dropdown-menu a:hover { background: var(--line-light); }

/* =====================================================   PAGINATION   ===================================================== */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 0 2px; flex-wrap: wrap;
}

.page-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  border-radius: var(--r-sm); padding: 5px 10px;
  font-size: 12px; cursor: pointer; transition: .12s;
  min-width: 32px; text-align: center;
}
.page-btn:hover { background: var(--line-light); }
.page-btn.active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.page-btn:disabled { opacity: .35; cursor: default; }

/* =====================================================   FILTRES   ===================================================== */
.filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-row input[type="date"] { padding: 5px 8px; font-size: 12px; width: auto; }

/* =====================================================   LISTES COMPACTES   ===================================================== */
.compact-list { display: grid; gap: 6px; }

/* Dashboard : Stock faible / Top ce mois — scroll après 5 lignes */
#low-stock, #top-articles {
  max-height: 264px; /* ~5 lignes (≈46px + 6px gap) */
  overflow-y: auto;
  padding-right: 4px;
}

/* Dashboard : Prévisions rupture — scroll après 5 lignes */
.dash-pred-wrap {
  max-height: 300px; /* en-tête + ~5 lignes */
  overflow-y: auto;
}
.dash-pred-wrap thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; }

.compact-row {
  display: grid; grid-template-columns: 90px minmax(0,1fr) 70px;
  gap: 10px; align-items: center;
  padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--line-light); font-size: 13px;
  transition: background .12s;
}
.compact-row:hover { background: #eef2ff; }
.compact-row span { color: var(--muted); overflow-wrap: anywhere; }
.compact-row b { text-align: right; font-family: 'JetBrains Mono', monospace; color: var(--warn); }
.compact-row.ok b { color: var(--success); }

/* Lignes Stock faible / Top du mois — refonte visuelle */
.compact-row.stock-row,
.compact-row.top-row {
  grid-template-columns: 26px auto minmax(0,1fr) auto;
  gap: 12px; padding: 10px 14px; border-left: 3px solid transparent;
}
.compact-row.stock-row.critical { border-left-color: var(--danger,#dc2626); background: #fef2f2; }
.compact-row.stock-row.low      { border-left-color: var(--warn,#f59e0b); background: #fffbeb; }
.compact-row.stock-row:hover    { background: #fee2e2; }
.compact-row.top-row            { border-left-color: var(--success,#10b981); background: #f0fdf4; }
.compact-row.top-row:hover      { background: #dcfce7; }
.compact-icon { font-size: 16px; text-align: center; }
.compact-row.top-row .compact-icon {
  font-size: 17px; font-weight: 800; color: var(--muted);
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.compact-desc { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-pill, .qty-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 3px 9px; border-radius: 99px;
  font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 12.5px;
}
.stock-pill.critical { background: #fee2e2; color: var(--danger,#dc2626); }
.stock-pill.low      { background: #fef3c7; color: #b45309; }
.qty-pill            { background: #dcfce7; color: var(--success,#10b981); }

html.dark .compact-row.stock-row.critical { background: rgba(220,38,38,.12); }
html.dark .compact-row.stock-row.low      { background: rgba(245,158,11,.12); }
html.dark .compact-row.top-row            { background: rgba(16,185,129,.12); }
html.dark .compact-desc { color: var(--ink-3); }

/* =====================================================   SPLIT LAYOUT   ===================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(300px,.9fr);
  gap: 16px; align-items: start;
}

.form-panel { position: sticky; top: 24px; }

/* =====================================================   MODAL GÉNÉRIQUE   ===================================================== */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(7,17,30,.65);
  backdrop-filter: blur(6px);
}
.modal-box {
  position: relative; background: var(--panel);
  border-radius: var(--r-xl); padding: 28px 30px 24px;
  width: min(560px, 93vw); max-height: 92vh; overflow-y: auto;
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(255,255,255,.08);
  animation: modalIn .28s var(--spring);
}

@keyframes modalIn {
  from { opacity:0; transform: scale(.92) translateY(-16px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.modal-head h3 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.modal-close {
  border: 0; background: var(--line-light); color: var(--muted);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 15px;
  transition: background .12s, color .12s;
}
.modal-close:hover { background: var(--warn-bg); color: var(--warn); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* Modal article (plus large) */
.modal-article { width: min(700px, 95vw); transition: width .25s var(--ease); }

/* Tailles de modale : Petit (défaut) / Moyen / Grand plein écran */
.modal-box { transition: width .25s var(--ease); }
.modal-box.msize-md { width: min(1050px, 96vw); }
.modal-box.msize-lg {
  width: 100vw; max-height: 100vh; height: 100vh;
  border-radius: 0;
}

.modal-size-switch {
  display: inline-flex; gap: 2px;
  background: var(--line-light); border: 1px solid var(--line);
  border-radius: 99px; padding: 3px;
}
.modal-size-switch button {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 12px; border-radius: 99px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  transition: background .15s, color .15s;
}
.modal-size-switch button:hover  { background: var(--panel); color: var(--ink); }
.modal-size-switch button.active { background: var(--accent); color: #fff; }

/* ── Historique de l'article : tableau détaillé + résumé ── */
.art-hist-wrap {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.art-hist-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.art-hist-table th {
  position: sticky; top: 0; z-index: 1;
  background: #3d3d3d; color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  text-align: left; padding: 9px 12px; white-space: nowrap;
}
.art-hist-table td {
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.art-hist-table tbody tr:last-child td { border-bottom: 0; }
.art-hist-table tbody tr:nth-child(even) { background: var(--line-light); }
.art-hist-table tbody tr:hover { background: var(--accent-3); }

/* Le tableau profite de la place quand la modale est agrandie */
.modal-article.msize-md .art-hist-wrap { max-height: 460px; }
.modal-article.msize-lg .art-hist-wrap { max-height: 60vh; }
.art-hist-table .num { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.art-hist-table td:nth-child(2) { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #c0392b; }
.art-hist-table td:last-child   { color: #1a6e2e; }

.art-hist-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 12px;
}
.art-hist-sum-item {
  display: flex; flex-direction: column-reverse; gap: 4px;
  padding: 10px 8px; border-radius: var(--r-sm); text-align: center;
  background: #fff; border: 2px solid var(--line);
}
.art-hist-sum-item span {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #666;
}
.art-hist-sum-item strong {
  font-size: 13px; font-weight: 900; color: #1a1a1a;
  font-family: 'JetBrains Mono', monospace; word-break: break-word;
}
/* Jeu de couleurs identique à l'historique client */
.art-hist-sum-item:nth-child(1) { border-color: var(--accent); background: #fff8f2; }
.art-hist-sum-item:nth-child(1) strong { color: var(--accent); }
.art-hist-sum-item:nth-child(2) { border-color: #c0392b; background: #fff8f2; }
.art-hist-sum-item:nth-child(2) strong { color: #c0392b; }
.art-hist-sum-item:nth-child(3) { border-color: #27ae60; background: #f0fdf5; }
.art-hist-sum-item:nth-child(3) strong { color: #1a6e2e !important; }
@media (max-width: 600px) {
  .art-hist-summary { grid-template-columns: 1fr; }
}

.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-form-grid .span-2 { grid-column: 1/-1; }

.modal-profit-preview {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
  background: linear-gradient(135deg, #ecfeff 0%, #f0fdf4 100%);
  border: 1px solid rgba(245,124,0,.15);
  border-radius: var(--r-sm); padding: 14px 16px; margin-top: 4px;
}
.mpp-item { text-align: center; }
.mpp-item span  { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin-bottom: 3px; }
.mpp-item strong { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--accent); }

/* =====================================================   POINTS PREVIEW   ===================================================== */
.point-autofill {
  background: var(--accent-3); border: 1px dashed var(--accent);
  border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 12px;
}
.point-autofill .field-grid { margin-bottom: 8px; }

.point-preview {
  background: var(--line-light); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px; display: grid; gap: 8px;
}
.point-preview-row {
  display: flex; justify-content: space-between; align-items: center; font-size: 13px;
}
.point-preview-row span { color: var(--ink-3); }
.point-preview-row strong { font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--accent); }

/* =====================================================   HISTORIQUE CLIENT   ===================================================== */

/* Modal fullscreen */
/* ── Modal client : taille adaptative ── */
#customer-modal-box {
  width: min(640px, 96vw);
  max-height: 92vh;
  overflow-y: hidden;           /* désactive le scroll global du modal-box */
  display: flex; flex-direction: column;
  padding: 0;                   /* le padding est géré par les enfants */
  transition: width .25s ease, max-width .25s ease, height .25s ease, max-height .25s ease, border-radius .25s ease;
}
#customer-modal-box .modal-head {
  flex-shrink: 0;
  padding: 22px 24px 18px;
  margin-bottom: 0;
}
#customer-modal-box form {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: 0 24px 20px; margin: 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
#customer-modal-box .modal-actions {
  flex-shrink: 0;
  padding-top: 14px; margin-top: auto;
}

/* Tailles Moyen / Grand : la modale client a une largeur fixée par ailleurs */
#customer-modal-box.msize-md { width: min(1050px, 96vw) !important; }
#customer-modal-box.msize-lg {
  width: 100vw !important; max-width: 100vw;
  max-height: 100vh; height: 100vh; border-radius: 0;
}
#customer-modal-box.msize-lg .ch-table-wrap { max-height: calc(100vh - 390px); }

/* ── Historique panel ── */
.customer-history { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; flex: 1; }

/* Stats cards */
.customer-history-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.customer-history-stat {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 8px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06); min-width: 0;
}
.customer-history-stat .num { display: block; font-size: 15px; font-weight: 900; color: var(--text); word-break: break-word; }
.customer-history-stat .lbl { display: block; font-size: 9.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; font-weight: 600; }

/* Table historique */
.ch-table-wrap {
  overflow-x: auto; overflow-y: auto;
  max-height: 260px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.ch-table {
  width: 100%; border-collapse: collapse;
  table-layout: auto; min-width: 480px;
}
.ch-table thead { position: sticky; top: 0; z-index: 1; }
.ch-table th {
  background: #3d3d3d; color: #fff;
  padding: 9px 8px; text-align: left; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
}
.ch-table td {
  padding: 8px 8px; border-bottom: 1px solid var(--line);
  vertical-align: middle; color: #1a1a1a; font-size: 12.5px; font-weight: 500;
}
.ch-table tbody tr:last-child td { border-bottom: none; }
.ch-table tbody tr:hover td { background: #fef9f5; }
.ch-table .ch-order { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; color: #c0392b; white-space: nowrap; }
.ch-table .ch-code  { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800;
  background: rgba(230,126,34,.18); color: #c96a00;
  padding: 2px 6px; border-radius: 5px; white-space: nowrap; display: inline-block; }
.ch-table .ch-desc  { min-width: 100px; color: #333; font-weight: 500; word-break: break-word; }
.ch-table .ch-price { font-weight: 800; color: #1a6e2e; white-space: nowrap; text-align: right; font-size: 12.5px; }
.ch-table .ch-qty   { text-align: center; font-weight: 800; color: #1a1a1a; }
.ch-table .ch-date  { white-space: nowrap; color: #555; font-size: 11.5px; font-weight: 600; }

/* Résumé bas */
.ch-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 10px;
}
.ch-summary-card {
  border-radius: var(--r-sm); padding: 10px 8px; text-align: center;
  border: 2px solid var(--line); background: #fff; min-width: 0;
}
.ch-summary-card .ch-sum-val { display: block; font-size: 13px; font-weight: 900; color: #1a1a1a; word-break: break-word; }
.ch-summary-card .ch-sum-lbl { display: block; font-size: 9.5px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.ch-summary-card.ch-sum-qty   { border-color: var(--accent); background: #fff8f2; }
.ch-summary-card.ch-sum-qty   .ch-sum-val { color: var(--accent); }
.ch-summary-card.ch-sum-total { border-color: #c0392b; background: #fff8f2; }
.ch-summary-card.ch-sum-total .ch-sum-val { color: #c0392b; }
.ch-summary-card.ch-sum-margin { border-color: #27ae60; background: #f0fdf5; }
.ch-summary-card.ch-sum-margin .ch-sum-val { color: #1a6e2e; }

.customer-history-empty {
  text-align: center; padding: 28px 10px; color: var(--text-soft); font-size: 12.5px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  /* Le .modal-box global gère déjà width:100vw + slide-up.
     On ajuste seulement ce qui est spécifique à l'historique client. */
  #customer-modal-box form { padding: 0 14px 12px; }
  .customer-history-stats, .ch-summary { gap: 5px; }
  .customer-history-stat { padding: 8px 5px; }
  .customer-history-stat .num { font-size: 13px; }
  .customer-history-stat .lbl { font-size: 8.5px; }
  .ch-summary-card { padding: 8px 5px; }
  .ch-summary-card .ch-sum-val { font-size: 12px; }
  .ch-summary-card .ch-sum-lbl { font-size: 8.5px; }
  .ch-table th { font-size: 10px; padding: 7px 6px; }
  .ch-table td { font-size: 11.5px; padding: 7px 6px; }
}

/* =====================================================   IMPORT CSV / IMAGES ARTICLES   ===================================================== */

/* ── Modals ── */
.imp-modal-box, .img-modal-box {
  width: min(720px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.imp-modal-box .modal-head,
.img-modal-box .modal-head { flex-shrink: 0; padding: 20px 24px 16px; margin-bottom: 0; }
/* Zone centrale défilante : occupe tout l'espace restant entre l'en-tête
   et le pied de page, et défile si le contenu dépasse la hauteur
   disponible (essentiel sur petits écrans / mode paysage). */
.imp-body, .img-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  padding: 0 24px;
}
.imp-modal-box .modal-actions,
.img-modal-box .modal-actions { flex-shrink: 0; padding: 16px 28px 24px; margin-top: 0; border-top: 1px solid var(--line); background: var(--panel-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }

/* ── En-tête (bandeau dégradé + badge icône) ── */
.imp-modal-box .modal-head.imp-head,
.img-modal-box .modal-head.img-head {
  padding: 22px 24px;
  background: linear-gradient(135deg, #FFF3E0 0%, #FFFFFF 70%);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.img-modal-box .modal-head.img-head {
  background: linear-gradient(135deg, #E8F5FF 0%, #FFFFFF 70%);
}
.imp-head h3, .img-head h3 { gap: 14px; align-items: center; }
.imp-head-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 14px; font-size: 21px;
  background: linear-gradient(135deg, #E65100 0%, #FF9800 100%);
  box-shadow: 0 6px 16px rgba(245,124,0,.35);
}
.img-head-icon {
  background: linear-gradient(135deg, #0277BD 0%, #29B6F6 100%);
  box-shadow: 0 6px 16px rgba(2,119,189,.35);
}
.imp-head-text {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 16px; font-weight: 800; color: var(--text);
}
.imp-head-text small {
  font-size: 11.5px; font-weight: 600; color: var(--text-soft);
  text-transform: none; letter-spacing: 0;
}

/* ── Mode import ── */
.imp-mode-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
  margin: 16px 0 14px;
}
.imp-mode-opt { display: flex; cursor: pointer; }
.imp-mode-opt input[type=radio] { display: none; }
.imp-mode-card {
  position: relative;
  border: 2px solid var(--line); border-radius: var(--r); background: var(--panel);
  padding: 14px 14px 12px; flex: 1; transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.imp-mode-ico {
  display: block; font-size: 20px; line-height: 1; margin-bottom: 6px;
}
.imp-mode-card strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.imp-mode-card small  { display: block; font-size: 10.5px; color: var(--text-soft); line-height: 1.4; }
.imp-mode-opt:hover .imp-mode-card {
  border-color: rgba(230,126,34,.4); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(13,27,46,.07);
}
.imp-mode-opt input:checked + .imp-mode-card {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(255,152,0,.10) 0%, rgba(255,152,0,.03) 100%);
  box-shadow: 0 6px 18px rgba(245,124,0,.18);
}
.imp-mode-opt input:checked + .imp-mode-card::after {
  content: '✓';
  position: absolute; top: 8px; right: 10px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 900;
}
.imp-mode-opt input:checked + .imp-mode-card strong { color: var(--accent); }

/* ── Drop zones ── */
.imp-dropzone, .img-dropzone {
  border: 2px dashed #d8dee8; border-radius: var(--r);
  padding: 30px 20px; text-align: center; cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
  margin: 0 0 14px;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
}
.imp-dropzone:hover, .img-dropzone:hover {
  border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,27,46,.06);
}
.imp-dz-over, .img-dz-over {
  border-color: var(--accent); background: rgba(230,126,34,.07);
  transform: scale(1.01);
}
.imp-drop-icon {
  display: grid; place-items: center; margin: 0 auto 10px;
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, #FFE0B2 0%, #FFF3E0 100%);
  color: var(--accent); transition: transform .18s;
}
.img-drop-icon { background: linear-gradient(135deg, #B3E5FC 0%, #E1F5FE 100%); color: #0277BD; }
.imp-drop-icon svg, .img-drop-icon svg { width: 26px; height: 26px; }
.imp-dropzone:hover .imp-drop-icon, .img-dropzone:hover .img-drop-icon,
.imp-dz-over .imp-drop-icon, .img-dz-over .img-drop-icon { transform: scale(1.08) rotate(-4deg); }
.imp-drop-title, .img-drop-title {
  font-size: 13.5px; color: var(--text); margin: 0 0 6px; line-height: 1.5; font-weight: 600;
}
.imp-drop-title strong, .img-drop-title strong { color: var(--accent); }
.imp-drop-hint, .img-drop-hint { font-size: 11px; color: var(--text-soft); margin: 0; }
.imp-drop-hint--meta {
  display: inline-block; margin-bottom: 10px; padding: 2px 10px;
  background: var(--line-light); border-radius: 20px; font-weight: 600;
}
.imp-drop-tips {
  display: flex; flex-direction: column; gap: 6px; margin-top: 4px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.imp-drop-tips .imp-drop-hint {
  text-align: left; background: #FFFBF0; border: 1px solid #F5E0B8;
  border-radius: 8px; padding: 6px 10px; line-height: 1.5;
}

/* ── Barre aperçu ── */
.imp-preview-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px; flex-wrap: wrap;
}
.imp-row-info { font-size: 13px; font-weight: 700; color: #1a6e2e; }
.imp-err-info { font-size: 12px; color: var(--text-soft); }
.imp-err-info--warn { color: #c0392b; font-weight: 600; }
.imp-reset-btn {
  margin-left: auto; font-size: 11px; color: var(--text-soft); background: none;
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; cursor: pointer;
}
.imp-reset-btn:hover { background: var(--line-light); }

/* ── Tableau aperçu ── */
.imp-table-wrap {
  overflow-x: auto; overflow-y: auto; max-height: 220px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  margin: 0 0 14px; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.imp-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.imp-table thead th {
  background: #3d3d3d; color: #fff; padding: 7px 10px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  position: sticky; top: 0; z-index: 1;
}
.imp-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); color: var(--text); }
.imp-table tbody tr:last-child td { border-bottom: none; }
.imp-table tbody tr:hover td { background: var(--line-light); }
.imp-table .imp-row-error td { background: #fff5f5 !important; }
.imp-table .imp-err-cell { color: #c0392b; font-weight: 700; }

/* ── Résultat ── */
.imp-result, .img-result { margin: 14px 0 8px; animation: dropIn .22s var(--ease); }
.imp-result-box {
  border-radius: var(--r); padding: 16px 18px;
  border: 1.5px solid #27ae60;
  background: linear-gradient(135deg, #f0fdf5 0%, #e8fcef 100%);
  box-shadow: 0 4px 14px rgba(39,174,96,.12);
}
.imp-result-box.imp-result-warn {
  border-color: #e67e22;
  background: linear-gradient(135deg, #fff8f2 0%, #fff3e6 100%);
  box-shadow: 0 4px 14px rgba(230,126,34,.12);
}
.imp-result-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.imp-result-stats:last-child { margin-bottom: 0; }
.imp-stat-chip {
  font-size: 12.5px; font-weight: 800; padding: 6px 14px; border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.imp-chip-green  { background: #d4edda; color: #155724; }
.imp-chip-blue   { background: #d1ecf1; color: #0c5460; }
.imp-chip-gray   { background: var(--line-light); color: var(--text-soft); }
.imp-chip-red    { background: #f8d7da; color: #721c24; }
.imp-errors-list { font-size: 11.5px; margin-top: 8px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 8px; }
.imp-errors-list ul { margin: 4px 0 0 16px; padding: 0; }
.imp-errors-list li { margin-bottom: 3px; color: #721c24; }

/* ── Spinner ── */
.imp-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite; margin-right: 6px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Import IMAGES ── */
.img-convention-box {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, #FFFBF0 0%, #FFF8E1 100%);
  border: 1.5px solid #f0c040;
  border-radius: var(--r); padding: 14px 16px;
  font-size: 12.5px; margin: 18px 0 14px; line-height: 1.6;
  box-shadow: 0 2px 8px rgba(240,192,64,.12);
}
.img-convention-box svg {
  width: 20px; height: 20px; flex-shrink: 0; color: #c08a00;
  background: #FFF3CD; border-radius: 50%; padding: 4px;
}
.img-convention-box code { background: #f0e0a0; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 700; }

.img-stats-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.img-stat-chip { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.img-chip-green { background: #d4edda; color: #155724; }
.img-chip-red   { background: #f8d7da; color: #721c24; }
.img-chip-gray  { background: var(--line-light); color: var(--text-soft); }

.img-preview-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
  overflow-y: auto; max-height: 300px; padding: 4px 0 10px;
  scrollbar-width: thin;
}
.img-prev-card {
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; font-size: 11.5px; background: #fff;
  transition: border-color .15s;
}
.img-prev-card.img-prev-unmatched { border-color: #c0392b; background: #fff9f9; }
.img-prev-thumb { height: 100px; overflow: hidden; background: var(--line-light); }
.img-prev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-prev-info { padding: 8px 9px; }
.img-prev-code { font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 11px; margin-bottom: 2px; }
.img-prev-filename { color: var(--text-soft); font-size: 10px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-status-ok  { color: #155724; font-weight: 700; font-size: 11px; }
.img-status-err { color: #721c24; font-size: 11px; display: block; margin-bottom: 4px; }
.img-code-edit {
  width: 100%; font-size: 11px; padding: 3px 6px;
  border: 1.5px solid #c0392b; border-radius: 4px; outline: none;
  font-family: 'JetBrains Mono', monospace; text-transform: uppercase;
}
.img-code-edit:focus { border-color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 600px) {
  .imp-body, .img-body { padding: 0 14px; }
  .imp-mode-row { grid-template-columns: 1fr; margin: 14px 0 12px; }
  .imp-dropzone, .img-dropzone { margin: 0 0 12px; padding: 22px 14px; }
  .imp-preview-bar { margin-left: 0; margin-right: 0; }
  .imp-table-wrap  { margin: 0 0 12px; }
  .imp-result, .img-result { margin: 12px 0 8px; }
  .img-convention-box { margin: 14px 0 12px; }
  .img-stats-row   { margin: 0 0 8px; padding: 0; }
  .img-preview-grid { padding: 4px 0 8px; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); }
  .imp-modal-box .modal-head, .img-modal-box .modal-head { padding: 16px 14px; }
  .imp-modal-box .modal-actions, .img-modal-box .modal-actions { padding: 14px 18px 18px; border-radius: 0; }
  .imp-head-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 12px; }
  .imp-head-text { font-size: 14px; }
  .imp-head-text small { font-size: 10.5px; }
  .imp-drop-tips { gap: 5px; }
}

/* =====================================================   REÇU IMPRIMABLE   ===================================================== */
.receipt-print {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 28px; font-size: 13px; background: #fff;
}
.receipt-print .receipt-header { text-align: center; margin-bottom: 18px; }
.receipt-print .receipt-header h2 { font-size: 20px; font-weight: 800; }
.receipt-print .receipt-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--line-light);
}
.receipt-print .receipt-total {
  font-size: 17px; font-weight: 800; margin-top: 12px; padding-top: 10px;
  border-top: 2px solid var(--ink); display: flex; justify-content: space-between;
}

/* =====================================================   PARAMÈTRES   ===================================================== */
/* Barre d'onglets : défilable horizontalement (tous les onglets accessibles
   au doigt sur mobile, sans débordement coupé). */
.settings-tabs {
  overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab-btn {
  flex-shrink: 0; white-space: nowrap;
  scroll-snap-align: start;
  border-radius: 8px 8px 0 0;
  transition: background .15s, color .15s, border-color .15s;
}
.settings-tab-btn:hover { background: var(--line-light) !important; color: var(--ink) !important; }
.settings-tab-btn.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }

.settings-grid {
  display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.5fr);
  gap: 16px; align-items: start;
}
.settings-fieldset-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 4px;
}
.settings-collapse summary { list-style: none; }
.settings-collapse summary::-webkit-details-marker { display: none; }
.settings-collapse summary::before { content: '▸ '; color: var(--accent); }
.settings-collapse[open] summary::before { content: '▾ '; }
.export-list { display: grid; gap: 8px; margin-top: 12px; }
.export-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--ink-2); font-size: 13px;
  transition: background .12s, border-color .12s;
}
.export-item:hover { background: var(--line-light); border-color: var(--accent-2); color: var(--accent); }

.badge {
  background: var(--accent-3); color: var(--accent-dark);
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 99px; border: 1px solid rgba(245,124,0,.2);
}

.muted-text { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* =====================================================   NOTE POPUP   ===================================================== */
.sale-note-popup {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  animation: dropIn .15s var(--ease);
}
.snp-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.snp-close {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 13px; padding: 0 2px; line-height: 1;
}
.snp-close:hover { color: var(--ink); }
.snp-body {
  padding: 10px 12px; font-size: 13px; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
  max-height: 160px; overflow-y: auto;
}

/* =====================================================   TOAST   ===================================================== */
#toast {
  position: fixed; right: 20px; bottom: 24px;
  background: #0d1b2e; color: #fff;
  padding: 12px 18px; border-radius: var(--r);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(255,255,255,.06);
  font-size: 13px; font-weight: 600;
  opacity: 0; transform: translateY(16px) scale(.94);
  pointer-events: none;
  transition: opacity .25s var(--spring), transform .25s var(--spring);
  z-index: 9998; max-width: 340px;
  display: flex; align-items: center; gap: 8px;
  border-left: 3px solid rgba(255,255,255,.2);
}
#toast.show    { opacity: 1; transform: translateY(0) scale(1); }
#toast.success { background: #065f46; border-left-color: #34d399; }
#toast.error   { background: #7f1d1d; border-left-color: #f87171; }
#toast.info    { background: #1e3a5f; border-left-color: #60a5fa; }

/* =====================================================   ANIMATIONS UTILS   ===================================================== */
@keyframes popIn {
  0%  { transform: scale(.5) rotate(-15deg); opacity: 0; }
  70% { transform: scale(1.15) rotate(3deg); }
  100%{ transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes rowFlash {
  0%  { background: rgba(245,124,0,.0); }
  30% { background: rgba(245,124,0,.09); }
  100%{ background: transparent; }
}

.article-row-flash td { animation: rowFlash .5s var(--ease) forwards; }

/* =====================================================   BADGE ALERTE STOCK   ===================================================== */
.stock-alert-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid #fca5a5; border-radius: 99px;
  font-size: 11px; font-weight: 700; padding: 3px 9px;
}

/* Section activité récente dans dashboard */

/* Wrapper déroulant */
.activity-feed-wrap {
  max-height: 264px; /* ~5 items (≈46px + 6px gap) */
  overflow-y: auto;
  padding-right: 4px;
}

.activity-feed { display: grid; gap: 6px; }

.activity-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--line-light);
  font-size: 12px; transition: background .12s;
}
.activity-item:hover { background: #eef2ff; }

.activity-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.activity-dot.create { background: var(--success); }
.activity-dot.update { background: var(--info); }
.activity-dot.delete { background: var(--warn); }

.activity-text { flex: 1; color: var(--ink-2); }
.activity-time { color: var(--muted); white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; }

/* =====================================================   PROGRESS CIRCLE (KPI gauge)   ===================================================== */
.gauge-wrap { display: flex; align-items: center; justify-content: center; }
.gauge-svg { transform: rotate(-90deg); }
.gauge-bg   { fill: none; stroke: var(--line); }
.gauge-fill { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }

/* =====================================================   RESPONSIVE   ===================================================== */
/* =====================================================   BARRE DE NAVIGATION FIXE (mobile)   ===================================================== */
.bottom-nav {
  display: none;                 /* masquée sur desktop (la sidebar suffit) */
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 200;
  align-items: stretch; justify-content: space-around;
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(15,23,42,.08);
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));  /* encoche iPhone */
}
.bottom-nav button {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; cursor: pointer;
  padding: 6px 2px; border-radius: 12px;
  color: var(--muted); font-family: inherit; font-size: 10.5px; font-weight: 700;
  transition: color .15s, background .15s;
}
.bottom-nav button svg { width: 22px; height: 22px; flex-shrink: 0; }
.bottom-nav button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bottom-nav button:active { transform: scale(.94); }
.bottom-nav button.active {
  color: var(--accent);
  background: var(--accent-3);
}
html.dark .bottom-nav { background: #1e293b; border-color: #334155; }

@media (max-width:1200px) { .dash-kpi-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } }
@media (max-width:900px)  { .dash-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:1024px) { .settings-grid { grid-template-columns: 1fr; } .dash-two-col { grid-template-columns: 1fr; } .dash-chart-row { grid-template-columns: 1fr; } }

@media (max-width:900px) {
  body { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top:0; left:0; width:248px; height:100%; transform:translateX(-100%); transition:transform .25s var(--ease); z-index:210; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .sidebar.open { transform:translateX(0); box-shadow:var(--sh-xl); }
  .sidebar-toggle { display: flex; }
  .main { padding: 10px 10px; padding-bottom: 78px; height: 100vh; overflow-y: auto; }
  .bottom-nav { display: flex; }
  /* Menu latéral ouvert : on masque la barre du bas pour voir tout le menu (Guide + Déconnexion) */
  .sidebar.open ~ .bottom-nav { display: none !important; }
  .split { grid-template-columns: 1fr; }
  .form-panel { position: static; }
  .dash-kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .global-search-wrap { max-width: 180px; }
  .art-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
  /* Mobile : on réserve la place du badge tendance pour qu'il ne chevauche
     pas le libellé « Ventes aujourd'hui » sur les cartes larges. */
  .dk-card:has(.dk-badge) .dk-body,
  .dk-today .dk-body { padding-right: 72px; }
  .dk-badge { top: 10px; }
}

@media (max-width:600px) {
  .dash-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dk-value { font-size: 13px; }
  .field-grid, .modal-form-grid { grid-template-columns: 1fr; }
  .modal-form-grid .span-2 { grid-column: 1; }
  .modal-profit-preview { grid-template-columns: 1fr; }
  .global-search-wrap { display: none; }

  /* Topbar mobile alignée sur une seule ligne :
     ☰ menu  +  titre de la page  +  sélecteur de thème (à droite).
     Bannière de bienvenue, horloge, notifs, actualiser et export masqués. */
  .topbar {
    margin-bottom: 12px; padding-bottom: 10px;
    flex-wrap: nowrap; gap: 10px;
  }
  .topbar-left { flex: 1; min-width: 0; }
  .topbar-left h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-welcome { display: none; }
  .topbar-left p#page-subtitle { display: none; }
  /* On garde la zone de droite mais on n'y montre que le thème */
  .topbar-right { display: flex; gap: 6px; }
  .topbar-right .dash-update-badge,
  .topbar-right .clock-badge,
  .topbar-right .notif-wrap,
  .topbar-right .refresh-btn,
  .topbar-right .export-wrap { display: none; }

  /* Onglets Paramètres plus compacts sur téléphone */
  .settings-tab-btn { padding: 9px 12px !important; font-size: 13px; }
}

/* =====================================================   SÉLECTEUR DE THÈME (topbar)   ===================================================== */

.theme-select-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 99px; padding: 6px 12px 6px 10px;
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  box-shadow: var(--sh-xs);
  transition: border-color .15s, box-shadow .2s;
}
.theme-select-wrap:hover { border-color: var(--accent-2); box-shadow: var(--sh); }

.theme-select-icon {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(135deg, #fef3c7, #fbbf24);
  color: #d97706; flex-shrink: 0;
  transition: background .3s, color .3s;
}
.theme-select-icon svg { width: 11px; height: 11px; }
html.dark .theme-select-icon,
html[data-theme="slate"] .theme-select-icon {
  background: linear-gradient(135deg, #1e3a5f, #3b82f6);
  color: #bfdbfe;
}

.theme-select-label {
  font-weight: 700; color: var(--ink-3);
  white-space: nowrap;
}

select.theme-select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none; outline: none;
  color: var(--ink); font-weight: 700; font-size: 12px;
  font-family: inherit; cursor: pointer;
  padding: 2px 18px 2px 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 12px;
}
select.theme-select:focus { color: var(--accent); }
select.theme-select option { color: #0d1b2e; background: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .theme-select-label { display: none; }
  .theme-select-wrap { padding: 6px 10px; }
  select.theme-select { padding-right: 16px; }
}
@media (max-width: 640px) {
  /* Le thème reste visible dans la topbar mobile (aligné à droite),
     mais compact : icône + menu déroulant, sans libellé. */
  .theme-select-wrap { padding: 6px 8px; gap: 4px; }
  select.theme-select { font-size: 12px; max-width: 92px; }
}

/* =====================================================   ARTICLES — BARRE CONTRÔLE   ===================================================== */

.art-control-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.art-control-left { flex-shrink: 0; }
.art-count-badge {
  font-size: 12px; font-weight: 900;
  background: linear-gradient(135deg, #E65100, #FF9800);
  color: #fff;
  border-radius: 99px;
  padding: 2px 11px;
  box-shadow: 0 2px 8px rgba(245,124,0,.35);
  letter-spacing: .2px;
}

.art-search-wrap {
  flex: 1; min-width: 200px; max-width: 360px;
  position: relative; display: flex; align-items: center;
}
.art-search-wrap svg {
  position: absolute; left: 10px;
  width: 14px; height: 14px; color: var(--muted); pointer-events: none;
}
.art-search-wrap input {
  width: 100%; padding: 8px 12px 8px 32px;
  font-size: 13px; border-radius: 99px;
  border: 1.5px solid var(--line); background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.art-search-wrap input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(245,124,0,.1);
  outline: none;
}

.art-control-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* =====================================================   ARTICLES — FILTRES   ===================================================== */

.art-filter-panel {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--sh-xs);
  transition: box-shadow .2s;
}
.art-filter-panel:focus-within,
.art-filter-panel.active { box-shadow: 0 0 0 3px rgba(245,124,0,.1), var(--sh-sm); border-color: var(--accent-2); }

.art-filter-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.art-filter-header:hover { background: var(--line-light); }

.art-filter-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .4px;
}
.art-filter-title svg { color: var(--accent); width: 13px; height: 13px; }

.art-filter-chevron {
  width: 16px; height: 16px; color: var(--muted);
  transition: transform .25s var(--ease);
}
.art-filter-panel.open .art-filter-chevron { transform: rotate(180deg); }

.art-filter-badge {
  font-size: 11px; font-weight: 700;
  background: var(--accent-dark); color: #fff;
  border-radius: 99px; padding: 2px 9px;
  animation: popIn .25s var(--spring);
}

/* Corps du filtre (accordéon) */
.art-filter-body {
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  border-top: 0px solid var(--line);
}
.art-filter-panel.open .art-filter-body {
  max-height: 500px;
  border-top-width: 1px;
}

.art-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px 20px;
  padding: 14px 18px 10px;
}
.art-filter-span2 { grid-column: span 2; }

.art-filter-group { display: flex; flex-direction: column; gap: 5px; }
.art-filter-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted);
}
.art-filter-group input[type="text"],
.art-filter-group input[type="number"],
.art-filter-group select {
  font-size: 12px; padding: 6px 9px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--bg); color: var(--ink);
  width: 100%;
}

/* Radio buttons custom — taille réduite */
.art-radio-group { display: flex; flex-wrap: wrap; gap: 4px; }
.art-radio {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
  padding: 3px 8px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--panel);
  transition: background .12s, border-color .12s, color .12s;
  user-select: none;
}
.art-radio:hover { border-color: var(--accent-2); background: var(--accent-3); }
.art-radio input[type="radio"] { display: none; }
.art-radio:has(input:checked) {
  background: var(--accent-dark); border-color: var(--accent-dark);
  color: #fff; font-weight: 700;
}

.art-filter-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 18px 12px;
  border-top: 1px solid var(--line-light);
}
.art-filter-actions button { font-size: 12px; padding: 7px 14px; }

/* Résultats filtrés */
.art-filter-info {
  font-size: 11px; color: var(--muted);
  padding: 4px 2px 6px;
  display: flex; align-items: center; gap: 8px;
}
.art-filter-info strong { color: var(--accent); font-weight: 700; }

/* =====================================================   ARTICLES — GRILLE CARTES   ===================================================== */

/* Toggle vue */
.art-view-toggle { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.art-view-btn {
  border: 0; background: var(--panel); color: var(--muted);
  padding: 7px 10px; cursor: pointer; display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.art-view-btn:hover { background: var(--line-light); color: var(--ink); }
.art-view-btn.active { background: var(--accent-dark); color: #fff; }

/* Grille */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 4px 0 8px;
}

/* Wrapper scroll du mode mosaïque */
#articles-grid-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  padding: 0 16px 16px;
}

/* Carte article */
.art-card {
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--panel);
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s var(--spring), box-shadow .2s var(--ease), border-color .2s;
  animation: artCardIn .3s var(--spring) both;
  box-shadow: var(--sh-xs);
}
.art-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh);
  border-color: rgba(245,124,0,.4);
}
.art-card.expanded {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,124,0,.12), var(--sh);
  grid-column: 1 / -1;
  cursor: default;
}

@keyframes artCardIn {
  from { opacity:0; transform: scale(.94) translateY(10px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.art-card:nth-child(1){animation-delay:.03s}.art-card:nth-child(2){animation-delay:.06s}
.art-card:nth-child(3){animation-delay:.09s}.art-card:nth-child(4){animation-delay:.12s}
.art-card:nth-child(5){animation-delay:.15s}.art-card:nth-child(6){animation-delay:.18s}
.art-card:nth-child(7){animation-delay:.21s}.art-card:nth-child(8){animation-delay:.24s}

/* Header de carte (toujours visible) */
.art-card-head {
  padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}

/* Bande de couleur en haut selon stock */
.art-card::before {
  content: '';
  display: block; height: 4px; width: 100%;
  background: var(--success);
  transition: background .2s;
}
.art-card.low-stock::before { background: var(--warn); }
.art-card.no-stock::before  { background: #94a3b8; }

/* Image miniature */
.art-card-img {
  width: 100%; height: 90px;
  object-fit: contain;
  background: var(--line-light);
  border-radius: var(--r-sm);
  display: block;
}
.art-card-img-placeholder {
  width: 100%; height: 90px;
  background: linear-gradient(135deg, var(--line-light) 0%, var(--line) 100%);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 28px; color: var(--muted);
}

/* Code + description */
.art-card-code {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--accent-dark); background: var(--accent-3);
  border: 1px solid rgba(245,124,0,.2);
  border-radius: var(--r-xs); padding: 2px 7px;
  display: inline-block; width: fit-content;
}
.art-card-desc {
  font-size: 12px; font-weight: 700; color: var(--ink);
  line-height: 1.4; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Prix + stock (footer de la tête) */
.art-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--line-light);
}
.art-card-price {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  font-weight: 800; color: var(--ink);
}
.art-card-stock {
  font-size: 12px; font-weight: 800; font-family: 'JetBrains Mono', monospace;
  padding: 3px 10px; border-radius: 99px;
}
.art-card-stock.ok   { background: var(--success-2); color: var(--success); }
.art-card-stock.low  { background: var(--warn-2);    color: var(--warn); }
.art-card-stock.zero { background: var(--line);      color: var(--muted); }

/* ── MENU HAMBURGER ── */
.art-menu-btn {
  position: absolute; top: 10px; right: 36px;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3.5px;
  cursor: pointer; z-index: 10;
  transition: background .15s, border-color .15s, transform .15s;
  padding: 0;
}
.art-menu-btn:hover  { background: var(--line-light); border-color: var(--accent-2); }
.art-menu-btn.active { background: var(--accent-dark); border-color: var(--accent-dark); }
.art-menu-btn.active .art-menu-line { background: #fff; }

.art-menu-line {
  display: block; height: 2px; border-radius: 2px;
  background: var(--ink-3);
  transition: background .15s, width .15s;
}
.art-menu-line.l1 { width: 12px; background: var(--warn); }
.art-menu-line.l2 { width: 14px; }
.art-menu-line.l3 { width: 10px; }
.art-menu-btn.active .l1,
.art-menu-btn.active .l2,
.art-menu-btn.active .l3 { background: #fff; width: 14px; }


.art-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 10px 14px;
  border: 0; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; text-align: left;
  transition: background .1s, color .1s;
}
.art-menu-item:hover { background: var(--line-light); color: var(--ink); }
.art-menu-item svg   { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.art-menu-item:hover svg { color: var(--accent); }
.art-menu-item.danger       { color: var(--warn); }
.art-menu-item.danger svg   { color: var(--warn); }
.art-menu-item.danger:hover { background: var(--warn-bg); }

.art-menu-sep { height: 1px; background: var(--line); margin: 4px 0; }

/* ── Cartes commandes ── */
.ord-card::before { background: linear-gradient(90deg, #f97316, #fb923c); }
.ord-card-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
  display: grid; place-items: center;
}
.ord-card-icon svg { width: 20px; height: 20px; stroke: #ea580c; }
.ord-card-date {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); margin-bottom: 3px;
}

/* Colonne image dans le tableau liste */
#articles-table td:first-child,
#articles-list-wrap thead th:first-child {
  width: 52px; padding: 6px 4px; text-align: center;
}
#articles-table td:first-child img,
#articles-table td:first-child div {
  display: block; margin: 0 auto;
}

/* Vue liste — bouton hamburger inline */
.list-menu-btn { position: static; width: 30px; height: 30px; }

/* Menu flottant partagé */
.art-float-menu {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  min-width: 168px;
  z-index: 9999;
}

/* Expand arrow */
.art-card-arrow {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--line-light); display: grid; place-items: center;
  transition: transform .25s var(--ease), background .15s;
  color: var(--muted);
}
.art-card-arrow svg { width: 12px; height: 12px; }
.art-card.expanded .art-card-arrow { transform: rotate(180deg); background: var(--accent-3); color: var(--accent); }

/* ── PANNEAU DÉTAIL (accordion) ── */
.art-card-detail {
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s;
  opacity: 0;
}
.art-card.expanded .art-card-detail {
  max-height: 400px;
  opacity: 1;
}

.art-detail-inner {
  padding: 16px 16px 14px;
  background: linear-gradient(to bottom, var(--line-light), var(--panel));
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.art-detail-row {
  display: flex; flex-direction: column; gap: 2px;
}
.art-detail-row span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.art-detail-row strong { font-size: 13px; font-weight: 700; color: var(--ink); font-family: 'JetBrains Mono', monospace; }

.art-detail-actions {
  grid-column: 1/-1;
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 10px; border-top: 1px solid var(--line);
  margin-top: 4px;
}

/* Marge badge dans la carte */
.art-margin-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
}
.art-margin-badge.good { background: var(--success-2); color: var(--success); }
.art-margin-badge.ok   { background: var(--amber-bg);  color: var(--amber); }
.art-margin-badge.bad  { background: var(--warn-2);    color: var(--warn); }

/* Tags catégorie / marque / couleur sur les cartes articles */
.art-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; border-radius: 99px; padding: 1px 7px;
  background: var(--accent-3); color: var(--accent-dark);
  border: 1px solid rgba(245,124,0,.2); white-space: nowrap;
  max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}
.art-tag-brand {
  background: #F3E8FF; color: #7C3AED; border-color: rgba(124,58,237,.2);
}
.art-tag-color {
  background: #ECFDF5; color: #059669; border-color: rgba(5,150,105,.2);
  display: inline-flex; align-items: center; gap: 4px; text-transform: none;
}
.art-tag-color .color-chip-dot {
  width: 7px; height: 7px; border: 1px solid rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

/* =====================================================   MODE SOMBRE   ===================================================== */
html.dark {
  --bg:          #0f172a;
  --panel:       #1e293b;
  --panel-2:     #162032;
  --ink:         #f1f5f9;
  --ink-2:       #cbd5e1;
  --ink-3:       #94a3b8;
  --muted:       #64748b;
  --line:        #334155;
  --line-light:  #1e293b;

  --accent:      #FF9800;
  --accent-2:    #FFB74D;
  --accent-3:    #4E2700;
  --accent-dark: #E65100;

  --sb-bg:       #020817;
  --sb-glass:    rgba(255,255,255,.03);
  --sb-hover:    rgba(255,255,255,.06);
  --sb-active:   rgba(245,124,0,.2);
  --sb-text:     #c4a47f;
  --sb-active-t: #FFF3E0;
  --sb-border:   rgba(255,255,255,.05);

  --success:     #34d399;
  --success-bg:  #022c22;
  --success-2:   #064e3b;
  --warn:        #f87171;
  --warn-bg:     #2d0a0a;
  --warn-2:      #450a0a;
  --info:        #60a5fa;
  --info-bg:     #1e3a5f;
  --amber:       #fbbf24;
  --amber-bg:    #292524;
}

/* =====================================================   THÈMES PROFESSIONNELS ALTERNATIFS   ===================================================== */

/* ── Océan (clair, bleu professionnel) ── */
html[data-theme="ocean"] {
  --bg:          #eef4f9;
  --panel:       #ffffff;
  --panel-2:     #f3f8fc;
  --line:        #dce6f0;
  --line-light:  #f0f6fb;

  --accent:      #0277BD;
  --accent-2:    #29B6F6;
  --accent-3:    #E1F5FE;
  --accent-dark: #01579B;

  --sb-bg:       #07182b;
  --sb-glass:    rgba(255,255,255,.04);
  --sb-hover:    rgba(255,255,255,.08);
  --sb-active:   rgba(2,119,189,.25);
  --sb-text:     #90caf9;
  --sb-active-t: #E1F5FE;
  --sb-border:   rgba(255,255,255,.07);
}

/* ── Émeraude (clair, vert professionnel) ── */
html[data-theme="emerald"] {
  --bg:          #eef7f4;
  --panel:       #ffffff;
  --panel-2:     #f3faf8;
  --line:        #dcebe5;
  --line-light:  #effaf6;

  --accent:      #00897B;
  --accent-2:    #26C6A6;
  --accent-3:    #E0F2F1;
  --accent-dark: #00695C;

  --sb-bg:       #07211c;
  --sb-glass:    rgba(255,255,255,.04);
  --sb-hover:    rgba(255,255,255,.08);
  --sb-active:   rgba(0,137,123,.25);
  --sb-text:     #80cbc4;
  --sb-active-t: #E0F2F1;
  --sb-border:   rgba(255,255,255,.07);
}

/* ── Violet Royal (clair, violet professionnel) ── */
html[data-theme="violet"] {
  --bg:          #f3f1fb;
  --panel:       #ffffff;
  --panel-2:     #f7f5fd;
  --line:        #e3ddf5;
  --line-light:  #f5f2fc;

  --accent:      #6D28D9;
  --accent-2:    #9D7AEA;
  --accent-3:    #EDE9FE;
  --accent-dark: #5B21B6;

  --sb-bg:       #160f2e;
  --sb-glass:    rgba(255,255,255,.04);
  --sb-hover:    rgba(255,255,255,.08);
  --sb-active:   rgba(109,40,217,.25);
  --sb-text:     #c4b5fd;
  --sb-active-t: #EDE9FE;
  --sb-border:   rgba(255,255,255,.07);
}

/* ── Graphite (sombre, accent gris-bleu) — variante de html.dark ── */
html[data-theme="slate"] {
  --accent:      #64748B;
  --accent-2:    #94A3B8;
  --accent-3:    #1e293b;
  --accent-dark: #475569;

  --sb-active:   rgba(100,116,139,.3);
  --sb-text:     #cbd5e1;
  --sb-active-t: #f1f5f9;
}

html.dark body { background: var(--bg); }
html.dark input, html.dark textarea, html.dark select {
  background: #1e293b; color: var(--ink); border-color: var(--line);
}
html.dark input:focus, html.dark textarea:focus, html.dark select:focus {
  border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(255,152,0,.15);
}
html.dark .login-card { background: #1e293b; }
html.dark .login-title { color: var(--ink); }
html.dark tbody tr:hover td { background: #334155; }
html.dark .art-card { background: #1e293b; border-color: #334155; }
html.dark .art-card:hover { border-color: var(--accent-2); }
html.dark .art-card-img-placeholder { background: linear-gradient(135deg, #1e293b, #334155); }
html.dark .art-detail-inner { background: linear-gradient(to bottom, #0f172a, #1e293b); }
html.dark .dash-welcome { background: linear-gradient(135deg,#020817,#0e2233); }
html.dark .activity-item:hover { background: #334155; }

/* =====================================================   RECHERCHE GLOBALE   ===================================================== */
.global-search-wrap {
  position: relative;
  flex: 1; max-width: 300px;
}
.global-search-wrap input {
  width: 100%; padding: 7px 12px 7px 32px;
  font-size: 13px; border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
}
.global-search-wrap input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(245,124,0,.1); outline: none; }

.global-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-lg);
  z-index: 500; max-height: 360px; overflow-y: auto;
  animation: dropIn .15s var(--ease);
}
.gs-section {
  padding: 8px 12px 4px;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--line-light);
}
.gs-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; font-size: 12px; cursor: pointer;
  border-bottom: 1px solid var(--line-light);
  transition: background .1s;
}
.gs-item:hover { background: var(--line-light); }
.gs-item span { flex-shrink: 0; }
.gs-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* =====================================================   NOTIFICATIONS   ===================================================== */
.notif-wrap { position: relative; }

.notif-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center; cursor: pointer;
  position: relative; color: var(--ink-3);
  box-shadow: var(--sh-xs);
  transition: background .15s, color .15s;
}
.notif-btn svg { width: 16px; height: 16px; }
.notif-btn:hover { background: var(--line-light); color: var(--accent); }

.notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); border: 2px solid var(--panel);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%,100%{ transform: scale(1); opacity:1; }
  50%    { transform: scale(1.3); opacity:.7; }
}

.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); z-index: 600; overflow: hidden;
  animation: dropIn .18s var(--ease);
}

.notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 800; color: var(--ink);
}
.notif-count-label {
  background: var(--warn); color: #fff;
  font-size: 10px; font-weight: 800; border-radius: 99px;
  padding: 1px 7px;
}

.notif-list { max-height: 340px; overflow-y: auto; }
.notif-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }

.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-light);
  transition: background .1s;
}
.notif-item:hover { background: var(--line-light); }
.notif-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 12px; font-weight: 700; color: var(--ink); }
.notif-text  { font-size: 11px; color: var(--muted); margin-top: 1px; }
.notif-time  { font-size: 10px; color: var(--muted); white-space: nowrap; }

.notif-warn    { border-left: 3px solid var(--amber); }
.notif-error   { border-left: 3px solid var(--warn); }
.notif-success { border-left: 3px solid var(--success); }
.notif-info    { border-left: 3px solid var(--info); }

/* Notification cliquable (mène à la vue concernée) */
.notif-clickable { cursor: pointer; }
.notif-clickable:hover { background: var(--line-light); }
.notif-clickable:hover .notif-go { transform: translateX(3px); color: var(--accent); }
.notif-go {
  align-self: center; flex-shrink: 0;
  font-size: 18px; font-weight: 700; color: var(--muted);
  transition: transform .12s, color .12s;
}

/* =====================================================   OBJECTIF MENSUEL   ===================================================== */
.monthly-goal-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #FFF8F0, #FFF3E0);
  border: 1px solid #FFCC80; border-radius: var(--r-lg);
  margin-bottom: 18px;
}
.mg-left { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.mg-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-dark); }
.mg-amounts { font-size: 12px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
.mg-track {
  flex: 1; height: 8px; background: rgba(245,124,0,.15);
  border-radius: 99px; overflow: hidden;
}
.mg-fill {
  height: 100%; border-radius: 99px;
  background: var(--accent-2);
  transition: width 1.2s var(--ease);
}
.mg-pct { font-size: 13px; font-weight: 900; color: var(--accent-dark); font-family: 'JetBrains Mono',monospace; min-width: 40px; text-align: right; }

/* =====================================================   FIDÉLITÉ CLIENTS   ===================================================== */
.loyalty-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 99px; margin-top: 2px;
}
.loyalty-badge.gold   { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.loyalty-badge.silver { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.loyalty-badge.bronze { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }
.loyalty-badge.new    { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }

/* =====================================================   DÉPENSES   ===================================================== */
.exp-summary {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 10px 18px 0;
}
.exp-summary-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-3);
}
.exp-summary-item strong { font-size: 15px; font-weight: 800; color: var(--warn); font-family: 'JetBrains Mono',monospace; }

/* =====================================================   CORBEILLE   ===================================================== */
.trash-grid { display: grid; gap: 10px; }

.trash-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--line-light);
  transition: background .12s;
}
.trash-card:hover { background: var(--warn-bg); border-color: #fca5a5; }

.trash-type-icon { font-size: 24px; flex-shrink: 0; }
.trash-info { flex: 1; min-width: 0; }
.trash-info strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.trash-info span   { display: block; font-size: 12px; color: var(--muted); }
.trash-info small  { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.trash-actions { display: flex; gap: 6px; }

/* =====================================================   BON DE COMMANDE   ===================================================== */
.modal-sale-order {
  width: min(960px, 97vw);
  max-height: 96vh;
  transition: width .25s ease, max-height .25s ease, border-radius .25s ease;
}
/* Mode plein écran */
.so-fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  height: 100vh;
  border-radius: 0 !important;
  padding: 20px 28px 18px;
}

/* N° de commande — affichage simple */
.so-num-block {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0;
  justify-content: center;
}
.so-num-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.so-num-value {
  font-size: 16px; font-weight: 900; color: var(--ink);
  font-family: 'JetBrains Mono', monospace; letter-spacing: -.3px;
}

.so-header-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}

.so-client-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--line-light); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.so-span-2 { grid-column: 1 / -1; }

.so-products-wrap {
  margin-bottom: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.so-products-wrap .table-wrap {
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar fine et discrète */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* ── Article picker ── */
.so-art-picker { position: relative; }
.so-art-selected {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--panel); cursor: pointer; min-height: 44px;
  font-size: 12px; user-select: none;
  transition: border-color .15s, box-shadow .15s;
}
.so-art-selected:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-3); }
.so-art-selected:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-3); }
.so-art-thumb { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; background: var(--line-light); }
.so-art-lbl { flex: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.so-art-dropdown {
  position: fixed; z-index: 99999;
  width: 380px; background: var(--panel);
  border: 1.5px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  overflow: hidden;
  animation: soDropIn .12s ease;
}
@keyframes soDropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.so-art-search-wrap {
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  display: flex; align-items: center; gap: 8px;
}
.so-art-search-wrap::before { content: '🔍'; font-size: 14px; }
.so-art-search {
  flex: 1; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; background: var(--panel);
}
.so-art-search:focus { outline: none; border-color: var(--accent); }
.so-art-list { max-height: 320px; overflow-y: auto; }
.so-art-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--line-light);
  transition: background .1s;
}
.so-art-item:last-child { border-bottom: none; }
.so-art-item:hover { background: var(--accent-3); }
.so-art-item-img {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px;
  overflow: hidden; background: var(--line-light);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.so-art-item-img img { width: 48px; height: 48px; object-fit: cover; }
.so-art-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.so-art-item-code {
  font-size: 10px; font-weight: 800; color: var(--accent);
  font-family: 'JetBrains Mono', monospace; letter-spacing: .3px;
  background: var(--accent-3); padding: 1px 5px; border-radius: 4px;
  display: inline-block; width: fit-content;
}
.so-art-item-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-art-item-price {
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.so-art-item-price-val { color: var(--ink); }
.so-art-stk-ok   { font-size: 10px; background: #dcfce7; color: #16a34a; padding: 1px 6px; border-radius: 20px; font-weight: 600; }
.so-art-stk-low  { font-size: 10px; background: #fef9c3; color: #b45309; padding: 1px 6px; border-radius: 20px; font-weight: 600; }
.so-art-stk-zero { font-size: 10px; background: #fee2e2; color: #dc2626; padding: 1px 6px; border-radius: 20px; font-weight: 600; }
.so-art-out { opacity: .5; }
.so-art-no-img { font-size: 22px; }
.so-art-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* Tableau produits — lignes aérées */
.so-table { min-width: 600px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.so-table thead th {
  background: #1e293b; color: #e2e8f0;
  padding: 11px 12px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px;
  position: relative; user-select: none;
  overflow: hidden; white-space: nowrap;
}
.so-table thead th:first-child { border-radius: 8px 0 0 0; }
.so-table thead th:last-child  { border-radius: 0 8px 0 0; }

/* Quantité plafonnée au stock : flash rouge bref */
.so-qty.so-qty-over { border-color: #ef4444 !important; background: #fef2f2; animation: soQtyFlash .6s ease; }
@keyframes soQtyFlash { 0%,100%{background:#fef2f2} 50%{background:#fecaca} }

/* Poignée de redimensionnement */
.so-col-resizer {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 5px; cursor: col-resize;
  background: transparent;
  transition: background .15s;
  z-index: 2;
}
.so-col-resizer:hover, .so-col-resizer.active { background: var(--accent); opacity: .7; }
.so-table-resizing { cursor: col-resize !important; user-select: none !important; }
.so-table tbody tr { transition: background .1s; }
.so-table tbody tr:hover { background: var(--accent-3); }
.so-table tbody td { padding: 8px 8px; border-bottom: 1px solid var(--line-light); vertical-align: middle; }
.so-table input, .so-table select { padding: 7px 9px; font-size: 13px; border-radius: 7px; border: 1px solid var(--line); }
.so-table input:focus, .so-table select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-3); }
.so-table input.readonly-field { background: var(--line-light); color: var(--ink-3); border-color: transparent; }
.so-table input.so-desc { background: transparent; color: var(--ink-2); font-style: italic; border: none; box-shadow: none; font-size: 12px; padding-left: 2px; }
.so-table .so-total { font-weight: 700; color: var(--ink); background: var(--line-light); border-color: transparent; }

.so-summary-grid {
  display: grid; grid-template-columns: 1fr 300px; gap: 16px;
  align-items: start; margin-top: 4px;
}
@media (max-width: 700px) {
  .so-summary-grid { grid-template-columns: 1fr; }
  .so-header-grid  { grid-template-columns: 1fr; }
  .so-client-grid  { grid-template-columns: 1fr; }
  .so-art-dropdown { width: calc(100vw - 32px) !important; left: 16px !important; right: 16px; }
  .so-fullscreen   { padding: 14px 12px 12px; }

  /* Tableau produits en scroll horizontal sur mobile */
  .so-products-wrap .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .so-table { min-width: 520px; font-size: 12px; }
  .so-table thead th { padding: 8px 7px; font-size: 10px; }
  .so-table tbody td { padding: 6px 5px; }
  .so-table input, .so-table select { padding: 5px 6px; font-size: 11px; }
  /* Description visible mais compacte sur mobile */
  .so-table th:nth-child(3), .so-table td:nth-child(3) { min-width: 90px; }
  .so-art-selected { min-height: 38px; padding: 5px 7px; }
  .so-art-thumb { width: 26px; height: 26px; }
}

.so-inputs { display: grid; gap: 10px; }

/* Ligne remise + livraison + TVA côte à côte */
.so-inputs-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.so-input-short { display: flex; flex-direction: column; gap: 4px; }
.so-input-short input { width: 120px; }

/* TVA toggle */
.so-tva-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px 0;
}
.so-tva-label {
  font-size: 10px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .5px;
}
.so-tva-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;
}
.so-tva-toggle input[type="checkbox"] { display: none; }
.so-tva-track {
  width: 36px; height: 20px; border-radius: 99px;
  background: var(--line); border: 1px solid var(--line);
  position: relative; transition: background .2s;
  flex-shrink: 0;
}
.so-tva-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.so-tva-toggle input:checked ~ .so-tva-track {
  background: #f59e0b; border-color: #f59e0b;
}
.so-tva-toggle input:checked ~ .so-tva-track .so-tva-thumb {
  transform: translateX(16px);
}
.so-tva-text {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.so-tva-toggle input:checked ~ .so-tva-text { color: #d97706; font-weight: 700; }

/* Lieu de livraison textarea */
#so-delivery { resize: vertical; min-height: 52px; }

.so-calc-box {
  background: var(--line-light); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px;
}

.so-calc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.so-calc-row span { color: var(--ink-3); }
.so-calc-row strong { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink); }
.so-calc-row:last-of-type { border-bottom: none; }

.so-calc-net {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); border-radius: var(--r-sm);
  padding: 11px 14px; margin-top: 10px;
}
.so-calc-net span { color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.so-calc-net strong { color: #fff; font-size: 17px; font-weight: 900; font-family: 'JetBrains Mono', monospace; }

/* =====================================================   RECHERCHE GLOBALE   ===================================================== */
#global-search:focus { border-color: var(--accent-2) !important; box-shadow: 0 0 0 3px rgba(245,124,0,.15); }
.gs-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 12px 4px; background: var(--line-light); }
.gs-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 13px; transition: background .12s; }
.gs-item:hover { background: var(--line-light); }
.gs-empty { padding: 16px 12px; text-align: center; color: var(--muted); font-size: 13px; }

/* =====================================================   VUE LISTE — STYLE BUSINESS CENTRAL   ===================================================== */

.bc-list-wrap {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 0;          /* le panel parent gère l'arrondi */
  border-top: 1px solid var(--line);
  overflow: hidden;
  box-shadow: none;
  margin: 0;
}

/* Toolbar au-dessus du tableau */
.bc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2, #f8fafc);
  min-height: 38px;
}
.bc-toolbar-left { display: flex; align-items: center; gap: 8px; }
.bc-toolbar-right { display: flex; align-items: center; gap: 4px; }
.bc-sel-count { font-size: 12px; font-weight: 600; color: var(--accent-dark); }

.bc-toolbar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 5px 10px;
  border-radius: var(--r-xs); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.bc-toolbar-btn:hover { background: var(--line-light); border-color: #b0bec5; }
.bc-toolbar-btn.danger { color: var(--warn); border-color: #fca5a5; }
.bc-toolbar-btn.danger:hover { background: var(--warn-bg); }

/* Conteneur scrollable */
.bc-table-container {
  overflow-x: auto; overflow-y: auto;
  flex: 1; min-height: 0;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  contain: strict;
  /* Scrollbar stylée */
  scrollbar-width: thin;
  scrollbar-color: rgba(245,124,0,.35) transparent;
}
.bc-table-container::-webkit-scrollbar { width: 5px; height: 5px; }
.bc-table-container::-webkit-scrollbar-thumb { background: rgba(245,124,0,.4); border-radius: 99px; }
.bc-table-container::-webkit-scrollbar-track { background: transparent; }

/* ── TABLE ── */
.bc-table {
  width: 100%; min-width: 860px; border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

/* En-têtes */
.bc-table thead {
  position: sticky; top: 0; z-index: 10;
}
.bc-table thead tr {
  background: #f5f6f8;
  border-bottom: 2px solid #dde3ea;
}
.bc-table th {
  position: relative;
  padding: 0 10px; height: 34px;
  font-size: 11px; font-weight: 700; color: #5a6a7e;
  text-transform: uppercase; letter-spacing: .4px;
  text-align: left; white-space: nowrap; overflow: hidden;
  border-right: 1px solid #e8ecf0;
  user-select: none;
}
.bc-table th:last-child { border-right: 0; }

/* ── Handle de redimensionnement de colonne ── */
.bc-resize-handle { display: none; } /* div legacy — remplacé par .bc-col-grip */

/* Poignée de redimensionnement (souris + tactile) au bord droit de la colonne */
.bc-col-grip {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 4;
  touch-action: none;            /* au doigt : redimensionne au lieu de scroller */
}
.bc-col-grip.active { background: var(--accent); opacity: .5; }
/* Le bouton ▼ de filtre reste cliquable au-dessus de la poignée */
.bc-filter-btn { position: relative; z-index: 5; }

/* Écrans tactiles : poignée plus large + repère visible pour savoir où tirer */
@media (hover: none) and (pointer: coarse) {
  .bc-col-grip { width: 16px; }
  .bc-col-grip::after {
    content: '';
    position: absolute;
    right: 4px; top: 8px; bottom: 8px;
    width: 3px;
    background: #c2ccd6;
    border-radius: 3px;
  }
  .bc-col-grip.active::after { background: var(--accent); }
}

/* ── Bouton filtre ▼ dans les headers ── */
.bc-th-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.bc-filter-btn {
  display: none; /* visible quand hover sur le th */
  align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 3px;
  border: none; background: transparent;
  font-size: 8px; color: var(--muted);
  cursor: pointer; padding: 0; margin-left: 2px;
  transition: background .12s, color .12s;
  line-height: 1;
}
.bc-table th:hover .bc-filter-btn,
.bc-table th.bc-col-filtered .bc-filter-btn { display: inline-flex; }
.bc-filter-btn:hover { background: rgba(245,124,0,.15); color: var(--accent-dark); }

/* En-tête avec filtre actif */
.bc-table th.bc-col-filtered { background: #FFF3E0 !important; }
.bc-table th.bc-col-filtered .bc-filter-btn { color: var(--accent-dark); background: rgba(245,124,0,.2); display: inline-flex; }
html.dark .bc-table th.bc-col-filtered { background: #2e1f0a !important; }

/* ── Dropdown filtre Excel flottant ── */
/* ══════════════════════════════════════════
   DROPDOWN FILTRE — STYLE EXCEL EXACT
   ══════════════════════════════════════════ */
.bc-col-filter-panel {
  position: fixed; z-index: 9999;
  background: #fff;
  border: 1px solid #ababab;
  border-radius: 2px;
  box-shadow: 4px 4px 12px rgba(0,0,0,.25);
  width: 268px;
  font-family: 'Segoe UI', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  animation: dropIn .12s ease;
  overflow: hidden;
}
html.dark .bc-col-filter-panel {
  background: #2d3748; border-color: #4a5568; color: #e2e8f0;
}

/* Section = groupe de boutons menu */
.bc-cff-section { padding: 2px 0; }

/* Séparateur */
.bc-cff-sep { height: 1px; background: #d0d0d0; margin: 2px 0; }
html.dark .bc-cff-sep { background: #4a5568; }

/* Ligne de menu */
.bc-cff-menu-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 5px 14px 5px 8px;
  border: none; background: transparent;
  text-align: left; cursor: pointer;
  font-size: 13px; color: #1f1f1f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .08s;
}
.bc-cff-menu-item:hover { background: #e3effd; color: #1f1f1f; }
html.dark .bc-cff-menu-item { color: #e2e8f0; }
html.dark .bc-cff-menu-item:hover { background: #3a4a63; }

.bc-cff-menu-item:disabled,
.bc-cff-menu-item.disabled { color: #aaa; cursor: default; }
.bc-cff-menu-item:disabled:hover,
.bc-cff-menu-item.disabled:hover { background: transparent; }

.bc-cff-menu-icon {
  width: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #444;
}
html.dark .bc-cff-menu-icon { color: #94a3b8; }

.bc-cff-menu-arrow { margin-left: auto; color: #666; font-size: 14px; }

/* Filtres textuels — sous-menu inline */
.bc-cff-text-filters-sub { background: #f9f9f9; }
html.dark .bc-cff-text-filters-sub { background: #253048; }

.bc-cff-text-filters-sub .bc-cff-section { padding: 4px 10px 6px; display: flex; flex-direction: column; gap: 5px; }
.bc-cff-text-op {
  width: 100%; border: 1px solid #c0c0c0; border-radius: 2px;
  padding: 4px 6px; font-size: 12px; background: #fff; color: #1f1f1f;
  outline: none;
}
.bc-cff-text-val {
  width: 100%; border: 1px solid #c0c0c0; border-radius: 2px;
  padding: 4px 8px; font-size: 12px; background: #fff; color: #1f1f1f;
  outline: none;
}
.bc-cff-text-val:focus { border-color: #0078d4; box-shadow: 0 0 0 1px #0078d4; }
html.dark .bc-cff-text-op,
html.dark .bc-cff-text-val { background: #1e293b; border-color: #4a5568; color: #e2e8f0; }

/* Barre de recherche */
.bc-cff-search-wrap {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; border: none;
  background: #fff;
}
.bc-cff-search {
  flex: 1; height: 22px;
  border: 1px solid #b0b0b0; border-radius: 2px;
  padding: 0 7px; font-size: 12px;
  background: #fff; color: #1f1f1f; outline: none;
}
.bc-cff-search:focus { border-color: #0078d4; }
html.dark .bc-cff-search { background: #1e293b; border-color: #4a5568; color: #e2e8f0; }

/* Wrapper liste + tout sélectionner */
.bc-cff-list-wrap {
  border: 1px solid #c0c0c0;
  margin: 4px 8px;
  border-radius: 1px;
  background: #fff;
  max-height: 220px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
html.dark .bc-cff-list-wrap { background: #1e293b; border-color: #4a5568; }

/* "(Sélectionner tout)" */
.bc-cff-selectall {
  padding: 3px 8px 3px 6px;
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
  flex-shrink: 0;
}
html.dark .bc-cff-selectall { background: #253048; border-color: #4a5568; }

.bc-cff-check-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #1f1f1f; cursor: pointer;
  padding: 2px 0;
}
.bc-cff-check-label input[type="checkbox"] {
  width: 13px; height: 13px; accent-color: #217346; cursor: pointer;
}
html.dark .bc-cff-check-label { color: #e2e8f0; }

/* Liste des valeurs */
.bc-cff-list {
  overflow-y: auto; flex: 1;
  padding: 2px 0;
}
.bc-cff-list::-webkit-scrollbar { width: 8px; }
.bc-cff-list::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 0; }

.bc-cff-item {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 6px; cursor: pointer;
  min-height: 22px;
}
.bc-cff-item:hover { background: #e3effd; }
html.dark .bc-cff-item:hover { background: #3a4a63; }
.bc-cff-item input[type="checkbox"] { width: 13px; height: 13px; accent-color: #217346; flex-shrink: 0; cursor: pointer; }
.bc-cff-item-label { font-size: 12.5px; color: #1f1f1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
html.dark .bc-cff-item-label { color: #e2e8f0; }
.bc-cff-item-count { font-size: 10px; color: #888; flex-shrink: 0; margin-left: 4px; }

.bc-cff-empty { text-align: center; padding: 14px 10px; font-size: 12px; color: #888; }

/* Footer — boutons OK / Annuler */
.bc-cff-footer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 8px 8px;
  background: #f5f5f5;
  border-top: 1px solid #d0d0d0;
}
html.dark .bc-cff-footer { background: #253048; border-color: #4a5568; }

.bc-cff-btn-ok {
  flex: 1; height: 24px; font-size: 12px; font-weight: 600;
  border: 1px solid #0078d4; border-radius: 2px;
  background: #0078d4; color: #fff; cursor: pointer;
  transition: background .1s;
}
.bc-cff-btn-ok:hover { background: #106ebe; }

.bc-cff-btn-cancel {
  flex: 1; height: 24px; font-size: 12px; font-weight: 400;
  border: 1px solid #ababab; border-radius: 2px;
  background: #fff; color: #1f1f1f; cursor: pointer;
  transition: background .1s;
}
.bc-cff-btn-cancel:hover { background: #f0f0f0; }
html.dark .bc-cff-btn-cancel { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }
html.dark .bc-cff-btn-cancel:hover { background: #374151; }
.bc-th-check  { width: 36px; text-align: center; padding: 0 8px; }
.bc-th-img    { width: 54px; padding: 0 6px; }
.bc-th-num    { text-align: right; }
.bc-th-desc   { width: 220px; }
.bc-th-sort   { cursor: pointer; }
.bc-th-sort:hover { background: #ebeef3; color: var(--ink); }
.bc-th-sort.asc  .bc-sort-icon::after { content: ' ▲'; }
.bc-th-sort.desc .bc-sort-icon::after { content: ' ▼'; }
.bc-sort-icon { font-size: 9px; color: var(--accent); }

/* Cases à cocher header */
.bc-table thead input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--accent);
  cursor: pointer; display: block; margin: 0 auto;
}

/* Lignes */
.bc-table tbody tr {
  border-bottom: 1px solid #eef0f3;
  transition: background .08s;
  position: relative;
  height: 46px;
  contain: layout style;
}
.bc-table tbody tr:last-child { border-bottom: 0; }
.bc-table tbody tr:hover { background: #fef8f3; }
.bc-table tbody tr:hover .bc-td-actions-cell { background: #fef8f3; }
.bc-table tbody tr.bc-selected { background: #fff3e0 !important; }
.bc-table tbody tr.bc-selected .bc-td-actions-cell { background: #fff3e0; }
.bc-table tbody tr.bc-row-low-stock  { border-left: 3px solid var(--amber); }
.bc-table tbody tr.bc-row-no-stock   { border-left: 3px solid var(--warn); }

/* Ligne ouverte dans le volet récapitulatif : reste mise en évidence */
.bc-table tbody tr.bc-row-active,
.bc-table tbody tr.bc-row-active:hover {
  background: var(--accent-3) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
.bc-table tbody tr.bc-row-active .bc-td-actions-cell { background: var(--accent-3); }
.bc-table tbody tr[data-article-id] .bc-td-code {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: underline dotted transparent;
  transition: text-decoration-color .15s;
}
.bc-table tbody tr[data-article-id] .bc-td-code:hover {
  text-decoration-color: var(--accent-dark);
}

/* =====================================================   VOLET RÉCAPITULATIF ARTICLE (factbox)   ===================================================== */
.art-fb-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.35);
  z-index: 199;
  backdrop-filter: blur(1px);
}
.art-fb-backdrop.show { display: block; animation: artFbFade .2s var(--ease); }
@keyframes artFbFade { from { opacity: 0; } to { opacity: 1; } }

.art-factbox {
  position: fixed; top: 0; right: 0;
  height: 100vh; width: 380px; max-width: 100vw;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  transform: translateX(100%);
  transition: transform .28s var(--ease);
  z-index: 200;
  display: flex; flex-direction: column;
}
.art-factbox.open { transform: translateX(0); }

.art-fb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.art-fb-header h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }

.art-fb-body {
  flex: 1; min-height: 0;
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}

.art-fb-image {
  width: 100%; height: 46vh; min-height: 260px; max-height: 460px;
  border-radius: var(--r-xl); flex-shrink: 0;
  overflow: hidden; background: var(--line-light);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  padding: 6px;
  box-sizing: border-box;
}
.art-fb-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.art-fb-image .bc-img-placeholder { font-size: 96px; opacity: .6; }

/* Bloc défilable sous la photo (titre, tags, infos) */
.art-fb-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding-right: 2px;
}

.art-fb-title { display: flex; flex-direction: column; gap: 4px; }
.art-fb-code  { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--accent-dark); }
.art-fb-desc  { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.3; }

.art-fb-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.art-fb-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
  padding: 14px; border-radius: var(--r-xl);
  background: var(--line-light); border: 1px solid var(--line);
}

.art-fb-actions {
  display: flex; gap: 8px; padding-top: 4px;
}
.art-fb-actions .btn-soft, .art-fb-actions .btn-outline { flex: 1; justify-content: center; }

@media (max-width: 720px) {
  .art-factbox { width: 100vw; }
}

.bc-table td {
  padding: 0 10px; height: 46px;
  color: var(--ink-2); vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid #f0f2f5;
  font-size: 13px;
}
.bc-table td:last-child { border-right: 0; }
.bc-td-check  { width: 36px; text-align: center; padding: 0 8px; overflow: visible !important; }
.bc-td-img    { width: 54px; padding: 4px 8px; overflow: visible !important; }
.bc-td-num    { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.bc-td-code   { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent-dark); font-weight: 700; }
.bc-td-desc   { font-weight: 600; color: var(--ink); }
.bc-td-cost   { color: var(--muted) !important; font-size: 12px; }
.bc-td-price  { font-weight: 800; color: var(--ink) !important; }
.bc-td-muted  { color: var(--muted); font-size: 12px; }
/* ── Pastille couleur article (couleur réelle + libellé normalisé) ── */
.color-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--line-light); border: 1px solid var(--line);
  border-radius: 99px; padding: 3px 10px 3px 6px;
  max-width: 100%; line-height: 1.3;
}
.color-chip-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0; border: 1px solid rgba(0,0,0,.14);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
html.dark .color-chip-dot { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.color-chip span,
.color-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Variante plus grande pour le panneau de détail article */
.color-chip-lg { font-size: 13px; padding: 4px 12px 4px 7px; }
.color-chip-lg .color-chip-dot { width: 14px; height: 14px; }

/* Checkbox dans les lignes */
.bc-table tbody input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--accent);
  cursor: pointer; display: block; margin: 0 auto;
}

/* Image miniature */
.bc-img-thumb {
  width: 38px; height: 38px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--line-light); display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.bc-img-placeholder {
  width: 38px; height: 38px; border-radius: 6px;
  background: var(--line-light); border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--muted);
}

/* Stock pills BC */
.bc-stock      { font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.bc-stock.ok   { color: var(--success); }
.bc-stock.low  { color: var(--amber); }
.bc-stock.zero { color: var(--warn); }

/* Marge */
.bc-marge      { font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.bc-marge.good { color: var(--success); }
.bc-marge.ok   { color: var(--amber); }
.bc-marge.bad  { color: var(--warn); }

/* Boutons d'action inline — legacy (masqué) */
.bc-row-actions { display: none !important; }

/* Cellule actions sticky */
.bc-td-actions-cell {
  padding: 0 8px;
  text-align: right;
  white-space: nowrap;
  overflow: visible !important;
  position: sticky;
  right: 0;
  background: var(--panel, #fff);
  box-shadow: -3px 0 10px -2px rgba(0,0,0,.07);
  z-index: 3;
  vertical-align: middle;
}
.bc-td-actions-cell .bc-actions-wrap {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.bc-th-actions {
  position: sticky;
  right: 0;
  background: #f5f6f8;
  z-index: 11;
  box-shadow: -3px 0 10px -2px rgba(0,0,0,.09);
}
/* Sync sticky bg avec état de ligne */
.bc-table tbody tr:hover           .bc-td-actions-cell { background: #fef8f3; }
.bc-table tbody tr.bc-selected     .bc-td-actions-cell { background: #fff3e0; }
.bc-table tbody tr.bc-row-low-stock  .bc-td-actions-cell { background: var(--panel, #fff); }
.bc-table tbody tr.bc-row-no-stock   .bc-td-actions-cell { background: var(--panel, #fff); }
/* Bouton hamburger dans la vue liste — même apparence que vue grille */
.bc-list-menu-btn {
  opacity: .45;
  transition: opacity .15s, transform .15s;
}
.bc-table tbody tr:hover .bc-list-menu-btn,
.bc-table tbody tr.bc-selected .bc-list-menu-btn { opacity: 1; }
.bc-list-menu-btn.active { opacity: 1; transform: scale(.92); }

/* Ligne vide */
.bc-empty {
  text-align: center; padding: 40px 20px;
  color: var(--muted); font-size: 13px;
}
.bc-empty-icon { font-size: 32px; margin-bottom: 8px; display: block; opacity: .4; }

/* Footer */
.bc-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-2, #f8fafc);
  font-size: 11px; color: var(--muted);
  min-height: 30px;
}

/* Mode sombre */
html.dark .bc-table thead tr { background: #1a2744; border-bottom-color: #334155; }
html.dark .bc-table th        { color: #94a3b8; border-right-color: #2a3b52; background: #1a2744; }
html.dark .bc-table th:hover  { background: #1e3252; }
html.dark .bc-table tbody tr:hover     { background: #24304a; }
html.dark .bc-table tbody tr.bc-selected { background: #2e1f0a !important; }
html.dark .bc-table td        { border-right-color: #1e293b; color: var(--ink-2); }
html.dark .bc-toolbar         { background: #1e293b; border-color: #334155; }
html.dark .bc-footer          { background: #1e293b; border-color: #334155; }
html.dark .bc-img-placeholder { background: #1e293b; border-color: #334155; }
html.dark .bc-list-menu-btn .art-menu-line { background: #94a3b8; }
html.dark .bc-td-actions-cell { box-shadow: -3px 0 8px -2px rgba(0,0,0,.2); }
html.dark .bc-th-actions { background: #1a2744; }
html.dark .bc-table tbody tr { border-bottom-color: #1e293b; }
html.dark .bc-list-wrap { border-color: #334155; }

/* =====================================================   MOBILE — Modals plein écran   ===================================================== */
@media (max-width: 600px) {
  .modal { align-items: flex-end; }          /* glisse depuis le bas */
  .modal-box {
    width: 100vw;
    max-width: 100vw;
    max-height: 95vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;  /* arrondi seulement en haut */
    padding: 22px 18px 30px;
    animation: modalSlideUp .28s var(--ease);
    overflow-x: hidden;   /* aucune modale ne déborde latéralement */
  }
  /* Garde-fous anti-débordement pour TOUTES les modales sur mobile */
  .modal-box * { max-width: 100%; box-sizing: border-box; }
  .modal-box input,
  .modal-box select,
  .modal-box textarea { width: 100%; min-width: 0; }
  /* Les enfants de grilles doivent pouvoir rétrécir (sinon un champ force la largeur) */
  .modal-box .field-grid > *,
  .modal-box .field-3col > *,
  .modal-box .modal-form-grid > * { min-width: 0; }
  /* Grilles de champs serrées -> une seule colonne */
  .modal-box .field-3col { grid-template-columns: 1fr !important; }
  /* Rangées de boutons : repli propre au lieu de déborder à droite */
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > * { flex: 1 1 auto; }
  @keyframes modalSlideUp {
    from { opacity:0; transform: translateY(40px); }
    to   { opacity:1; transform: translateY(0); }
  }
  .modal-article.modal-box {
    max-height: 98vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  /* Les pop-ups d'import gèrent leur propre padding interne (en-tête /
     corps défilant / pied de page) -> annuler le padding générique des
     modales pour éviter un double-cadrage sur mobile. */
  .imp-modal-box, .img-modal-box {
    padding: 0; max-height: 95vh; animation: modalSlideUp .28s var(--ease);
  }
}

/* =====================================================   IMPRESSION   ===================================================== */
@media print {
  body { display: block; }
  .sidebar, .topbar, .modal-head button, .modal-actions .btn-outline, .nav, .sidebar-toggle, .bottom-nav { display: none !important; }
  .modal-box { box-shadow: none; padding: 0; }
  .modal-backdrop { display: none; }
}

/* =====================================================   RETOURS : mode + table commande   ===================================================== */
.return-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.return-mode-btn { padding: 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink-2); transition: .15s; }
.return-mode-btn:hover { border-color: var(--accent-2); }
.return-mode-btn.active { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); color: #fff; border-color: transparent; }
.return-order-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.return-order-table th { text-align: left; font-size: 10px; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.return-order-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-light); vertical-align: middle; }
.return-order-table input[type=number] { width: 64px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.return-order-table .ro-name { font-weight: 700; color: var(--ink); }
.return-order-table .ro-code { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); }

/* Lien numéro de retour dans la liste */
.link-ref { border: 0; background: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 13px; color: #c0392b; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.link-ref:hover { color: var(--accent-dark); }
.pill { display: inline-block; background: var(--accent-3, #fff3e0); color: var(--accent-dark, #e65100); font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }

/* Pop-up détail d'un retour (type reçu) */
.return-detail-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #c0392b; padding-bottom: 12px; margin-bottom: 14px; }
.return-detail-head .rd-number { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 800; color: #c0392b; }
.return-detail-head .rd-date { font-size: 12px; color: var(--muted); margin-top: 4px; }
.return-detail-head .rd-badge { background: #fbeae5; color: #c0392b; font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 99px; letter-spacing: .5px; }
.return-detail-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; background: var(--line-light); border-radius: 12px; padding: 14px 16px; }
.return-detail-info .rd-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.return-detail-info .rd-value { font-size: 14px; font-weight: 600; color: var(--ink); }
.return-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.return-detail-table th { text-align: left; font-size: 10px; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.return-detail-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-light); }
.return-detail-table tfoot td { border-top: 2px solid var(--ink-3, #334155); border-bottom: 0; padding-top: 10px; }

/* Import : doublons bloqués */
.imp-chip-red { background: #fdecea; color: #c0392b; }
.imp-dup-list { margin-top: 14px; font-size: 13px; color: #c0392b; }
.imp-dup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.imp-dup-card { display: flex; gap: 10px; align-items: center; background: #fdecea; border: 1px solid #f5c6c0; border-radius: 10px; padding: 8px 10px; }
.imp-dup-thumb { width: 46px; height: 46px; border-radius: 8px; background: #fff; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; font-size: 20px; }
.imp-dup-thumb img { width: 100%; height: 100%; object-fit: cover; }
.imp-dup-info { min-width: 0; }
.imp-dup-code { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: #c0392b; font-size: 12px; }
.imp-dup-desc { font-size: 12px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-dup-line { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* En-tête colonne Boutique : SITE / NEW (case tout + filtre) */
.bc-boutique-head { display: flex; gap: 6px; justify-content: center; }
.bc-boutique-head .bh-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bc-boutique-head .bh-lbl { font-size: 9px; font-weight: 800; color: var(--muted); letter-spacing: .3px; }
.bc-boutique-head .bh-row { display: flex; align-items: center; gap: 2px; }
.bc-boutique-head .bh-check { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent, #E65100); }
.bc-boutique-head .bc-filter-btn { font-size: 9px; padding: 0 2px; }

/* Toggles SITE / NEW dans la liste articles */
.bc-td-boutique { text-align: center; }
.art-tog-cell { display: flex; gap: 8px; align-items: center; justify-content: center; }
.art-tog { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; user-select: none; }
.art-tog input { display: none; }
.art-tog-sw { width: 30px; height: 17px; border-radius: 99px; background: #cbd5e1; position: relative; transition: .18s; }
.art-tog-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: .18s; }
.art-tog input:checked + .art-tog-sw { background: var(--accent, #E65100); }
.art-tog input:checked + .art-tog-sw::after { transform: translateX(13px); }
.art-tog-lbl { font-size: 8px; font-weight: 800; color: var(--muted); letter-spacing: .3px; }
.art-tog input:checked ~ .art-tog-lbl { color: var(--accent, #E65100); }
/* Pas de texte SITE/NEW sous les interrupteurs des lignes (les libellés sont dans l'en-tête) */
.bc-td-boutique .art-tog-lbl { display: none; }
/* Cases à cocher simples (pas d'interrupteur coulissant) dans les lignes */
.bc-td-boutique .art-tog-sw { display: none; }
.bc-td-boutique .art-tog input { display: inline-block; width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent, #E65100); margin: 0; }

/* Sélecteur de produits similaires (fiche article) */
.art-rel-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sh-lg); max-height: 240px; overflow-y: auto; margin-top: 4px; }
.art-rel-opt { padding: 9px 12px; cursor: pointer; font-size: 13px; display: flex; gap: 10px; align-items: center; margin: 0; }
.art-rel-opt:hover { background: var(--line-light); }
.art-rel-opt input[type=checkbox] { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent-dark, #e65100); cursor: pointer; }
.art-rel-txt { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.art-rel-opt small { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.art-rel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.art-rel-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-3, #fff3e0); color: var(--accent-dark, #e65100); font-size: 12px; font-weight: 700; padding: 4px 6px 4px 10px; border-radius: 99px; }
.art-rel-chip button { border: 0; background: rgba(0,0,0,.12); color: inherit; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; }

/* Sélecteur Borne / Compte (ouverture de session de caisse) */
.caisse-mode-switch { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.caisse-mode-switch button { border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 9px; cursor: pointer; }
.caisse-mode-switch button.active { background: var(--blue, #F57C00); color: #fff; }

/* Promos & Flash */
.pf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-card { border-radius: 16px; padding: 22px; color: #fff; box-shadow: var(--sh); }
.pf-card.pf-flash { background: linear-gradient(135deg, #ea580c, #f97316); }
.pf-card.pf-promo { background: linear-gradient(135deg, #b45309, #d97706); }
.pf-card-head { display: flex; align-items: center; gap: 14px; }
.pf-card .pf-ic { font-size: 30px; background: rgba(255,255,255,.2); width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; }
.pf-card .pf-title { font-size: 18px; font-weight: 800; }
.pf-card .pf-count { font-size: 13px; opacity: .9; margin-top: 2px; }
.pf-pill { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 99px; }
.pf-pill.on { background: #fdecea; color: #c0392b; }
.pf-pill.off { background: var(--line-light); color: var(--muted); }
.pf-pill.soon { background: #fff3e0; color: #e65100; }
.pf-promo-btn { border: 0; background: none; cursor: pointer; padding: 0; }
/* Cases Visible / Flash bien visibles dans le tableau */
#pf-table .pf-tog { display: inline-block; width: 18px; height: 18px; accent-color: var(--accent, #E65100); cursor: pointer; margin: 0; }
@media (max-width: 600px) { .pf-cards { grid-template-columns: 1fr; } }

/* Gestion des bannières */
.banners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.banner-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.banner-thumb { aspect-ratio: 16/6; background: var(--line-light); display: grid; place-items: center; overflow: hidden; font-size: 30px; }
.banner-thumb img { width: 100%; height: 100%; object-fit: cover; }
.banner-actions { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.banner-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; cursor: pointer; margin-right: auto; }
.banner-switch input { width: 16px; height: 16px; accent-color: var(--accent, #E65100); }

/* Modal détail commande web — responsive (petit/moyen/grand écran) */
#oorder-box { width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; }
.oo-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.oo-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) {
  #oorder-box { width: 96vw; max-height: 92vh; }
  .oo-info-grid { grid-template-columns: 1fr; }
  .oo-status-grid { grid-template-columns: 1fr; }
}

/* ===== Modale « Modification article » — confort mobile ===== */
@media (max-width: 600px) {
  .modal-article.modal-box { padding: 16px 13px 26px; max-height: 96vh; }
  .modal-article .modal-head { margin-bottom: 14px; }
  .modal-article .modal-head h3 { font-size: 16px; }
  /* Champs ≥ 16px : lisibles + évitent le zoom automatique iOS (qui décale la page) */
  .modal-article input,
  .modal-article select,
  .modal-article textarea { font-size: 16px !important; }
  /* Une colonne pour toutes les grilles de champs */
  .modal-article .field-grid,
  .modal-article .field-3col,
  .modal-article .modal-form-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .modal-article .art-form-section { margin-bottom: 14px; }
  /* Emplacements d'images supplémentaires : bien répartis */
  .modal-article #article-image2-slot,
  .modal-article #article-image3-slot,
  .modal-article #article-image4-slot,
  .modal-article #article-image5-slot { width: 84px !important; height: 84px !important; }
}