:root {
  --bg: #eef3f7;
  --panel: #ffffff;
  --ink: #111827;
  --muted: #64748b;
  --line: #dbe3ea;
  --teal: #0f8b7d;
  --blue: #2563eb;
  --violet: #6d5dfc;
  --amber: #f59e0b;
  --red: #ef4444;
  --green: #22c55e;
  --shadow: 0 18px 45px rgba(15, 23, 42, .10);
}

/* 2026-06-07 final sidebar redesign */
body.pc-v3 {
  --sidebar-width: 242px;
  --sidebar-collapsed: 88px;
}

body.pc-v3 .sidebar {
  padding: 16px 12px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(245,248,252,.98) 100%);
  border-right: 1px solid rgba(148, 163, 184, .16);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.75);
}

body.pc-v3 .brand {
  position: relative;
  gap: 12px;
  align-items: center;
  padding: 4px 6px 14px;
  margin-bottom: 10px;
}

body.pc-v3 .brand::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(15, 139, 125, .18), rgba(109, 93, 252, .08), transparent);
}

body.pc-v3 .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, #102033 0%, #17314b 100%);
  color: #f8fffd;
  font-size: .8rem;
  letter-spacing: .04em;
  box-shadow: 0 12px 24px rgba(16, 32, 51, .18);
}

body.pc-v3 .brand strong {
  font-size: 1.02rem;
  font-weight: 900;
  color: #162132;
}

body.pc-v3 .brand span {
  margin-top: 3px;
  font-size: .67rem;
  letter-spacing: .11em;
  color: #748397;
}

body.pc-v3 .sidebar-toggle {
  width: 40px;
  height: 40px;
  margin: 0 6px 14px auto;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .24);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

body.pc-v3 .sidebar-toggle:hover {
  border-color: rgba(99, 102, 241, .24);
  transform: translateY(-1px);
}

body.pc-v3 .sidebar-toggle-icon {
  width: 18px;
  height: 18px;
}

body.pc-v3 .sidebar-toggle-icon::before {
  top: 1px;
  bottom: 1px;
  left: 1px;
  width: 2px;
  border-radius: 999px;
  background: #223044;
  box-shadow:
    6px 1px 0 0 #223044,
    6px 8px 0 0 #223044,
    6px 15px 0 0 #223044;
}

body.pc-v3 .sidebar-toggle-icon::after {
  top: 6px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-right: 2px solid #223044;
  border-bottom: 2px solid #223044;
  transform: rotate(-45deg);
}

body.pc-v3 .nav-list {
  gap: 9px;
}

body.pc-v3 .nav-item {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px 10px;
  min-height: 66px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(203, 213, 225, .72);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,251,253,.98) 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

body.pc-v3 .nav-item:hover {
  border-color: rgba(148, 163, 184, .55);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
}

body.pc-v3 .nav-item.active {
  border-color: rgba(79, 70, 229, .16);
  background: linear-gradient(135deg, rgba(223,247,241,.95) 0%, rgba(238,244,255,.96) 100%);
  box-shadow: inset 3px 0 0 #0f8b7d, 0 14px 28px rgba(15, 23, 42, .08);
}

body.pc-v3 .nav-symbol,
body.pc-v3 .nav-item .nav-symbol {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fa 100%);
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .9);
  color: #17314b;
  font-size: .95rem;
  font-weight: 900;
}

body.pc-v3 .nav-item.active .nav-symbol {
  background: linear-gradient(180deg, #ffffff 0%, #e6f5f0 100%);
  color: #0f8b7d;
  box-shadow: inset 0 0 0 1px rgba(15, 139, 125, .18);
}

body.pc-v3 .nav-item > span:not(.nav-symbol) {
  align-self: end;
  font-size: .97rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #142336;
}

body.pc-v3 .nav-item small {
  align-self: start;
  font-size: .72rem;
  line-height: 1.25;
  color: #718298;
}

body.pc-v3 .nav-link-legacy {
  margin-top: 10px;
  min-height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #18314d;
  border: 1px solid rgba(203, 213, 225, .8);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
}

body.pc-v3.sidebar-collapsed .sidebar {
  padding-inline: 8px;
}

body.pc-v3.sidebar-collapsed .brand {
  justify-content: center;
  padding-inline: 0;
}

body.pc-v3.sidebar-collapsed .brand-mark {
  width: 44px;
  height: 44px;
}

body.pc-v3.sidebar-collapsed .brand-copy,
body.pc-v3.sidebar-collapsed .nav-item small,
body.pc-v3.sidebar-collapsed .nav-link-legacy {
  display: none !important;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle {
  margin: 0 auto 14px;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::before {
  left: auto;
  right: 1px;
  box-shadow:
    -6px 1px 0 0 #223044,
    -6px 8px 0 0 #223044,
    -6px 15px 0 0 #223044;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::after {
  left: 1px;
  right: auto;
  transform: rotate(135deg);
}

body.pc-v3.sidebar-collapsed .nav-item {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 6px;
  min-height: 72px;
  width: 68px;
  margin: 0 auto;
  padding: 10px 6px;
  border-radius: 18px;
}

body.pc-v3.sidebar-collapsed .nav-symbol,
body.pc-v3.sidebar-collapsed .nav-item .nav-symbol {
  margin: 0;
}

body.pc-v3.sidebar-collapsed .nav-item > span:not(.nav-symbol) {
  display: block !important;
  width: 100%;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  color: #203247;
}

body.pc-v3.sidebar-collapsed .nav-item[data-short] > span:not(.nav-symbol) {
  font-size: 0;
}

body.pc-v3.sidebar-collapsed .nav-item[data-short] > span:not(.nav-symbol)::before {
  content: attr(data-short);
  display: block;
  font-size: .62rem;
  line-height: 1.05;
}

/* Final sidebar alignment overrides for PC V3 */
body.pc-v3 .sidebar-toggle {
  width: 34px;
  height: 34px;
  margin: 0 0 14px auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #223044;
  border: 1px solid rgba(148, 163, 184, .28);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .06);
}

body.pc-v3 .sidebar-toggle-icon {
  width: 14px;
  height: 14px;
  position: relative;
  display: block;
}

body.pc-v3 .sidebar-toggle-icon::before,
body.pc-v3 .sidebar-toggle-icon::after {
  content: "";
  position: absolute;
}

body.pc-v3 .sidebar-toggle-icon::before {
  inset: 0 auto 0 1px;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
}

body.pc-v3 .sidebar-toggle-icon::after {
  top: 4px;
  right: 0;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

body.pc-v3.sidebar-collapsed .sidebar-toggle {
  margin: 0 auto 12px;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::before {
  left: auto;
  right: 1px;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::after {
  left: 0;
  right: auto;
  transform: rotate(135deg);
}

body.pc-v3.sidebar-collapsed .nav-item {
  width: 60px;
  min-height: 52px;
  padding: 8px 6px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 6px;
}

body.pc-v3.sidebar-collapsed .nav-symbol {
  width: 30px;
  height: 30px;
  font-size: .95rem;
  margin: 0 auto;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  /* Rendu « fin » : lissage des polices + ligatures/kerning propres. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Chiffres tabulaires : les montants et compteurs ne « sautent » plus d'un chiffre à l'autre. */
.stats-kpi .val, .stock-remaining, .sq-price, .sq-val, .mv-hero .v, .kpi-value, .mf-cell .v {
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1280px) {
  body {
    font-size: clamp(12px, .72vw, 14px);
  }
}

button, input {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: clamp(198px, 11vw, 230px) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 14px 10px;
  background: #f8fafc;
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 2px 4px 18px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #16202a;
  color: #dff8ef;
  font-weight: 900;
  font-size: .78rem;
}

.brand strong, .brand span {
  display: block;
}

.brand-copy {
  min-width: 0;
}

.brand span {
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sidebar-toggle {
  width: 40px;
  height: 34px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}

.sidebar-toggle:hover {
  border-color: #b7c6d6;
  background: #f8fafc;
}

.sidebar-toggle-icon {
  width: 20px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.sidebar-toggle-icon::before,
.sidebar-toggle-icon::after {
  content: "";
  position: absolute;
}

.sidebar-toggle-icon::before {
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    6px 2px 0 0 currentColor,
    6px 7px 0 0 currentColor,
    6px 12px 0 0 currentColor;
}

.sidebar-toggle-icon::after {
  top: 5px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}

.nav-symbol {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .72);
  font-size: 1rem;
  line-height: 1;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-item, .nav-link-legacy {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 10px;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.nav-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px;
  align-items: center;
}

.nav-item span, .nav-item small {
  display: block;
}

.nav-item .nav-symbol {
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  font-size: 1rem;
  font-weight: 400;
}

.nav-item span {
  font-weight: 800;
  font-size: .88rem;
}

.nav-item small {
  grid-column: 2;
  grid-row: 2;
  margin-top: 3px;
  color: var(--muted);
  font-size: .68rem;
}

.nav-item:hover, .nav-link-legacy:hover {
  background: #fff;
  border-color: var(--line);
}

.nav-item.active {
  background: #e8f7f4;
  border-color: #b7e4dc;
  color: #075e56;
}

.nav-link-legacy {
  display: block;
  margin-top: 18px;
  border-color: var(--line);
  background: #fff;
  text-align: center;
  font-weight: 800;
}

body.consultation-mode .app-shell {
  grid-template-columns: 88px minmax(0, 1fr);
}

body.consultation-mode .sidebar {
  padding-top: 18px;
}

body.consultation-mode .brand-copy,
body.consultation-mode .nav-item small,
body.consultation-mode .nav-link-legacy,
body.consultation-mode #setupButton {
  display: none !important;
}

body.consultation-mode .brand {
  justify-content: center;
  padding-bottom: 14px;
}

body.consultation-mode .sidebar-toggle {
  margin-left: auto;
  margin-right: auto;
}

body.consultation-mode .nav-item {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-items: center;
  text-align: center;
  padding: 10px 6px;
}

body.consultation-mode .nav-item span {
  font-size: .82rem;
}

body.consultation-mode .nav-item .nav-symbol {
  grid-row: 1;
  grid-column: 1;
}

body.consultation-mode .topbar-actions {
  gap: 8px;
}

.consultation-panel {
  display: grid;
  gap: 18px;
}

.consultation-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.muted-card strong {
  color: #94a3b8;
}

.consult-block {
  display: grid;
  gap: 14px;
}

.consult-block-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.consult-machine-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.consult-machine-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--consult-color) 45%, white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--consult-bg) 86%, white), rgba(255,255,255,0.98));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
}

.consult-machine-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--consult-color);
}

.consult-machine-head,
.consult-machine-stats,
.consult-machine-foot {
  position: relative;
  z-index: 1;
}

.consult-machine-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.consult-machine-head strong {
  font-size: 1rem;
  line-height: 1.3;
}

.consult-machine-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.consult-machine-stats div,
.consult-machine-foot span {
  display: grid;
  gap: 4px;
}

.consult-machine-stats b {
  font-size: 1.1rem;
  color: #0f766e;
}

.consult-machine-stats small,
.consult-machine-foot small {
  color: #64748b;
  font-size: 0.78rem;
}

.consult-machine-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 700;
}

.stock-hero {
  padding-bottom: 12px;
}

.stock-source-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.stock-source-line span,
.stock-result-count {
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 800;
}

.stock-warning {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-weight: 800;
}

.stock-subnav {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.stock-tab {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.stock-tab.active {
  background: #e8f7f4;
  border-color: #8fd8cc;
  color: #075e56;
}

.stock-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.stock-kpi {
  min-height: 96px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.stock-kpi span,
.stock-kpi small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.stock-kpi strong {
  display: block;
  margin: 4px 0;
  font-size: clamp(1.4rem, 2vw, 2.05rem);
  line-height: 1;
}

.stock-kpi.good strong {
  color: #047857;
}

.stock-kpi.warn strong {
  color: #b45309;
}

.stock-card {
  padding: 14px;
}

.stock-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.stock-card h3 {
  margin-bottom: 4px;
}

.stock-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stock-actions input {
  flex: 1 1 240px;
  width: min(320px, 42vw);
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 11px;
  background: #fff;
}

.stock-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.stock-product {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid #22c55e;
  background: #fff;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.stock-product:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, .28);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .09);
}

.stock-product:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .24);
  outline-offset: 2px;
}

.stock-product.warning {
  border-left-color: #f59e0b;
}

.stock-product.danger {
  border-left-color: #ef4444;
}

.stock-product-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.stock-product h4 {
  margin: 0 0 6px;
  font-size: .95rem;
  line-height: 1.15;
}

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

.stock-tags span {
  border-radius: 999px;
  padding: 4px 8px;
  background: #f1f5f9;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}

.stock-tags .stock-fusion-badge {
  background: #ecfeff;
  color: #0f766e;
  border: 1px solid #99f6e4;
}

.stock-tags .stock-language-badge {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}

.stock-tags .stock-language-badge.unknown {
  background: #f8fafc;
  color: #64748b;
  border: 1px dashed #cbd5e1;
}

.stock-price-hint {
  margin-top: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 0.82rem;
}
.stock-price-hint .sph-title { font-weight: 700; color: #15803d; margin-bottom: 4px; }
.stock-price-hint .sph-range { display: flex; gap: 14px; flex-wrap: wrap; color: #334155; }
.stock-price-hint .sph-range b { color: #0f172a; }
.stock-price-hint .sph-cur { margin-top: 5px; padding-top: 5px; border-top: 1px dashed #bbf7d0; color: #334155; }
.stock-price-hint .sph-cur.ok b { color: #15803d; }
.stock-price-hint .sph-cur.warn b { color: #b45309; }
.stock-price-hint .sph-cur.bad b { color: #dc2626; }

.stock-remaining {
  min-width: 54px;
  flex: none; /* garde sa place : ne se fait pas pousser/chevaucher par une réf longue */
  text-align: right;
  font-size: 1.65rem;
  color: #047857;
}

/* Réf produit : un seul mot peut être très long (ex. BOOSTMAGICMARVELSYHEROFR) -> on
   tronque proprement (…) au lieu de déborder sous le chiffre du stock. */
.stock-tags .stock-ref-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-product.warning .stock-remaining {
  color: #b45309;
}

.stock-product.danger .stock-remaining {
  color: #b91c1c;
}

.stock-mini-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.stock-mini-kpis span {
  display: grid;
  gap: 2px;
  min-height: 52px;
  align-content: center;
  padding: 8px;
  border-radius: 10px;
  background: #f8fafc;
}

.stock-mini-kpis b {
  font-size: .9rem;
}

.stock-mini-kpis small {
  color: var(--muted);
  font-weight: 800;
  font-size: .66rem;
}

.stock-lots {
  display: grid;
  gap: 5px;
}

.stock-lot {
  display: grid;
  grid-template-columns: 26px 1fr auto auto auto 28px;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  padding: 5px 6px;
  border-radius: 9px;
  background: #f8fafc;
  color: #334155;
  font-size: .72rem;
}

.stock-lot.depleted {
  opacity: .48;
}

.stock-lot-index {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e2e8f0;
  font-weight: 900;
}

.stock-icon-btn {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 950;
  cursor: pointer;
}

.stock-modal {
  max-width: 680px;
}

.modal.stock-product-detail-modal {
  width: min(720px, calc(100vw - 36px));
  overflow-x: hidden;
}

.stock-product-detail-modal .modal-head {
  position: relative;
  padding-right: 74px;
}

.stock-product-detail-modal .modal-head h2,
.stock-product-detail-modal .modal-head p {
  overflow-wrap: anywhere;
}

.stock-product-detail-modal .modal-body {
  background: #f8fafc;
}

.stock-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
}

.stock-product-detail-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stock-product-detail-kpis span {
  display: grid;
  gap: 3px;
  min-height: 72px;
  align-content: center;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fafc, #eff6ff);
}

.stock-detail-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

/* Liste des produits fusionnes (annulation de fusion) */
.stock-defuse-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.stock-defuse-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid rgba(190, 18, 60, .25);
  background: rgba(190, 18, 60, .05); border-radius: 12px;
}
.stock-defuse-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stock-defuse-info strong { color: #0f172a; }
.stock-defuse-info small { color: #64748b; }

.stock-detail-section-title span {
  color: var(--ink);
  font-weight: 950;
}

.stock-detail-section-title small {
  max-width: 360px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
}

.stock-detail-lots-title {
  margin-top: 2px;
}

.stock-product-detail-kpis strong {
  color: var(--ink);
  font-size: clamp(.98rem, 1.8vw, 1.18rem);
  min-width: 0;
  overflow-wrap: anywhere;
}

.stock-product-detail-kpis small {
  color: var(--muted);
  font-weight: 850;
}

.stock-association-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid #b7e4d8;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(15, 139, 125, .12), transparent 34%),
    #f8fffd;
}

.stock-association-box strong,
.stock-association-box small {
  display: block;
  overflow-wrap: anywhere;
}

.stock-association-box small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 750;
}

.stock-association-search {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.stock-association-search input {
  min-height: 38px;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.stock-association-search input:focus {
  outline: 2px solid rgba(15, 139, 125, .25);
  border-color: #0f8b7d;
}

.stock-association-result-title {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.stock-association-results {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.stock-association-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.stock-association-result:hover {
  border-color: #5eead4;
  background: #ecfdf5;
  box-shadow: 0 10px 22px rgba(15, 118, 110, .08);
}

.stock-association-result span {
  min-width: 0;
}

.stock-association-result-main strong,
.stock-association-result small {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

.stock-association-result small {
  margin-top: 2px;
}

.stock-association-result-metrics {
  min-width: 50px;
  padding: 5px 8px;
  border-radius: 10px;
  background: #f1f5f9;
  text-align: center;
}

.stock-association-result-metrics strong {
  display: block;
  color: var(--ink);
  font-size: .88rem;
}

.stock-association-result-metrics small {
  font-size: .62rem;
  text-transform: uppercase;
}

.stock-association-result b {
  align-self: center;
  color: #0f766e;
  font-size: .78rem;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 999px;
  background: #dff8ef;
}

.stock-association-empty {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.stock-association-box .modal-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.stock-product-lot-list {
  display: grid;
  gap: 8px;
}

.stock-product-lot-row {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(160px, 1fr) repeat(3, minmax(70px, auto));
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}

.stock-product-lot-row:hover {
  border-color: rgba(20, 184, 166, .44);
  background: #f0fdfa;
}

.stock-product-lot-row.depleted {
  opacity: .58;
  background: #f8fafc;
}

.stock-product-lot-main {
  display: grid;
  gap: 2px;
}

.stock-product-lot-main small,
.stock-product-lot-row small {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}

.stock-product-lot-row b {
  display: block;
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.stock-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stock-actions select {
  flex: 0 1 180px;
  min-height: 36px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.stock-card-head-compact {
  align-items: center;
}

.stock-actions-compact input,
.stock-actions-compact select {
  min-height: 34px;
}

.stock-actions-compact input {
  width: min(280px, 36vw);
}

.stock-subview-card {
  padding: 12px;
}

.stock-audit-panel-compact {
  padding: 10px 12px;
  margin-bottom: 10px;
  gap: 10px;
}

.stock-filter-chips-compact {
  gap: 6px;
}

.stock-filter-chips-compact .stock-chip-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: .72rem;
}

.stock-result-count-compact {
  margin-bottom: 10px;
}

.stock-reconcile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.stock-control-card {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  min-width: 0;
}

.stock-control-card span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.stock-control-card strong {
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1;
}

.stock-control-card small {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
}

.stock-control-card.good {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.stock-control-card.warning {
  background: #fffbeb;
  border-color: #fde68a;
}

.stock-control-card.danger {
  background: #fef2f2;
  border-color: #fecaca;
}

.stock-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.stock-alert-pill.good {
  background: #dcfce7;
  color: #166534;
}

.stock-alert-pill.warning {
  background: #fef3c7;
  color: #92400e;
}

.stock-alert-pill.danger {
  background: #fee2e2;
  color: #991b1b;
}

.stock-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 12px;
  align-items: start;
}

.stock-split-pane {
  min-width: 0;
}

.stock-section-title-compact {
  margin-top: 8px;
  font-size: .88rem;
}

.stock-vat-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 14px;
}

.stock-vat-strip span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 7px 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.stock-vat-strip strong {
  color: var(--ink);
}

.stock-section-title {
  margin: 18px 0 8px;
  font-size: .95rem;
}

.stock-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.stock-split-pane .stock-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

.stock-split-pane .stock-table thead th {
  position: static;
}

.stock-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: .79rem;
}

.stock-table.compact {
  font-size: .75rem;
}

.stock-table th {
  background: #f1f5f9;
  color: #334155;
  text-align: left;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stock-table th,
.stock-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #edf2f7;
  vertical-align: top;
}

.stock-table tr:last-child td {
  border-bottom: 0;
}

.stock-table .num {
  text-align: right;
  white-space: nowrap;
}

.good-text {
  color: #047857;
  font-weight: 900;
}

.danger-text {
  color: #b91c1c;
  font-weight: 900;
}

.soft-warning-row {
  background: #fffbeb;
}

.row-warning {
  display: block;
  margin-top: 3px;
  color: #b45309;
  font-weight: 800;
}

.stock-status-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  background: #e8f7f4;
  color: #075e56;
  font-weight: 900;
}

.stock-audit-panel {
  display: grid;
  grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr);
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #bfe7df;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0fdfa, #f8fafc);
}

.stock-audit-copy strong,
.stock-audit-copy small {
  display: block;
}

.stock-audit-copy strong {
  color: var(--ink);
  font-weight: 950;
}

.stock-audit-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.15;
}

.stock-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.stock-chip-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .05);
}

.stock-chip-btn.active {
  border-color: #14b8a6;
  background: #ccfbf1;
  color: #0f766e;
}

.stock-chip-btn span {
  display: inline-flex;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  font-size: .7rem;
}

.stats-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.stats-insight-card {
  padding: 12px 14px;
  margin-bottom: 14px;
}

.stats-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stats-insight {
  display: grid;
  gap: 4px;
  min-height: 110px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.stats-insight span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stats-insight strong {
  color: var(--ink);
  font-size: 1.14rem;
  line-height: 1.05;
}

.stats-insight small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.stats-meter {
  margin-top: 4px;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.stats-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f8b7d, #22c55e);
}

.stats-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.stats-grid-two-compact {
  gap: 12px;
}

.stats-list-card h3 {
  margin-bottom: 10px;
}

.stats-list-card-compact {
  padding: 12px;
}

.stats-list-card-compact .stats-rank-row {
  padding: 8px 9px;
  gap: 8px;
}

.stats-list-card-compact .stats-rank-row > span:not(.stats-rank-index) {
  min-width: 82px;
}

.stats-list-card-compact .stock-table-wrap {
  max-height: 350px;
  overflow: auto;
}

.stats-rank-list {
  display: grid;
  gap: 8px;
}

.stats-rank-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.stats-rank-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8f7f4;
  color: #075e56;
  font-weight: 950;
}

.stats-rank-row strong,
.stats-rank-row small,
.stats-rank-row > span {
  display: block;
}

.stats-rank-row strong {
  line-height: 1.15;
}

.stats-rank-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}

.stats-rank-row > span:not(.stats-rank-index) {
  min-width: 92px;
  text-align: right;
  color: var(--ink);
  font-weight: 950;
  white-space: nowrap;
}

.hebdo-kpi-grid,
.payments-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.weekly-card-list {
  display: grid;
  gap: 16px;
}

.weekly-summary-card {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
}

.weekly-summary-card.current {
  border-color: #99f6e4;
  box-shadow: 0 16px 34px rgba(15, 139, 125, .12);
}

.weekly-card-head {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #edf2f7;
  background: #f8fafc;
}

.weekly-card-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.weekly-card-title strong {
  display: grid;
  gap: 3px;
  color: #334155;
  font-size: .86rem;
  font-weight: 900;
}

.weekly-card-title strong small {
  color: #0f8b7d;
  font-size: .7rem;
  font-weight: 950;
}

.weekly-week-badge {
  min-width: 52px;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #6d6af5;
  color: #fff;
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(109, 106, 245, .2);
}

.weekly-card-total {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.weekly-card-total strong {
  color: #34c38f;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 950;
}

.weekly-card-total span,
.weekly-card-total small {
  color: #475569;
  font-size: .74rem;
  font-weight: 900;
}

.weekly-days-grid {
  min-width: 840px;
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.weekly-day-cell {
  position: relative;
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 128px;
  padding: 14px 12px;
  border-right: 1px solid #e8eef5;
  background: #fff;
  text-align: center;
}

.weekly-day-cell:last-child {
  border-right: 0;
}

.weekly-day-cell.best {
  background: #ecfdf5;
}

.weekly-day-cell > span,
.weekly-day-cell > small {
  display: block;
  color: #52657d;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.weekly-day-cell > span small {
  display: block;
  margin-top: 3px;
  color: #334155;
  font-size: .78rem;
  text-transform: none;
}

.weekly-day-cell > strong {
  color: #0f172a;
  font-size: 1.02rem;
  line-height: 1.05;
  font-weight: 950;
}

.weekly-day-meter {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.weekly-day-meter b {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d6af5, #8b7cf6);
}

.weekly-day-cell:nth-child(2n) .weekly-day-meter b {
  background: linear-gradient(90deg, #d8c600, #f59e0b);
}

.weekly-trophy {
  position: absolute;
  top: 8px;
  right: 10px;
  font-style: normal;
  font-size: .82rem;
}

.weekly-trend-card,
.payments-chart-card {
  margin-bottom: 14px;
}

.weekly-bars,
.payments-month-bars {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 8px;
  align-items: end;
  padding: 8px 0 2px;
}

.weekly-bar,
.payments-month-bar {
  min-height: 170px;
  display: grid;
  grid-template-rows: minmax(120px, 1fr) auto;
  gap: 6px;
  align-items: end;
}

.payments-month-bar {
  grid-template-rows: minmax(112px, 1fr) auto auto;
}

.weekly-bar span,
.payments-month-bar span {
  display: block;
  width: 100%;
  min-height: 8px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #14b8a6, #0f766e);
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .12);
}

.weekly-bar small,
.payments-month-bar small,
.payments-month-bar strong {
  min-height: 18px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  text-align: center;
}

.payments-month-bar strong {
  color: var(--ink);
  font-size: .7rem;
}

.weekly-table td strong,
.weekly-table td small,
.payments-table td strong,
.payments-table td small {
  display: block;
}

.weekly-table td small,
.payments-table td small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}

.weekly-machine-card {
  margin-top: 14px;
}

.weekly-machine-list {
  display: grid;
  gap: 9px;
}

.weekly-machine-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.weekly-machine-row strong,
.weekly-machine-row small,
.weekly-machine-row span {
  display: block;
}

.weekly-machine-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
}

.weekly-machine-row > span {
  color: #0f766e;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.weekly-machine-meter {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.weekly-machine-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f8b7d, #22c55e);
}

.payments-mode-tabs {
  justify-content: flex-start;
  margin: 2px 0 12px;
}

.payments-calendar-wrap {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.payments-table th {
  color: #40516a;
  font-size: .74rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.payments-table td {
  vertical-align: middle;
  padding-top: 14px;
  padding-bottom: 14px;
}

.payment-period-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
}

.payment-period-cell strong {
  color: #334155;
  font-weight: 900;
}

.payment-month-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 7px;
  padding: 5px 8px;
  background: #6d6af5;
  color: #fff;
  font-size: .76rem;
  font-weight: 950;
}

.payment-stock-budget {
  display: grid;
  gap: 5px;
}

.payment-stock-budget strong {
  color: #34c38f;
  font-size: 1.02rem;
}

.payment-stock-budget small {
  color: #334155;
  white-space: nowrap;
}

.data-quality-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  background: #fff7ed;
  color: #9a3412;
  font-size: .76rem;
  font-weight: 850;
}

.data-quality-banner strong {
  color: #7c2d12;
  font-weight: 950;
}

.data-quality-banner span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: #ffedd5;
}

.payment-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 5px 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: .72rem;
  font-weight: 950;
  white-space: nowrap;
}

.payment-status-badge.completed {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #166534;
}

.payment-status-badge.current {
  border-color: #fed7aa;
  background: #ffedd5;
  color: #9a3412;
}

.payment-status-badge.next {
  border-color: #fde68a;
  background: #fde68a;
  color: #7c5b05;
}

.payment-status-badge.upcoming {
  border-color: #bfdbfe;
  background: #dbeafe;
  color: #1d4ed8;
}

.company-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.company-card {
  margin-bottom: 14px;
}

.company-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.form-field label {
  color: #334155;
  font-size: .78rem;
  font-weight: 900;
}

.form-field input,
.form-field select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 11px;
  background: #fff;
  color: var(--ink);
}

.form-field small {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}

.company-fee-list {
  display: grid;
  gap: 8px;
}

.company-fee-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.company-fee-row strong,
.company-fee-row small {
  display: block;
}

.company-fee-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
}

.company-fee-row > span {
  color: #0f766e;
  font-weight: 950;
  white-space: nowrap;
}

.small-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: .72rem;
}

.danger-btn {
  border-color: #fecaca;
  color: #991b1b;
}

.company-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.company-check-grid span {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
}

.company-check-grid b {
  font-size: 1.4rem;
}

.company-check-grid small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.optim-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.optim-kpi {
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.optim-kpi:hover {
  transform: translateY(-1px);
}

.optim-kpi.active {
  border-color: #0f8b7d;
  box-shadow: 0 12px 26px rgba(15, 139, 125, .12);
}

.optim-kpi.danger strong {
  color: #b91c1c;
}

.optim-kpi.warn strong {
  color: #b45309;
}

.optim-kpi.idle strong {
  color: #475569;
}

.optim-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.optim-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 6px solid #10b981;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.optim-card.danger {
  border-left-color: #ef4444;
  background: linear-gradient(90deg, rgba(254, 242, 242, .72), #fff 38%);
}

.optim-card.warning {
  border-left-color: #f59e0b;
  background: linear-gradient(90deg, rgba(255, 251, 235, .8), #fff 38%);
}

.optim-card.idle {
  border-left-color: #94a3b8;
  background: linear-gradient(90deg, rgba(248, 250, 252, .95), #fff 38%);
}

.optim-card.healthy {
  border-left-color: #22c55e;
}

.optim-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.optim-card-head h4 {
  margin: 0 0 7px;
  font-size: .94rem;
  line-height: 1.2;
}

.optim-card-head > strong {
  color: var(--ink);
  font-size: 1.1rem;
  white-space: nowrap;
}

.optim-metrics,
.optim-sim-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.optim-metrics span,
.optim-sim-grid span {
  min-width: 0;
  padding: 9px;
  border-radius: 12px;
  background: #f8fafc;
}

.optim-metrics b,
.optim-sim-grid b {
  display: block;
  color: var(--ink);
  font-size: .95rem;
}

.optim-metrics small,
.optim-sim-grid small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.optim-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.optim-reasons span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: .68rem;
  font-weight: 900;
}

.optim-simulator {
  margin-top: 14px;
  border-color: #99f6e4;
  box-shadow: 0 18px 36px rgba(15, 139, 125, .12);
}

.optim-simulator input[type="range"] {
  width: 100%;
  accent-color: #0f8b7d;
}

.optim-sim-price {
  width: fit-content;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #0f8b7d;
  color: #fff;
  font-weight: 950;
}

.optim-sim-note {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 800;
}

.inventory-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.inventory-control-card {
  margin-bottom: 14px;
}

.inventory-regime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.inventory-regime-card {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fafc, #fff);
}

.inventory-regime-card strong {
  color: var(--ink);
}

.inventory-regime-card span,
.inventory-regime-card small {
  color: var(--muted);
  font-weight: 800;
}

.inventory-regime-card b {
  color: #0f766e;
  font-size: 1.12rem;
}

.inventory-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 14px;
  margin-top: 14px;
}

.inventory-flow-card {
  margin-bottom: 14px;
}

.inventory-flow-kpis,
.supplier-detail-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.inventory-flow-kpis span,
.supplier-detail-kpis span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.inventory-flow-kpis strong,
.supplier-detail-kpis strong {
  color: #0f766e;
  font-size: 1.08rem;
  line-height: 1.05;
}

.inventory-flow-kpis small,
.supplier-detail-kpis small {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
}

.inventory-table td strong,
.inventory-table td small {
  display: block;
}

.inventory-table td small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}

.inventory-warning-list {
  display: grid;
  gap: 8px;
}

.inventory-warning-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid #fed7aa;
  border-radius: 13px;
  background: #fff7ed;
}

.inventory-warning-row strong,
.inventory-warning-row small {
  display: block;
}

.inventory-warning-row small {
  margin-top: 3px;
  color: #9a3412;
  font-size: .68rem;
  font-weight: 800;
}

.inventory-warning-row span,
.inventory-warning-row b {
  color: #9a3412;
  font-weight: 950;
  white-space: nowrap;
}

.inventory-warning-row em {
  grid-column: 1 / -1;
  color: #b45309;
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 900px) {
  .stock-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stock-split-grid,
  .stock-audit-panel,
  .stats-insight-grid {
    grid-template-columns: 1fr;
  }
  .stock-card-head {
    display: grid;
  }
  .stock-actions {
    justify-content: stretch;
  }
  .stock-actions-compact input {
    width: 100%;
  }
  .stock-actions input {
    width: 100%;
  }
  .stock-filter-chips {
    justify-content: flex-start;
  }
  .stock-reconcile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .company-form,
  .company-kpi-grid,
  .stats-kpi-grid,
  .hebdo-kpi-grid,
  .payments-kpi-grid,
  .optim-kpi-grid,
  .inventory-kpi-grid,
  .stats-grid-two,
  .inventory-grid-two,
  .company-check-grid {
    grid-template-columns: 1fr;
  }
  .inventory-flow-kpis,
  .supplier-detail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .optim-metrics,
  .optim-sim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-rank-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .stats-rank-row > span:not(.stats-rank-index) {
    text-align: left;
  }
  .stats-list-card-compact .stock-table-wrap {
    max-height: 300px;
  }
  .stock-reconcile-grid {
    grid-template-columns: 1fr;
  }
  .company-fee-row {
    grid-template-columns: 1fr;
  }
}

.main {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(12px, 1vw, 18px) clamp(16px, 1.45vw, 28px);
  background: rgba(238, 243, 247, .88);
  border-bottom: 1px solid rgba(219, 227, 234, .75);
  backdrop-filter: blur(12px);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.15rem, 1.45vw, 1.65rem);
  line-height: 1.08;
}

.topbar-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.primary-btn, .ghost-btn, .danger-btn {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0 12px;
  font-weight: 900;
  cursor: pointer;
}

.primary-btn {
  background: var(--teal);
  color: #fff;
}

.ghost-btn {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.ghost-btn.is-active {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fca5a5;
  font-weight: 600;
}

/* Bouton filtre "Stock négatif" : toujours orange et bien lisible. */
#stockNegativeBtn {
  background: #f97316 !important;
  color: #fff !important;
  border-color: #ea580c !important;
  font-weight: 600;
}
#stockNegativeBtn:hover {
  background: #ea580c !important;
}
#stockNegativeBtn.is-active {
  background: #c2410c !important;
  border-color: #9a3412 !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.compact-btn {
  min-height: 36px;
  padding: 0 12px;
}

.danger-btn {
  background: #fff4f4;
  color: #b91c1c;
  border-color: #fecaca;
}

.primary-btn:disabled, .ghost-btn:disabled {
  opacity: .6;
  cursor: default;
}

.view {
  padding: clamp(12px, 1vw, 22px) clamp(16px, 1.45vw, 28px) 28px;
}

.hero-panel, .card, .loading-card, .empty-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.hero-panel {
  padding: clamp(12px, 1vw, 20px);
  margin-bottom: clamp(12px, 1vw, 20px);
}

.panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-title {
  margin-bottom: 2px;
  font-size: 1.05rem;
}

.muted {
  color: var(--muted);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.live-meta {
  margin-top: 8px;
  gap: 7px;
}

.live-meta .status-pill {
  padding: 5px 9px;
  font-size: .72rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-weight: 800;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
}

.status-pill.online .status-dot {
  background: var(--green);
}

.live-countdown.on {
  background: #e8fbf2;
  color: #08744d;
  border: 1px solid #b6ecd3;
}

.live-countdown.off {
  background: #fff1f2;
  color: #b91c1c;
  border: 1px solid #fecdd3;
}

.ntfy-toggle.on {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.ntfy-toggle.off {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.live-sale-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1300;
  display: grid;
  gap: 12px;
  place-items: center;
  width: min(520px, calc(100vw - 34px));
  padding: clamp(22px, 3vw, 34px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.42), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--machine-border, #10b981) 82%, #111827), var(--machine-ink, #047857));
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 34px 90px rgba(15, 23, 42, .42);
  color: #fff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -44%) scale(.9);
  transition: opacity .2s ease, transform .2s ease;
  overflow: hidden;
}

.live-sale-popup::before {
  content: "";
  position: fixed;
  inset: -100vh;
  z-index: -1;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(7px);
}

.live-sale-popup.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.live-sale-popup.potential {
  background:
    radial-gradient(circle at 22% 0%, rgba(255,255,255,.42), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--machine-border, #10b981) 82%, #111827), var(--machine-ink, #047857));
  box-shadow: 0 34px 90px rgba(245, 158, 11, .22), 0 28px 80px color-mix(in srgb, var(--machine-border, #10b981) 32%, transparent);
  animation: livePotentialPulse 1.5s infinite;
}

.live-sale-popup.cancelled {
  background:
    radial-gradient(circle at 22% 0%, rgba(255,255,255,.34), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--machine-border, #10b981) 78%, #7f1d1d), var(--machine-ink, #047857));
  box-shadow: 0 34px 90px rgba(239, 68, 68, .24), 0 28px 80px color-mix(in srgb, var(--machine-border, #10b981) 32%, transparent);
  animation: liveCancelShake .42s ease;
}

.live-sale-popup.machine-online {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.42), transparent 38%),
    linear-gradient(135deg, #22c55e, color-mix(in srgb, var(--machine-ink, #047857) 78%, #064e3b));
}

.live-sale-popup.machine-offline {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.32), transparent 38%),
    linear-gradient(135deg, #f87171, #991b1b);
  animation: liveCancelShake .42s ease;
}

.live-sale-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.22);
  color: #fff;
  border: 2px solid rgba(255,255,255,.32);
  font-size: 2rem;
  font-weight: 950;
  box-shadow: inset 0 0 20px rgba(255,255,255,.08);
}

.live-sale-popup strong,
.live-sale-popup span,
.live-sale-popup b,
.live-sale-popup small,
.live-sale-popup em {
  display: block;
}

.live-sale-popup strong {
  color: #fff;
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  line-height: 1.05;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.live-sale-popup span {
  color: rgba(255,255,255,.84);
  font-weight: 800;
}

.live-sale-popup b {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: .94;
  text-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.live-sale-machine {
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .82rem;
}

.live-sale-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.live-sale-items {
  width: 100%;
  display: grid;
  gap: 6px;
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.2);
}

.live-sale-items div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-weight: 800;
}

.live-sale-items em {
  color: rgba(255,255,255,.88);
  font-style: normal;
  white-space: nowrap;
}

.sale-popups-container {
  position: fixed;
  inset: 0;
  z-index: 1800;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(16px, 2vw, 32px);
}

.sale-popups-container.has-popups {
  pointer-events: auto;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(8px);
}

.sale-popup {
  pointer-events: auto;
  position: relative;
  width: min(480px, calc(100vw - 34px));
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.42), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--machine-border, #10b981) 82%, #111827), var(--machine-ink, #047857));
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 34px 90px rgba(15, 23, 42, .48);
  animation: popupSlideIn .5s cubic-bezier(.175, .885, .32, 1.275);
}

.sale-popup.position-left,
.sale-popup.position-center,
.sale-popup.position-right {
  align-self: center;
  animation-name: popupSlideIn;
}
.sale-popup.closing { animation: popupSlideOut .3s ease-in forwards; }

.sale-popup.potential {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.42), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--machine-border, #10b981) 82%, #111827), var(--machine-ink, #047857));
  box-shadow: 0 34px 90px rgba(245, 158, 11, .22), 0 28px 80px color-mix(in srgb, var(--machine-border, #10b981) 32%, transparent);
  animation: pulsePotential 1.5s infinite;
}

.sale-popup.failed {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.34), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--machine-border, #10b981) 78%, #7f1d1d), var(--machine-ink, #047857));
  box-shadow: 0 34px 90px rgba(239, 68, 68, .24), 0 28px 80px color-mix(in srgb, var(--machine-border, #10b981) 32%, transparent);
  animation: failShake .45s ease;
}

.sale-popup-machine {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  border: 1px solid rgba(255,255,255,.32);
  font-size: .82rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
}

.sale-popup-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.32);
  font-size: 2rem;
  font-weight: 950;
  box-shadow: inset 0 0 20px rgba(255,255,255,.08);
}

.sale-popup-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: .94rem;
  font-weight: 850;
  opacity: .95;
}

.sale-popup-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
}

.sale-popup-status-dot.pending {
  background: rgba(255,255,255,.92);
  animation: blink 1s infinite;
}

.sale-popup-status-dot.confirmed { background: #86efac; }
.sale-popup-status-dot.failed { background: #fecaca; }

.sale-popup-title {
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  font-weight: 950;
  line-height: 1.05;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.sale-popup-amount {
  margin-top: 12px;
  font-size: clamp(2.35rem, 4vw, 3.6rem);
  line-height: .94;
  font-weight: 950;
  text-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.sale-popup-items {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding: 12px;
  max-height: min(230px, 32vh);
  overflow: auto;
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
}

.sale-popup-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-weight: 850;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 6px;
}

.sale-popup-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sale-popup-item.placeholder,
.sale-popup-item.more {
  justify-content: center;
  opacity: .9;
}

.sale-popup-item-name {
  text-align: left;
}

.sale-popup-item-price {
  white-space: nowrap;
  font-weight: 950;
}

.sale-popup-timer {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: .76rem;
  font-weight: 900;
}

.sale-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

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

@keyframes popupSlideInLeft {
  from { transform: translateX(-100px) scale(.9); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes popupSlideInRight {
  from { transform: translateX(100px) scale(.9); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes popupSlideOut {
  to { transform: scale(.82) translateY(-20px); opacity: 0; }
}

@keyframes pulsePotential {
  0%, 100% { box-shadow: 0 34px 90px rgba(15, 23, 42, .48), 0 0 20px rgba(245, 158, 11, .45); }
  50% { box-shadow: 0 34px 90px rgba(15, 23, 42, .48), 0 0 48px rgba(245, 158, 11, .78); }
}

@keyframes failShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

@keyframes livePotentialPulse {
  0%, 100% { box-shadow: 0 34px 90px rgba(15, 23, 42, .42), 0 0 0 rgba(245, 158, 11, .0); }
  50% { box-shadow: 0 34px 90px rgba(15, 23, 42, .42), 0 0 44px rgba(245, 158, 11, .55); }
}

@keyframes liveCancelShake {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  25% { transform: translate(calc(-50% - 8px), -50%) scale(1); }
  50% { transform: translate(calc(-50% + 8px), -50%) scale(1); }
  75% { transform: translate(calc(-50% - 5px), -50%) scale(1); }
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.summary-card {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.summary-card strong {
  display: block;
  font-size: 1.42rem;
  line-height: 1;
  color: var(--violet);
}

.summary-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
  font-size: .78rem;
}

.machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

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

.machine-filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.machine-filter-btn {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 0 10px;
  font-size: .74rem;
  font-weight: 900;
  cursor: pointer;
}

.machine-filter-btn.active {
  background: #e8f7f4;
  border-color: #b7e4dc;
  color: #075e56;
}

.machine-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(164px, 12vw, 220px), 1fr));
  gap: clamp(7px, .65vw, 12px);
}

.machine-compact-card {
  min-height: clamp(78px, 6.1vw, 104px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "dot name"
    "meta meta"
    "stats stats";
  gap: 6px 8px;
  align-items: start;
  padding: clamp(9px, .72vw, 12px);
  border-radius: 11px;
  border: 1px solid var(--machine-border, #dbeafe);
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.58)),
    var(--machine-bg, #ffffff);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.machine-live-stats {
  grid-area: stats;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--machine-border, #dbeafe) 20%, transparent);
  color: var(--machine-ink, var(--ink));
}

.machine-live-stats span,
.machine-live-stats b {
  font-size: .72rem;
  font-weight: 950;
  white-space: nowrap;
}

.machine-compact-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--machine-border, var(--teal));
}

.machine-compact-card.offline {
  border-color: color-mix(in srgb, var(--machine-border, #fecaca) 46%, #fecaca);
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,247,247,.76)),
    var(--machine-bg, #fff7f7);
}

.machine-compact-dot {
  grid-area: dot;
  margin-top: 2px;
  width: clamp(8px, .55vw, 12px);
  height: clamp(8px, .55vw, 12px);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.machine-compact-card.offline .machine-compact-dot {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

.machine-compact-name {
  grid-area: name;
  min-width: 0;
}

.machine-compact-name strong,
.machine-compact-name span {
  display: block;
  overflow: hidden;
}

.machine-compact-name strong {
  font-size: clamp(.72rem, .58vw, .82rem);
  line-height: 1.16;
  color: var(--machine-ink, var(--ink));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.machine-compact-name span {
  display: none;
}

/* Le badge de source (« App ADTCG » / « Pifutoys ») vit DANS le bloc nom : la règle
   ci-dessus (héritée du masquage d'un ancien sous-titre) l'avalait — badge présent dans
   la page mais invisible, constaté par Toni sur la tuile du Live. Sélecteur plus précis,
   donc prioritaire. */
.machine-compact-name span.bsm {
  display: inline-block;
  margin-top: 3px;
}

.machine-compact-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.machine-status-text {
  min-width: 0;
  color: var(--machine-ink, var(--muted));
  font-size: clamp(.68rem, .52vw, .76rem);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.machine-rssi {
  min-width: 48px;
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--machine-soft, #eef6ff);
  color: var(--machine-ink, #1769aa);
  text-align: center;
  font-size: clamp(.68rem, .52vw, .78rem);
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.wifi-icon {
  position: relative;
  width: 13px;
  height: 10px;
  display: inline-block;
}

.wifi-icon::before,
.wifi-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
}

.wifi-icon::before {
  width: 13px;
  height: 8px;
}

.wifi-icon::after {
  width: 8px;
  height: 5px;
}

.wifi-icon i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

/* Réseau mobile (4G) : quatre barres montantes dessinées en CSS pur — pas d'image, pas
   de police d'icônes à charger. Les barres au-dessus du niveau mesuré restent en creux ;
   quand la tablette ne sait pas dire son niveau, le badge n'affiche AUCUNE barre plutôt
   qu'un « zéro barre » qui ferait croire à une borne au bord de la coupure. */
.cell-icon {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  width: 13px;
  height: 10px;
}

.cell-icon i {
  flex: 1;
  background: currentColor;
  border-radius: 1px;
  opacity: .28;
}

.cell-icon i.on { opacity: 1; }
.cell-icon i:nth-child(1) { height: 30%; }
.cell-icon i:nth-child(2) { height: 53%; }
.cell-icon i:nth-child(3) { height: 76%; }
.cell-icon i:nth-child(4) { height: 100%; }

/* Ethernet : une prise RJ45 vue de face (le corps, plus la petite languette de clip au
   dessus). Un simple carré vide se lisait comme « case à cocher » — il faut que Toni
   reconnaisse la prise du premier coup d'œil. Même gabarit que l'icône wifi pour que
   tous les badges gardent la même hauteur dans la tuile. */
.cable-icon {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 10px;
}

.cable-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 11px;
  height: 7px;
  background: currentColor;
  border-radius: 1px;
}

.cable-icon::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 4px;
  background: currentColor;
  border-radius: 1px 1px 0 0;
}

.machine-compact-card.offline .machine-rssi {
  background: #fee2e2;
  color: #b91c1c;
}

.machine-color-modal {
  width: min(420px, 100%);
}

.machine-color-picker {
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}

.machine-color-picker input {
  width: 100%;
  height: 58px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.machine-color-preview {
  margin-top: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--machine-border);
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.54)), var(--machine-bg);
  color: var(--machine-ink);
}

.machine-color-preview strong {
  min-width: 0;
  color: var(--machine-ink);
  line-height: 1.15;
}

.machine-card {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.machine-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--teal);
}

.machine-card.offline::before {
  background: var(--red);
}

.machine-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 900;
}

.online-badge {
  min-width: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

.offline .online-badge {
  background: var(--red);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mini-metric {
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
}

.mini-metric strong, .mini-metric span {
  display: block;
}

.mini-metric strong {
  font-size: 1.15rem;
}

.mini-metric span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.table-card {
  overflow: hidden;
}

.live-orders-card {
  max-height: none;
  overflow: visible;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

th, td {
  padding: clamp(7px, .56vw, 12px) clamp(9px, .72vw, 14px);
  border-bottom: 1px solid #edf1f5;
  text-align: left;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #334155;
  font-size: clamp(.68rem, .52vw, .78rem);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.live-order-row {
  cursor: pointer;
  background: color-mix(in srgb, var(--machine-bg, #fff) 62%, #fff);
  box-shadow: inset 5px 0 0 var(--machine-border, var(--teal));
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}

.live-order-row td {
  border-bottom-color: color-mix(in srgb, var(--machine-border, #edf1f5) 24%, #edf1f5);
}

.live-order-row td:first-child strong {
  display: inline-flex;
  max-width: 260px;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--machine-soft, #f8fafc);
  color: var(--machine-ink, var(--ink));
  white-space: normal;
}

.live-order-row:hover {
  background: color-mix(in srgb, var(--machine-bg, #fff) 86%, #fff);
  box-shadow: inset 7px 0 0 var(--machine-border, var(--teal)), 0 8px 20px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

.live-order-row.status-cancelled,
.live-order-row.status-unpaid {
  opacity: .84;
}

.live-order-row.status-unpaid {
  opacity: 1;
  animation: pendingSaleBlink 1.05s ease-in-out infinite;
  box-shadow: inset 7px 0 0 #f59e0b;
}

@keyframes pendingSaleBlink {
  0%, 100% {
    background: color-mix(in srgb, #fef3c7 46%, var(--machine-bg, #fff));
  }
  50% {
    background: color-mix(in srgb, #fde68a 78%, var(--machine-bg, #fff));
  }
}

.order-status-badge {
  display: inline-flex;
  min-width: 74px;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-weight: 900;
  font-size: .76rem;
  text-transform: lowercase;
}

.order-status-badge.paid {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}

.order-status-badge.completed {
  border-color: #93c5fd;
  background: #dbeafe;
  color: #1d4ed8;
}

.order-status-badge.unpaid {
  border-color: #fdba74;
  background: #ffedd5;
  color: #9a3412;
}

.order-status-badge.pending {
  border-color: #fcd34d;
  background: #fef3c7;
  color: #92400e;
}

.order-status-badge.cancelled {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #991b1b;
}

.order-status-badge.unknown {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #64748b;
}

.order-load-more {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), #fff 38%);
  border-top: 1px solid #edf1f5;
}

body.pc-v3 {
  --bg: #eaf0f6;
  --panel: rgba(255, 255, 255, .88);
  --ink: #0f172a;
  --muted: #5b6b80;
  background:
    radial-gradient(circle at 18% -10%, rgba(15, 139, 125, .18), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(109, 93, 252, .16), transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, #e9f0f6 100%);
}

body.pc-v3 .app-shell {
  grid-template-columns: clamp(132px, 7vw, 156px) minmax(0, 1fr);
}

body.pc-v3.sidebar-collapsed .app-shell {
  grid-template-columns: 82px minmax(0, 1fr);
}

body.pc-v3 .sidebar {
  background: rgba(247, 250, 252, .78);
  backdrop-filter: blur(18px);
  padding: 10px 7px;
  transition: width .18s ease, padding .18s ease;
}

body.pc-v3 .brand {
  gap: 7px;
  padding-bottom: 12px;
}

body.pc-v3 .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: .68rem;
}

body.pc-v3 .brand-mark {
  background: linear-gradient(135deg, #0f766e, #6d5dfc);
  box-shadow: 0 14px 28px rgba(15, 118, 110, .18);
}

body.pc-v3 .brand strong {
  font-size: .82rem;
}

body.pc-v3 .brand span {
  font-size: .56rem;
}

body.pc-v3.sidebar-collapsed .brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

body.pc-v3.sidebar-collapsed .brand-copy,
body.pc-v3.sidebar-collapsed .nav-item small,
body.pc-v3.sidebar-collapsed .nav-link-legacy {
  display: none;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle {
  width: 40px;
  margin-left: auto;
  margin-right: auto;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon {
  width: 20px;
  height: 16px;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::before {
  left: auto;
  right: 2px;
  box-shadow:
    -6px 2px 0 0 currentColor,
    -6px 7px 0 0 currentColor,
    -6px 12px 0 0 currentColor;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::after {
  left: 1px;
  right: auto;
  transform: rotate(135deg);
}

body.pc-v3 .nav-list {
  gap: 4px;
}

body.pc-v3 .nav-item,
body.pc-v3 .nav-link-legacy {
  border-radius: 8px;
  padding: 7px 8px;
}

body.pc-v3 .nav-item span {
  font-size: .76rem;
}

body.pc-v3.sidebar-collapsed .nav-item {
  width: 56px;
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 8px 4px;
  margin: 0 auto;
  text-align: center;
}

body.pc-v3.sidebar-collapsed .nav-symbol {
  display: inline-grid;
  width: 34px;
  height: 34px;
  font-size: 1.12rem;
}

body.pc-v3.sidebar-collapsed .nav-item > span:not(.nav-symbol) {
  display: none;
}

body.pc-v3.sidebar-collapsed .nav-item.active {
  background: #e8f7f4;
  border-color: #a7ded5;
  color: #075e56;
}

body.pc-v3 .nav-item small {
  font-size: .58rem;
}

body.sidebar-collapsed:not(.pc-v3) .app-shell {
  grid-template-columns: 82px minmax(0, 1fr);
}

body.sidebar-collapsed:not(.pc-v3) .brand {
  justify-content: center;
}

body.sidebar-collapsed:not(.pc-v3) .brand-copy,
body.sidebar-collapsed:not(.pc-v3) .nav-item > span:not(.nav-symbol),
body.sidebar-collapsed:not(.pc-v3) .nav-item small,
body.sidebar-collapsed:not(.pc-v3) .nav-link-legacy {
  display: none;
}

body.sidebar-collapsed:not(.pc-v3) .sidebar-toggle {
  margin-left: auto;
  margin-right: auto;
}

/* Sidebar redesign v2 */
body.pc-v3 {
  --pc-sidebar-bg: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(244,247,251,.96) 100%);
  --pc-sidebar-line: rgba(148, 163, 184, .18);
  --pc-sidebar-pill: #ffffff;
  --pc-sidebar-pill-active: linear-gradient(135deg, #dff7f1 0%, #eef4ff 100%);
  --pc-sidebar-pill-border: rgba(15, 139, 125, .16);
  --pc-sidebar-accent: #0f8b7d;
}

body.pc-v3 .sidebar {
  padding: 14px 10px 12px;
  background: var(--pc-sidebar-bg);
  border-right: 1px solid var(--pc-sidebar-line);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.4);
}

body.pc-v3 .brand {
  align-items: center;
  gap: 10px;
  padding: 2px 4px 14px;
}

body.pc-v3 .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: .7rem;
  background: linear-gradient(135deg, #0f766e, #4f46e5);
  box-shadow: 0 10px 22px rgba(79, 70, 229, .18);
}

body.pc-v3 .brand strong {
  font-size: .88rem;
  letter-spacing: -.01em;
}

body.pc-v3 .brand span {
  font-size: .58rem;
  letter-spacing: .08em;
}

body.pc-v3 .sidebar-toggle {
  width: 32px;
  height: 32px;
  margin: 0 2px 14px auto;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .26);
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}

body.pc-v3 .sidebar-toggle:hover {
  border-color: rgba(15, 139, 125, .24);
  background: #ffffff;
}

body.pc-v3 .sidebar-toggle-icon {
  width: 14px;
  height: 14px;
}

body.pc-v3 .sidebar-toggle-icon::before {
  inset: 0 auto 0 1px;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: none;
}

body.pc-v3 .sidebar-toggle-icon::after {
  top: 4px;
  right: 0;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

body.pc-v3 .nav-list {
  gap: 8px;
}

body.pc-v3 .nav-item,
body.pc-v3 .nav-link-legacy {
  position: relative;
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--pc-sidebar-pill);
  border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

body.pc-v3 .nav-item {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
}

body.pc-v3 .nav-item:hover,
body.pc-v3 .nav-link-legacy:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 139, 125, .18);
  box-shadow: 0 12px 20px rgba(15, 23, 42, .06);
}

body.pc-v3 .nav-item.active {
  background: var(--pc-sidebar-pill-active);
  border-color: var(--pc-sidebar-pill-border);
  color: #0f172a;
  box-shadow: inset 3px 0 0 var(--pc-sidebar-accent), 0 12px 22px rgba(15, 23, 42, .06);
}

body.pc-v3 .nav-symbol {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%);
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .75);
  color: #184a73;
  font-size: .9rem;
  font-weight: 800;
}

body.pc-v3 .nav-item.active .nav-symbol {
  background: linear-gradient(180deg, #0f8b7d 0%, #127a8f 100%);
  color: #fff;
  box-shadow: none;
}

body.pc-v3 .nav-item > span:not(.nav-symbol) {
  font-size: .8rem;
  font-weight: 800;
}

body.pc-v3 .nav-item small {
  font-size: .62rem;
  color: #64748b;
  margin-top: 2px;
}

body.pc-v3 .nav-link-legacy {
  margin-top: 8px;
  text-align: center;
  font-weight: 700;
}

body.pc-v3.sidebar-collapsed .app-shell {
  grid-template-columns: 84px minmax(0, 1fr);
}

body.pc-v3.sidebar-collapsed .brand {
  justify-content: center;
  padding: 4px 0 12px;
}

body.pc-v3.sidebar-collapsed .brand-copy,
body.pc-v3.sidebar-collapsed .nav-item small,
body.pc-v3.sidebar-collapsed .nav-link-legacy {
  display: none;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle {
  margin: 0 auto 14px;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::before {
  left: auto;
  right: 1px;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::after {
  left: 0;
  right: auto;
  transform: rotate(135deg);
}

body.pc-v3.sidebar-collapsed .nav-item {
  width: 62px;
  min-height: 68px;
  padding: 8px 4px 10px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body.pc-v3.sidebar-collapsed .nav-item > span:not(.nav-symbol) {
  display: block;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  max-width: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.pc-v3.sidebar-collapsed .nav-item > span:not(.nav-symbol) {
  color: #334155;
}

body.pc-v3.sidebar-collapsed .nav-item[data-short] > span:not(.nav-symbol) {
  font-size: 0;
}

body.pc-v3.sidebar-collapsed .nav-item[data-short] > span:not(.nav-symbol)::before {
  content: attr(data-short);
  font-size: .58rem;
}

body.pc-v3.sidebar-collapsed .nav-symbol {
  width: 28px;
  height: 28px;
  font-size: .84rem;
  margin: 0;
}

body.sidebar-collapsed:not(.pc-v3) .nav-item {
  width: 52px;
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 8px;
  margin: 0 auto;
  text-align: center;
}

body.sidebar-collapsed:not(.pc-v3) .nav-symbol {
  display: inline-grid;
  width: 32px;
  height: 32px;
  font-size: 1.12rem;
}

body.pc-v3 .topbar {
  background: rgba(247, 251, 255, .72);
  backdrop-filter: blur(18px);
}

body.pc-v3 .hero-panel {
  border-color: rgba(148, 163, 184, .24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  box-shadow: 0 22px 70px rgba(15, 23, 42, .10);
}

.control-tower-hero {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
  padding: clamp(16px, 1.25vw, 24px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.34);
  background:
    radial-gradient(circle at 12% 0%, rgba(34,197,94,.20), transparent 26%),
    radial-gradient(circle at 80% 0%, rgba(109,93,252,.26), transparent 30%),
    linear-gradient(135deg, #142033, #233a58);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 42px rgba(15, 23, 42, .18);
  overflow: hidden;
  position: relative;
}

.control-tower-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #38bdf8, #8b5cf6, #f59e0b);
  opacity: .9;
}

.control-tower-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(255,255,255,.14);
  color: #b7f7e8;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 950;
  font-size: .68rem;
}

.control-tower-hero strong {
  display: block;
  font-size: clamp(1.35rem, 1.8vw, 2.05rem);
  line-height: 1;
  letter-spacing: 0;
}

.control-tower-hero p {
  margin: 8px 0 0;
  max-width: 760px;
  color: rgba(226, 232, 240, .84);
  font-weight: 700;
}

.control-tower-status {
  min-width: 190px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 23, 42, .24);
  border: 1px solid rgba(255,255,255,.16);
}

.control-tower-status span,
.control-tower-status b {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #fff;
  font-weight: 950;
}

body.pc-v3 .panel-head {
  align-items: flex-start;
}

body.pc-v3 .summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

body.pc-v3 .summary-card {
  min-height: 92px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.70));
  box-shadow: 0 18px 34px rgba(15, 23, 42, .08);
  position: relative;
  overflow: hidden;
}

body.pc-v3 .summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #0f8b7d, #6d5dfc);
}

body.pc-v3 .summary-card strong {
  font-size: clamp(1.45rem, 1.8vw, 2.1rem);
  color: #0f172a;
}

body.pc-v3 .summary-card span {
  text-transform: uppercase;
  letter-spacing: .05em;
}

body.pc-v3 .summary-card.status-card.paid::before { background: #22c55e; }
body.pc-v3 .summary-card.status-card.pending::before { background: #f59e0b; }
body.pc-v3 .summary-card.status-card.cancelled::before { background: #ef4444; }

body.pc-v3 .machine-panel-toolbar {
  margin-top: 16px;
  padding-top: 2px;
}

body.pc-v3 .machine-compact-grid {
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
}

body.pc-v3 .machine-compact-card {
  min-height: 124px;
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(circle at 85% 0%, rgba(255,255,255,.82), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.46)),
    var(--machine-bg, #fff);
  box-shadow: 0 18px 36px rgba(15, 23, 42, .09);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.pc-v3 .machine-compact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 46px rgba(15, 23, 42, .14);
}

body.pc-v3 .machine-compact-card::before {
  width: 6px;
}

body.pc-v3 .machine-compact-name strong {
  font-size: .9rem;
}

body.pc-v3 .machine-live-stats {
  display: flex;
}

body.pc-v3 .live-orders-card {
  border-radius: 18px;
  border-color: rgba(148, 163, 184, .24);
  box-shadow: 0 22px 52px rgba(15, 23, 42, .08);
}

body.pc-v3 th {
  background: rgba(241, 245, 249, .94);
}

body.pc-v3 .live-order-row {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--machine-bg, #fff) 64%, #fff), #fff);
  box-shadow: inset 6px 0 0 var(--machine-border, var(--teal));
}

body.pc-v3 .live-order-row:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--machine-bg, #fff) 82%, #fff), #fff);
}

body.pc-v3 .live-sale-popup::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: rgba(255,255,255,.82);
  animation: livePopupTimer 5s linear forwards;
}

@keyframes livePopupTimer {
  from { transform: scaleX(1); transform-origin: left; }
  to { transform: scaleX(0); transform-origin: left; }
}

@media (max-width: 920px) {
  .control-tower-hero {
    display: grid;
  }
}

.loading-card, .empty-state {
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(8px);
}

.modal-overlay.active {
  display: flex;
}

.modal {
  width: min(480px, calc(100vw - 36px));
  max-height: min(760px, 92vh);
  overflow: auto;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, .3);
  box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
}

.modal-head {
  padding: 22px 24px 16px;
  background: #16202a;
  color: #fff;
}

.modal-head h2 {
  margin-bottom: 5px;
}

.modal-head p {
  margin-bottom: 0;
  color: rgba(255,255,255,.78);
}

.modal-body {
  display: grid;
  gap: 14px;
  padding: 22px 24px 24px;
}

.order-detail-modal {
  width: min(620px, 100%);
}

.order-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--machine-ink, #16202a), #16202a);
}

.modal-close-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 900;
}

.order-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-detail-meta span {
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--machine-soft, #f8fafc);
  color: var(--machine-ink, var(--ink));
  font-weight: 800;
}

.order-detail-items {
  display: grid;
  gap: 10px;
}

.order-detail-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 62vh;
  overflow: auto;
}

.order-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--machine-border, var(--line)) 42%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--machine-bg, #fff) 48%, #fff);
}

.odi-thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 11px;
  overflow: hidden;
  background: #eef1f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.odi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.odi-thumb.odi-noimg::after { content: "\1F0CF"; font-size: 1.5rem; opacity: .4; }

.odi-main { flex: 1 1 auto; min-width: 0; }

/* === Remboursements === */
/* Case a cocher par produit, affichee uniquement en mode remboursement. */
.odi-check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 2px;
}
.odi-check input {
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: #c2410c;
}
/* Ligne produit deja remboursee : attenuee + barree. */
.order-detail-item.odi-refunded {
  opacity: .62;
}
.order-detail-item.odi-refunded .odi-main strong {
  text-decoration: line-through;
}
.refund-hint {
  margin: 4px 0 10px;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: .82rem;
  line-height: 1.35;
  color: #7c2d12;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
/* Pastille "Remboursé" (entete de la fiche + cellule montant du tableau). */
.refund-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fdba74;
}
.refund-tag.small {
  padding: 0 5px;
  font-size: .72rem;
}
/* Ligne de vente remboursee dans le tableau Live : montant attenue. */
.live-order-row.order-refunded td:nth-child(4) strong {
  text-decoration: line-through;
  opacity: .65;
}
.odi-main strong { display: block; font-size: .9rem; line-height: 1.25; color: var(--machine-ink, var(--ink)); }
.odi-main small { display: block; margin-top: 2px; color: #8a8f99; font-size: .72rem; }

.odi-price { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.odi-price b { font-size: 1rem; color: var(--machine-ink, var(--ink)); }
.odi-price small { display: block; color: #8a8f99; font-size: .72rem; }

/* Lignes de la table Live a la meme taille que la table "ventes" du Stock (.stock-table.compact). */
.live-orders-table {
  font-size: .75rem;
}
.live-orders-table th,
.live-orders-table td {
  padding: 9px 10px;
}

.form-field {
  display: grid;
  gap: 7px;
}

.form-field label, .checkbox-row {
  color: #334155;
  font-weight: 800;
  font-size: .88rem;
}

.form-field input {
  height: 46px;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 0 13px;
  outline: none;
  background: #f8fafc;
  font-size: 16px;
}

.form-field input:focus {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(15, 139, 125, .12);
}

.checkbox-row {
  display: flex;
  gap: 9px;
  align-items: center;
}

.modal-status {
  min-height: 20px;
  color: var(--muted);
  font-size: .9rem;
}

.modal-status.error {
  color: #dc2626;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}

/* Le corps des fenetres est blanc -> les boutons "ghost" (texte blanc par defaut
   sur le theme) y etaient invisibles. On force un texte fonce lisible. */
.modal .ghost-btn {
  color: #1f2733;
  background: #eef1f7;
  border-color: rgba(15, 23, 42, .16);
}
.modal .ghost-btn:hover {
  background: #e2e7f0;
  border-color: rgba(15, 23, 42, .3);
  color: #0f172a;
}

/* Bouton Historique de la barre Stock (le style ghost par defaut = texte blanc
   sur fond blanc -> illisible). On force un texte fonce lisible. */
#stockHistoryBtn,
#dbRestoreLocalBtn,
#dbRefreshBtn {
  color: #1f2733;
  background: #eef1f7;
  border: 1px solid rgba(15, 23, 42, .16);
}
#stockHistoryBtn:hover,
#dbRestoreLocalBtn:hover,
#dbRefreshBtn:hover {
  background: #e2e7f0;
  border-color: rgba(15, 23, 42, .3);
  color: #0f172a;
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.placeholder-card {
  padding: 18px;
}

.placeholder-card h3 {
  margin-bottom: 8px;
}

.supplier-panel {
  display: grid;
  gap: 18px;
}

.supplier-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.supplier-create-card {
  border-left: 4px solid #0f8b7d;
}

.supplier-form {
  display: grid;
  gap: 14px;
}

.supplier-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.supplier-form label,
.supplier-reception-date {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: .82rem;
  font-weight: 850;
}

.supplier-form input,
.supplier-form select,
.supplier-reception-date input,
.supplier-receive-line input {
  min-width: 0;
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 10px;
  background: #f8fafc;
  color: var(--ink);
  font-size: 14px;
  outline: none;
}

.supplier-form input:focus,
.supplier-form select:focus,
.supplier-reception-date input:focus,
.supplier-receive-line input:focus {
  border-color: #0f8b7d;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 139, 125, .12);
}

.supplier-lines-editor {
  display: grid;
  gap: 8px;
}

.supplier-edit-line {
  display: grid;
  grid-template-columns: minmax(160px, 1.6fr) minmax(110px, .9fr) 70px 90px 78px 128px 72px 34px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  background: #f8fafc;
}

.supplier-form-actions,
.supplier-order-actions,
.supplier-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.danger-btn {
  min-height: 40px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 0 14px;
  background: #fff1f2;
  color: #be123c;
  font-weight: 850;
}

.supplier-order-list {
  display: grid;
  gap: 12px;
}

.supplier-order-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe4ee;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.supplier-order-main,
.supplier-order-head,
.supplier-order-meta,
.supplier-order-numbers {
  display: flex;
  gap: 10px;
}

.supplier-order-main {
  justify-content: space-between;
  align-items: flex-start;
}

.supplier-order-head {
  align-items: center;
  flex-wrap: wrap;
}

.supplier-order-head strong {
  font-size: 1rem;
}

.supplier-order-meta {
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .82rem;
}

.supplier-order-numbers {
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.supplier-order-numbers strong {
  font-size: 1.05rem;
}

.supplier-order-numbers span,
.supplier-order-numbers small {
  color: var(--muted);
}

.supplier-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 9px;
  background: #e2e8f0;
  color: #334155;
  font-size: .74rem;
  font-weight: 900;
}

.supplier-status.ordered { background: #dbeafe; color: #1d4ed8; }
.supplier-status.partial { background: #fef3c7; color: #a16207; }
.supplier-status.received { background: #dcfce7; color: #15803d; }
.supplier-status.cancelled { background: #fee2e2; color: #b91c1c; }

.supplier-line-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-line-preview span {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 6px 10px;
  background: #eef6f5;
  color: #0f766e;
  font-size: .78rem;
  font-weight: 800;
}

.supplier-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(8px);
}

.supplier-modal {
  width: min(720px, 100%);
  max-height: min(820px, 92vh);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
}

.supplier-modal.wide {
  width: min(920px, 100%);
}

.supplier-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.supplier-modal-head h3,
.supplier-modal-head p {
  margin: 0;
}

.supplier-modal-head p {
  color: var(--muted);
}

.supplier-receive-lines {
  display: grid;
  gap: 10px;
}

.supplier-receive-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  background: #f8fafc;
}

.supplier-receive-line span {
  min-width: 0;
}

.supplier-receive-line strong,
.supplier-receive-line small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-receive-line small {
  color: var(--muted);
  margin-top: 3px;
}

@media (max-width: 1180px) {
  .stock-kpi-grid,
  .stats-kpi-grid,
  .company-kpi-grid,
  .inventory-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid-two {
    grid-template-columns: 1fr;
  }

  .stock-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .stock-actions {
    justify-content: flex-start;
  }

  .stock-actions input,
  .stock-actions select {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .summary-grid,
  .stock-product-grid,
  .stock-form-grid,
  .company-form,
  .supplier-form-grid,
  .supplier-edit-line,
  .supplier-receive-line,
  .stock-product-detail-kpis,
  .stock-product-lot-row,
  .stock-association-result {
    grid-template-columns: 1fr;
  }

  .stock-actions {
    width: 100%;
  }

  .stock-actions input,
  .stock-actions select {
    flex: 1 1 100%;
  }

  .stock-table {
    min-width: 720px;
  }

  .stock-mini-kpis {
    grid-template-columns: 1fr;
  }

  .stats-rank-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .stats-rank-row > span:not(.stats-rank-index) {
    text-align: left;
  }
}

@media (max-width: 880px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-link-legacy {
    margin-top: 0;
  }

  .topbar, .view {
    padding-left: 16px;
    padding-right: 16px;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-product-detail-kpis,
  .stock-product-lot-row,
  .stock-association-box {
    grid-template-columns: 1fr 1fr;
  }

  .stock-product-detail-modal .stock-association-box {
    grid-template-columns: 1fr;
  }

  .stock-product-detail-modal .stock-association-search {
    grid-column: 1 / -1;
  }

  .stock-product-detail-modal .stock-detail-section-title {
    display: grid;
    gap: 4px;
  }

  .stock-product-detail-modal .stock-detail-section-title small {
    max-width: none;
    text-align: left;
  }

  .stock-product-lot-row .stock-lot-index,
  .stock-product-lot-main,
  .stock-association-box > div:first-child,
  .stock-association-box .modal-status {
    grid-column: 1 / -1;
  }

  .supplier-form-grid {
    grid-template-columns: 1fr;
  }

  .supplier-edit-line {
    grid-template-columns: 1fr 1fr;
  }

  .supplier-order-main {
    display: grid;
  }

  .supplier-order-numbers {
    align-items: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stock-product {
    transition: none;
  }

  .stock-product:hover {
    transform: none;
  }
}

/* === LEGACY DASHBOARD THEME RESTORE (V65 visual source of truth) === */
body {
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --success: #10b981;
  --success-light: #34d399;
  --warning: #ffff00;
  --error: #ef4444;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-light));
  --gradient-success: linear-gradient(135deg, var(--success), var(--success-light));
  --gradient-dark: linear-gradient(135deg, var(--gray-800), var(--gray-700));
  --sidebar-width: 260px;
  --sidebar-collapsed: 70px;
  --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --sidebar-shadow: 0 0 40px rgba(0, 0, 0, .08);
  --sidebar-border: rgba(99, 102, 241, .1);
  margin: 0;
  background: var(--gray-50);
  color: var(--gray-800);
  font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.6;
}

.app-shell {
  display: block;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--gray-50) 0%, #f0f4f8 100%);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1000;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: var(--sidebar-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: width .3s cubic-bezier(.4, 0, .2, 1);
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  background: linear-gradient(135deg, rgba(99, 102, 241, .05) 0%, rgba(139, 92, 246, .03) 100%);
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
}

.brand-copy strong {
  display: block;
  color: var(--gray-800);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.brand-copy span {
  display: block;
  color: var(--gray-500);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sidebar-toggle {
  width: 42px;
  height: 38px;
  margin: .85rem auto .35rem;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
  color: var(--gray-700);
  box-shadow: var(--shadow-sm);
}

.nav-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem .75rem;
  overflow-y: auto;
}

.nav-item {
  position: relative;
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .875rem;
  row-gap: 0;
  align-items: center;
  padding: .72rem 1rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--gray-600);
  text-align: left;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

.nav-item:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, .08) 0%, rgba(139, 92, 246, .05) 100%);
  color: var(--primary);
  transform: translateX(4px);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
  transform: translateX(5px);
}

.nav-item.active::after {
  content: "";
  position: absolute;
  left: -.75rem;
  top: 50%;
  width: 4px;
  height: 60%;
  border-radius: 0 4px 4px 0;
  background: #fff;
  opacity: .8;
  transform: translateY(-50%);
}

.nav-symbol,
.nav-item .nav-symbol {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.nav-item:hover .nav-symbol {
  transform: scale(1.25) rotate(-8deg);
}

.nav-item.active .nav-symbol {
  transform: scale(1.15);
}

.nav-item > span:not(.nav-symbol) {
  grid-column: 2;
  grid-row: 1;
  color: inherit;
  font-size: .9rem;
  font-weight: 650;
  white-space: nowrap;
}

.nav-item small {
  grid-column: 2;
  grid-row: 2;
  margin-top: .1rem;
  color: currentColor;
  font-size: .68rem;
  font-weight: 500;
  opacity: .72;
  white-space: nowrap;
}

.nav-item small {
  display: none;
}

.nav-item {
  grid-template-rows: 1fr;
  min-height: 50px;
}

.nav-symbol,
.nav-item .nav-symbol {
  grid-row: 1;
}

.nav-item > span:not(.nav-symbol) {
  grid-row: 1;
}

.eyebrow {
  display: none;
}

.nav-link-legacy {
  display: block;
  margin: 1rem .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
  color: var(--gray-700);
  text-align: center;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.nav-link-legacy:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  box-shadow: var(--shadow-md);
}

.main {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  background: linear-gradient(180deg, var(--gray-50) 0%, #f0f4f8 100%);
  transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--gradient-dark);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" fill="none"><path d="M0 20L100 0V20Z" fill="rgba(255,255,255,0.03)"/></svg>');
  background-size: 200px 40px;
}

.topbar > * {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 .2rem;
  color: var(--gray-300);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#pageTitle {
  margin: 0;
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 800;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.ghost-btn,
.primary-btn,
.stock-chip-btn,
.small-btn {
  min-height: 38px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.primary-btn {
  background: var(--gradient-primary);
  border-color: transparent;
}

.ghost-btn {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.view {
  padding: 1rem;
}

.hero-panel,
.card,
.stock-card,
.loading-card {
  border: 1px solid var(--gray-100);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.hero-panel {
  padding: 1.5rem;
  margin: 0;
}

.panel-head,
.stock-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-title,
.stock-card-head h3 {
  color: var(--gray-800);
  font-weight: 800;
}

.muted {
  color: var(--gray-500);
}

.stock-kpi,
.weekly-summary-card,
.weekly-machine-row,
.supplier-order-card,
.stock-product,
.optim-card,
.inventory-regime-card {
  border: 1px solid var(--gray-100);
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--white), var(--gray-50));
  box-shadow: var(--shadow-md);
}

.stock-kpi {
  padding: 1rem;
}

.stock-kpi strong {
  color: var(--gray-900);
}

.stock-kpi.good strong,
.good-text {
  color: var(--success) !important;
}

.stock-kpi.warn strong {
  color: #b45309;
}

.stock-actions select,
.stock-actions input,
.form-field input,
.form-field select {
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
  color: var(--gray-700);
  font-weight: 600;
}

.stock-table-wrap,
.payments-calendar-wrap {
  border: 1px solid var(--gray-100);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.stock-table th,
.payments-table th {
  background: var(--gray-50);
  color: var(--gray-600);
  font-weight: 700;
}

.stock-table td,
.payments-table td {
  border-bottom: 1px solid var(--gray-100);
}

.weekly-summary-card {
  overflow-x: auto;
  border-color: var(--gray-200);
  box-shadow: var(--shadow-md);
}

.weekly-card-head {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.weekly-week-badge,
.payment-month-badge {
  background: var(--gradient-primary);
  box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
}

.payment-status-badge.next {
  border-color: #fcd34d;
  background: #fcd34d;
  color: #7c5b05;
}

body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed);
}

body.sidebar-collapsed .main {
  margin-left: var(--sidebar-collapsed);
}

body.sidebar-collapsed .brand {
  justify-content: center;
  padding-left: .75rem;
  padding-right: .75rem;
}

body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-item > span:not(.nav-symbol),
body.sidebar-collapsed .nav-item small,
body.sidebar-collapsed .nav-link-legacy {
  display: none !important;
}

body.sidebar-collapsed .nav-list {
  padding-left: .5rem;
  padding-right: .5rem;
}

body.sidebar-collapsed .nav-item {
  width: 52px;
  min-height: 48px;
  grid-template-columns: 1fr;
  place-items: center;
  padding: .6rem;
  margin: 0 auto;
}

body.sidebar-collapsed .nav-symbol {
  grid-row: 1;
}

body.sidebar-collapsed .sidebar-toggle {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .sidebar {
    width: 220px;
  }

  .main {
    margin-left: 220px;
  }
}

/* === STOCK PRODUCT THUMBNAILS (API images) === */
.stock-product-head {
  align-items: center;
}

.stock-product-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.stock-product-media {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gray-100, #f1f5f9);
  border: 1px solid var(--gray-200, #e2e8f0);
  display: grid;
  place-items: center;
}

.stock-product-img-ph {
  font-size: 1.2rem;
  line-height: 1;
  opacity: .45;
}

.stock-product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  background: #fff;
}

/* Thumbnail size variants */
.stock-product-media-sm {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.stock-product-media-sm .stock-product-img-ph {
  font-size: .95rem;
}

.stock-product-media-lg {
  width: 72px;
  height: 72px;
  border-radius: 14px;
}

.stock-product-media-lg .stock-product-img-ph {
  font-size: 1.8rem;
}

/* API sell-price badge on stock cards */
.stock-tag-price {
  background: rgba(99, 102, 241, .12);
  color: var(--primary-dark, #4f46e5);
  font-weight: 700;
}

/* Product cell with inline thumbnail (sales / stats tables) */
.stock-cell-product {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-cell-product > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Modal title row with large image */
.stock-modal-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stock-modal-title-row > div {
  min-width: 0;
}

/* Price comparison strip in product modal */
.stock-product-price-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 4px;
}

.stock-product-price-strip span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  min-width: 110px;
}

.stock-product-price-strip strong {
  font-size: 1rem;
}

.stock-product-price-strip small {
  color: var(--gray-500, #64748b);
  font-size: .72rem;
}

/* Unstocked API catalog grid */
.stock-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.stock-catalog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--gray-200, #e2e8f0);
  background: #fff;
}

.stock-catalog-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stock-catalog-meta strong {
  font-size: .9rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-catalog-meta small {
  color: var(--gray-500, #64748b);
  font-size: .72rem;
}

/* Optim card head: keep thumbnail tight-left, meta flexible */
.optim-card-head > div {
  flex: 1 1 auto;
  min-width: 0;
}
/* Fournisseurs legacy V65 compatibility */
.supplier-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.supplier-tile {
  position: relative;
  min-height: 132px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #111827;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.supplier-tile:hover {
  border-color: #7c7cf6;
  transform: translateY(-1px);
}

.supplier-tile.has-pending {
  border-color: #f59e0b;
  background: #fffbeb;
}

.supplier-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #6b6ff4, #0ea5e9);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
}

.supplier-tile strong {
  max-width: 100%;
  font-size: 0.86rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.supplier-tile small {
  color: #64748b;
  font-size: 0.72rem;
  text-align: center;
}

.supplier-tile-pending,
.supplier-tile-done,
.supplier-tile-unpaid {
  position: absolute;
  top: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
}

.supplier-tile-pending { right: 8px; background: #f59e0b; color: #fff; }
.supplier-tile-done { right: 8px; background: #dcfce7; color: #15803d; }
.supplier-tile-unpaid { left: 8px; background: #ef4444; color: #fff; }

.supplier-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}

.supplier-status-stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.supplier-table-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 260px;
}

.supplier-table-actions button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 0.75rem;
}

.supplier-tracking {
  display: inline-flex;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  padding: 5px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.supplier-check-label {
  min-height: 42px;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
}

.supplier-check-label input {
  width: 16px !important;
  height: 16px !important;
}

/* === FOURNISSEURS FCF V65 STRICT RESTORE === */
.fournisseurs-panel {
  --white: #fff;
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-md: 0 8px 18px rgba(15, 23, 42, .10);
  --shadow-lg: 0 18px 38px rgba(15, 23, 42, .14);
  --shadow-xl: 0 28px 80px rgba(15, 23, 42, .24);
  min-height: 100%;
  padding: 24px;
  background: var(--gray-50);
}

.fcf-panel-header {
  margin-bottom: 24px;
  padding: 24px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gray-800), var(--gray-700));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.fcf-panel-header h1 {
  margin: 0;
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 700;
}

.fcf-folder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-size: .85rem;
}

.fcf-folder-bar-left,
.fcf-folder-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcf-folder-icon { font-size: 1.1rem; }
.fcf-folder-status { color: var(--gray-500); }
.fcf-folder-status.connected { color: #059669; font-weight: 600; }

.fcf-btn-folder,
.fcf-btn {
  font-family: inherit;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: all .2s ease;
}

.fcf-btn-folder {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--primary);
  color: var(--white);
  font-size: .75rem;
  font-weight: 600;
}

.fcf-btn-folder:hover { background: var(--primary-dark); }
.fcf-btn-folder.fcf-btn-folder-alt { background: var(--gray-100); color: var(--gray-600); }
.fcf-btn-folder.fcf-btn-folder-alt:hover { background: var(--gray-200); }

.fcf-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.fcf-stat-card {
  min-height: 98px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 20px;
  background: var(--white);
  text-align: center;
  box-shadow: var(--shadow-sm);
  color: inherit;
}

button.fcf-stat-card {
  font: inherit;
}

.fcf-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.fcf-stat-card.clickable { cursor: pointer; }
.fcf-stat-card.clickable:hover { border-color: var(--primary-light); }
.fcf-stat-label {
  margin-bottom: 8px;
  color: var(--gray-400);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.fcf-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}

.fcf-stat-card.s-total .fcf-stat-value { color: var(--primary); }
.fcf-stat-card.s-montant .fcf-stat-value { color: var(--gray-800); }
.fcf-stat-card.s-paye .fcf-stat-value { color: #059669; }
.fcf-stat-card.s-impaye .fcf-stat-value { color: #e11d48; }
.fcf-stat-card.s-nonlivre .fcf-stat-value { color: #d97706; }
.fcf-stat-card.s-livre .fcf-stat-value { color: #2563eb; }

.fcf-suppliers-tiles-section,
.fcf-table-section {
  margin-bottom: 24px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.fcf-suppliers-tiles-section { padding: 24px; }

.fcf-suppliers-tiles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.fcf-suppliers-tiles-header h2,
.fcf-table-section h2 {
  margin: 0;
  color: var(--gray-800);
  font-size: 1rem;
  font-weight: 700;
}

.fcf-suppliers-tiles-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fcf-suppliers-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.fcf-supplier-tile {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: inherit;
  cursor: pointer;
}

.fcf-supplier-tile:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.fcf-supplier-tile.has-pending {
  border-color: #f59e0b;
  background: linear-gradient(135deg, var(--white), #fffbeb);
}

.fcf-st-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 10px;
  overflow: hidden;
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
}

.fcf-st-avatar img,
.fcf-supplier-avatar img,
.fcf-sli-avatar img,
.fcf-supplier-popup-avatar img,
.fcf-sup-edit-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fcf-st-name {
  max-height: 2.6em;
  overflow: hidden;
  color: var(--gray-700);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fcf-st-badge,
.fcf-st-badge-unpaid {
  position: absolute;
  top: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
}

.fcf-st-badge { right: 8px; }
.fcf-st-badge.pending { background: #f59e0b; }
.fcf-st-badge.done { background: #d1fae5; color: #059669; font-size: .65rem; }
.fcf-st-badge-unpaid { left: 8px; background: #f43f5e; }

.fcf-table-section {
  padding: 24px;
  overflow-x: auto;
}

.fcf-orders-subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.fcf-orders-subtitle h3 {
  margin: 0;
  color: var(--gray-700);
  font-size: .95rem;
  font-weight: 700;
}

.fcf-orders-count {
  min-width: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: .78rem;
  font-weight: 700;
}

.fcf-table-section table {
  width: 100%;
  border-collapse: collapse;
}

.fcf-table-section thead th {
  padding: 12px;
  border-bottom: 2px solid var(--gray-100);
  color: var(--gray-400);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.fcf-table-section tbody tr {
  cursor: pointer;
  transition: background .2s ease;
}

.fcf-table-section tbody tr:hover { background: var(--gray-50); }

.fcf-table-section tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--gray-100);
  font-size: .88rem;
  vertical-align: middle;
}

.fcf-cell-supplier {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-800);
  font-weight: 600;
  white-space: nowrap;
}

.fcf-supplier-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
}

.fcf-cell-montant {
  color: var(--gray-900);
  font-weight: 700;
  white-space: nowrap;
}

.fcf-cell-detail {
  max-width: 260px;
  overflow: hidden;
  color: var(--gray-500);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcf-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.fcf-badge-paye { background: #ecfdf5; color: #059669; }
.fcf-badge-nonpaye { background: #fff1f2; color: #e11d48; }
.fcf-badge-livre { background: #eff6ff; color: #2563eb; }
.fcf-badge-partiel { background: #fef3c7; color: #a16207; }
.fcf-badge-nonlivre { background: #fffbeb; color: #d97706; }
.fcf-badge-encours { background: #fffbeb; color: #d97706; }
.fcf-badge-terminee { background: #ecfdf5; color: #059669; }

.fcf-empty-msg {
  padding: 40px 20px;
  color: var(--gray-400);
  font-style: italic;
  text-align: center;
}

.fcf-delete-btn {
  border: 1px solid #ffe4e6;
  border-radius: 6px;
  padding: 4px 10px;
  background: none;
  color: #f43f5e;
  font-family: inherit;
  font-size: .75rem;
  cursor: pointer;
}

.fcf-delete-btn:hover { background: #fff1f2; }

.fcf-archive-wrap {
  margin-top: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.fcf-archive-toggle {
  width: 100%;
  border: none;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  color: var(--gray-800);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}

.fcf-archive-toggle-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fcf-archive-chevron { transition: transform .2s ease; }
.fcf-archive-wrap.open .fcf-archive-chevron { transform: rotate(180deg); }
.fcf-archive-content { display: none; padding-bottom: 8px; }
.fcf-archive-wrap.open .fcf-archive-content { display: block; }
.fcf-archive-inner { padding: 0 16px 16px; }

.fcf-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
}

.fcf-btn:active { transform: scale(.97); }
.fcf-btn-primary { background: var(--primary); color: var(--white); }
.fcf-btn-primary:hover { background: var(--primary-dark); }
.fcf-btn-secondary { border: 1px solid var(--gray-200); background: var(--gray-100); color: var(--gray-700); }
.fcf-btn-secondary:hover { background: var(--gray-200); }
.fcf-btn-success { background: #10b981; color: var(--white); }
.fcf-btn-success:hover { background: #059669; }
.fcf-btn-danger { border: 1px solid #ffe4e6; background: transparent; color: #ef4444; }
.fcf-btn-danger:hover { background: #fff1f2; }
.fcf-btn-sm { padding: 6px 14px; font-size: .75rem; }

.fcf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  padding: 20px;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(4px);
  transition: opacity .25s, visibility .25s;
}

.fcf-modal-overlay.visible {
  visibility: visible;
  opacity: 1;
}

.fcf-modal {
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-xl);
  transform: scale(.95) translateY(10px);
  transition: transform .25s;
}

.fcf-modal-overlay.visible .fcf-modal { transform: scale(1) translateY(0); }
.fcf-modal.fcf-modal-large { max-width: 950px; }

.fcf-modal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--white);
}

.fcf-modal-header h3 {
  flex: 1;
  margin: 0;
  color: var(--gray-800);
  font-size: 1rem;
  font-weight: 700;
}

.fcf-modal-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  color: var(--gray-400);
  font-size: 1.1rem;
  cursor: pointer;
}

.fcf-modal-close:hover {
  background: #fff1f2;
  color: #f43f5e;
}

.fcf-modal-body { padding: 20px 24px 24px; }

.fcf-supplier-popup-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}

.fcf-supplier-popup-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 700;
}

.fcf-supplier-popup-info { flex: 1; }
.fcf-supplier-popup-info h4 { margin: 0 0 4px; color: var(--gray-800); font-size: 1.15rem; font-weight: 700; }
.fcf-spi-meta { color: var(--gray-500); font-size: .82rem; }
.fcf-supplier-popup-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }

.fcf-sps-card {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 14px;
  background: var(--gray-50);
  text-align: center;
}

.fcf-sps-value { color: var(--gray-800); font-size: 1.3rem; font-weight: 700; }
.fcf-sps-label { margin-top: 2px; color: var(--gray-400); font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; }
.fcf-sps-pending .fcf-sps-value { color: #d97706; }
.fcf-sps-total .fcf-sps-value { color: var(--primary); }

.fcf-popup-orders-section { margin-top: 16px; }
.fcf-popup-orders-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--gray-400);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fcf-count {
  border-radius: 10px;
  padding: 2px 8px;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: .7rem;
}

.fcf-popup-orders-title.pending .fcf-count { background: #fef3c7; color: #d97706; }

.fcf-popup-order-item {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gray-50);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.fcf-popup-order-item:hover { background: var(--gray-100); border-color: var(--gray-300); }
.fcf-popup-order-item.en-cours { background: #fffbeb; border-color: #fde68a; }
.fcf-poi-date { min-width: 90px; color: var(--gray-500); font-size: .8rem; }
.fcf-poi-detail { flex: 1; overflow: hidden; color: var(--gray-700); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.fcf-poi-montant { min-width: 80px; color: var(--gray-800); font-size: .9rem; font-weight: 700; text-align: right; }
.fcf-poi-badges { display: flex; gap: 6px; }

.fcf-popup-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.fcf-popup-form-grid .full { grid-column: 1 / -1; }
.fcf-popup-back-btn {
  border: none;
  padding: 0;
  margin-bottom: 8px;
  background: none;
  color: var(--primary);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

.fcf-popup-back-btn:hover { text-decoration: underline; }
.fcf-form-group label,
.fcf-products-section-title {
  display: block;
  margin-bottom: 6px;
  color: var(--gray-500);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.fcf-form-group input,
.fcf-form-group select,
.fcf-form-group textarea {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--white);
  color: var(--gray-800);
  font-family: inherit;
  font-size: .9rem;
}

.fcf-form-group textarea { min-height: 80px; resize: vertical; }
.fcf-form-group input:focus,
.fcf-form-group select:focus,
.fcf-form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.fcf-popup-form-checkboxes {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.fcf-popup-form-checkboxes label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-700);
  font-size: .9rem;
  cursor: pointer;
}

.fcf-popup-form-checkboxes input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.fcf-popup-form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.fcf-products-section {
  margin-bottom: 20px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 16px;
  background: var(--gray-50);
}

.fcf-product-head-row,
.fcf-product-input-row {
  display: grid;
  grid-template-columns: 2fr 80px 90px 70px 110px 32px;
  gap: 8px;
  align-items: center;
}

.fcf-product-head-row {
  margin-bottom: 8px;
  color: var(--gray-400);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.fcf-product-input-row { margin-bottom: 4px; }

/* Sous-ligne "Compté en stock comme : ..." (produit stock si revendu autrement). */
.fcf-product-stock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding-left: 6px;
}
.fcf-product-stock-row .fcf-stock-arrow {
  flex: 0 0 auto;
  font-size: .74rem;
  font-weight: 600;
  color: var(--gray-400);
  white-space: nowrap;
}
.fcf-product-stock-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  border: 1px dashed var(--gray-300);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .82rem;
  background: #fbfdff;
}
.fcf-stock-map {
  color: #0369a1;
  font-weight: 600;
}

.fcf-product-input-row input,
.fcf-devise-select {
  height: 36px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--white);
  color: var(--gray-800);
  font-family: inherit;
  font-size: .85rem;
}

.fcf-devise-select { padding: 6px 4px; font-size: .8rem; }
.fcf-prix-foreign {
  height: 36px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: .75rem;
  white-space: nowrap;
}

.fcf-prix-foreign.has-value { border-color: #7dd3fc; background: #e0f2fe; color: #0369a1; font-weight: 600; }
.fcf-rates-badge {
  display: inline-block;
  margin-bottom: 10px;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .72rem;
}

.fcf-rates-badge.fallback { border: 1px solid #fde047; background: #fef9c3; color: #854d0e; }
.fcf-product-remove-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #fecdd3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff1f2;
  color: #f43f5e;
  font-size: 1rem;
  cursor: pointer;
}

.fcf-add-product-btn {
  width: 100%;
  border: 1px dashed var(--gray-300);
  border-radius: 6px;
  padding: 8px 14px;
  background: var(--gray-50);
  color: var(--gray-600);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}

.fcf-products-table {
  width: 100%;
  border-collapse: collapse;
}

.fcf-products-table th {
  border-bottom: 1px solid var(--gray-200);
  padding: 10px 12px;
  background: var(--gray-50);
  color: var(--gray-400);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-align: left;
  text-transform: uppercase;
}

.fcf-products-table td {
  border-bottom: 1px solid var(--gray-100);
  padding: 10px 12px;
  color: var(--gray-700);
  font-size: .9rem;
}

.fcf-product-total { color: var(--gray-800); font-size: .95rem; font-weight: 700; }

.fcf-sup-manager { display: flex; min-height: 400px; }
.fcf-sup-list {
  width: 220px;
  max-height: 450px;
  overflow-y: auto;
  border-right: 1px solid var(--gray-200);
}

.fcf-sup-list-add {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100);
  text-align: center;
}

.fcf-sup-list-add button {
  width: 100%;
  border: 1px dashed var(--gray-300);
  border-radius: 6px;
  padding: 8px 12px;
  background: var(--white);
  color: var(--gray-600);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}

.fcf-sup-list-item {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--gray-100);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
}

.fcf-sup-list-item:hover { background: var(--gray-50); }
.fcf-sup-list-item.active { border-left: 3px solid var(--primary); background: #eff6ff; }
.fcf-sli-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
}

.fcf-sli-name {
  flex: 1;
  overflow: hidden;
  color: var(--gray-700);
  font-size: .85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcf-sup-edit-pane { flex: 1; padding: 20px; overflow-y: auto; }
.fcf-sup-edit-empty { padding: 60px 20px; color: var(--gray-400); font-style: italic; text-align: center; }
.fcf-sup-edit-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}

.fcf-sup-edit-avatar {
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
}

.fcf-sup-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fcf-sup-edit-form label {
  display: block;
  margin-bottom: 4px;
  color: var(--gray-500);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.fcf-sup-edit-form input {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--white);
  color: var(--gray-800);
  font-family: inherit;
  font-size: .9rem;
}

.fcf-sup-edit-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.fcf-tracking-badge {
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
}

.fcf-tracking-badge.has-tracking {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  cursor: pointer;
}

.fcf-tracking-badge.no-tracking {
  background: var(--gray-100);
  color: var(--gray-400);
}

.fcf-tracking-section {
  margin-top: 16px;
  border: 1px solid #93c5fd;
  border-radius: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #eff6ff, #e0f2fe);
}

.fcf-invoice-status {
  margin-top: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: #0369a1;
}
.fcf-invoice-current {
  margin-bottom: 8px;
  font-size: .9rem;
}
.fcf-invoice-current a,
.fcf-invoice-link {
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: underline;
}

.fcf-tracking-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: #2563eb;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.fcf-tracking-input-group {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.fcf-tracking-input-group select,
.fcf-tracking-input-group input {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .9rem;
}

.fcf-tracking-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fcf-tracking-carrier { color: var(--gray-600); font-size: .85rem; font-weight: 500; }
.fcf-tracking-number {
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 8px 12px;
  background: white;
  color: var(--gray-800);
  font-family: "Courier New", monospace;
  font-size: 1rem;
  font-weight: 700;
}

.fcf-btn-track {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

.fcf-tracking-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #bfdbfe;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.fcf-tracking-icon { font-size: 3rem; line-height: 1; }
.fcf-tracking-details { flex: 1; }
.fcf-tracking-carrier-name { margin-bottom: 4px; color: #64748b; font-size: .85rem; font-weight: 500; }
.fcf-tracking-number-display {
  margin-bottom: 8px;
  color: #1e40af;
  font-family: "Courier New", monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.fcf-btn-copy {
  border: 1px solid #93c5fd;
  border-radius: 6px;
  padding: 4px 10px;
  background: white;
  color: #2563eb;
  font-size: .75rem;
  cursor: pointer;
}

.fcf-tracking-links-section { padding: 20px 24px; }
.fcf-tracking-links-title { margin-bottom: 16px; color: #334155; font-size: .9rem; font-weight: 600; }
.fcf-tracking-links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fcf-tracking-link-card {
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  text-align: center;
  text-decoration: none;
}

.fcf-tracking-link-card.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.fcf-link-icon { margin-bottom: 8px; font-size: 1.8rem; }
.fcf-link-name { margin-bottom: 4px; color: #1e293b; font-size: .9rem; font-weight: 700; }
.fcf-link-desc { color: #64748b; font-size: .7rem; line-height: 1.3; }
.fcf-tracking-link-card.primary .fcf-link-name,
.fcf-tracking-link-card.primary .fcf-link-desc { color: white; }

.fcf-detail-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.fcf-detail-status-grid > div,
.fcf-detail-box {
  border-radius: 8px;
  padding: 12px;
  background: var(--gray-50);
  text-align: center;
}

.fcf-detail-status-grid span,
.fcf-detail-box span {
  display: block;
  margin-bottom: 4px;
  color: var(--gray-400);
  font-size: .7rem;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.fcf-detail-status-grid strong { color: var(--gray-800); font-size: 1.05rem; }
.fcf-detail-status-grid .ok strong { color: #059669; }
.fcf-detail-status-grid .bad strong { color: #e11d48; }
.fcf-detail-status-grid .warn strong { color: #d97706; }
.fcf-detail-box { margin-bottom: 16px; text-align: left; }
.fcf-detail-box p { margin: 0; color: var(--gray-700); }

.fcf-receive-row,
.fcf-restore-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: white;
}

.fcf-receive-row.fcf-received-row {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.fcf-received-row .fcf-cancel-receive-line {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Seul le bloc de texte s'étire : la vignette et la quantité gardent leur largeur.
   (Avant : `.fcf-receive-row span` étirait aussi la vignette, plus spécifique que .fcf-thumb.) */
.fcf-receive-row .fcf-rc-text { flex: 1; min-width: 0; }
.fcf-receive-row strong,
.fcf-receive-row small { display: block; }
.fcf-receive-row small { color: var(--gray-500); }
.fcf-receive-row input {
  width: 90px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 8px 10px;
}

.fcf-receive-row.selectable { cursor: pointer; }
.fcf-receive-row.selectable:has(.fcf-receive-check:checked) {
  border-color: #f59e0b;
  background: #fffbeb;
}

.fcf-receive-row .fcf-receive-check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  padding: 0;
  accent-color: #d97706;
}

.fcf-receive-row input:disabled {
  background: var(--gray-100);
  color: var(--gray-400);
}

/* ============================================================================
   Fenêtre « Détail commande » refondue (build 426) : en-tête + bandeau de
   statuts toujours visibles, puis 3 onglets (Détail / Paiement / Réception).
   Avant : tout empilé sur une seule page + un écran de réception séparé.
   ============================================================================ */
/* Grande fenêtre : on exploite la largeur de l'écran (le contenu est dense) et on
   monte la hauteur pour limiter le défilement. Fond doux + panneau de contenu :
   la fenêtre a une structure au lieu d'être un grand aplat blanc. */
.fcf-modal.fcf-modal-xl {
  max-width: min(1460px, 96vw);
  max-height: 94vh;
  border-radius: 16px;
  background: #f5f7fa;
}
.fcf-modal-xl .fcf-modal-header { padding: 18px 28px 16px; }
.fcf-modal-xl .fcf-modal-header h3 { font-size: 1.1rem; font-weight: 800; }
.fcf-modal-xl .fcf-modal-body { padding: 0; }
/* Bandeau d'identité + statuts + onglets : sur fond blanc, collé en haut. */
.fcf-od-top { padding: 22px 28px 0; background: #fff; }
.fcf-od-pane { padding: 24px 28px 28px; }

.fcf-od-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.fcf-od-head-main { flex: 1; min-width: 0; }
.fcf-od-head-name {
  font-weight: 800;
  font-size: 1.38rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fcf-od-head-sub { margin-top: 3px; font-size: .88rem; color: var(--gray-500); }

.fcf-od-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.fcf-od-stat {
  border: 1px solid var(--gray-200);
  border-radius: 13px;
  padding: 13px 15px;
  background: var(--gray-50);
  min-width: 0;
}
.fcf-od-stat span {
  display: block;
  margin-bottom: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.fcf-od-stat strong {
  display: block;
  font-size: 1.14rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Teinte selon l'état : le coup d'œil suffit, plus besoin de lire. */
.fcf-od-stat.ok { border-color: #a7f3d0; background: #f0fdf5; }
.fcf-od-stat.warn { border-color: #fde68a; background: #fffbeb; }
.fcf-od-stat.bad { border-color: #fecaca; background: #fff5f5; }
.fcf-od-stat.ok strong { color: #047857; }
.fcf-od-stat.warn strong { color: #b45309; }
.fcf-od-stat.bad strong { color: #be123c; }

/* Onglets : même look que les sous-navigations validées (voir theme-tabs.css). */
/* Onglets en FORME (dossier) : l'onglet actif prend le fond du panneau et se prolonge
   dans le contenu, au lieu d'un simple titre souligné. */
.fcf-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gray-200);
  margin: 0 -28px; /* la ligne des onglets file jusqu'aux bords du bandeau */
  padding: 0 28px;
}
.fcf-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 12px 22px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  font-size: .93rem;
  font-weight: 700;
  color: var(--gray-500);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.fcf-tab:hover { background: var(--gray-50); color: var(--gray-800); }
.fcf-tab.active {
  background: #f5f7fa; /* = fond du panneau -> l'onglet ouvre sur son contenu */
  border-color: var(--gray-200);
  color: var(--gray-800);
  font-weight: 800;
  box-shadow: inset 0 3px 0 0 #1f2c4d; /* liseré de couleur en tête d'onglet */
}
/* Pastille « il y a quelque chose à faire ici » (impayé, stock à enregistrer). */
.fcf-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e11d48;
  flex: none;
}
.fcf-tab-dot.warn { background: #d97706; }

.fcf-od-section { margin-bottom: 22px; }
/* Les blocs posés sur le fond doux du panneau doivent être BLANCS pour ressortir. */
.fcf-od-pane .fcf-pay-section,
.fcf-od-pane .fcf-products-section,
.fcf-od-pane .fcf-tracking-section,
.fcf-od-pane .fcf-detail-box,
.fcf-od-pane .fcf-popup-form-grid {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 16px 18px;
}
.fcf-od-pane .fcf-products-section-title {
  font-size: .74rem;
  letter-spacing: .07em;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.fcf-od-pane .fcf-prod-card { border-color: var(--gray-100); background: var(--gray-50); }
.fcf-od-pane .fcf-prod-card:hover { background: #fff; border-color: var(--gray-300); }
.fcf-od-hint {
  margin: 0 0 12px;
  font-size: .86rem;
  color: var(--gray-500);
  line-height: 1.45;
}
/* Barre d'actions EN HAUT de chaque onglet (demande de Toni) : on voit tout de suite
   ce qu'on peut faire, sans descendre au bas d'une longue liste. */
.fcf-od-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
}
.fcf-od-actions .fcf-spacer { flex: 1; }

/* Association obligatoire d'une ligne à un produit du catalogue avant réception. */
.fcf-receive-row.fcf-row-blocked { border-color: #fecaca; background: #fff5f5; }
.fcf-rc-warn {
  display: block;
  margin-top: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: #b91c1c;
}
.fcf-rc-ok { display: block; margin-top: 4px; font-size: .78rem; font-weight: 700; color: #047857; }
.fcf-rc-map { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fcf-rc-map input {
  flex: 1;
  min-width: 0;
  width: auto;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .85rem;
}
.fcf-rc-blocked-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff5f5;
  font-size: .86rem;
  font-weight: 600;
  color: #b91c1c;
}

/* Vignette produit (visuel catalogue, ou dégradé + initiale si pas d'image). */
.fcf-thumb {
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--gray-100);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
}
.fcf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mosaïque multi-série : jusqu'à 4 visuels découpés dans le même carré. */
.fcf-thumb-multi {
  display: grid;
  place-items: stretch;
  gap: 1px;
  background: var(--gray-200);
}
.fcf-thumb-multi img { min-width: 0; min-height: 0; }
.fcf-thumb-multi.n2 { grid-template-columns: 1fr 1fr; }
.fcf-thumb-multi.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.fcf-thumb-multi.n3 img:first-child { grid-row: span 2; }
.fcf-thumb-multi.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
/* Sans visuel : carton gris discret, pas un aplat de couleur avec une lettre. */
.fcf-thumb-ph {
  background: var(--gray-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5V8Z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E") center / 44% no-repeat;
  border: 1px dashed var(--gray-300);
}

/* Tuiles produits de la commande (remplacent le tableau : plus visuel). */
.fcf-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(322px, 1fr));
  gap: 12px;
}
.fcf-prod-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px 16px 0 20px; /* 20 à gauche : place pour le liseré de couleur */
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .07);
  overflow: hidden;
  transition: box-shadow .14s, transform .14s, border-color .14s;
}
/* Liseré coloré déduit du produit : donne de la couleur et sépare nettement les lignes. */
.fcf-prod-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--accent, #cbd5e1);
}
.fcf-prod-card:hover {
  border-color: var(--gray-300);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  transform: translateY(-2px);
}
/* Bandeau chiffré en pied de tuile : les 3 valeurs séparées, façon tableau. */
.fcf-prod-foot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px -16px 0 -20px;
  padding: 11px 16px 11px 20px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}
.fcf-prod-foot > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--gray-200);
}
.fcf-prod-foot > span:first-child { padding-left: 0; border-left: 0; }
.fcf-prod-foot b {
  font-size: 1rem;
  font-weight: 900;
  color: var(--gray-800);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fcf-prod-foot small {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.fcf-prod-foot .tot b { color: #0f766e; }
.fcf-prod-noimg {
  font-size: .76rem;
  color: var(--gray-400);
  font-weight: 600;
}
/* Tuile cliquable : on remplit le produit directement depuis le Détail. */
.fcf-prod-clickable { cursor: pointer; }
.fcf-prod-clickable:hover { border-color: #a5b4fc; }

/* Tuile ouverte en saisie : elle prend toute la largeur de la grille. */
.fcf-prod-card.fcf-prod-editing {
  grid-column: 1 / -1;
  display: block;
  padding: 18px 20px 18px 24px;
  border-color: #c7d2fe;
  box-shadow: 0 10px 26px rgba(79, 70, 229, .14);
}
.fcf-tile-form { display: flex; flex-direction: column; gap: 12px; }
.fcf-tile-form-title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.fcf-tile-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.fcf-tile-form label small {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gray-400);
}
.fcf-tile-form input,
.fcf-tile-form select {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--gray-200);
  border-radius: 9px;
  font-size: .9rem;
  color: var(--gray-800);
  background: #fff;
}
.fcf-tile-form input:focus,
.fcf-tile-form select:focus { outline: none; border-color: #818cf8; }
.fcf-tile-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Liste de suggestions catalogue (remplace la <datalist> native, trop restrictive). */
/* La fiche produit en cours de saisie ne doit pas rogner la liste. */
.fcf-prod-card.fcf-prod-editing { overflow: visible; }

/* Résultats EN FLUX sous le champ : rien à positionner, rien ne peut les recouvrir. */
.fcf-suggest {
  box-sizing: border-box;
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain; /* le défilement de la liste ne se propage pas à la fenêtre */
  padding: 5px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
}
.fcf-suggest button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: .88rem;
  color: var(--gray-800);
  text-align: left;
  cursor: pointer;
}
.fcf-suggest button:hover,
.fcf-suggest button.on { background: #eef2ff; }
.fcf-suggest button small { flex: none; color: var(--gray-400); font-weight: 800; font-size: .74rem; }
.fcf-suggest-head {
  position: sticky;
  top: 0;
  padding: 7px 11px 8px;
  margin-bottom: 2px;
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray-400);
}

/* Cases « au booster » / « multi-série » sous le type, dans la fiche produit. */
.fcf-tile-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fcf-tile-flags .fcf-type-check { text-transform: none; letter-spacing: 0; }
/* Tuile « Montant » cliquable : ouvre la correction TTC/HT + régime de TVA. */
.fcf-od-stat-btn {
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.fcf-od-stat-btn:hover { border-color: #a5b4fc; box-shadow: 0 4px 14px rgba(79, 70, 229, .12); }
.fcf-od-stat-btn span em { font-style: normal; color: var(--gray-300); margin-left: 3px; }
.fcf-od-stat-btn small {
  display: block;
  margin-top: 5px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Choix « prix saisis en » / régime de TVA. */
.fcf-pm-group { display: grid; gap: 10px; }
.fcf-pm-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.fcf-pm-opt:hover { border-color: #c7d2fe; }
.fcf-pm-opt:has(input:checked) { border-color: #6366f1; background: #f5f3ff; }
.fcf-pm-opt input { margin-top: 3px; width: 17px; height: 17px; accent-color: #6366f1; flex: none; }
.fcf-pm-opt b { display: block; font-size: .93rem; font-weight: 800; color: var(--gray-800); }
.fcf-pm-opt small { display: block; margin-top: 3px; font-size: .82rem; color: var(--gray-500); line-height: 1.45; }

/* Composition d'un « Coffret multi booster » : une ligne par série. */
.fcf-tile-multi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--gray-300);
  border-radius: 12px;
  background: var(--gray-50);
}
.fcf-tile-multi-title {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.fcf-tile-multi-title small {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gray-400);
}
.fcf-multi-row { display: flex; align-items: center; gap: 8px; }
.fcf-multi-row .fcf-multi-qty { width: 84px; flex: none; }
.fcf-multi-row .fcf-multi-name { flex: 1; min-width: 0; }
.fcf-multi-row input {
  padding: 8px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: 9px;
  font-size: .88rem;
  color: var(--gray-800);
  background: #fff;
}
.fcf-multi-row input:focus { outline: none; border-color: #818cf8; }
.fcf-multi-x { color: var(--gray-400); font-weight: 900; flex: none; }
.fcf-multi-del {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  color: #dc2626;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}
.fcf-multi-del:hover { background: #fff1f2; border-color: #fecaca; }

/* Champ « Boosters / article » inactif : visible mais clairement grisé. */
.fcf-tile-form label.is-off { color: var(--gray-300); }
.fcf-tile-form input:disabled {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-400);
  cursor: not-allowed;
}
.fcf-tile-form-actions { display: flex; gap: 8px; margin-top: 4px; }
/* align-self : sans ça le bloc s'étire sur toute la hauteur de la tuile et la pastille
   de quantité (ancrée en bas) descendait au niveau des prix au lieu de rester sur l'image. */
.fcf-prod-visual { position: relative; flex: none; align-self: flex-start; }
.fcf-prod-visual .fcf-thumb { border-radius: 12px; }
.fcf-prod-qty {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #1f2c4d;
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
.fcf-prod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fcf-prod-body > strong {
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--gray-800);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.fcf-prod-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fcf-prod-ref {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: .7rem;
  font-weight: 800;
}
.fcf-stock-map-ko { color: #b91c1c !important; }

/* ===== Onglet Paiement : bandeau de synthèse + vrai tableau ===== */
.fcf-pay-head {
  padding: 18px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, var(--gray-50));
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}
.fcf-pay-head.paid { border-color: #a7f3d0; background: linear-gradient(135deg, #ffffff, #f0fdf5); }
.fcf-pay-head.partial { border-color: #fde68a; background: linear-gradient(135deg, #ffffff, #fffbeb); }
.fcf-pay-head.unpaid { border-color: #fecaca; background: linear-gradient(135deg, #ffffff, #fff5f5); }
.fcf-pay-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.fcf-pay-head-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .95rem;
  font-weight: 800;
  color: var(--gray-800);
}
.fcf-pay-head-pct { font-size: 1.5rem; font-weight: 900; color: var(--gray-800); letter-spacing: -.02em; }
.fcf-pay-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.fcf-pay-figures > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fcf-pay-figures small {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.fcf-pay-figures b { font-size: 1.16rem; font-weight: 900; color: var(--gray-800); }
.fcf-pay-figures b.due { color: #be123c; }
.fcf-pay-figures b.ok { color: #047857; }

.fcf-table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: 12px; }
.fcf-pay-table { width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff; }
.fcf-pay-table th {
  padding: 10px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
  text-align: left;
  white-space: nowrap;
}
.fcf-pay-table td { padding: 10px 14px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); }
.fcf-pay-table tbody tr:last-child td { border-bottom: 0; }
.fcf-pay-table .c { text-align: center; width: 1%; white-space: nowrap; }
.fcf-pay-table .r { text-align: right; width: 1%; white-space: nowrap; }
.fcf-pay-table td label { display: block; cursor: pointer; color: var(--gray-800); font-weight: 600; }
.fcf-pay-table tbody tr:hover { background: var(--gray-50); }
.fcf-pay-table tbody tr.is-paid { background: #f0fdf5; }
.fcf-pay-table tbody tr.is-paid td label { color: #047857; }
.fcf-pay-table tbody tr.is-paid td b { color: #047857; }
.fcf-pay-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: #059669; cursor: pointer; }
.fcf-pay-table tfoot td {
  padding: 11px 14px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  font-weight: 800;
  color: var(--gray-700);
}
.fcf-pay-table tfoot b { font-size: 1rem; color: var(--gray-800); }
.fcf-pay-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

/* Note libre de la commande (n'apparaît que si ce n'est pas la liste auto des produits). */
.fcf-od-note {
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid var(--gray-200);
  border-left: 3px solid #1f2c4d;
  border-radius: 10px;
  background: #fff;
}
.fcf-od-note span {
  display: block;
  margin-bottom: 4px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.fcf-od-note p {
  margin: 0;
  color: var(--gray-800);
  font-size: .95rem;
  line-height: 1.55;
  white-space: pre-line;
}

.fcf-products-section-title small {
  margin-left: 8px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: none;
  letter-spacing: 0;
}

/* Lignes de réception : le <label> ne couvre QUE le texte (le champ quantité doit
   rester saisissable pour pouvoir réceptionner partiellement). */
.fcf-receive-row > label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  margin: 0;
}
.fcf-rc-text { flex: 1; min-width: 0; display: block; }
.fcf-rc-text strong { display: block; font-size: .92rem; color: var(--gray-800); }
.fcf-rc-qty { flex: none; display: flex; align-items: center; gap: 6px; }
.fcf-rc-qty small { color: var(--gray-400); font-weight: 800; font-size: .78rem; }
.fcf-rc-guess { display: block; margin-top: 6px; font-size: .78rem; color: var(--gray-500); }
/* Ce qui va réellement entrer en stock quand l'article s'ouvre en plusieurs séries. */
.fcf-rc-yield {
  display: block;
  margin-top: 5px;
  padding: 4px 9px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #047857;
  font-size: .78rem;
  font-weight: 700;
}
.fcf-rc-yield b { font-weight: 900; }
.fcf-row-blocked > .fcf-thumb { align-self: flex-start; }

/* Chaque produit du formulaire devient un BLOC séparé et coloré : avant, les 3 rangées
   (nom/prix, type, produit stock) se suivaient sans rien pour dire où finit un produit
   et où commence le suivant. */
.fcf-product-block {
  position: relative;
  padding: 16px 16px 12px 22px;
  margin-bottom: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  transition: box-shadow .14s, border-color .14s;
}
.fcf-product-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 14px 0 0 14px;
  background: var(--accent, #cbd5e1);
}
.fcf-product-block:focus-within {
  border-color: #c7d2fe;
  box-shadow: 0 6px 18px rgba(79, 70, 229, .12);
}
.fcf-product-num {
  position: absolute;
  top: -10px;
  left: 18px;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #1f2c4d;
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
}
/* La ligne d'en-têtes est hors des blocs : on la décale pour rester alignée. */
.fcf-product-head-row { padding: 0 16px 0 22px; }

/* Récapitulatif de l'écran « Modifier » : tout est en lecture seule sauf la date. */
.fcf-edit-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  align-items: end;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}
.fcf-edit-sum { min-width: 0; }
.fcf-edit-sum span {
  display: block;
  margin-bottom: 6px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.fcf-edit-sum strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fcf-edit-summary .fcf-form-group { gap: 6px; }
.fcf-edit-summary .fcf-form-group label {
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.fcf-edit-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: .86rem;
  font-weight: 700;
}

@media (max-width: 780px) {
  .fcf-od-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcf-tab { padding: 10px 11px; font-size: .86rem; }
  .fcf-prod-grid { grid-template-columns: 1fr; }
}

.fcf-unpaid-total {
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff1f2;
  color: #e11d48;
}

.fcf-unpaid-total strong { font-size: 1.2rem; }

.fcf-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  z-index: 10001;
  opacity: 0;
  border-radius: 8px;
  padding: 12px 24px;
  background: #10b981;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  font-size: .9rem;
  font-weight: 600;
  transform: translateX(-50%) translateY(100px);
  transition: all .3s ease;
}

.fcf-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  .fournisseurs-panel { padding: 12px; }
  .fcf-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fcf-stat-card { padding: 14px 10px; }
  .fcf-stat-value { font-size: 1.2rem; }
  .fcf-suppliers-tiles-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .fcf-supplier-tile { padding: 12px; }
  .fcf-st-avatar { width: 40px; height: 40px; font-size: .9rem; }
  .fcf-table-section thead th,
  .fcf-table-section tbody td { padding: 8px 6px; font-size: .78rem; }
  .fcf-cell-detail { max-width: 120px; }
  .fcf-modal,
  .fcf-modal.fcf-modal-large { max-width: 100%; }
  .fcf-popup-form-grid,
  .fcf-product-head-row,
  .fcf-product-input-row { grid-template-columns: 1fr; }
  .fcf-poi-badges { display: none; }
}

@media (max-width: 580px) {
  .fcf-sup-manager { flex-direction: column; min-height: auto; }
  .fcf-sup-list { width: 100%; max-height: 180px; border-right: none; border-bottom: 1px solid var(--gray-200); }
  .fcf-folder-bar { flex-direction: column; align-items: flex-start; }
  .fcf-suppliers-tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .fcf-tracking-links-grid,
  .fcf-detail-status-grid,
  .fcf-tracking-input-group { grid-template-columns: 1fr; }
}

/* === GLOBAL DENSITY RESTORE: larger-resolution feel like the old dashboard === */
@media (min-width: 900px) {
  body {
    --sidebar-width: 218px;
    --sidebar-collapsed: 56px;
    font-size: 12.5px;
    line-height: 1.45;
  }

  .brand {
    gap: .55rem;
    padding: 1rem 1.05rem;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: .68rem;
  }

  .brand-copy strong {
    font-size: .94rem;
  }

  .brand-copy span {
    font-size: .58rem;
  }

  .sidebar-toggle {
    width: 34px;
    height: 30px;
    margin: .55rem auto .25rem;
    border-radius: 9px;
  }

  .sidebar-toggle-icon {
    width: 18px;
    height: 16px;
    border-radius: 5px;
  }

  .nav-list {
    gap: .12rem;
    padding: .65rem .55rem;
  }

  .nav-item {
    min-height: 39px;
    grid-template-columns: 23px minmax(0, 1fr);
    column-gap: .62rem;
    padding: .5rem .72rem;
    border-radius: 9px;
  }

  .nav-symbol,
  .nav-item .nav-symbol {
    width: 23px;
    height: 23px;
    font-size: 1rem;
  }

  .nav-item > span:not(.nav-symbol) {
    font-size: .7rem;
    font-weight: 650;
  }

  .nav-link-legacy {
    margin: .7rem .55rem;
    padding: .55rem .7rem;
    border-radius: 9px;
    font-size: .74rem;
  }

  .topbar {
    min-height: 54px;
    padding: .65rem 1.2rem;
  }

  #pageTitle {
    font-size: 1.18rem;
  }

  .topbar-actions {
    gap: .5rem;
  }

  .ghost-btn,
  .primary-btn,
  .stock-chip-btn,
  .small-btn,
  .danger-btn {
    min-height: 30px;
    border-radius: 8px;
    padding: 0 10px;
    font-size: .74rem;
  }

  .view {
    padding: .72rem;
  }

  .hero-panel {
    padding: 1rem;
  }

  .panel-head,
  .stock-card-head {
    gap: .75rem;
    margin-bottom: .75rem;
  }

  .panel-title {
    font-size: 1.16rem;
  }

  .muted,
  .panel-head p,
  .stock-card-head p {
    font-size: .74rem;
  }

  .stock-kpi-grid {
    gap: .65rem;
  }

  .stock-kpi {
    min-height: 82px;
    padding: .72rem;
    border-radius: .72rem;
  }

  .stock-kpi span,
  .stock-kpi small {
    font-size: .65rem;
  }

  .stock-kpi strong {
    font-size: 1.15rem;
  }

  .stock-card,
  .card,
  .loading-card,
  .empty-state {
    border-radius: .78rem;
  }

  .stock-card {
    padding: .9rem;
  }

  .stock-card h3,
  .stock-card-head h3 {
    font-size: .96rem;
  }

  .stock-actions {
    gap: .45rem;
  }

  .stock-actions select,
  .stock-actions input,
  .form-field input,
  .form-field select {
    min-height: 31px;
    border-width: 1px;
    border-radius: 8px;
    padding: 0 9px;
    font-size: .74rem;
  }

  .stock-table-wrap,
  .payments-calendar-wrap {
    border-radius: .75rem;
  }

  .stock-table th,
  .payments-table th,
  .stock-table td,
  .payments-table td {
    padding: 7px 8px;
    font-size: .74rem;
  }

  .data-quality-banner,
  .source-banner {
    padding: 7px 9px;
    gap: 7px;
    font-size: .7rem;
  }

  .weekly-card-list {
    gap: 10px;
  }

  .weekly-summary-card {
    border-radius: 10px;
  }

  .weekly-card-head {
    min-height: 66px;
    padding: 11px 13px;
  }

  .weekly-week-badge {
    min-width: 40px;
    min-height: 31px;
    border-radius: 7px;
    font-size: .78rem;
  }

  .weekly-card-title strong {
    font-size: .76rem;
  }

  .weekly-card-total strong {
    font-size: 1.18rem;
  }

  .weekly-card-total span,
  .weekly-card-total small {
    font-size: .64rem;
  }

  .weekly-days-grid {
    min-width: 720px;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
  }

  .weekly-day-cell {
    min-height: 94px;
    gap: 5px;
    padding: 9px 8px;
  }

  .weekly-day-cell > span,
  .weekly-day-cell > small {
    font-size: .61rem;
  }

  .weekly-day-cell > span small {
    font-size: .68rem;
  }

  .weekly-day-cell > strong {
    font-size: .84rem;
  }

  .weekly-bars,
  .payments-month-bars {
    min-height: 135px;
    gap: 6px;
  }

  .weekly-bar,
  .payments-month-bar {
    min-height: 124px;
    grid-template-rows: minmax(88px, 1fr) auto;
  }

  .payments-table .payment-month-badge,
  .payment-month-badge {
    padding: 4px 7px;
    border-radius: 6px;
    font-size: .7rem;
  }

  .payment-status-badge,
  .supplier-status,
  .fcf-badge {
    padding: 2px 7px;
    font-size: .62rem;
  }

  .fournisseurs-panel {
    padding: 14px;
  }

  .fcf-panel-header {
    margin-bottom: 14px;
    padding: 15px 20px;
    border-radius: 9px;
  }

  .fcf-panel-header h1 {
    font-size: 1.18rem;
  }

  .fcf-folder-bar {
    margin-bottom: 13px;
    padding: 7px 11px;
    border-radius: 7px;
    font-size: .72rem;
  }

  .fcf-btn-folder {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: .64rem;
  }

  .fcf-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }

  .fcf-stat-card {
    min-height: 74px;
    padding: 12px;
    border-radius: 9px;
  }

  .fcf-stat-label {
    margin-bottom: 5px;
    font-size: .58rem;
  }

  .fcf-stat-value {
    font-size: 1.08rem;
  }

  .fcf-suppliers-tiles-section,
  .fcf-table-section {
    margin-bottom: 14px;
    border-radius: 9px;
  }

  .fcf-suppliers-tiles-section,
  .fcf-table-section {
    padding: 14px;
  }

  .fcf-suppliers-tiles-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .fcf-suppliers-tiles-header h2,
  .fcf-table-section h2 {
    font-size: .86rem;
  }

  .fcf-btn {
    padding: 7px 12px;
    border-radius: 5px;
    font-size: .68rem;
  }

  .fcf-btn-sm {
    padding: 4px 9px;
    font-size: .63rem;
  }

  .fcf-suppliers-tiles-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
  }

  .fcf-supplier-tile {
    border-radius: 9px;
    padding: 10px;
  }

  .fcf-st-avatar {
    width: 38px;
    height: 38px;
    margin-bottom: 7px;
    font-size: .82rem;
  }

  .fcf-st-name {
    font-size: .66rem;
  }

  .fcf-st-badge,
  .fcf-st-badge-unpaid {
    top: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: .58rem;
  }

  .fcf-st-badge { right: 6px; }
  .fcf-st-badge-unpaid { left: 6px; }

  .fcf-orders-subtitle {
    margin-bottom: 7px;
  }

  .fcf-orders-subtitle h3 {
    font-size: .78rem;
  }

  .fcf-orders-count {
    min-width: 22px;
    padding: 2px 7px;
    font-size: .64rem;
  }

  .fcf-table-section thead th,
  .fcf-table-section tbody td {
    padding: 7px 8px;
    font-size: .72rem;
  }

  .fcf-supplier-avatar {
    width: 25px;
    height: 25px;
    font-size: .58rem;
  }

  .fcf-cell-supplier {
    gap: 7px;
  }

  .fcf-cell-detail {
    max-width: 210px;
  }

  .fcf-delete-btn {
    padding: 3px 7px;
    border-radius: 5px;
    font-size: .64rem;
  }

  .fcf-archive-wrap {
    margin-top: 10px;
    border-radius: 10px;
  }

  .fcf-archive-toggle {
    padding: 10px 12px;
    font-size: .78rem;
  }

  .fcf-modal {
    max-width: 500px;
  }

  .fcf-modal.fcf-modal-large {
    max-width: 820px;
  }

  /* La fenêtre « Détail commande » garde sa grande largeur : cette section compacte
     l'interface sur grand écran, mais ce contenu-là a besoin de place. */
  .fcf-modal.fcf-modal-xl {
    max-width: min(1460px, 96vw);
    max-height: 94vh;
  }

  .fcf-modal-header {
    padding: 13px 16px 10px;
  }

  .fcf-modal-xl .fcf-modal-header {
    padding: 18px 28px 16px;
  }

  .fcf-modal-body {
    padding: 14px 16px 16px;
  }

  .fcf-supplier-popup-avatar {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .fcf-supplier-popup-info h4 {
    font-size: .96rem;
  }

  .fcf-sps-card,
  .fcf-products-section,
  .fcf-detail-status-grid > div,
  .fcf-detail-box {
    padding: 10px;
  }

  .fcf-sps-value {
    font-size: 1.05rem;
  }

  .fcf-popup-order-item {
    padding: 8px 10px;
    gap: 8px;
  }

  .fcf-form-group input,
  .fcf-form-group select,
  .fcf-form-group textarea,
  .fcf-product-input-row input,
  .fcf-devise-select {
    min-height: 30px;
    height: 30px;
    padding: 6px 8px;
    font-size: .74rem;
  }
}

/* Final winning overrides: sidebar June 2026 */
body.pc-v3 {
  --sidebar-width: 242px;
  --sidebar-collapsed: 74px;
}

body.pc-v3 .sidebar {
  position: relative;
  padding: 16px 12px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(244,247,251,.985) 100%);
  border-right: 1px solid rgba(148, 163, 184, .16);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.72);
}

body.pc-v3 .brand {
  position: relative;
  gap: 12px;
  align-items: center;
  padding: 4px 6px 14px;
  margin-bottom: 10px;
}

body.pc-v3 .brand::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(15, 139, 125, .18), rgba(109, 93, 252, .08), transparent);
}

body.pc-v3 .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(135deg, #102033 0%, #17314b 100%);
  color: #f8fffd;
  font-size: .8rem;
  letter-spacing: .04em;
  box-shadow: 0 12px 24px rgba(16, 32, 51, .18);
}

body.pc-v3 .brand strong {
  font-size: 1.02rem;
  font-weight: 900;
  color: #162132;
}

body.pc-v3 .brand span {
  margin-top: 3px;
  font-size: .67rem;
  letter-spacing: .11em;
  color: #748397;
}

body.pc-v3 .sidebar-toggle {
  position: absolute;
  top: 18px;
  right: -14px;
  z-index: 5;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
}

body.pc-v3 .sidebar-toggle:hover {
  border-color: rgba(99, 102, 241, .24);
  background: #f8fbff;
  transform: translateY(-1px);
}

body.pc-v3 .sidebar-toggle-icon {
  width: 14px;
  height: 14px;
}

body.pc-v3 .sidebar-toggle-icon::before {
  top: 1px;
  bottom: 1px;
  left: 1px;
  width: 1.5px;
  border-radius: 999px;
  background: #223044;
  box-shadow: 4px 0 0 0 #223044;
}

body.pc-v3 .sidebar-toggle-icon::after {
  top: 4px;
  right: 1px;
  width: 5px;
  height: 5px;
  border-right: 2px solid #223044;
  border-bottom: 2px solid #223044;
  transform: rotate(-45deg);
}

body.pc-v3 .nav-list {
  gap: 8px;
}

body.pc-v3 .nav-item {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px 9px;
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(203, 213, 225, .72);
  background: linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(249,251,253,.985) 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

body.pc-v3 .nav-item:hover,
body.pc-v3 .nav-link-legacy:hover {
  border-color: rgba(148, 163, 184, .55);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
}

body.pc-v3 .nav-item.active {
  border-color: rgba(79, 70, 229, .16);
  background: linear-gradient(135deg, rgba(223,247,241,.95) 0%, rgba(238,244,255,.96) 100%);
  box-shadow: inset 3px 0 0 #0f8b7d, 0 14px 28px rgba(15, 23, 42, .08);
}

body.pc-v3 .nav-symbol,
body.pc-v3 .nav-item .nav-symbol {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fa 100%);
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .9);
  color: #17314b;
  font-size: .88rem;
  font-weight: 900;
}

body.pc-v3 .nav-item.active .nav-symbol {
  background: linear-gradient(180deg, #ffffff 0%, #e6f5f0 100%);
  color: #0f8b7d;
  box-shadow: inset 0 0 0 1px rgba(15, 139, 125, .18);
}

body.pc-v3 .nav-item > span:not(.nav-symbol) {
  align-self: end;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #142336;
}

body.pc-v3 .nav-item small {
  display: block;
  align-self: start;
  font-size: .66rem;
  line-height: 1.25;
  color: #718298;
}

body.pc-v3 .nav-link-legacy {
  margin-top: 10px;
  min-height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #18314d;
  border: 1px solid rgba(203, 213, 225, .8);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
}

body.pc-v3.sidebar-collapsed .sidebar {
  padding-inline: 8px;
}

body.pc-v3.sidebar-collapsed .brand {
  justify-content: center;
  padding-inline: 0;
  padding-top: 6px;
}

body.pc-v3.sidebar-collapsed .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: .66rem;
}

body.pc-v3.sidebar-collapsed .brand-copy,
body.pc-v3.sidebar-collapsed .nav-item small,
body.pc-v3.sidebar-collapsed .nav-link-legacy {
  display: none !important;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle {
  top: 16px;
  right: -14px;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::before {
  left: auto;
  right: 1px;
  box-shadow: -4px 0 0 0 #223044;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle-icon::after {
  left: 1px;
  right: auto;
  transform: rotate(135deg);
}

body.pc-v3.sidebar-collapsed .nav-item {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
  min-height: 58px;
  width: 56px;
  margin: 0 auto;
  padding: 8px 4px;
  border-radius: 14px;
}

body.pc-v3.sidebar-collapsed .nav-symbol,
body.pc-v3.sidebar-collapsed .nav-item .nav-symbol {
  margin: 0;
}

body.pc-v3.sidebar-collapsed .nav-item > span:not(.nav-symbol) {
  display: block !important;
  width: 100%;
  font-size: 0;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: #203247;
}

body.pc-v3.sidebar-collapsed .nav-item[data-short] > span:not(.nav-symbol)::before {
  content: attr(data-short);
  display: block;
  font-size: .5rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Final June 2026 compact shell + cleaner collapsed sidebar */
body.pc-v3 {
  font-size: 14px;
}

body.pc-v3 .app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

body.pc-v3 .main {
  margin-left: 0 !important;
  min-width: 0;
}

body.pc-v3 .topbar {
  min-height: 64px;
  padding: 14px 18px;
}

body.pc-v3 #pageTitle {
  font-size: 1.42rem;
}

body.pc-v3 .topbar-actions {
  gap: 8px;
}

body.pc-v3 .view {
  padding: 14px 16px 22px;
}

body.pc-v3 .panel-title,
body.pc-v3 .hero-panel h2,
body.pc-v3 .stock-card h3 {
  font-size: 1.1rem;
}

body.pc-v3 .stock-kpi-grid,
body.pc-v3 .summary-grid {
  gap: 12px;
}

body.pc-v3 .stock-kpi {
  min-height: 92px;
  padding: 12px 14px;
}

body.pc-v3 .stock-kpi span,
body.pc-v3 .stock-kpi small {
  font-size: .72rem;
}

body.pc-v3 .stock-kpi strong {
  font-size: clamp(1.24rem, 1.75vw, 2rem);
  line-height: 1;
}

body.pc-v3 .live-orders-card,
body.pc-v3 .stock-table-wrap,
body.pc-v3 .hero-panel,
body.pc-v3 .stock-card {
  border-radius: 20px;
}

body.pc-v3 .live-order-row td,
body.pc-v3 .stock-table td,
body.pc-v3 .stock-table th {
  padding-top: 10px;
  padding-bottom: 10px;
}

body.pc-v3 .sidebar {
  padding: 14px 10px 16px;
}

body.pc-v3 .brand {
  min-height: 58px;
  padding-right: 14px;
}

body.pc-v3 .sidebar-toggle {
  top: 14px;
  right: -11px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .10);
}

body.pc-v3 .sidebar-toggle-icon {
  width: 12px;
  height: 12px;
}

body.pc-v3 .sidebar-toggle-icon::before {
  left: 1px;
  width: 1.5px;
  box-shadow: 3.5px 0 0 0 #223044;
}

body.pc-v3 .sidebar-toggle-icon::after {
  width: 4px;
  height: 4px;
}

body.pc-v3 .nav-list {
  gap: 6px;
}

body.pc-v3 .nav-item {
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 50px;
  padding: 8px 9px;
  border-radius: 12px;
}

body.pc-v3 .nav-symbol,
body.pc-v3 .nav-item .nav-symbol {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: .76rem;
}

body.pc-v3 .nav-item > span:not(.nav-symbol) {
  font-size: .82rem;
}

body.pc-v3 .nav-item small {
  font-size: .62rem;
}

body.pc-v3.sidebar-collapsed .sidebar {
  padding-inline: 7px;
}

body.pc-v3.sidebar-collapsed .main {
  margin-left: 0 !important;
}

body.pc-v3.sidebar-collapsed .brand {
  min-height: 44px;
  padding-top: 2px;
}

body.pc-v3.sidebar-collapsed .sidebar-toggle {
  top: 10px;
  right: -11px;
}

body.pc-v3.sidebar-collapsed .nav-item {
  width: 48px;
  min-height: 48px;
  padding: 6px 3px;
  gap: 3px;
  border-radius: 12px;
}

body.pc-v3.sidebar-collapsed .nav-symbol,
body.pc-v3.sidebar-collapsed .nav-item .nav-symbol {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: .72rem;
}

body.pc-v3.sidebar-collapsed .nav-item > span:not(.nav-symbol) {
  width: 100%;
}

body.pc-v3.sidebar-collapsed .nav-item[data-short] > span:not(.nav-symbol)::before {
  font-size: .54rem;
  line-height: 1;
  white-space: nowrap;
}

/* PC V3 layout rescue: keep this block last.
   It neutralizes older fixed-sidebar/margin-left rules that can hide the main
   dashboard after cache or viewport changes. */
body.pc-v3 {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body.pc-v3 .app-shell {
  display: grid !important;
  grid-template-columns: var(--sidebar-width, 220px) minmax(0, 1fr) !important;
  /* 100% (et pas 100vw): avec le zoom global, 100vw laisse une bande vide a droite. */
  width: 100% !important;
  min-width: 0 !important;
  min-height: calc(100vh / var(--pc-zoom, 1)) !important;
  background: #f3f7fb !important;
}

body.pc-v3.sidebar-collapsed .app-shell {
  grid-template-columns: var(--sidebar-collapsed-width, 72px) minmax(0, 1fr) !important;
}

body.pc-v3 .sidebar {
  grid-column: 1 !important;
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: calc(100vh / var(--pc-zoom, 1)) !important;
  transform: none !important;
}

body.pc-v3 .main {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: calc(100vh / var(--pc-zoom, 1)) !important;
  margin: 0 !important;
  padding: 18px 20px 28px !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  background: #f3f7fb !important;
}

body.pc-v3 .topbar {
  display: flex !important;
  position: relative !important;
  top: auto !important;
  z-index: 5 !important;
  min-height: 54px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  color: #122033 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.pc-v3 .topbar::before {
  display: none !important;
}

body.pc-v3 .topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.pc-v3 #setupButton,
body.pc-v3 #loginButton {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.pc-v3 .view {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 240px !important;
  padding: 0 !important;
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

body.pc-v3 .loading-card {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   2026-06-09 Nav refonte: onglets compacts + lisere couleur/menu
   + neutralisation du pliage. Garder ce bloc en DERNIER.
   ============================================================ */
body.pc-v3 .nav-list { gap: 4px; }
body.pc-v3 .nav-item {
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 0;
  padding: 6px 9px;
  border-radius: 9px;
  gap: 2px 9px;
  column-gap: 9px;
  border-left: 3px solid var(--nav-color, #0f8b7d);
}
body.pc-v3 .nav-link-legacy {
  border-left: 3px solid var(--nav-color, #94a3b8);
  margin-top: 8px;
  min-height: 0;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: .78rem;
}
body.pc-v3 .nav-symbol,
body.pc-v3 .nav-item .nav-symbol {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: .72rem;
  color: var(--nav-color, #0f8b7d);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-color, #0f8b7d) 30%, #cbd5e1);
}
body.pc-v3 .nav-item > span:not(.nav-symbol) {
  align-self: center;
  font-size: .8rem;
  line-height: 1.1;
}
body.pc-v3 .nav-item small {
  align-self: center;
  font-size: .6rem;
  line-height: 1.15;
}
body.pc-v3 .nav-item:hover {
  background: color-mix(in srgb, var(--nav-color, #0f8b7d) 8%, #ffffff);
  border-left-color: var(--nav-color, #0f8b7d);
}
body.pc-v3 .nav-item.active {
  background: color-mix(in srgb, var(--nav-color, #0f8b7d) 12%, #ffffff);
  border-color: transparent;
  border-left-color: var(--nav-color, #0f8b7d);
  color: color-mix(in srgb, var(--nav-color, #0f8b7d) 72%, #0b1220);
  box-shadow: inset 4px 0 0 var(--nav-color, #0f8b7d), 0 8px 20px rgba(15, 23, 42, .07);
}
body.pc-v3 .nav-item.active > span:not(.nav-symbol) {
  color: color-mix(in srgb, var(--nav-color, #0f8b7d) 78%, #0b1220);
}
body.pc-v3 .nav-item.active .nav-symbol {
  color: #fff;
  background: var(--nav-color, #0f8b7d);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-color, #0f8b7d) 60%, #000000);
}
/* Repli du menu (PC): largeur reduite, libelles masques, icones seules.
   Regroupe ici pour primer sur les anciennes regles dispersees. */
body.pc-v3.sidebar-collapsed .app-shell {
  grid-template-columns: 92px minmax(0, 1fr) !important;
}
body.pc-v3.sidebar-collapsed .brand-copy,
body.pc-v3.sidebar-collapsed .nav-item small,
body.pc-v3.sidebar-collapsed .nav-item > span:not(.nav-symbol),
body.pc-v3.sidebar-collapsed .nav-section-title,
body.pc-v3.sidebar-collapsed .nav-link-legacy { display: none !important; }
body.pc-v3.sidebar-collapsed .nav-item {
  width: 64px !important;
  min-height: 50px !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  margin: 0 auto !important;
  padding: 9px 4px !important;
  text-align: center !important;
}
body.pc-v3.sidebar-collapsed .nav-item[data-short] > span:not(.nav-symbol)::before { content: none !important; }

/* ===== 2026-06-09 Nav groupe par sections + icones emoji ===== */
body.pc-v3 .nav-section-title {
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 11px 9px 3px;
}
body.pc-v3 .nav-list > .nav-section-title:first-child { padding-top: 2px; }
body.pc-v3 .nav-symbol,
body.pc-v3 .nav-item .nav-symbol {
  font-size: .98rem;
  font-style: normal;
  background: color-mix(in srgb, var(--nav-color, #0f8b7d) 9%, #ffffff);
}
body.pc-v3 .nav-link-legacy {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  text-decoration: none;
}
body.pc-v3 .nav-link-legacy .nav-symbol {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* =============================================================================
 * Calendrier des charges (route 'charges') — a coller en FIN de
 * /tmp/render-fix/public/pc/css/base.css
 * Tout est prefixe .charges-* (aucune collision). Reutilise .hero-panel,
 * .card, .panel-head, .panel-title, .muted, .empty-state, .modal-*, .form-field,
 * .ghost-btn, .primary-btn, .small-btn, .danger-btn deja presents.
 * ===========================================================================*/
.charges-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.charges-monthnav {
  display: flex;
  gap: 8px;
  align-items: center;
}
.charges-monthnav .small-btn {
  min-width: 38px;
}

/* KPIs */
.charges-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.charges-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
  overflow: hidden;
}
.charges-kpi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--kpi, #2563eb);
}
.charges-kpi-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}
.charges-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}
.charges-kpi-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(148, 163, 184, .25);
  overflow: hidden;
}
.charges-kpi-bar > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--kpi, #16a34a);
  transition: width .3s ease;
}

/* Cards */
.charges-card {
  margin-top: 18px;
}
.charges-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.charges-card-head h3 {
  margin: 0;
  font-size: 16px;
}
.charges-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #475569;
}
.charges-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.charges-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Timeline 7 jours */
.charges-timeline {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.charges-tl-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, .2);
  text-align: center;
}
.charges-tl-day.is-today {
  border-color: #2563eb;
  background: #eef4ff;
}
.charges-tl-day.is-empty {
  opacity: .55;
}
.charges-tl-dow {
  font-size: 11px;
  text-transform: uppercase;
  color: #94a3b8;
}
.charges-tl-num {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.charges-tl-amount {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

/* Layout 2 colonnes calendrier + liste */
.charges-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
@media (max-width: 980px) {
  .charges-grid {
    grid-template-columns: 1fr;
  }
}

/* Grille calendrier */
.charges-cal-weekdays,
.charges-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.charges-cal-weekday {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #94a3b8;
  padding-bottom: 6px;
}
.charges-cal-day {
  min-height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: #fff;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
  transition: border-color .15s ease, transform .1s ease;
}
.charges-cal-day.has-charges {
  cursor: pointer;
}
.charges-cal-day.has-charges:hover {
  border-color: #2563eb;
  transform: translateY(-1px);
}
.charges-cal-day.is-other {
  background: transparent;
  border-color: transparent;
}
.charges-cal-day.is-weekend {
  background: #f8fafc;
}
.charges-cal-day.is-today {
  border-color: #d97706;
  box-shadow: inset 0 0 0 1px #d97706;
}
.charges-cal-num {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.charges-cal-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.charges-cal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.charges-cal-more {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}

/* Liste des charges */
.charges-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.charges-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: #fff;
}
.charges-row.is-paid {
  opacity: .68;
}
.charges-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}
.charges-row-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.charges-row-info strong {
  font-size: 14px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.charges-row-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  color: var(--st, #475569);
  background: color-mix(in srgb, var(--st, #475569) 14%, transparent);
  white-space: nowrap;
}
.charges-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.charges-row-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.charges-row-actions .small-btn {
  min-width: 32px;
  padding: 6px 8px;
}

/* Toutes les charges + synthese */
.charges-all {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.charges-all-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: #fff;
}
.charges-summary-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, .25);
}
.charges-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.charges-summary-cell strong {
  font-size: 18px;
  color: #0f172a;
}
@media (max-width: 640px) {
  .charges-summary-bar {
    grid-template-columns: 1fr;
  }
}

/* Grille de categories (modale) */
.charges-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.charges-cat-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1.5px solid rgba(148, 163, 184, .3);
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.charges-cat-option:hover {
  border-color: var(--cat, #2563eb);
}
.charges-cat-option.is-selected {
  border-color: var(--cat, #2563eb);
  background: var(--cat-soft, #eef4ff);
}
.charges-cat-emoji {
  font-size: 20px;
}
.charges-cat-name {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-align: center;
  line-height: 1.2;
}
/* Bouton "Marquer regle" dans le popup jour du calendrier des charges */
.charges-daypay-btn { white-space: nowrap; flex-shrink: 0; }

/* ===== Loupe / zoom de l'affichage (topbar) ===== */
.zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
}
.zoom-control .zoom-icon { font-size: .8rem; opacity: .65; }
.zoom-control .zoom-btn {
  width: 24px; height: 24px;
  border: 0; border-radius: 6px;
  background: #f1f5f9; color: #0f172a;
  font-size: 1.05rem; line-height: 1;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.zoom-control .zoom-btn:hover:not(:disabled) { background: #e2e8f0; }
.zoom-control .zoom-btn:disabled { opacity: .4; cursor: default; }
.zoom-control .zoom-level {
  min-width: 40px; text-align: center;
  font-weight: 700; font-size: .78rem;
  font-variant-numeric: tabular-nums; color: #334155;
}
/* Bouton payer/annuler labellise dans la liste des charges */
.charges-pay-btn { white-space: nowrap; }

/* ===== Fix lisibilite topbar pc-v3 (fond clair) : plus de blanc sur blanc ===== */
body.pc-v3 .topbar { color: #0f172a; }
body.pc-v3 #pageTitle { color: #0f172a; }
body.pc-v3 .eyebrow { color: #64748b; }
body.pc-v3 .topbar-actions .ghost-btn {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
body.pc-v3 .topbar-actions .ghost-btn:hover { background: #f1f5f9; }

/* Bouton menu flottant (visible uniquement sur petit ecran) */
body.pc-v3 .pc-menu-btn {
  display: none;
  position: fixed;
  top: .7rem;
  left: .7rem;
  z-index: 1001;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .14);
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #0f172a;
  cursor: pointer;
}

/* ============================================================
   2026-06-09 Responsive pc-v3 sur telephone (<= 820px)
   Le dashboard PC reste utilisable depuis un mobile.
   ============================================================ */
@media (max-width: 820px) {
  /* Repli type Dashboard V63: la sidebar coulisse hors ecran,
     un bouton ☰ flottant l'ouvre/ferme. */
  body.pc-v3 .app-shell {
    display: block !important;
  }
  body.pc-v3 .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 248px !important;
    height: auto !important;
    transform: translateX(-100%) !important;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
    z-index: 1000 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-right: 1px solid rgba(99, 102, 241, .12) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, .14) !important;
    overflow-y: auto !important;
    padding: 14px 10px !important;
  }
  body.pc-v3 .sidebar.open { transform: translateX(0) !important; }
  body.pc-v3 .pc-menu-btn { display: flex !important; }
  /* Topbar compacte qui peut passer a la ligne (decalee pour le bouton ☰) */
  body.pc-v3 .topbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px 12px 10px 60px !important;
  }
  body.pc-v3 #pageTitle { font-size: 1.15rem !important; }
  body.pc-v3 .topbar-actions { flex-wrap: wrap; gap: 6px; }
  body.pc-v3 .view { padding: 10px !important; }
  /* Hero control tower empilable */
  body.pc-v3 .control-tower-hero { flex-direction: column !important; }
  /* Tableaux: defilement horizontal au lieu de deborder */
  body.pc-v3 .stock-table-wrap,
  body.pc-v3 .table-shell,
  body.pc-v3 .live-orders-card,
  body.pc-v3 .stock-product-price-history { overflow-x: auto !important; }
  body.pc-v3 .stock-table, body.pc-v3 .live-orders-table, body.pc-v3 table { min-width: 540px; }
  /* Grilles KPI: 1-2 colonnes max */
  body.pc-v3 .stock-kpi-grid,
  body.pc-v3 .summary-grid,
  body.pc-v3 .charges-kpi-grid,
  body.pc-v3 .grid-kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
  /* Modales en quasi plein ecran */
  body.pc-v3 .modal { max-width: 96vw !important; width: 96vw !important; margin: 2vh auto !important; }
  /* Calendrier des charges: 1 colonne */
  body.pc-v3 .cc-main-grid, body.pc-v3 .charges-main-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   2026-06-13 Icones plates noires + repli du menu de gauche (PC)
   ============================================================ */
/* Icones SVG a plat (traits noirs, fond neutre, pas d'emoji couleur) */
body.pc-v3 .nav-symbol svg {
  width: 21px;
  height: 21px;
  display: block;
  stroke: currentColor;
  fill: none;
}
body.pc-v3 .nav-symbol {
  display: grid !important;
  place-items: center !important;
  color: #1f2733 !important;
  background: #f3f5f8 !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .35) !important;
}
/* Icone active: prend la couleur du liseré du menu */
body.pc-v3 .nav-item.active .nav-symbol {
  color: var(--nav-color, #0f8b7d) !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-color, #0f8b7d) 35%, #e2e8f0) !important;
}

/* En mode replie: pas de titres de section, icones seules bien centrees */
body.pc-v3.sidebar-collapsed .nav-section-title { display: none !important; }
body.pc-v3.sidebar-collapsed .nav-symbol svg { width: 22px; height: 22px; }

/* Le bouton de repli reste masque sur telephone (le menu y coulisse deja).
   Et le repli PC ne doit pas reduire le tiroir mobile : on retablit tout. */
@media (max-width: 820px) {
  body.pc-v3 .sidebar-toggle { display: none !important; }
  body.pc-v3.sidebar-collapsed .nav-item {
    width: auto !important;
    min-height: 0 !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    place-items: stretch !important;
    margin: 0 !important;
    text-align: left !important;
  }
  body.pc-v3.sidebar-collapsed .nav-item > span:not(.nav-symbol),
  body.pc-v3.sidebar-collapsed .nav-item small,
  body.pc-v3.sidebar-collapsed .nav-section-title,
  body.pc-v3.sidebar-collapsed .brand-copy { display: block !important; }
}

/* ============================================================
   2026-06-13 (b) Bouton de repli replace EN BAS sous Configuration,
   plus haut et plus lisible (remplace l'ancien petit rond flottant).
   ============================================================ */
/* Le menu devient une colonne flex pour pousser le bouton tout en bas */
body.pc-v3 .sidebar {
  display: flex !important;
  flex-direction: column !important;
}
body.pc-v3 .nav-list { flex: 0 0 auto !important; }

body.pc-v3 .sidebar-toggle {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: auto !important;
  height: 40px !important;
  margin: 12px 4px 2px !important;
  padding: 0 12px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  border: 1px solid rgba(148, 163, 184, .45) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06) !important;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
body.pc-v3 .sidebar-toggle:hover {
  background: #f1f5f9 !important;
  border-color: rgba(100, 116, 139, .6) !important;
}
body.pc-v3 .sidebar-toggle-chevron {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  transition: transform .2s ease;
}
body.pc-v3 .sidebar-toggle-label { display: inline; }

/* Neutralise l'ancien chevron en pseudo-elements (plus utilise) */
body.pc-v3 .sidebar-toggle-icon { display: none !important; }

/* En mode replie: bouton compact carre, libelle masque, chevron inverse */
body.pc-v3.sidebar-collapsed .sidebar-toggle {
  width: 44px !important;
  margin: 12px auto 2px !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.pc-v3.sidebar-collapsed .sidebar-toggle-label { display: none !important; }
body.pc-v3.sidebar-collapsed .sidebar-toggle-chevron { transform: rotate(180deg) !important; }

/* Sur telephone le bouton de repli reste masque (tiroir coulissant) */
@media (max-width: 820px) {
  body.pc-v3 .sidebar-toggle { display: none !important; }
}

/* ============================================================
   2026-06-13 (c) Mode replie: l'item actif ne doit pas etre decale
   par le lisere de gauche (il masquait l'icone dans le couloir etroit).
   Couloir elargi + indicateur d'activation centre (fond + contour),
   l'icone coloree marque deja l'onglet actif.
   ============================================================ */
body.pc-v3.sidebar-collapsed .nav-item.active {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06) !important;
  border: 1px solid color-mix(in srgb, var(--nav-color, #0f8b7d) 42%, #e2e8f0) !important;
  background: color-mix(in srgb, var(--nav-color, #0f8b7d) 12%, #ffffff) !important;
}

/* ============================================================
   2026-06-13 (d) Stock machine — vue par machine (tuiles + ecoulement)
   ============================================================ */
.smv-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.smv-head h3 { margin:0 0 2px; }
.smv-back { margin-bottom:8px; }

/* Produit VENDU sans qu'aucun lot d'achat ne lui corresponde : il n'a pas de stock a
   proprement parler, c'est une SAISIE D'ACHAT QUI MANQUE. Etiquette lisible sans jargon. */
.stock-badge-noachat { display:inline-block; margin-top:4px; padding:2px 8px; border-radius:999px;
  background:#fef3c7; color:#92400e; border:1px solid #fcd34d; font-size:.68rem; font-weight:800; line-height:1.5; }

/* Bandeau ecart stock machine vs comptable */
.smv-ecart-strip { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.smv-ecart-strip span { display:flex; flex-direction:column; gap:2px; padding:10px 16px; background:#f8fafc; border:1px solid rgba(148,163,184,.3); border-radius:12px; min-width:120px; }
.smv-ecart-strip small { font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; }
.smv-ecart-strip b { font-size:1.25rem; font-weight:800; color:#0f172a; }
.smv-ecart-strip .smv-ecart-diff b { color:#be123c; }
/* Machines qui n'ont pas repondu : l'ecart affiche au-dessus est INCOMPLET, on le dit
   juste a cote du chiffre (l'erreur seule sur la carte de la machine passait inapercue). */
.smv-ecart-note { margin:-10px 0 16px; font-size:.82rem; font-weight:700; color:#b45309; }

/* Grille des machines */
.smv-machine-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
.smv-machine-card { display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid rgba(148,163,184,.3); border-radius:16px; background:#fff; box-shadow:0 8px 20px rgba(15,23,42,.05); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.smv-machine-card:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(15,23,42,.10); border-color:rgba(99,102,241,.4); }
.smv-machine-card:focus-visible { outline:2px solid #6366f1; outline-offset:2px; }
.smv-machine-card header { display:flex; align-items:center; gap:8px; }
.smv-machine-card header strong { font-size:.96rem; }
.smv-dot { width:9px; height:9px; border-radius:999px; background:#22c55e; flex:0 0 auto; box-shadow:0 0 0 3px rgba(34,197,94,.15); }
.smv-machine-card.offline .smv-dot { background:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.15); }
.smv-machine-card.offline { opacity:.92; }
.smv-card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.smv-card-stats span { display:flex; flex-direction:column; gap:1px; }
.smv-card-stats b { font-size:1.02rem; font-weight:800; color:#0f172a; }
.smv-card-stats small { font-size:.6rem; color:#64748b; text-transform:uppercase; letter-spacing:.03em; }
.smv-card-error { font-size:.78rem; color:#be123c; margin:0; }
.smv-open-hint { font-size:.74rem; color:#6366f1; font-weight:700; }

/* KPIs detail machine */
.smv-detail-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-bottom:14px; }
.smv-kpi { display:flex; flex-direction:column; gap:3px; padding:14px 16px; background:#f8fafc; border:1px solid rgba(148,163,184,.28); border-radius:14px; }
.smv-kpi small { font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; }
.smv-kpi b { font-size:1.3rem; font-weight:800; color:#0f172a; }
.smv-kpi em { font-size:.66rem; color:#94a3b8; font-style:normal; }
.smv-kpi-top ul { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.smv-kpi-top li { display:flex; justify-content:space-between; gap:8px; font-size:.78rem; font-weight:600; color:#1f2733; }
.smv-kpi-top li span { color:#6366f1; font-weight:800; }

/* Legende couleur ecoulement */
.smv-legend { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; font-size:.74rem; font-weight:600; }
.smv-legend .smv-flow-fast { color:#15803d; }
.smv-legend .smv-flow-mid { color:#b45309; }
.smv-legend .smv-flow-slow { color:#be123c; }
.smv-legend .smv-flow-none { color:#94a3b8; }

/* Grille produits dans une machine */
.smv-product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; }
.smv-product { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid rgba(148,163,184,.3); border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(15,23,42,.04); border-left-width:4px; }
.smv-product-top { display:flex; align-items:center; justify-content:space-between; }
.smv-price { font-weight:800; color:#0f172a; font-size:.92rem; }
.smv-flow { font-weight:800; font-size:.82rem; padding:2px 8px; border-radius:999px; }
.smv-product.smv-flow-fast { border-left-color:#22c55e; }
.smv-product.smv-flow-fast .smv-flow { background:#dcfce7; color:#15803d; }
.smv-product.smv-flow-mid { border-left-color:#f59e0b; }
.smv-product.smv-flow-mid .smv-flow { background:#fef3c7; color:#b45309; }
.smv-product.smv-flow-slow { border-left-color:#ef4444; }
.smv-product.smv-flow-slow .smv-flow { background:#fee2e2; color:#be123c; }
.smv-product.smv-flow-none { border-left-color:#cbd5e1; }
.smv-product.smv-flow-none .smv-flow { background:#f1f5f9; color:#94a3b8; }
.smv-product h4 { margin:0; font-size:.84rem; line-height:1.25; color:#142336; }
.smv-thumb { position:relative; width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#f1f5f9; display:grid; place-items:center; }
.smv-thumb-ph { font-size:1.6rem; opacity:.5; }
.smv-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.smv-product-meta { display:flex; flex-direction:column; gap:2px; margin-top:auto; }
.smv-qty b { font-size:1.05rem; color:#0f172a; }
.smv-sold { font-size:.7rem; color:#64748b; }

@media (max-width: 820px) {
  .smv-product-grid { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
  .smv-machine-grid { grid-template-columns:1fr; }
}

/* Statut en ligne sur les tuiles machine */
.smv-machine-card header { flex-wrap: wrap; }
.smv-status { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; margin-left: auto; }
.smv-status.on { background: #dcfce7; color: #15803d; }
.smv-status.off { background: #f1f5f9; color: #94a3b8; }

/* Repartition stock machine / reserve dans les fiches Stock */
.stock-split { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.stock-split-chip { font-size: .72rem; font-weight: 600; color: #334155; background: #f8fafc; border: 1px solid rgba(148,163,184,.3); border-radius: 999px; padding: 3px 10px; }
.stock-split-chip b { font-weight: 800; color: #0f172a; }
.stock-split-machine { background: #eef6ff; border-color: rgba(37,99,235,.25); }
.stock-split-reserve { background: #f5f3ff; border-color: rgba(147,51,234,.22); }
.stock-split-warn .stock-split-reserve { background: #fee2e2; border-color: rgba(190,18,60,.3); color: #be123c; }

/* Ventes masquées (tests) dans le tableau Live */
body.pc-v3 .live-order-row.order-hidden { opacity: .5; }
body.pc-v3 .live-order-row.order-hidden td:first-child strong::after { content: ' (masquée)'; color: #94a3b8; font-weight: 600; font-size: .85em; }
.order-detail-actions { display: flex; align-items: center; gap: 8px; }

/* === Assistant IA (onglet chat) === */
.ai-panel { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin: 0 auto; height: min(74vh, 720px); min-height: 420px; }
.ai-head h2 { margin: 0 0 4px; }
.ai-stats { font-size: .85rem; margin-top: 4px; }
.ai-messages { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; }
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px; line-height: 1.45; font-size: .95rem; word-break: break-word; }
.ai-msg-user .ai-msg-bubble { background: #0ea5e9; color: #fff; border-bottom-right-radius: 4px; }
.ai-msg-assistant .ai-msg-bubble { background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ai-typing { color: var(--muted); letter-spacing: 2px; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .82rem; cursor: pointer; color: var(--ink); }
.ai-chip:hover { background: #e0f2fe; border-color: #7dd3fc; }
.ai-inputbar { display: flex; gap: 8px; align-items: flex-end; }
.ai-inputbar textarea { flex: 1 1 auto; resize: none; border: 1px solid #cbd5e1; border-radius: 12px; padding: 10px 14px; font: inherit; line-height: 1.4; max-height: 140px; min-height: 44px; }
.ai-inputbar .primary-btn { flex: 0 0 auto; height: 44px; }

/* === Assistant IA : layout split type Claude (chat à gauche, artefact à droite) === */
.ai-split { max-width: none; width: 100%; height: min(82vh, 860px); flex-direction: row; align-items: stretch; gap: 16px; }
.ai-left { flex: 1 1 40%; min-width: 300px; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.ai-left .ai-messages { flex: 1 1 auto; }
.ai-right { flex: 1 1 60%; min-width: 300px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ai-artifact { flex: 1 1 auto; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.ai-artifact-empty { margin: auto; padding: 24px; color: var(--muted); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .95rem; }
.ai-artifact-emoji { font-size: 2.4rem; opacity: .55; }
.ai-artifact-bar { flex: 0 0 auto; padding: 12px 16px; font-weight: 600; font-size: .98rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.ai-artifact-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
@media (max-width: 980px) {
  .ai-split { flex-direction: column; height: auto; }
  .ai-left .ai-messages { min-height: 320px; }
  .ai-right { min-height: 360px; }
}

/* === IA : compteur de crédits + barre artefact avec bouton PDF === */
.ai-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ai-head-main { min-width: 0; }
.ai-credit { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.ai-credit:empty { display: none; }
.ai-credit-bar { width: 110px; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.ai-credit-bar i { display: block; height: 100%; background: linear-gradient(90deg, #16a34a, #0ea5e9); border-radius: 999px; transition: width .3s; }
.ai-credit-txt { font-variant-numeric: tabular-nums; }
.ai-credit-over .ai-credit-bar i { background: #dc2626; }
.ai-credit-over .ai-credit-txt { color: #dc2626; font-weight: 600; }
.ai-artifact-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-artifact-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-artifact-dl { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 10px; font-size: .82rem; cursor: pointer; color: var(--ink); }
.ai-artifact-dl:hover { background: #f1f5f9; }

/* === IA : interrupteur Simple / Complexe === */
.ai-mode-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-mode-switch { display: inline-flex; background: #f1f5f9; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.ai-mode-seg { border: 0; background: transparent; border-radius: 999px; padding: 5px 12px; font-size: .82rem; cursor: pointer; color: var(--muted); white-space: nowrap; }
.ai-mode-seg.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ai-mode-switch[data-mode="complexe"] .ai-mode-seg[data-mode="complexe"].active { color: #9333ea; }
.ai-mode-hint { font-size: .78rem; color: var(--muted); }

/* === Calendrier des charges : popup du jour (layout 2 lignes + HT/TTC) === */
.cday-item { border: 1px solid rgba(148, 163, 184, .22); border-radius: 12px; background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cday-item.is-paid { opacity: .68; }
.cday-top { display: flex; align-items: center; gap: 12px; }
.cday-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cday-info strong { font-size: 14px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; }
.cday-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 48px; flex-wrap: wrap; }
.cday-amounts { display: flex; flex-direction: column; line-height: 1.2; }
.cday-ttc { font-size: 15px; font-weight: 800; color: #0f172a; }
.cday-ttc em { font-style: normal; font-size: 11px; font-weight: 700; color: #16a34a; margin-left: 2px; }
.cday-ht { font-size: 12px; color: #64748b; }
.cday-bottom .small-btn { flex: 0 0 auto; white-space: nowrap; }

/* =====================================================================
   Sidebar — style « DashCode » clair (refonte 2026-06-30)
   Markup inchangé : on restyle .nav-item (icône colorée + libellé, item
   actif en pastille teintée). Chaque item garde sa couleur via --nav-color.
   ===================================================================== */
body.pc-v3 .sidebar { background: #ffffff; border-right: 1px solid #eef2f7; box-shadow: none; }
body.pc-v3 .brand { border: 0; }
body.pc-v3 .brand::after { display: none; }
body.pc-v3 .nav-list { gap: 1px; }
body.pc-v3 .nav-section-title {
  font-size: .65rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #94a3b8; margin: 8px 12px 2px; padding: 0;
}
body.pc-v3 .nav-item {
  min-height: 0; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 5px 11px; border: 0; border-radius: 10px; background: transparent; box-shadow: none;
  transition: background .12s ease;
}
body.pc-v3 .nav-item:hover { border: 0; box-shadow: none; background: color-mix(in srgb, var(--nav-color, #7c3aed) 9%, #fff); }
body.pc-v3 .nav-item.active { border: 0; box-shadow: none; background: color-mix(in srgb, var(--nav-color, #7c3aed) 14%, #fff); }
body.pc-v3 .nav-item small { display: none; } /* épuré façon DashCode : icône + libellé seulement */
body.pc-v3 .nav-symbol,
body.pc-v3 .nav-item .nav-symbol {
  grid-row: auto; width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in srgb, var(--nav-color, #7c3aed) 15%, #fff);
  color: var(--nav-color, #7c3aed); box-shadow: none;
}
body.pc-v3 .nav-item.active .nav-symbol {
  background: var(--nav-color, #7c3aed); color: #fff;
  box-shadow: 0 4px 11px color-mix(in srgb, var(--nav-color, #7c3aed) 42%, transparent);
}
body.pc-v3 .nav-item > span:not(.nav-symbol) {
  align-self: center; font-size: .9rem; font-weight: 700; letter-spacing: -.01em; color: #334155;
}
body.pc-v3 .nav-item.active > span:not(.nav-symbol) { color: var(--nav-color, #7c3aed); font-weight: 800; }
/* Replié : on recentre l'icône colorée */
body.pc-v3.sidebar-collapsed .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 9px 6px; }

/* =====================================================================
   HEBDO — refonte look (cartes dégradées + graphes colorés, clair)
   ===================================================================== */
body.pc-v3 .hebdo-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; }
body.pc-v3 .hebdo-kpi-grid .stock-kpi {
  position: relative; border: 0; border-radius: 18px; padding: 16px 18px 15px; color: #fff;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden; box-shadow: 0 8px 22px rgba(15,23,42,.15); background: #7c3aed;
}
body.pc-v3 .hebdo-kpi-grid .stock-kpi span { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; opacity: .95; padding-right: 46px; }
body.pc-v3 .hebdo-kpi-grid .stock-kpi strong { font-size: 1.7rem; font-weight: 900; color: #fff !important; opacity: 1; line-height: 1.05; letter-spacing: -.5px; }
body.pc-v3 .hebdo-kpi-grid .stock-kpi small { font-size: .71rem; color: #fff; opacity: .85; line-height: 1.3; }
body.pc-v3 .hebdo-kpi-grid .stock-kpi::before {
  content: ''; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px;
  background-color: rgba(255,255,255,.2); background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(1) { background: linear-gradient(135deg,#34d399,#059669); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E"); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(2) { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4-2v-4z'/%3E%3C/svg%3E"); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(3) { background: linear-gradient(135deg,#2dd4bf,#0d9488); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M17 8h4v4'/%3E%3C/svg%3E"); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(4) { background: linear-gradient(135deg,#818cf8,#4f46e5); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Crect x='7' y='11' width='3' height='7'/%3E%3Crect x='12' y='7' width='3' height='11'/%3E%3Crect x='17' y='13' width='3' height='5'/%3E%3C/svg%3E"); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(5) { background: linear-gradient(135deg,#fbbf24,#ea580c); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M6 4h12v4a6 6 0 0 1-12 0z'/%3E%3Cpath d='M6 6H3v2a3 3 0 0 0 3 3M18 6h3v2a3 3 0 0 1-3 3'/%3E%3C/svg%3E"); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(6) { background: linear-gradient(135deg,#fb7185,#e11d48); }
body.pc-v3 .hebdo-kpi-grid .stock-kpi:nth-child(6)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }

/* Graphe de tendance */
body.pc-v3 .weekly-trend-card { border-radius: 18px; }
body.pc-v3 .weekly-bars { background: linear-gradient(180deg,#faf8ff,#f4f7fd); border: 1px solid #f0eefb; border-radius: 14px; padding: 14px 12px 8px; }
/* Couleur de la jauge = graduelle selon le CA (couleur posée en inline par JS) */
body.pc-v3 .weekly-bar > span { border-radius: 7px 7px 3px 3px; box-shadow: 0 2px 6px rgba(15,23,42,.12); }

/* Cartes semaine */
body.pc-v3 .weekly-summary-card { border: 1px solid #eef2f7; border-radius: 18px; box-shadow: 0 4px 16px rgba(15,23,42,.06); background: #fff; }
body.pc-v3 .weekly-summary-card.current { border-color: #c4b5fd; box-shadow: 0 0 0 2px rgba(124,58,237,.25), 0 8px 22px rgba(124,58,237,.12); }
body.pc-v3 .weekly-week-badge { background: linear-gradient(135deg,#a78bfa,#7c3aed); color: #fff; border: 0; font-weight: 800; border-radius: 9px; }
body.pc-v3 .weekly-card-total > strong { font-size: 1.45rem; font-weight: 900; color: #0f172a; }
body.pc-v3 .weekly-card-total .good-text { color: #15803d; font-weight: 800; }
body.pc-v3 .weekly-card-total .danger-text { color: #b91c1c; font-weight: 800; }
body.pc-v3 .weekly-days-grid { gap: 8px; }
body.pc-v3 .weekly-day-cell { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 9px; }
body.pc-v3 .weekly-day-cell.best { background: linear-gradient(180deg,#fffbeb,#fef3c7); border-color: #fcd34d; box-shadow: 0 4px 12px rgba(251,191,36,.2); }
body.pc-v3 .weekly-day-cell > strong { color: #0f172a; font-weight: 800; }
body.pc-v3 .weekly-day-meter { background: #eef2f7; border-radius: 999px; overflow: hidden; }
/* Barres jour colorées par performance (rouge=bas → vert=bon), plus de violet */
body.pc-v3 .weekly-day-meter > b { background: linear-gradient(90deg,#fdba74,#ea580c); border-radius: 999px; }
body.pc-v3 .weekly-day-cell.lvl-low .weekly-day-meter > b { background: linear-gradient(90deg,#fca5a5,#dc2626); }
body.pc-v3 .weekly-day-cell.lvl-mid .weekly-day-meter > b { background: linear-gradient(90deg,#fcd34d,#f59e0b); }
body.pc-v3 .weekly-day-cell.lvl-good .weekly-day-meter > b { background: linear-gradient(90deg,#4ade80,#16a34a); }
body.pc-v3 .weekly-day-cell.lvl-top .weekly-day-meter > b { background: linear-gradient(90deg,#34d399,#059669); }
body.pc-v3 .weekly-day-cell.best .weekly-day-meter > b { background: linear-gradient(90deg,#fbbf24,#f59e0b); }

/* =====================================================================
   PAIEMENTS — refonte look (KPIs dégradés + icônes, tableau soigné)
   ===================================================================== */
body.pc-v3 .payments-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; }
body.pc-v3 .payments-kpi-grid .stock-kpi {
  position: relative; border: 0; border-radius: 18px; padding: 16px 18px 15px; color: #fff;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden; box-shadow: 0 8px 22px rgba(15,23,42,.15); background: #4f46e5;
}
body.pc-v3 .payments-kpi-grid .stock-kpi span { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; opacity: .95; padding-right: 46px; }
body.pc-v3 .payments-kpi-grid .stock-kpi strong { font-size: 1.7rem; font-weight: 900; color: #fff !important; opacity: 1; line-height: 1.05; letter-spacing: -.5px; }
body.pc-v3 .payments-kpi-grid .stock-kpi small { font-size: .71rem; color: #fff; opacity: .85; line-height: 1.3; }
body.pc-v3 .payments-kpi-grid .stock-kpi::before {
  content: ''; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px;
  background-color: rgba(255,255,255,.2); background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(1) { background: linear-gradient(135deg,#818cf8,#4f46e5); }
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E"); }
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(2) { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8.5a5.5 5.5 0 1 0 0 7'/%3E%3Cpath d='M6 11.5h8M6 14h7'/%3E%3C/svg%3E"); }
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(3) { background: linear-gradient(135deg,#fb7185,#e11d48); }
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(4) { background: linear-gradient(135deg,#34d399,#059669); }
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H6a2 2 0 0 1 0-4h12v4'/%3E%3Cpath d='M4 6v12a2 2 0 0 0 2 2h14v-4'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E"); }
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(5) { background: linear-gradient(135deg,#2dd4bf,#0d9488); }
body.pc-v3 .payments-kpi-grid .stock-kpi:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* Tableau des paiements */
body.pc-v3 .payments-calendar-wrap { border: 1px solid #eef2f7; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
body.pc-v3 .payments-table th { background: #f8fafc; color: #64748b; font-weight: 700; }
body.pc-v3 .payments-table tbody tr:hover td { background: #faf9ff; }
body.pc-v3 .payments-table .payment-row-current td { background: #f5f3ff; }
body.pc-v3 .payment-month-badge { background: linear-gradient(135deg,#a78bfa,#7c3aed); color: #fff; font-weight: 800; border-radius: 9px; border: 0; }
body.pc-v3 .payment-status-badge { border-radius: 999px; font-weight: 700; border: 0; }
body.pc-v3 .payment-status-badge.completed { background: #f1f5f9; color: #64748b; }
body.pc-v3 .payment-status-badge.current { background: #ecfdf5; color: #15803d; }
body.pc-v3 .payment-status-badge.next { background: #eff6ff; color: #2563eb; }
body.pc-v3 .payment-status-badge.upcoming { background: #fef9c3; color: #854d0e; }

/* =====================================================================
   STOCK — tuile épurée (dernier achat) + section fusion repliable
   ===================================================================== */
.stock-lots-mini { margin-top: 8px; }
.stock-lots-mini.empty { color: #94a3b8; font-size: .82rem; padding: 6px 0; }
.stock-lot-latest { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #334155; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 7px 11px; }
.stock-lot-latest .sll-lab { color: #94a3b8; font-weight: 600; font-size: .72rem; }
.stock-lot-latest .sll-date { font-weight: 600; }
.stock-lot-latest strong { margin-left: auto; color: #0f172a; }
.stock-lot-latest .sll-price { color: #0f172a; font-weight: 700; }
.stock-lot-more { margin-top: 6px; font-size: .76rem; color: #7c3aed; font-weight: 600; }
.stock-fusion-details { margin-top: 12px; border: 1px solid #eef2f7; border-radius: 12px; overflow: hidden; }
.stock-fusion-details > summary { list-style: none; cursor: pointer; padding: 11px 14px; background: #f8fafc; display: flex; flex-direction: column; gap: 2px; }
.stock-fusion-details > summary::-webkit-details-marker { display: none; }
.stock-fusion-details > summary span { font-weight: 700; color: #334155; font-size: .92rem; }
.stock-fusion-details > summary small { color: #94a3b8; font-size: .76rem; }
.stock-fusion-details[open] > summary { border-bottom: 1px solid #eef2f7; }
.stock-fusion-details .stock-defuse-list { padding: 10px 14px; }

/* Bloc "Fusionner ce produit" (fiche) repliable */
.stock-assoc-details { border: 1px solid #eef2f7; border-radius: 12px; overflow: hidden; margin: 12px 0; }
.stock-assoc-details > summary { list-style: none; cursor: pointer; padding: 11px 14px; background: #f8fafc; display: flex; flex-direction: column; gap: 2px; }
.stock-assoc-details > summary::-webkit-details-marker { display: none; }
.stock-assoc-details > summary span { font-weight: 700; color: #334155; font-size: .92rem; }
.stock-assoc-details > summary small { color: #94a3b8; font-size: .76rem; }
.stock-assoc-details[open] > summary { border-bottom: 1px solid #eef2f7; }
.stock-assoc-details .stock-association-search { padding: 12px 14px; }

/* =====================================================================
   STOCK — résumé en cartes dégradées + icônes (nouveau look)
   ===================================================================== */
body.pc-v3 .stock-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
body.pc-v3 .stock-summary-grid .stock-kpi {
  position: relative; border: 0; border-radius: 18px; padding: 16px 18px 15px; color: #fff;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden; box-shadow: 0 8px 22px rgba(15,23,42,.15); background: #0d9488;
}
body.pc-v3 .stock-summary-grid .stock-kpi span { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; opacity: .95; padding-right: 46px; }
body.pc-v3 .stock-summary-grid .stock-kpi strong { font-size: 1.7rem; font-weight: 900; color: #fff !important; opacity: 1; line-height: 1.05; letter-spacing: -.5px; }
body.pc-v3 .stock-summary-grid .stock-kpi small { font-size: .71rem; color: #fff; opacity: .85; line-height: 1.3; }
body.pc-v3 .stock-summary-grid .stock-kpi::before {
  content: ''; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px;
  background-color: rgba(255,255,255,.2); background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(1) { background: linear-gradient(135deg,#34d399,#059669); }
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3C/svg%3E"); }
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(2) { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8.5a5.5 5.5 0 1 0 0 7'/%3E%3Cpath d='M6 11.5h8M6 14h7'/%3E%3C/svg%3E"); }
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(3) { background: linear-gradient(135deg,#60a5fa,#2563eb); }
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M7 10h10M7 14h6'/%3E%3C/svg%3E"); }
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(4) { background: linear-gradient(135deg,#818cf8,#4f46e5); }
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='19' rx='2'/%3E%3Cpath d='M7 6h7M7 9h7M7 12h7'/%3E%3C/svg%3E"); }
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(5) { background: linear-gradient(135deg,#fbbf24,#ea580c); }
body.pc-v3 .stock-summary-grid .stock-kpi:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 21h20z'/%3E%3Cpath d='M12 9v5M12 17.5v.5'/%3E%3C/svg%3E"); }

/* Tuiles produit modernisées */
body.pc-v3 .stock-product { border: 1px solid #eef2f7; border-radius: 16px; box-shadow: 0 4px 14px rgba(15,23,42,.06); transition: transform .14s, box-shadow .14s; }
body.pc-v3 .stock-product:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,.12); }
body.pc-v3 .stock-product.danger { box-shadow: 0 0 0 2px #fecaca, 0 6px 16px rgba(220,38,38,.12); }
body.pc-v3 .stock-product .stock-remaining { font-size: 1.5rem; font-weight: 900; color: #0f766e; }
body.pc-v3 .stock-product.danger .stock-remaining { color: #dc2626; }
body.pc-v3 .stock-product.warning .stock-remaining { color: #ea580c; }
body.pc-v3 .stock-mini-kpis { background: #f8fafc; border-radius: 10px; padding: 8px 10px; }

/* =====================================================================
   CALENDRIER DES CHARGES — KPIs en cartes dégradées (garde la couleur --kpi)
   ===================================================================== */
body.pc-v3 .charges-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; }
body.pc-v3 .charges-kpi {
  position: relative; border: 0; border-radius: 18px; padding: 16px 18px 15px; color: #fff;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden; box-shadow: 0 8px 22px rgba(15,23,42,.15);
  background: linear-gradient(135deg, color-mix(in srgb, var(--kpi, #2563eb) 72%, #fff), var(--kpi, #2563eb));
}
body.pc-v3 .charges-kpi-label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; opacity: .95; padding-right: 46px; }
body.pc-v3 .charges-kpi-value { font-size: 1.7rem; font-weight: 900; color: #fff; line-height: 1.05; letter-spacing: -.5px; }
body.pc-v3 .charges-kpi small, body.pc-v3 .charges-kpi .muted { color: #fff !important; opacity: .88; }
body.pc-v3 .charges-kpi-bar { background: rgba(255,255,255,.3); border-radius: 999px; overflow: hidden; height: 6px; margin: 5px 0 2px; }
body.pc-v3 .charges-kpi-bar > i { background: #fff; display: block; height: 100%; border-radius: 999px; }
body.pc-v3 .charges-kpi::before {
  content: ''; position: absolute; inset: auto; top: 14px; right: 14px; left: auto; bottom: auto; width: 40px; height: 40px; border-radius: 12px;
  background-color: rgba(255,255,255,.2); background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
body.pc-v3 .charges-kpi:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M16 12h2'/%3E%3C/svg%3E"); }
body.pc-v3 .charges-kpi:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
body.pc-v3 .charges-kpi:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 21h20z'/%3E%3Cpath d='M12 9v5M12 17.5v.5'/%3E%3C/svg%3E"); }
body.pc-v3 .charges-kpi:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* "Toutes les charges configurées" : lignes larges et lisibles (au lieu de tuiles serrées) */
body.pc-v3 .charges-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
body.pc-v3 .charges-all-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #eef2f7; border-radius: 12px; padding: 11px 13px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
body.pc-v3 .charges-row-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }
body.pc-v3 .charges-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.pc-v3 .charges-row-info strong { font-size: .9rem; color: #0f172a; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pc-v3 .charges-row-info small { font-size: .74rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pc-v3 .charges-row-amount { font-size: 1rem; font-weight: 800; color: #0f172a; white-space: nowrap; margin-left: auto; }
body.pc-v3 .charges-row-actions { display: flex; gap: 6px; flex: none; }

/* =====================================================================
   FOURNISSEURS — cartes stat en dégradés + icônes (gardent leur sens)
   ===================================================================== */
body.pc-v3 .fcf-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 13px; }
body.pc-v3 .fcf-stat-card {
  position: relative; border: 0; border-radius: 18px; padding: 15px 17px; color: #fff; overflow: hidden;
  box-shadow: 0 8px 22px rgba(15,23,42,.15); text-align: left; display: block; background: #4f46e5;
}
body.pc-v3 .fcf-stat-card.clickable { cursor: pointer; }
body.pc-v3 .fcf-stat-card.clickable:hover { filter: brightness(1.05); }
body.pc-v3 .fcf-stat-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; opacity: .95; padding-right: 42px; }
body.pc-v3 .fcf-stat-value { font-size: 1.7rem; font-weight: 900; color: #fff !important; opacity: 1; margin-top: 3px; line-height: 1.05; letter-spacing: -.5px; }
body.pc-v3 .fcf-stat-label { color: #fff !important; }
body.pc-v3 .fcf-stat-card::before {
  content: ''; position: absolute; inset: auto; top: 13px; right: 13px; left: auto; bottom: auto; width: 38px; height: 38px; border-radius: 11px;
  background-color: rgba(255,255,255,.2); background-repeat: no-repeat; background-position: center; background-size: 21px 21px;
}
body.pc-v3 .fcf-stat-card.s-total { background: linear-gradient(135deg,#818cf8,#4f46e5); }
body.pc-v3 .fcf-stat-card.s-total::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 3h6v3H9z M8 11h8M8 15h5'/%3E%3C/svg%3E"); }
body.pc-v3 .fcf-stat-card.s-montant { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
body.pc-v3 .fcf-stat-card.s-montant::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8.5a5.5 5.5 0 1 0 0 7'/%3E%3Cpath d='M6 11.5h8M6 14h7'/%3E%3C/svg%3E"); }
body.pc-v3 .fcf-stat-card.s-paye { background: linear-gradient(135deg,#34d399,#059669); }
body.pc-v3 .fcf-stat-card.s-paye::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
body.pc-v3 .fcf-stat-card.s-impaye { background: linear-gradient(135deg,#fb7185,#e11d48); }
body.pc-v3 .fcf-stat-card.s-impaye::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 21h20z'/%3E%3Cpath d='M12 9v5M12 17.5v.5'/%3E%3C/svg%3E"); }
body.pc-v3 .fcf-stat-card.s-nonlivre { background: linear-gradient(135deg,#fbbf24,#ea580c); }
body.pc-v3 .fcf-stat-card.s-nonlivre::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h13v11H1z'/%3E%3Cpath d='M14 8h4l3 3v4h-7z'/%3E%3Ccircle cx='5.5' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E"); }
body.pc-v3 .fcf-stat-card.s-livre { background: linear-gradient(135deg,#2dd4bf,#0d9488); }
body.pc-v3 .fcf-stat-card.s-livre::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M9 12l2 2 4-4'/%3E%3C/svg%3E"); }

/* =====================================================================
   FIX boutons "ghost" blanc-sur-blanc : la règle globale .ghost-btn (fond
   sombre, texte blanc) rendait les boutons invisibles sur les cartes claires.
   On les force en sombre-sur-blanc dans tous les contextes clairs.
   ===================================================================== */
body.pc-v3 .hero-panel .ghost-btn,
body.pc-v3 .card .ghost-btn,
body.pc-v3 .stock-card .ghost-btn,
body.pc-v3 .mm-card .ghost-btn,
body.pc-v3 .mf-card .ghost-btn,
body.pc-v3 .smv-head .ghost-btn,
body.pc-v3 .charges-card .ghost-btn,
body.pc-v3 .modal .ghost-btn {
  background: #fff;
  color: #334155;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
body.pc-v3 .hero-panel .ghost-btn:hover,
body.pc-v3 .card .ghost-btn:hover,
body.pc-v3 .stock-card .ghost-btn:hover,
body.pc-v3 .smv-head .ghost-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
/* Les boutons "danger" (supprimer) restent rouges même sur fond clair */
body.pc-v3 .ghost-btn.danger-btn {
  background: #fff4f4 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}

/* ===== Fournisseurs : suivi paiement partiel (acompte + produits réglés) ===== */
.fcf-pay-section { margin-top: 16px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 14px; }
.fcf-pay-section .fcf-products-section-title { display: flex; align-items: center; gap: 8px; }
.fcf-pay-summary { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; font-size: .9rem; color: #475569; }
.fcf-pay-summary b { color: #0f172a; } .fcf-pay-summary em { color: #64748b; font-style: normal; }
/* Jauge « eau » : la couleur va du ROUGE au VERT au fur et à mesure du remplissage
   (teinte calculée en JS, --fill), avec des vaguelettes qui défilent en surface. */
.fcf-pay-bar {
  position: relative;
  height: 16px;
  background: #e6eaf0;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .12);
}
.fcf-pay-bar i {
  display: block;
  position: relative;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--fill, #16a34a);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%);
  transition: width .7s cubic-bezier(.2, .7, .2, 1), background-color .7s ease;
}
/* Surface de l'eau : deux trains de vagues à vitesses différentes. */
.fcf-pay-bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 11px -7px, rgba(255, 255, 255, .55) 9px, transparent 10px) repeat-x,
    radial-gradient(circle at 26px -9px, rgba(255, 255, 255, .3) 11px, transparent 12px) repeat-x;
  background-size: 34px 100%, 52px 100%;
  animation: fcfWave 3.4s linear infinite;
}
@keyframes fcfWave {
  to { background-position: 34px 0, -52px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fcf-pay-bar i::after { animation: none; }
}
.fcf-pay-acompte { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.fcf-pay-acompte label { font-size: .82rem; font-weight: 600; color: #334155; }
.fcf-pay-acompte input { padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 9px; max-width: 200px; font-size: 14px; }
.fcf-pay-lines-title { font-size: .8rem; color: #64748b; margin: 4px 0 6px; }
.fcf-pay-lines { display: flex; flex-direction: column; gap: 5px; }
.fcf-pay-line { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: #fff; border: 1px solid #eef2f7; border-radius: 9px; cursor: pointer; font-size: .86rem; }
.fcf-pay-line input { width: 16px; height: 16px; accent-color: #16a34a; flex: none; }
.fcf-pay-line span { flex: 1; color: #334155; } .fcf-pay-line span small { color: #94a3b8; }
.fcf-pay-line b { color: #0f172a; }
.fcf-pay-note { font-size: .8rem; color: #16a34a; margin-left: 10px; }
.fcf-badge-partiel { background: #fef3c7; color: #92400e; }
/* Colonne Facture (nom du fichier joint) */
.fcf-cell-facture { max-width: 170px; }
.fcf-facture-link { background: none; border: 0; color: #2563eb; cursor: pointer; padding: 0; font: inherit; font-size: .82rem; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.fcf-facture-link:hover { text-decoration: underline; }
.fcf-facture-none { color: #cbd5e1; }

/* ===== Stock : tuiles produit CARRÉES uniformes (image en grand, détail dans la fiche) ===== */
.stock-product.stock-sq {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-left-width: 4px;
}

.stock-sq .sq-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stock-sq .sq-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.stock-sq .sq-ph { font-size: 2.2rem; opacity: .45; }

.stock-sq .sq-qty {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  font-size: .95rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

.stock-sq.warning .sq-qty { background: #fef3c7; color: #92400e; }
.stock-sq.danger .sq-qty { background: #fee2e2; color: #b91c1c; }

.stock-sq .sq-lang {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: .66rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}

.stock-sq .sq-noref {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: .8rem;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 1px 6px;
}

.stock-sq .sq-name {
  margin: 0;
  font-size: .84rem;
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stock-sq .sq-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.stock-sq .sq-price {
  font-weight: 800;
  font-size: .82rem;
  color: #0f766e;
}

.stock-sq .sq-val {
  font-size: .74rem;
  font-weight: 700;
  color: #64748b;
}

.stock-sq .sq-split { display: flex; gap: 6px; }
.stock-sq .sq-split .stock-split-chip { flex: 1; justify-content: center; }

/* ===== Fiche produit stock : mise en page plus aérée ===== */
.stock-product-detail-modal .stock-modal-title-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.stock-product-detail-modal .stock-product-media-lg {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
}

.stock-product-detail-modal .stock-product-media-lg .stock-product-img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 6px;
}

.stock-product-detail-kpis span,
.stock-product-price-strip span {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

/* Tuile stock : infos étiquetées + boutons Machine / Entrepôt lisibles */
.stock-sq .sq-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: #f8fafc;
  border-radius: 8px;
  padding: 6px 4px;
}

.stock-sq .sq-i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}

.stock-sq .sq-i small {
  font-size: .6rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .2px;
}

.stock-sq .sq-i b {
  font-size: .78rem;
  white-space: nowrap;
}

.stock-sq .sq-i b.sq-good { color: #16a34a; }
.stock-sq .sq-i b.sq-bad { color: #dc2626; }

.stock-sq .sq-split .stock-split-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 9px;
  padding: 6px 4px;
  font-size: .74rem;
  font-weight: 800;
}

.stock-sq .sq-split .stock-split-chip em {
  font-style: normal;
  font-weight: 700;
  font-size: .68rem;
  opacity: .85;
}

.stock-sq .sq-split .stock-split-machine {
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #bae6fd;
}

.stock-sq .sq-split .stock-split-reserve {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.stock-sq .sq-lang { font-size: .9rem; padding: 1px 5px; background: #fff; border-color: #e2e8f0; }

/* Compteur « Achats à saisir » : c'est un BOUTON, il doit se voir comme tel et montrer
   qu'il est actif quand le filtre est posé (sinon Toni ne comprend pas pourquoi sa liste
   s'est réduite). Reprend l'apparence des autres tuiles pour ne pas dépareiller. */
.stock-kpi-clic { cursor: pointer; border: 0; text-align: left; font: inherit; }
.stock-kpi-clic:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, .14); }
.stock-kpi-clic.on { outline: 3px solid #d97706; outline-offset: 2px; }