:root {
  --bg: #f8f1e4;
  --bg-2: #efe1cf;
  --ink: #2f241d;
  --ink-soft: #766154;
  --brand: #9b2e1f;
  --brand-2: #6f1f15;
  --accent: #d2a24c;
  --card: #fefefe;
  --stroke: #ddccb9;
  --table-head-bg: #f2e7dd;
  --shadow: 0 4px 16px rgba(60, 33, 21, 0.10);
  --shadow-lg: 0 16px 40px rgba(60, 33, 21, 0.16);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --transition: 0.15s ease;

  /* ── Typographie — échelle de tailles. Couvre ~85% des font-size récurrents.
     Les valeurs hors échelle (12.5px, 0.85em, etc.) restent en littéral. ── */
  --font-xs:   11px;
  --font-sm:   12px;
  --font-md:   13px;
  --font-base: 14px;
  --font-lg:   15px;

  /* ── Couleurs de statut — rouge danger (erreurs, alertes, supprimer,
     valeurs négatives, DLC expirée…). --danger était déjà utilisé en
     fallback `var(--danger)` mais jamais déclaré. ── */
  --danger:      #dc2626;
  --danger-dark: #991b1b;
  --warning:     #ea9514;

  /* ── Thème (par défaut "La Welsch") — surchargé via JS sur :root ── */
  --sidebar-grad-1: #7d1f18;
  --sidebar-grad-2: #45110e;
  --sidebar-fg: #fff;
  --bg-grad-1: #fbf4e9;
  --bg-grad-2: #f5ebdc;

  /* ── Couleurs statiques par mode (pour la barre de mode dans Paramètres) ── */
  --mode-lw-primary: #7d1f18;
  --mode-lw-primary-dark: #45110e;
  --mode-mp-primary: #769C24;
  --mode-mp-primary-dark: #668125;
  --mode-pe-primary: #7c1879;
  --mode-pe-primary-dark: #5c0e5a;

  /* ── Types de fondue ── */
  --fondue-cl-bg:   #fef9c3;   /* Classique — jaune pâle  */
  --fondue-cl-text: #a16207;   /* Classique — or foncé    */
  --fondue-bl-bg:   #dbeafe;   /* Bleue     — bleu pâle   */
  --fondue-bl-text: #1d4ed8;   /* Bleue     — bleu foncé  */
  --fondue-fdc-bg:  #dcfce7;   /* FDC       — vert pâle   */
  --fondue-fdc-text:#15803d;   /* FDC       — vert foncé  */
  --fondue-ca-bg:   #f3e8ff;   /* Cabane    — violet pâle */
  --fondue-ca-text: #7c3aed;   /* Cabane    — violet foncé*/

  /* ── Statuts (Facturé / Payé / Livré) — vert plus soutenu que FDC ── */
  --status-ok-bg:     #bbf7d0;   /* green-200 — plus soutenu que FDC #dcfce7 */
  --status-ok-border: #22c55e;   /* green-500 */
  --status-ok-text:   #14532d;   /* green-950 — plus foncé que --fondue-fdc-text */

  /* ── Couleurs utilitaires ── */
  --stroke-hover: #c9b89e;
  --bg-edit:      #fff7f0;
  --bg-head:      #efeeee;
  --tooltip-bg:   rgba(45, 10, 8, 0.92);
  --profit-green: #1a7a38;

  /* ── Hover global : dégradé du fond de page (--bg-grad-1/2) à 50%
     d'opacité. Subtil — sur un fond de carte clair, donne un voile
     coloré dans la teinte de la page (cohérent avec le thème actif).
     Suit automatiquement Welsch / MP / personnalisé via theme.js. */
  --hover-bg: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-grad-1) 50%, transparent) 0%,
    color-mix(in srgb, var(--bg-grad-2) 50%, transparent) 100%
  );

  /* ── Labels — couleurs par groupe (seeds) ──────────────────────────────────
     Surchargés dynamiquement par contacts.js > applyGroupColors() pour les
     groupes customs. Doivent rester ici (single source of truth pour les
     défaults). */
  --group-client-bg: #eff6ff;
  --group-client-text: #1e3a5f;
  --group-pdv-bg: #fef3e2;
  --group-pdv-text: #92400e;
  --group-fournisseur-bg: #f0fdf4;
  --group-fournisseur-text: #166534;
}

* {
  box-sizing: border-box;
}

/* ── Utilitaires ── */
.hidden { display: none; }
.muted { color: var(--ink-soft); }
.text-center { text-align: center; }
.btn-small { font-size: var(--font-sm); }
.btn-xs { font-size: var(--font-xs); padding: 4px 10px; }
/* Cellule numérique alignée à droite avec chiffres tabulaires (décimales /
   unités alignées entre lignes successives). Pattern global appliqué partout
   où l'on affiche un nombre, montant CHF, pourcentage, kg, etc. */
.r,
.num-cell,
.tabular-nums {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Inputs numériques aussi alignés à droite par défaut. */
input[type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.badge-faded { opacity: 0.7; }
.empty-state { padding: 16px; text-align: center; font-size: var(--font-md); }

body {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
}

/* ── Layout ── */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 220px;
}

/* Floating menu toggle (burger) + backdrop — visible only on mobile */
.menu-toggle { display: none; }
.menu-backdrop { display: none; }

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

/* ── Sidebar ── */

.sidebar {
  padding: 20px 16px 24px;
  background: linear-gradient(180deg, var(--sidebar-grad-1) 0%, var(--sidebar-grad-2) 100%);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: inset -1px 0 0 rgba(255, 244, 235, 0.10);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { display: block; }

.brand-mark {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 8px 0 4px;
}

.brand-mark img {
  width: 100%;
  max-width: 160px;
  height: auto;
  object-fit: contain;
}

.nav { display: grid; gap: 4px; }

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--sidebar-fg);
  opacity: 0.85;
  padding: 10px 12px;
  text-align: left;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--font-base);
  font-family: inherit;
  transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-btn::before { display: none; }

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.nav-btn.active,
.nav-btn:hover {
  border-color: rgba(255, 240, 220, 0.28);
  background: rgba(255, 248, 240, 0.14);
  color: var(--sidebar-fg);
  opacity: 1;
}

.nav-btn.active .nav-icon,
.nav-btn:hover .nav-icon {
  opacity: 1;
}

.page-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.page-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: #1a1a1a;
  margin-top: 5px;
}

/* ── Main ── */

.main {
  padding: 28px 36px 48px;
}

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

h1 {
  font-family: "Fraunces", serif;
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

#page-sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--font-base);
}

.top-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .topbar .page-heading { width: 100%; }
  .top-actions { width: 100%; justify-content: flex-end; }
}

/* ── Buttons ── */

.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-base);
  font-family: inherit;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.primary:hover {
  opacity: 0.92;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}

.primary:active { transform: scale(0.98); }

.ghost {
  background: rgba(255, 252, 247, 0.80);
  color: var(--ink);
  border: 1px solid var(--stroke);
  padding: 10px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--font-base);
  font-family: inherit;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.ghost:hover {
  background: #fff;
  border-color: var(--stroke-hover);
}
.ghost:active:not([disabled]) { transform: scale(0.96); }
/* Feedback visible après clic : flash bref bg+border en couleur du thème. */
.btn-click-flash {
  animation: btn-click-flash 0.45s ease-out;
}
@keyframes btn-click-flash {
  0%   { background: var(--brand); color: #fff; border-color: var(--brand); transform: scale(0.96); }
  60%  { background: var(--brand); color: #fff; border-color: var(--brand); transform: scale(1); }
  100% { background: rgba(255, 252, 247, 0.80); color: var(--ink); border-color: var(--stroke); }
}
/* État "déjà au défaut" : bouton non cliquable, opaque atténué. */
button[disabled],
.ghost[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.ghost.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Petits boutons icônes uniformes (email, edit, delete, etc.) */
.btn-icon {
  padding: 6px 8px;
  font-size: var(--font-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.btn-icon svg { width: 16px; height: 16px; flex-shrink: 0; }

.ghost.danger {
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  color: var(--brand-2);
  background: color-mix(in srgb, var(--brand) 4%, transparent);
}

.ghost.danger:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
}

/* ── Grid & Cards ── */

.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Références layout (grouped sections, fixed 2-col grid) ── */
.ref-layout { display: flex; flex-direction: column; gap: 32px; }
.ref-section-head {
  font-size: var(--font-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
  padding-bottom: 8px; margin-bottom: 16px;
  border-bottom: 1px solid var(--stroke);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.ref-section-toggle {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: var(--ink-soft); opacity: 0.4; transition: opacity 0.2s, transform 0.25s;
  line-height: 0;
}
.ref-section-toggle:hover { opacity: 0.8; }
.ref-section.collapsed .ref-section-toggle { transform: rotate(-90deg); }
.ref-section.collapsed .ref-section-grid { display: none; }
.ref-section-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; align-items: start;
}
.ref-section-grid > .ref-full { grid-column: 1 / -1; }

/* Text wrapping in tables and lists */
.ref-section-grid .list-main,
.ref-section-grid .table .row > div {
  overflow-wrap: break-word; word-break: break-word; min-width: 0;
}

@media (max-width: 960px) {
  .ref-section-grid { grid-template-columns: 1fr; }
  .ref-section-grid > .ref-full,
  .ref-section-grid > .ref-third { grid-column: auto; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
}

.card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
}
/* Cards du Dashboard (dash-block) : background plus translucide par défaut
   — laisse le dégradé de page transparaître. Quand l'utilisateur définit une
   couleur personnalisée, l'inline style.backgroundColor (opaque) prend le
   relais. .dash-summary conserve le 0.75 de .card pour rester plus opaque. */
.card.dash-block { background: rgba(255, 255, 255, 0.5); }

.card-title {
  font-weight: 600;
  font-size: var(--font-base);
  line-height: 1.5;
  color: var(--ink);
}

.card-divider {
  height: 1px;
  background: var(--stroke);
  margin: 14px 0;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Metrics ── */

.metric { font-size: 22px; font-weight: 700; }
.metric-sub { color: var(--ink-soft); margin-top: 4px; font-size: var(--font-md); }
.eyebrow { text-transform: uppercase; font-size: 10px; letter-spacing: 1.8px; color: var(--ink-soft); margin-bottom: 6px; }
.ghost.edit-toggle { padding: 5px 8px; line-height: 1; }
.ghost.edit-toggle svg { display: block; stroke: var(--ink-soft); fill: none; }
.ghost.danger svg { stroke: currentColor; fill: none; }
.btn-save-block { padding: 5px 8px; line-height: 1; display: inline-flex; align-items: center; margin-left: 4px; }
.btn-icon-text { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon-text svg { flex-shrink: 0; }
.btn-save-block svg { display: block; stroke: currentColor; fill: none; }

/* ── Dashboard summary ── */
.dash-summary { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 16px 20px; }
.dash-summary-date { font-size: var(--font-lg); font-weight: 600; color: var(--ink); white-space: nowrap; }
.dash-summary-counters { display: flex; gap: 16px; flex-wrap: wrap; }
.dash-counter { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-md); color: var(--ink-soft); padding: 7px 12px; border-radius: 20px; background: var(--bg); border: 1px solid var(--stroke); cursor: pointer; transition: all var(--transition); }
.dash-counter:hover { border-color: var(--brand); color: var(--ink); }
.dash-counter strong { font-weight: 700; color: var(--ink); }
.dash-counter-icon { width: 16px; height: 16px; color: var(--ink-soft); flex-shrink: 0; }
.dash-counter:hover .dash-counter-icon { color: var(--brand); }

/* ── Dashboard top bar (summary) ── */
.dash-top-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.dash-summary-search { display: flex; gap: 12px; margin-left: auto; flex: 0 1 420px; min-width: 220px; }
.dash-summary-search .dash-search-section { flex: 1; position: relative; min-width: 0; }
.dash-summary-search .input { width: 100%; font-size: var(--font-md); padding: 7px 10px; }
.dash-summary-search .dash-search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 20;
  max-height: 320px; overflow-y: auto;
  padding: 6px; display: grid; gap: 6px;
}
.dash-summary-search .dash-search-results:empty { display: none; }

/* ── Dashboard grid (2 colonnes explicites) ── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.dash-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── Dashboard blocks ── */
.dash-block { min-height: 100px; max-height: 480px; display: flex; flex-direction: column; position: relative; }
.dash-block .card-head { flex-shrink: 0; }
.dash-block .card-head-icon { width: 22px; height: 22px; color: var(--ink-soft); flex-shrink: 0; }
.dash-block .card-title-group { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ── Dashboard background color picker (top-right of each box) ── */
.dash-bg-picker {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 22px; height: 22px; padding: 0; margin: 0;
  border: 2px solid rgba(0,0,0,0.18); border-radius: 50%;
  background: transparent; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 1px 4px rgba(0,0,0,0.15);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none; appearance: none;
}
.dash-bg-picker:hover { transform: scale(1.15); border-color: rgba(0,0,0,0.35); box-shadow: 0 0 0 1px rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.2); }
.dash-bg-picker::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.dash-bg-picker::-webkit-color-swatch { border: none; border-radius: 50%; }
.dash-bg-picker::-moz-color-swatch { border: none; border-radius: 50%; }
.dash-block .card-head { padding-right: 36px; }
.dash-counter.dash-counter-colored { color: var(--ink); }
.dash-counter.dash-counter-colored strong { color: inherit; }
.dash-block .list { display: grid; gap: 6px; margin-top:8px; overflow-y: auto; flex: 1; min-height: 0; }
.dash-empty { color: var(--ink-soft); font-size: var(--font-md); font-style: italic; text-align: center; padding: 16px; display: none; }
.dash-block .list:empty + .dash-empty { display: block; flex: 1; }

/* ── Dashboard sale item ── */
.dash-sale-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: #fff; border: 1px solid var(--stroke); transition: border-color var(--transition); }
.dash-sale-item:hover { border-color: var(--stroke-hover); }
.dash-sale-info { flex: 1; min-width: 0; }
.dash-sale-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-sale-num { font-weight: 600; font-size: var(--font-md); color: var(--ink); }
.dash-sale-client { font-size: var(--font-md); color: var(--ink-soft); }
.dash-sale-date { font-size: var(--font-sm); color: var(--ink-soft); font-weight: 500; background: var(--bg); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.dash-sale-date.highlight { background: #fef3c7; color: #92400e; font-weight: 600; }
.dash-sale-products { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.dash-sale-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; margin-left: auto; justify-content: flex-end; }

/* ── Dashboard bulk select checkbox (common) ── */
.dash-bulk-select {
  cursor: pointer;
  accent-color: var(--brand);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
}
.dash-sale-item:has(.dash-bulk-select:checked) { background: color-mix(in srgb, var(--brand) 6%, transparent); }

/* ── Dashboard bulk pastille oui/non ── */
.bulk-pastille {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--stroke);
  background: #fff;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--ink-soft);
}
.bulk-pastille:hover { border-color: var(--brand); color: var(--brand); }
.bulk-pastille.active { background: var(--status-ok-bg, #dcfce7); border-color: var(--status-ok-ink, #15803d); color: var(--status-ok-ink, #15803d); }
.bulk-pastille.active:hover { background: var(--status-ok-ink, #15803d); color: #fff; }

/* ── Dashboard fade-out animation ── */
.dash-fade-out { opacity: 0; transition: opacity 1s ease; }

/* ── Dashboard bulk bars (livr, fact, relance) ── */
.dash-livr-bulk, .dash-fact-bulk, .dash-relance-bulk { margin: 0 0 8px 0 !important; padding: 8px 12px !important; }
.dash-livr-bulk .bulk-actions-buttons .ghost,
.dash-fact-bulk .bulk-actions-buttons .ghost,
.dash-relance-bulk .bulk-actions-buttons .ghost { font-size: var(--font-sm); padding: 5px 10px; }

/* ── Dashboard Relance PDV ── */
.dash-relance-controls { display: flex; align-items: center; gap: 6px; }
.dash-relance-label { font-size: var(--font-sm); color: var(--ink-soft); font-weight: 500; }
#dash-relance-days { width: auto; min-width: 90px; padding: 6px 10px; font-size: var(--font-sm); }
.dash-relance-item { gap: 8px; }
.dash-relance-email { min-width: 32px; }
.dash-relance-email[disabled] { opacity: 0.35; cursor: not-allowed; }
.dash-relance-contacted { opacity: 0.45; }
.dash-relance-contacted:hover { opacity: 0.7; }
.dash-contacted-badge { font-size: var(--font-xs); color: var(--status-ok-ink, #15803d); background: var(--status-ok-bg, #dcfce7); padding: 1px 8px; border-radius: 6px; font-weight: 500; white-space: nowrap; }

/* ── Dashboard search results (dropdown items) ── */
.dash-search-results .list-item { padding: 7px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--stroke); }
.dash-search-results .row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.dash-search-results .row-actions .ghost:not(.btn-icon) { font-size: var(--font-xs); padding: 3px 8px; }

/* ── Dashboard responsive ── */
@media (max-width: 1100px) {
  /* Search wraps below counters when the row gets tight */
  .dash-summary-search { flex: 1 1 100%; margin-left: 0; }
}
@media (max-width: 768px) {
  .dash-grid { grid-template-columns: 1fr !important; }
  .dash-summary { gap: 10px; }
  .dash-summary-counters { gap: 6px; flex-wrap: wrap; }
  .dash-counter { padding: 6px 10px; }
  .dash-counter-label { display: none; }
  .dash-summary-search { flex-direction: column; }
}

/* ── Lists ── */

.list { display: grid; gap: 8px; }

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--stroke);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.list-item:hover {
  border-color: var(--stroke-hover);
  box-shadow: 0 2px 8px rgba(60, 33, 21, 0.06);
}

.list-main { font-weight: 600; font-size: var(--font-base); }
.list-sub { font-size: var(--font-sm); color: var(--ink-soft); margin-top: 2px; }

/* ── Bars ── */

.bars { display: grid; gap: 10px; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(60px, 160px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: var(--font-sm);
  min-width: 0;
}
.bar-row > .bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-val { white-space: nowrap; }

.bar {
  height: 8px;
  background: #efe3d8;
  border-radius: 999px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c18b34, var(--brand));
  border-radius: 999px;
}
.bar-row.cl .bar span { background: linear-gradient(90deg, #fde047, var(--fondue-cl-text)); }
.bar-row.bl .bar span { background: linear-gradient(90deg, #60a5fa, var(--fondue-bl-text)); }
.bar-row.cu .bar span { background: linear-gradient(90deg, #4ade80, var(--fondue-fdc-text)); }
.bar-row.ca .bar span { background: linear-gradient(90deg, #c084fc, var(--fondue-ca-text)); }

/* ── Stats ── */
.stat-subtitle { color: var(--ink-soft); font-size: var(--font-md); margin-top: 2px; }
.stat-totals { margin-top: 16px; border-top: 1px solid var(--stroke); padding-top: 12px; display: grid; gap: 8px; }
.stat-total-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-md); color: var(--ink-soft); }
.stat-total-row strong { color: var(--ink); }
.stat-grand-total { font-size: var(--font-base); font-weight: 600; color: var(--ink); padding-top: 8px; border-top: 1px solid var(--stroke); }
.stat-date-range { display: flex; gap: 12px; align-items: center; margin-top: 8px; font-size: var(--font-md); }
.stat-date-range label { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.stat-date-range input { width: 140px; }

.stat-discount-summary { display: flex; gap: 12px; margin-top: 12px; }
.stat-discount-card { flex: 1; padding: 14px 16px; border-radius: var(--radius); text-align: center; }
.stat-discount-card.welsch-bg { background: var(--fondue-cl-bg); }
.stat-discount-card.clubs-bg { background: var(--fondue-fdc-bg); }
.stat-discount-label { font-size: var(--font-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-soft); }
.stat-discount-value { font-size: 20px; font-weight: 700; margin: 4px 0 2px; }
.stat-discount-pct { font-size: var(--font-sm); color: var(--ink-soft); }

.stat-section-title { font-size: var(--font-md); font-weight: 600; margin-bottom: 8px; }
.stat-table { font-size: var(--font-md); }
.stat-table-head { display: grid; grid-template-columns: 1fr 0.6fr 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--stroke); font-weight: 600; color: var(--ink-soft); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.3px; }
.stat-table-row { display: grid; grid-template-columns: 1fr 0.6fr 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--bg-alt, #f5efe6); }
.stat-table-row .r, .stat-table-head .r { text-align: right; }
.stat-empty { font-size: var(--font-md); color: var(--ink-soft); font-style: italic; padding: 8px 0; }

/* Summary row (top of stats tab) */
.stat-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-summary-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color var(--transition);
}
.stat-summary-card:hover { border-color: var(--stroke-hover); }
.stat-summary-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 40px;
  font-weight: 600;
  color: var(--brand);
  line-height: 1;
  letter-spacing: -1px;
}
.stat-summary-unit {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 10px;
}
@media (max-width: 960px) { .stat-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 4-col breakdown tables (type de vente, mode de livraison) */
.stat-table.stat-table-4 .stat-table-head,
.stat-table.stat-table-4 .stat-table-row {
  grid-template-columns: 1.2fr 0.5fr 0.5fr 0.9fr;
}
.stat-table-row-highlight {
  background: var(--fondue-fdc-bg);
  border-radius: 6px;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-weight: 600;
  color: var(--fondue-fdc-text);
}

/* Achats fournisseurs : layout donut + table */
.supplier-stats-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 24px;
  margin-top: 16px;
  align-items: start;
}
@media (max-width: 960px) {
  .supplier-stats-layout { grid-template-columns: 1fr; }
}
.supplier-donut-wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; min-width: 0; }
.supplier-donut { width: 180px; height: 180px; display: block; }
.supplier-donut-total { text-align: center; }
.supplier-donut-total-val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.5px;
  line-height: 1;
}
.supplier-donut-total-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
.supplier-legend { width: 100%; display: grid; gap: 6px; font-size: var(--font-sm); }
.supplier-legend-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.supplier-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.supplier-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.supplier-legend-pct { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.supplier-table-wrap { min-width: 0; }
.stat-table.stat-table-supplier .stat-table-head,
.stat-table.stat-table-supplier .stat-table-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 0.7fr 0.9fr 0.5fr;
}
.stat-table.stat-table-supplier .stat-table-row > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-table-row-subtotal {
  background: var(--bg-alt, #f5efe6);
  font-weight: 600;
  border-top: 1.5px solid var(--stroke) !important;
  border-bottom: 1px solid var(--stroke) !important;
}
.supplier-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.supplier-cell-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ── Toolbar ── */

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

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Case à cocher "Masquer offert" dans la barre de filtres des ventes */
.sale-filter-hide-offert {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-md);
  color: var(--ink, #2f241d);
  cursor: pointer;
  user-select: none;
  padding: 0 4px;
  white-space: nowrap;
}
.sale-filter-hide-offert input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Settings tab toolbar: larger spacing between action buttons */
.settings-toolbar-actions { gap: 8px; flex-wrap: wrap; }
.settings-toolbar-actions .icon-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink-soft);
  transition: border-color var(--transition), color var(--transition);
}
.settings-toolbar-actions .icon-btn:hover { border-color: var(--brand); color: var(--brand); }

/* ── Inputs ── */

.input {
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 6px;
  background: #fff;
  min-width: 160px;
  font-family: inherit;
  font-size: var(--font-base);
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}

.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.input::placeholder { color: #9a9a9a; }
input::placeholder, textarea::placeholder { color: #9a9a9a; }

.input.small {
  min-width: 80px;
  padding: 6px;
  font-size: var(--font-md);
}

.input.tiny {
  min-width: 0;
  width: 100%;
  padding: 6px;
  font-size: var(--font-md);
}

/* Uniformisation des champs éditables dans Références (#tab-settings) :
   plus compacts (radius 4 + padding 3 6) pour gagner de la place et garder
   une apparence cohérente entre Charges fondues, Recettes, Prix, Rabais, etc. */
#tab-settings .input.tiny,
#tab-settings .charge-label-input,
#tab-settings input[type="number"].input,
#tab-settings input[type="text"].input.small {
  border-radius: 4px;
  padding: 3px 6px;
}

input[type="date"] { min-height: 42px; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }

/* ── Tables ── */

.table { display: grid; gap: 6px; }

.row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--stroke);
  font-size: var(--font-md);
  transition: border-color var(--transition);
}

.row:not(.head):hover { border-color: var(--stroke-hover); background: var(--hover-bg); }

.row.head {
  background: var(--bg-head);
  font-weight: 600;
  font-size: var(--font-sm);
  color: #000;
  border: none;
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Scrollable table containers */
.orders-table,
.contacts-table {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  overflow-x: auto;
}

.table .row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.shipping-rates-table .row { grid-template-columns: 1fr 1fr 36px; }

/* ── Pills ── */

.pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 600;
  display: inline-block;
  letter-spacing: 0.3px;
}


/* ── Badge (client type) ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-sm);
  font-weight: 600;
  background: var(--bg-head);
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}

/* ── Field grid ── */

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

.field-grid .span-2 { grid-column: span 2; }
.field-grid .span-3 { grid-column: span 3; }
.field-grid .input, .field-grid textarea.input { width: 100%; box-sizing: border-box; }

.radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 0;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--ink);
  user-select: none;
}
.radio-label input[type="radio"] {
  accent-color: var(--brand);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Label tags (client labels) ── */
.label-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.label-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--stroke);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  user-select: none;
}
.label-tag:hover { border-color: var(--brand); color: var(--brand); }
.label-tag.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Mini labels in table rows */
.label-tags-mini .label-tag {
  padding: 4px 8px;
  font-size: var(--font-xs);
  pointer-events: none;
}

.label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ── Tabs ── */

.tab {
  display: none;
  animation: fadeIn 0.2s ease;
}

.tab.active {
  display: grid;
  gap: 16px;
}

/* ── Modals ── */

body.modal-open { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 16, 0.55);
  display: none;
  place-items: center;
  padding: 16px;
  z-index: 100;
  backdrop-filter: blur(2px);
  overflow-y: auto;
}

.modal.show { display: grid; }

.modal-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  width: 96vw;
  max-width: 960px;
  box-shadow: var(--shadow-lg);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
}

.confirm-card { max-width: 420px; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink-soft);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
  padding: 0;
  margin-top: -2px;
}
.modal-close-btn:hover { background: var(--stroke); color: var(--ink); }

.modal-title {
  font-family: "Fraunces", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  flex: 1;
  min-height: 0;
}

.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 999px; }

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  flex-shrink: 0;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
}
/* Footer modale article : bouton « Copier dans Paniers » aligné en bas à gauche */
.article-modal-footer { justify-content: flex-start; }

.modal-actions { display: flex; gap: 4px; align-items: center; }
.modal-header .primary { margin-right: 8px; }

/* ── Linked contact bar ── */
.linked-contact-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--stroke); border-radius: var(--radius); margin-bottom: 8px; flex-shrink: 0; }
.linked-contact-info { flex: 1; font-size: var(--font-md); color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.linked-contact-line1, .linked-contact-line2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.linked-contact-line2 { font-size: var(--font-sm); color: var(--ink-soft); }
.linked-sep { color: var(--stroke); }
.linked-contact-info span { color: var(--ink-soft); }
.linked-contact-info strong { font-weight: 600; color: var(--ink); }
/* Stacking order:
   100 — base modals: sale, recipe, import, email (création / édition)
   110 — contact-modal (édition au-dessus d'une modale de base)
   150 — email-editor-overlay
   200 — confirm-modal (confirmation de suppression, toujours au-dessus)
   300 — email-toast (notification non-bloquante) */
#csv-poste-popup { z-index: 105; }
#contact-modal { z-index: 110; }
#confirm-modal { z-index: 200; }
/* Sale-modal ouvert depuis l'analyse des DLC : doit passer par-dessus le diagnostic */
#sale-modal.modal--over-dlc { z-index: 120; }

/* CSV Poste popup */
.csv-poste-backdrop { position:absolute; inset:0; }
.csv-poste-content {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  width: min(480px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.csv-poste-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-alt, #f5f5f5);
  margin-bottom: 8px;
}
#csv-poste-generate:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.linked-contact-actions { display: flex; gap: 6px; flex-shrink: 0; }
.linked-contact-edit, .linked-contact-unlink { font-size: var(--font-sm); padding: 4px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }

.confirm-text { margin: 0 0 16px; color: var(--ink-soft); font-size: var(--font-base); line-height: 1.5; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.confirm-text ul { list-style: disc; }
.confirm-text li { margin-bottom: 2px; }
.primary.danger { background: var(--danger); }
.primary.danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }

/* ── Sections in modal ── */

.section {
  display: grid;
  gap: 12px;
}

.section-title {
  font-weight: 700;
  font-size: var(--font-md);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: var(--font-xs);
  font-weight: 700;
  text-align: center;
  line-height: 20px;
}

.section-title[data-step="1"]::before { content: '1'; }
.section-title[data-step="2"]::before { content: '2'; }
.section-title[data-step="3"]::before { content: '3'; }
.section-title[data-step="4"]::before { content: '4'; }
.section-title[data-step="5"]::before { content: '5'; }

.section-divider {
  height: 1px;
  background: var(--stroke);
  margin: 4px 0;
}

/* ── Sale modal context row ── */

.sale-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}


/* ── Active filter highlight ── */
.filters select.filter-active,
.filters input.filter-active { background: var(--hover-bg); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }

/* ── Multi-select widget ── (sale-filter-typevente, sale-filter-dlc, sale-filter-type) */
.ms { position: relative; min-width: 0; }
.ms-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  text-align: left;
}
.ms-trigger .ms-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-trigger .ms-chevron {
  flex: 0 0 auto;
  font-size: var(--font-xs);
  color: var(--ink-soft);
  transition: transform 0.15s ease;
}
.ms[aria-expanded="true"] .ms-chevron,
.ms .ms-trigger[aria-expanded="true"] .ms-chevron { transform: rotate(180deg); }
.ms.is-active .ms-trigger { background: var(--hover-bg); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.ms-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 220px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm, 8px);
  padding: 4px 0;
  z-index: 100;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.ms-panel[hidden] { display: none; }
.ms-options { display: flex; flex-direction: column; }
.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: var(--font-md);
  user-select: none;
}
.ms-option:hover { background: var(--bg-2, #faf5ee); }
.ms-option input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.ms-option span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ms-group {
  padding: 8px 12px 4px;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--stroke);
  margin-top: 4px;
}
.ms-group:first-child { border-top: 0; margin-top: 0; }

/* ── Orders table (ventes list) ── */
/* Colonnes: N° | Client | Lieu | Commande | Envoi | Livreur | DLC | Articles | Total | Envoyé | Facturé | Payé | Actions | Checkbox */
/*           1     2        3       4          5       6        7      8          9       10        11        12     13        14        */
/* Livreur resserré (62 → 56), Articles élargi en compensation (1.2fr → 1.4fr). */

.orders-table .row {
  grid-template-columns: 52px minmax(90px,1fr) minmax(70px,0.6fr) 84px 84px 56px 84px minmax(90px,1.4fr) 74px 52px 56px 52px 44px 36px;
}

.orders-table .row.head [data-sort],
.client-table .row.head [data-sort],
.contacts-table .row.head [data-sort] {
  cursor: pointer;
  user-select: none;
}
.orders-table .row.head [data-sort]:hover,
.client-table .row.head [data-sort]:hover,
.contacts-table .row.head [data-sort]:hover { color: var(--brand); }
.orders-table .row.head [data-sort].sort-asc::after,
.client-table .row.head [data-sort].sort-asc::after,
.contacts-table .row.head [data-sort].sort-asc::after  { content: " ↑"; opacity: .6; }
.orders-table .row.head [data-sort].sort-desc::after,
.client-table .row.head [data-sort].sort-desc::after,
.contacts-table .row.head [data-sort].sort-desc::after { content: " ↓"; opacity: .6; }

.row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }

/* Dedicated selection cell at the very end of each row */
.sale-select-cell,
.contact-select-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sale-select-cell .sale-select,
.contact-select-cell .contact-select {
  cursor: pointer;
  accent-color: var(--brand);
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}
button.ghost.danger { color: var(--brand-2); }
button.ghost.danger:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); color: var(--brand-2); }

/* Select-all checkbox in table head */
.sale-head-actions,
.contact-head-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 4px;
}
.sale-head-actions .sale-select-all,
.contact-head-actions .contact-select-all {
  cursor: pointer;
  accent-color: var(--brand);
  width: 18px;
  height: 18px;
}

/* Selected row highlight */
.orders-table .row.sale-selected { background: color-mix(in srgb, var(--brand) 6%, transparent); }

/* Bulk actions bar */
.bulk-actions-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "info labels actions"
    "info statuts actions";
  align-items: center;
  gap: 8px 16px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  font-size: var(--font-md);
}
.bulk-actions-bar .bulk-actions-info { grid-area: info; }
.bulk-actions-bar .bulk-row-labels { grid-area: labels; }
.bulk-actions-bar .bulk-row-statuts { grid-area: statuts; }
.bulk-actions-bar .bulk-actions-extra { grid-area: actions; justify-content: flex-end; }
.bulk-row-statuts { gap: 20px; }
.bulk-actions-bar[hidden] { display: none; }
.bulk-actions-info strong { color: var(--brand); font-size: var(--font-lg); margin-right: 4px; }
.bulk-actions-buttons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bulk-actions-label { font-size: var(--font-sm); color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-right: 4px; }
.bulk-actions-buttons .ghost { font-size: var(--font-sm); padding: 6px 12px; }

/* Variante 3 colonnes : count | pastilles statuts | actions (csv/supprimer/désélectionner) */
.bulk-actions-bar--3col {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "info label delete";
}
.bulk-actions-bar--3col .bulk-actions-info { grid-area: info; }
.bulk-actions-bar--3col .bulk-actions-label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  margin-right: 0;
}
.bulk-actions-bar--3col .bulk-actions-delete {
  grid-area: delete;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bulk-actions-bar--3col .bulk-actions-label .ghost,
.bulk-actions-bar--3col .bulk-actions-delete .ghost { font-size: var(--font-sm); padding: 6px 12px; }

/* Pastilles bulk : reflet de l'état agrégé des ventes sélectionnées
   .bulk-all  = toutes les ventes sélectionnées ont le statut actif (fond vert)
   .bulk-some = partiellement (bordure + texte verts, fond neutre) */
.bulk-actions-bar--3col .bulk-actions-label .ghost.bulk-all {
  background: var(--status-ok-bg);
  border-color: var(--status-ok-border);
  color: var(--status-ok-text);
}
.bulk-actions-bar--3col .bulk-actions-label .ghost.bulk-some {
  border-color: var(--status-ok-border);
  color: var(--status-ok-text);
}

/* Vente à montant zéro : atténuer les pastilles Facturé / Payé (non pertinentes) */
.orders-table .row.sale-total-zero .toggle-btn[data-field="facture"],
.orders-table .row.sale-total-zero .toggle-btn[data-field="paye"] { opacity: 0.25; }
#sale-modal.sale-total-zero [data-role="sale-facture"],
#sale-modal.sale-total-zero [data-role="sale-paye"] { opacity: 0.25; }
#sales-bulk-clear, #clients-bulk-clear, #pdv-bulk-clear { color: var(--ink-soft); }
.bulk-label-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.bulk-label-pills .label-filter-btn { font-size: var(--font-xs); padding: 6px 12px; }

/* Bulk label pills : couleurs par groupe (heritees des --group-{id}-bg/text) */
.bulk-label-pills .label-filter-btn.client-label {
  background: var(--group-client-bg); color: var(--group-client-text);
  border-color: color-mix(in srgb, var(--group-client-text) 30%, transparent);
}
.bulk-label-pills .label-filter-btn.client-label:hover {
  background: var(--group-client-text); color: #fff; border-color: var(--group-client-text);
}
.bulk-label-pills .label-filter-btn.pdv-label {
  background: var(--group-pdv-bg); color: var(--group-pdv-text);
  border-color: color-mix(in srgb, var(--group-pdv-text) 30%, transparent);
}
.bulk-label-pills .label-filter-btn.pdv-label:hover {
  background: var(--group-pdv-text); color: #fff; border-color: var(--group-pdv-text);
}
.bulk-label-pills .label-filter-btn.fournisseur-label {
  background: var(--group-fournisseur-bg); color: var(--group-fournisseur-text);
  border-color: color-mix(in srgb, var(--group-fournisseur-text) 30%, transparent);
}
.bulk-label-pills .label-filter-btn.fournisseur-label:hover {
  background: var(--group-fournisseur-text); color: #fff; border-color: var(--group-fournisseur-text);
}
/* Etat actif (tous les candidats ont deja ce label) */
.bulk-label-pills .label-filter-btn.client-label.active {
  background: var(--group-client-text); color: #fff; border-color: var(--group-client-text);
}
.bulk-label-pills .label-filter-btn.pdv-label.active {
  background: var(--group-pdv-text); color: #fff; border-color: var(--group-pdv-text);
}
.bulk-label-pills .label-filter-btn.fournisseur-label.active {
  background: var(--group-fournisseur-text); color: #fff; border-color: var(--group-fournisseur-text);
}
/* Boutons statut (PDV) dans la bulk bar */
.bulk-toggle-group { display: inline-flex; align-items: center; gap: 6px; }
.bulk-toggle-group .toggle-btn { font-size: var(--font-xs); padding: 4px 10px; }
.bulk-toggle-group.disabled { opacity: 0.4; pointer-events: none; }

/* ── PDV sort bar ── */
.sort-bar-label {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-right: 4px;
}
.sort-bar-btn.active { color: var(--brand); font-weight: 700; border-color: transparent; }
.sort-bar-btn.sort-asc::after  { content: " ↑"; opacity: .7; }
.sort-bar-btn.sort-desc::after { content: " ↓"; opacity: .7; }

/* ── PDV pin separator ── */


/* Sale contact name link */
.sale-contact-link { cursor: pointer; }
.sale-contact-link:hover { color: var(--brand); text-decoration: underline; }

.dlc-cell { font-size: var(--font-sm); color: var(--ink-soft); }
.sale-dlc-line { display: block; font-size: var(--font-sm); color: var(--ink-soft); line-height: 1.5; white-space: nowrap; }
/* Astérisque discret signalant qu'une DLC affichée différente sera imprimée
   sur le bulletin de livraison (DLC réelle reste affichée dans la liste). */
.sale-dlc-override-mark {
  margin-left: 2px;
  color: var(--brand, #9b2e1f);
  font-weight: 700;
  cursor: help;
}

/* ── Bloc DLC personnalisées (sous "+ Ajouter une ligne") ───────────────── */
.sale-dlc-overrides { margin-top: 12px; }
.sale-dlc-overrides-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--ink, #2f241d);
}
.sale-dlc-overrides-head input[type="checkbox"] { margin: 0; cursor: pointer; }
.sale-dlc-overrides-sub {
  font-weight: 400;
  font-size: var(--font-xs);
  color: var(--ink-soft);
}
.sale-dlc-overrides-list {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-2, #faf5ee);
  border: 1px solid var(--stroke, #e5d8c8);
  border-radius: var(--radius-sm, 8px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
}
.sale-dlc-overrides-list[hidden] { display: none; }
.sale-dlc-overrides-list .article-label {
  font-size: var(--font-md);
  color: var(--ink, #2f241d);
}
.sale-dlc-overrides-list .article-real-dlc {
  font-size: var(--font-xs);
  color: var(--ink-soft);
  margin-left: 6px;
}
.sale-dlc-overrides-list input[type="date"] {
  font-size: var(--font-md);
  padding: 4px 6px;
  width: auto;
  min-width: 140px;
}
/* Cellule date + indicateur "+N jours" */
.sale-dlc-overrides-list .article-date-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sale-dlc-overrides-list .article-dlc-diff {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  white-space: nowrap;
  min-width: 60px;
}
.sale-dlc-overrides-empty {
  grid-column: 1 / -1;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
  padding: 4px 0;
}
.sale-prod-line { display: block; font-size: var(--font-sm); line-height: 1.5; white-space: nowrap; }
.sale-prod-line.cl { color: var(--fondue-cl-text); }
.sale-prod-line.bl { color: var(--fondue-bl-text); }
.sale-prod-line.cu { color: var(--fondue-fdc-text); }
.sale-prod-line.ca { color: var(--fondue-ca-text); }
/* Articles offerts (rabais 100%) : opacité réduite */
.sale-prod-line.sale-prod-offert { opacity: 0.35; }

/* Type badges */
.type-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: var(--font-xs);
  font-weight: 600;
  white-space: nowrap;
}
.type-badge.classique       { background: var(--fondue-cl-bg);  color: var(--fondue-cl-text); }
.type-badge.bleue           { background: var(--fondue-bl-bg);  color: var(--fondue-bl-text); }
.type-badge.classique-bleue { background: var(--fondue-cl-bg);  color: var(--fondue-cl-text); }
.type-badge.cabane          { background: var(--fondue-ca-bg);  color: var(--fondue-ca-text); }
.type-badge.clubs           { background: var(--fondue-fdc-bg); color: var(--fondue-fdc-text); }
.type-badge.cabane-clubs    { background: var(--fondue-ca-bg);  color: var(--fondue-ca-text); }

/* Toggle buttons */
.toggle-btn {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--stroke);
  background: transparent;
  color: var(--ink-soft);
  transition: all var(--transition);
  white-space: nowrap;
}
.toggle-btn:hover { border-color: var(--ink-soft); }
.toggle-btn[data-state="1"] { border-color: var(--status-ok-border); background: var(--status-ok-bg); color: var(--status-ok-text); }

/* ── Sale table (modal product grid) ── */

.sale-table { overflow-x: auto; }

.sale-table .row {
  /* 10 colonnes max (Poids cachée par défaut via [hidden] → display:none).
     N° | Article | Variante | Poids? | Qté | DLC | Rabais | Prix unit. | Total | Action

     Placement explicite (grid-column) sur chaque cellule pour préserver
     l'alignement vertical même quand Poids est cachée. Sans cela, les 9
     cellules visibles glissaient d'une piste vers la gauche : DLC héritait
     de la piste Qté (60px = trop étroit) et Rabais de la piste DLC (200px =
     trop large). Voir BUG-25 pour le contexte historique sur DLC 200px.

     La piste 4 (Poids) est à 0 par défaut (cachée). Quand au moins une ligne
     est en mode vente au poids, :has() élargit la piste 4 à 70px pour
     accueillir l'input kg. Tous les autres widths restent fixes. */
  grid-template-columns: 32px minmax(110px, 1.05fr) 64px 0 54px 110px 60px minmax(60px, 0.5fr) minmax(64px, 0.5fr) 36px;
  min-width: 640px;
}
.sale-table:has(.sale-col-weight:not([hidden])) .row {
  grid-template-columns: 32px minmax(110px, 1.05fr) 64px 60px 54px 110px 60px minmax(60px, 0.5fr) minmax(64px, 0.5fr) 36px;
}
.sale-table .row > div:nth-child(1)  { grid-column: 1; }
.sale-table .row > div:nth-child(2)  { grid-column: 2; }
.sale-table .row > div:nth-child(3)  { grid-column: 3; }
.sale-table .row > div:nth-child(4)  { grid-column: 4; }
.sale-table .row > div:nth-child(5)  { grid-column: 5; }
.sale-table .row > div:nth-child(6)  { grid-column: 6; }
.sale-table .row > div:nth-child(7)  { grid-column: 7; }
.sale-table .row > div:nth-child(8)  { grid-column: 8; }
.sale-table .row > div:nth-child(9)  { grid-column: 9; }
.sale-table .row > div:nth-child(10) { grid-column: 10; }
.sale-table .sale-col-weight[hidden] { display: none; }
/* Cellule produit : select + input "Saisie libre" empilés (input visible quand __free__ sélectionné) */
.sale-product-cell { display: flex; flex-direction: column; gap: 4px; }
.sale-product-cell input[data-role="free-label"][hidden] { display: none; }
/* Bugfix : aligner à droite la valeur poids (kg) dans la sale-row */
.sale-weight-input { text-align: right; font-variant-numeric: tabular-nums; }

.sale-table .input.tiny { min-width: 0; width: 100%; }
.sale-table .icon-btn { width: 36px; height: 36px; }
/* Prix unit. en mode auto (= catalog × (1 - rabais)) : grisé italique pour signaler
   "valeur par défaut". Dès que l'utilisateur saisit une valeur, la classe est
   retirée → couleur normale. */
.sale-table input[data-role="unit-price"].unit-price-default {
  color: var(--ink-soft);
  font-style: italic;
}
.sale-line-number { font-weight: 700; color: var(--brand); font-size: var(--font-md); }
.lieu-cell { font-size: var(--font-sm); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.sale-total-label { font-size: var(--font-md); color: var(--ink-soft); }

/* ── Search ── */

.search-block {
  display: grid;
  grid-template-columns: minmax(320px, 2fr) auto;
  gap: 10px;
  align-items: end;
}

.search-input-wrap .input { width: 100%; min-width: 0; }
.search-results { margin-top: 6px; }

.search-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

/* ── Create block ── */

.create-block {
  display: none;
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px dashed var(--stroke);
  background: var(--bg-edit);
}

.create-block.show { display: grid; gap: 12px; }
.create-block .primary { width: auto; justify-self: start; }

/* ── Note ── */

.note { font-size: var(--font-sm); color: var(--ink-soft); }

/* ── Icon buttons / delete buttons ──────────────────────────────────────────
   Même structure (grid centré, border-radius, transition). .delete-btn est
   masqué par défaut, révélé en mode édition (voir règles plus bas). */
.icon-btn,
.delete-btn {
  border-radius: var(--radius-sm);
  place-items: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.icon-btn {
  display: grid;
  width: 34px;
  height: 34px;
  border: 1px solid var(--stroke);
  background: #fff;
}
.icon-btn:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); }

.delete-btn {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  background: color-mix(in srgb, var(--brand) 5%, transparent);
  color: var(--brand);
}

.delete-btn:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.card.editing .delete-btn,
.ref-label-section.editing .delete-btn,
.contact-group-block.editing .delete-btn { display: inline-grid; }
.sale-table .delete-btn { display: inline-grid; }
.sale-table .delete-btn svg { width: 18px; height: 18px; }

/* ── Edit panel ── */

.edit-panel {
  display: none;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px dashed var(--stroke);
  background: var(--bg-edit);
  margin: 12px 0;
}

.edit-panel.show { display: grid; gap: 10px; }
.edit-note { font-size: var(--font-sm); color: var(--ink-soft); }
/* Description permanente sous le titre d'une carte (visible uniquement quand
   la carte est déployée — placée dans .card-collapsible-body). */
.card-desc {
  margin: 0 0 12px;
  font-size: var(--font-sm);
  line-height: 1.45;
  color: var(--ink-soft);
}

.card.editing .table .row:not(.head) div {
  outline: 1px dashed rgba(0,0,0,0.07);
  border-radius: 4px;
}

.card.editing .list-main {
  background: #fff;
  border: 1px dashed var(--stroke);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ── Compact list ── */

.list.compact { gap: 4px; }

.list.compact .list-item {
  border: none;
  background: transparent;
  padding: 5px 0;
}

/* ── DLC & Lots tables ── */

.dlc-table,
.lots-table {
  display: grid;
  gap: 2px;
  max-height: 480px;
  overflow-y: auto;
  resize: vertical;
  /* Fade des dernières lignes pour signaler qu'il y a du scroll restant.
     Retiré via la classe .scroll-at-bottom (toggle JS). */
  mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
}
.dlc-table.scroll-at-bottom,
.dlc-table.scroll-not-needed,
.lots-table.scroll-at-bottom,
.lots-table.scroll-not-needed {
  mask-image: none;
  -webkit-mask-image: none;
}

/* Structure commune des tables DLC + Lots — seul grid-template-columns diffère. */
.dlc-head,
.dlc-row,
.lots-head,
.lots-row {
  display: grid;
  gap: 4px;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
}
.dlc-head,
.dlc-row { grid-template-columns: 1.2fr repeat(var(--dlc-type-cols, 4), 0.5fr) 1.2fr 0.8fr; }
.lots-head,
.lots-row { grid-template-columns: 0.8fr 2fr 0.8fr 0.8fr 1fr; }

.dlc-head,
.lots-head {
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 600;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--table-head-bg);
  color: #000;
}
.dlc-row { border: 1px solid var(--stroke); background: #fff; transition: background 0.3s ease; }
.lots-row { border: 1px solid var(--stroke); background: #fff; font-size: var(--font-md); }
.lots-row .lots-link-order { color: var(--brand); font-weight: 600; text-decoration: none; }
.lots-row .lots-link-edit { color: var(--ink-soft); font-size: var(--font-xs); text-decoration: none; border-bottom: 1px dashed var(--ink-soft); }
.lots-head .lots-sort-head { cursor: pointer; }
.lots-empty { padding: 16px; text-align: center; font-size: var(--font-md); color: var(--ink-soft); }
.dlc-cell-icon { display: flex; align-items: center; justify-content: center; font-size: var(--font-base); border-radius: 6px; padding: 4px; min-width: 24px; min-height: 24px; }
.dlc-cell-icon.active { background: var(--brand); color: #fff; font-weight: 700; }
.dlc-cell-icon.empty { background: var(--surface-alt, #f5f5f0); color: var(--surface-alt, #f5f5f0); }
.dlc-cell-icon.depleted { background: var(--bg-2); color: var(--ink-soft); opacity: 0.5; }

/* Vue dérivée : cellule de type grisée (tous les lots épuisés) */
.dlc-table .dlc-cell { display: flex; align-items: center; justify-content: center; }
.dlc-cell.depleted { opacity: 0.35; }
.dlc-cell.depleted input[type="checkbox"] { accent-color: var(--ink-soft); }
.dlc-row-derived input[type="checkbox"]:disabled { cursor: help; }
.dlc-row-derived .dlc-date-disp { cursor: default; }
.dlc-row-derived .dlc-date-disp:hover { border-bottom-color: transparent; color: inherit; }

/* DLC date cell */
.dlc-date-cell { display: flex; align-items: center; gap: 4px; }
.dlc-date-disp { cursor: pointer; font-size: var(--font-md); border-bottom: 1px dashed transparent; transition: border-color var(--transition); }
.dlc-date-disp:hover { border-bottom-color: var(--brand); color: var(--brand); }
.dlc-date-pick { width: 130px; padding: 4px 6px; font-size: var(--font-sm); min-height: auto; }

/* Drag handle — hidden by default for flex-based lists */
.drag-handle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: grab;
  color: #bbb;
  padding: 0;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color var(--transition);
}
.drag-handle:hover { color: var(--ink-soft); }
.drag-handle:active { cursor: grabbing; }
.card.editing .drag-handle,
.ref-label-section.editing .drag-handle,
.contact-group-block.editing .drag-handle,
.cat-list .drag-handle { display: flex; }
/* Indicateurs de drop horizontaux (catégories en .poids-row côte à côte) */
.cat-list .list-item.drag-over-left  { box-shadow: -2px 0 0 var(--brand); }
.cat-list .list-item.drag-over-right { box-shadow:  2px 0 0 var(--brand); }

/* DLC drag handle: always a grid item (visibility, not display) */
.dlc-drag {
  display: flex !important;  /* keep as grid column even when not editing */
  visibility: hidden;
}
.card.editing .dlc-drag { visibility: visible; }

/* DLC delete button: always a grid item, only visible in edit mode */
.dlc-row .delete-btn {
  display: inline-grid !important;  /* always occupies the last column */
  visibility: hidden;
}
.card.editing .dlc-row .delete-btn { visibility: visible; }

/* Drag-and-drop feedback */
.dragging { opacity: 0.45; }
.drag-over-top    { box-shadow: 0 -2px 0 var(--brand); }
.drag-over-bottom { box-shadow: 0 2px 0 var(--brand); }

/* List-item: flex with gap (drag + main + calc? + delete) */
.list-item { gap: 8px; justify-content: flex-start; }
.list-item .list-main { flex: 1; }

/* Poids row: horizontal */
.poids-row { display: flex; flex-wrap: wrap; gap: 8px; }
.poids-row .list-item { flex: 0 0 auto; border-radius: var(--radius); padding: 8px 14px; }

/* Rabais : 2 colonnes responsives — bascule sur 1 colonne sous 800px */
.rabais-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 800px) {
  .rabais-2col { grid-template-columns: 1fr; gap: 16px; }
}
.rabais-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rabais-col-title { font-weight: 600; font-size: var(--font-md); color: var(--ink); }
.rabais-col-base { font-size: var(--font-xs); color: var(--ink-soft); font-style: italic; }
.rabais-col .btn-add-rabais { margin-left: auto; }

/* Rabais table — header et items partagent EXACTEMENT le meme grid + placement
   explicite (grid-column) pour conserver l'alignement même quand drag-handle
   (col 1) et delete-btn (col 5) sont display:none hors mode édition. */
.rabais-table { display: grid; gap: 4px; margin-top: 4px; }
.rabais-head, .rabais-item {
  display: grid;
  grid-template-columns: 24px 1fr 80px minmax(120px, 1.5fr) 32px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.rabais-item > .drag-handle      { grid-column: 1; }
.rabais-item > .list-main        { grid-column: 2; }
.rabais-item > .rabais-calc      { grid-column: 3; }
.rabais-item > .rabais-designation { grid-column: 4; }
.rabais-item > .delete-btn       { grid-column: 5; }
.rabais-head {
  background: var(--table-head-bg);
  font-size: var(--font-sm);
  font-weight: 600;
}
.rabais-item .list-main { min-width: 0; }
.rabais-calc {
  text-align: right;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--brand);
}
.rabais-designation {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  min-width: 0;
}
.rabais-designation:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-muted, #bbb);
  font-style: italic;
}
.card.editing .rabais-designation[contenteditable="true"] {
  background: #fff; border: 1px dashed var(--stroke); padding: 2px 6px; border-radius: 6px;
}
.card.editing .rabais-calc[contenteditable="true"] {
  background: #fff; border: 1px dashed var(--stroke); padding: 2px 6px; border-radius: 6px;
}

/* ── Couleurs des fondues ── */

.fondue-colors-grid {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.fondue-color-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--stroke);
}
.fondue-color-row:last-child { border-bottom: none; padding-bottom: 4px; }

.fondue-preview {
  min-width: 90px;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}

.fondue-color-pair {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 160px;
}

.fondue-pair-label {
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  width: 38px;
  flex-shrink: 0;
}

.color-pick {
  -webkit-appearance: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  padding: 2px;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
}
.color-pick::-webkit-color-swatch-wrapper { padding: 0; }
.color-pick::-webkit-color-swatch { border: none; border-radius: 5px; }


/* PR F (2026-05-09) : styles .prix-card-body / .prix-group / .prix-grid-dyn /
   .prix-cell / .prix-empty supprimés — la card #prix-card a été retirée du
   DOM. Les prix sont désormais édités exclusivement dans la modal Article. */

/* ── Ref types table ── */
/* PR F+ (2026-05-09) : edit-toggle global de #ref-types-card supprimé. Plus
   de mode .editing sur cette card → grille fixe 4 colonnes, colonnes Fond +
   Texte définitivement masquées, bouton trash standalone définitivement masqué.
   La modale Article gère la totalité de l'édition (nom, couleurs, variantes,
   prix, composition, archivage). */
.ref-types-table .row { grid-template-columns: 2fr 1fr 1fr 36px; }
.ref-types-table .ref-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
/* Bouton trash standalone : conservé dans le DOM (anchor de
   injectEditButtonOnStaticRows) mais permanent display:none. */
.ref-types-table .ref-type-delete { display: none; }
/* Articles archivés : visuellement atténués mais toujours visibles + cliquables pour restaurer */
/* Styles archivés ref-types : unifiés via .is-archived (cf. ~ligne 2501). */
/* La couleur de border-left est appliquée en INLINE par appendArticleRowToRefTypesTable
   et injectEditButtonOnStaticRows (un seul endroit gère la couleur — pas de
   conflit avec d'éventuelles règles CSS spécifiques). */
.ref-types-table .row[data-ref-type] { border-left: 3px solid transparent; cursor: grab; }
.ref-types-table .row[data-ref-type].dragging { opacity: 0.4; cursor: grabbing; }
.ref-type-color { display: flex; align-items: center; justify-content: center; }
.ref-type-abbrev { display: flex; align-items: center; }
/* Colonnes Fond + Texte définitivement masquées (édition couleurs via la
   modale Article uniquement). Conservées dans le DOM des rows statiques pour
   compatibilité avec les fallbacks legacy de hydrateFondueColorsDOM. */
.ref-types-table .ref-type-color { display: none; }
.ref-types-table .color-pick { width: 28px; height: 28px; padding: 0; border: 2px solid var(--stroke); border-radius: 6px; cursor: pointer; background: none; }
.ref-types-table .fondue-preview { font-size: var(--font-xs); pointer-events: none; }

/* ── Collapsible card ── */
.card-collapsible .card-collapsible-body { overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease; max-height: 600px; opacity: 1; margin-top: 8px}
.card-collapsible.editing .card-collapsible-body { max-height: none; overflow: visible; }
.card-collapsible.collapsed .card-collapsible-body { max-height: 0; opacity: 0; }
/* Emails fournisseurs : la carte peut contenir plusieurs templates déployés à la fois,
   donc on lève la contrainte max-height pour laisser la carte grandir naturellement
   (scroll global de la page prend le relais). */
#emails-fournisseurs-card:not(.collapsed) .card-collapsible-body { max-height: none; overflow: visible; }

/* Liste des articles (ref-types) : idem. Le max-height 600px de card-collapsible-body
   coupait la dernière row quand le contenu dépassait. On laisse la card s'étendre
   naturellement, le scroll global prend le relais. */
#ref-types-card:not(.collapsed) .card-collapsible-body { max-height: none; overflow: visible; }
.card-collapsible > .card-head > .card-title { cursor: pointer; display: flex; align-items: center; gap: 6px; flex: 1; padding: 4px 0; }
/* Hover visuel sur toute la pile quand elle est repliée — cohérence avec
   .contacts-table .row:hover. Suggère qu'elle est cliquable. */
.card-collapsible { transition: background 0.15s ease; }
.card-collapsible.collapsed:hover { background: var(--hover-bg); cursor: pointer; }
.card-collapsible > .card-head > .card-title::before {
  content: '';
  display: inline-block; width: 10px; height: 10px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.25s ease;
}
.card-collapsible.collapsed > .card-head > .card-title::before { transform: rotate(-90deg); }


/* ── Fromages table ── */

.table-fromages .row {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2.5fr) 80px 52px 38px;
  align-items: center;
}
.fromage-prod-text { font-size: var(--font-md); overflow-wrap: break-word; word-break: break-word; }
.fromage-prod-select { white-space: normal; word-break: break-word; display: none; }
.card.editing .fromage-prod-select { display: block; width: 100%; }
.card.editing .fromage-prod-text { display: none; }

/* ── Matières premières (Produits achetés) ── */

.materials-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 12px;
}
/* Mode édition catégories : aucun style dédié — réutilise EXACTEMENT le design
   des listes "Modes de livraison / paiement" (.list.poids-row > .list-item +
   .btn-add-ref). L'édition est pilotée par l'edit-toggle principal de la carte
   Produits (voir materials.js / ui.js target 'materials'). */
/* Select catégorie inline dans la table (ex-style inline déplacé ici) */
/* .material-cat-select retiré : édition catégorie via la modale Produit. */
.material-chip {
  font: inherit;
  font-size: var(--font-sm);
  padding: 4px 10px;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.material-chip:hover { background: var(--hover-bg); color: var(--ink); }
.material-chip.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.table-materials {
  max-height: 60vh;
  overflow-y: auto;
  /* Padding bas + gouttière pour que la dernière ligne ne soit pas rognée
     par le scroll (les bordures/ombres de focus des .row ont besoin d'air). */
  padding-bottom: 12px;
  scroll-padding-bottom: 12px;
}
.table-materials .row {
  grid-template-columns:
    minmax(0, 1.4fr) /* Nom */
    minmax(0, 0.8fr) /* Catégorie */
    minmax(0, 1.3fr) /* Fournisseur */
    88px             /* Prix achat */
    88px             /* Prix vente */
    72px             /* Unité */
    124px            /* Suivi (Stock · DLC) */
    80px;            /* Actions (crayon + corbeille) */
  column-gap: 4px;
  align-items: center;
  /* Réserve la gouttière à gauche pour la bordure colorée (couleur d'accent
     du produit). Sans color → bordure transparente. */
  border-left: 3px solid transparent;
}
/* Cellule d'actions par-ligne : 2 boutons icônes alignés à droite. */
.table-materials .row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
/* Rangée des chips catégorie + bloc d'actions (crayon, ou ✕ + 💾 en édition). */
.materials-filters-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.materials-filters-row .materials-filters { flex: 1 1 auto; min-width: 0; }
.materials-cat-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 0 0 auto;
  padding-top: 4px;
}
.materials-cat-actions .icon-btn { padding: 4px; }
.materials-cat-actions .icon-btn.primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.materials-cat-actions .icon-btn.primary:hover { background: color-mix(in srgb, var(--brand) 85%, #000); }
.table-materials .material-sale-price { font-variant-numeric: tabular-nums; }
/* PR E3 sous-PR2a : sélecteur initial du type de commande */
.order-type-chooser {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.order-type-chooser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.order-type-chooser-title {
  font-size: 16px;
  font-weight: 600;
}
.order-type-chooser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .order-type-chooser-grid { grid-template-columns: 1fr; }
}
.order-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--bg);
  border: 2px solid var(--stroke);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  font-family: inherit;
  color: inherit;
}
.order-type-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.order-type-icon {
  font-size: 36px;
  line-height: 1;
}
.order-type-label {
  font-size: var(--font-lg);
  font-weight: 600;
}
.order-type-desc {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  line-height: 1.4;
}

/* PR E3 sous-PR DLC : section DLC Autres produits dans #dlc-view */
#dlc-products:empty { display: none; }
.dlc-products-section { margin-top: 16px; }
.dlc-products-title {
  font-size: var(--font-md);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}
.dlc-products-table {
  display: grid;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  overflow: hidden;
}
.dlc-products-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 2fr) 100px minmax(0, 1fr);
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--stroke);
  font-size: var(--font-md);
  align-items: center;
}
.dlc-products-row:last-child { border-bottom: none; }
.dlc-products-row--head {
  background: var(--bg-head);
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dlc-products-row.dlc-expired { background: #fee2e2; }
.dlc-products-row.dlc-expired:not(.dlc-products-row--head) { color: #b91c1c; }
.dlc-products-row.dlc-soon { background: #fef3c7; }

/* PR E3 sous-PR6 : section Stock Autres produits dans #tab-stock */
#stock-products:empty { display: none; }
.stock-products-table {
  display: grid;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  overflow: hidden;
}
.stock-products-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 80px 80px 100px;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--stroke);
  font-size: var(--font-md);
  align-items: center;
}
.stock-products-row:last-child { border-bottom: none; }
.stock-products-row--head {
  background: var(--bg-head);
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stock-products-dispo { font-weight: 600; font-variant-numeric: tabular-nums; }
.stock-products-dispo--low { color: #c44; }
.stock-products-dispo--zero { color: #c44; opacity: 0.6; }

/* PR E3 sous-PR2b : modale "Autres produits" */
.products-order-card {
  width: min(900px, 95vw);
  max-height: 90vh;
}
.po-lines-section {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  overflow: hidden;
}
.po-lines-head,
.po-line {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) 70px 100px 90px 130px 36px;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--stroke);
}
.po-lines-head {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-head);
}
.po-line:last-child { border-bottom: none; }
.po-line .input.tiny { width: 100%; padding: 4px 6px; }
.po-total { font-variant-numeric: tabular-nums; }
.po-lines-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 8px;
  background: rgba(0, 0, 0, 0.02);
}
.po-grand-total { font-size: var(--font-base); }
.po-grand-total strong { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .po-lines-head { display: none; }
  .po-line {
    grid-template-columns: 1fr 1fr 36px;
    grid-auto-flow: row;
  }
}

/* Liste des commandes "Autres produits" sous l'onglet Achats */
#products-orders-list:empty { display: none; }
.po-summary-row {
  border-bottom: 1px solid var(--stroke);
  padding: 8px 12px;
}
.po-summary-row:last-child { border-bottom: none; }
.po-summary-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-md);
}
.po-summary-total {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.po-summary-products {
  margin-top: 6px;
  padding-left: 16px;
  font-size: var(--font-sm);
}
.po-summary-line {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 2px 0;
}
/* Lignes d'items dans les cartes commandes "Autres produits" intégrées à la liste active */
.po-item-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 3px 0;
  font-size: var(--font-sm);
}
.po-item-row .r { text-align: right; font-variant-numeric: tabular-nums; }

/* Form inline de saisie d'un lot pour commandes "Autres produits" */
.po-lot-form-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.po-lot-form-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) 100px;
  gap: 8px;
  align-items: center;
  font-size: var(--font-md);
}
.po-lot-form-name { font-weight: 500; }
.po-lots-section { padding: 8px 0; }
.po-lots-section .lots-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.po-lots-section .lots-section-title { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* Badge "📦 Produits" pour distinguer les commandes Autres produits des fromages */
.order-type-badge {
  display: inline-block;
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: 4px;
  background: #f3e8ff;
  color: #6b21a8;
  font-size: var(--font-xs);
  font-weight: 600;
  vertical-align: middle;
}

.material-tracking-cell {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: var(--font-xs);
}
/* Libellé suivi en lecture (Stock · DLC). Plus de cases à cocher inline :
   l'édition se fait dans la modale Produit. */
.material-tracking-text { font-size: var(--font-sm); color: var(--ink-soft); }
/* Couleur d'accent du produit : appliquée en bordure gauche du .row via inline
   style (cf. renderRow). La colonne dédiée (pastille) a été supprimée. */
/* Toutes les cellules peuvent rétrécir sous leur contenu (sinon les <select>
   du mode édition imposent leur min-content et la grille ignore les fractions
   → les colonnes ne se redimensionnent pas en édition). */
.table-materials .row > * { min-width: 0; }
.table-materials .material-cat-cell,
.table-materials .material-supplier-cell,
.table-materials .material-unit-cell { min-width: 0; }
.table-materials .material-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Mobile : masque Catégorie (col 2) et Fournisseur (col 3) pour libérer la place. */
@media (max-width: 768px) {
  .table-materials .row {
    grid-template-columns:
      minmax(0, 1fr)   /* Nom */
      88px             /* Prix achat */
      88px             /* Prix vente */
      72px             /* Unité */
      124px            /* Suivi */
      80px;            /* Actions */
  }
  .table-materials .row > .material-cat-cell,
  .table-materials .row > .material-supplier-cell,
  .table-materials .row.head > div:nth-child(2),
  .table-materials .row.head > div:nth-child(3),
  .table-materials .material-archived > div:nth-child(2),
  .table-materials .material-archived > div:nth-child(3) { display: none; }
}
.table-materials .row.head {
  position: sticky;
  top: 0;
  z-index: 1;
  /* Hérite background: var(--bg-head) du .row.head global pour rester
     cohérent avec les tables des autres sections (sales / orders / contacts). */
  box-shadow: 0 1px 0 var(--stroke);
}
.table-materials .empty-row { display: block; grid-template-columns: none; }
.material-cat-cell,
.material-supplier-cell,
.material-unit-cell { font-size: var(--font-md); overflow-wrap: break-word; word-break: break-word; }
/* Selects inline (.material-*-select), checkboxes inline (.material-tracking-cb)
   et color picker inline (.material-color) ont été supprimés : l'édition d'un
   produit passe désormais par la modale Produit (#product-modal). */
/* ── Audit des archives orphelines (carte Maintenance) ── */
.archive-audit-body { padding-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.archive-audit-empty { padding: 8px 4px; font-size: 13px; }
.archive-audit-results { display: flex; flex-direction: column; gap: 12px; }
.archive-audit-section {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--card);
}
.archive-audit-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.archive-audit-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 4px 2px;
  font-size: 13px;
  cursor: pointer;
}
.archive-audit-row:hover { background: var(--hover-bg, color-mix(in srgb, var(--brand) 4%, transparent)); border-radius: 4px; }
.archive-audit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-audit-id { font-size: 11px; font-family: monospace; }
.archive-audit-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.archive-audit-note { font-size: 11px; padding-top: 4px; }
.archive-audit-note code { font-size: 10.5px; padding: 1px 4px; background: color-mix(in srgb, var(--ink-soft) 12%, transparent); border-radius: 3px; }

/* ── Marqueur unifié des entités archivées ──
   Appliquée partout (Products, Articles, futures listes archivables, …).
   Style fort : rouge atténué + italique + opacité réduite. Au hover, l'opacité
   remonte pour faciliter la lecture / le clic sur le bouton restaurer. */
.is-archived {
  opacity: 0.55;
  color: var(--danger);
  font-style: italic;
}
.is-archived:hover { opacity: 0.85; }
.is-archived .icon-btn,
.is-archived button { opacity: 1; }
/* Aliases historiques — propagent .is-archived */
.table-materials .material-archived,
.ref-types-table .row[data-archived="true"] {
  opacity: 0.55;
  color: var(--danger);
  font-style: italic;
}
.table-materials .material-archived:hover,
.ref-types-table .row[data-archived="true"]:hover { opacity: 0.85; }
.table-materials .material-new {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}

/* ── PDV list ── */
.pdv-primary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdv-primary .pdv-select {
  cursor: pointer;
  accent-color: var(--brand);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0 0 0 6px;
  order: 99;
}
.pdv-item.sale-selected > .pdv-primary { background: color-mix(in srgb, var(--brand) 6%, transparent); }

.client-table .row {
  grid-template-columns:
    40px               /* ID       */
    minmax(0, 2fr)     /* Nom      */
    minmax(0, .9fr)    /* Type     */
    minmax(0, 1.1fr)   /* Tél      */
    minmax(0, 1.4fr)   /* Email    */
    minmax(0, 1.3fr)   /* Adresse  */
    44px               /* CP       */
    minmax(0, 1fr)     /* Lieu     */
    minmax(0, .8fr)    /* Remarques*/
    48px               /* Actions (edit) */
    40px;              /* Checkbox */
}
.client-table .row > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-table .row > div.row-actions { overflow: visible; }

/* ── Responsive ventes: masquer colonnes progressivement ──────────────────
   Colonnes  1       2        3       4         5          6         7      8           9       10     11        12      13       14
             N°    Client    Lieu  Commande  Livraison  Envoi(Livr) DLC  Articles    Total  Livré Facturé   Payé   Actions Checkbox
*/

/* ≤ 1280px : masquer Lieu (col 3) */
@media (max-width: 1280px) {
  .orders-table .row {
    grid-template-columns: 52px minmax(90px,1fr) 84px 84px 62px 84px minmax(90px,1.2fr) 74px 52px 56px 52px 44px 36px;
  }
  .orders-table .row > :nth-child(3) { display: none; }
}

/* ≤ 1200px : masquer aussi DLC (col 7) */
@media (max-width: 1200px) {
  .orders-table .row {
    grid-template-columns: 52px minmax(90px,1fr) 84px 84px 62px minmax(90px,1.2fr) 74px 52px 56px 52px 44px 36px;
  }
  .orders-table .row > :nth-child(7) { display: none; }
}

/* ≤ 1050px : masquer aussi Envoi (col 6) */
@media (max-width: 1050px) {
  .orders-table .row {
    grid-template-columns: 52px minmax(90px,1fr) 82px 82px minmax(90px,1.2fr) 78px 58px 52px 52px 48px 36px;
  }
  .orders-table .row > :nth-child(6) { display: none; }
}

/* ≤ 900px : masquer aussi Articles (col 8) */
@media (max-width: 900px) {
  .orders-table .row {
    grid-template-columns: 52px minmax(90px,1fr) 78px 78px 72px 56px 50px 50px 48px 36px;
  }
  .orders-table .row > :nth-child(8) { display: none; }
}

/* ≤ 768px (mobile) : masquer N°, Livraison, Total et Payé → Client, Commande, Facturé, Livré, Actions, Checkbox */
@media (max-width: 768px) {
  .orders-table .row {
    grid-template-columns: minmax(100px, 1.2fr) 74px 58px 58px 48px 36px;
  }
  .orders-table .row > :nth-child(1),   /* N° */
  .orders-table .row > :nth-child(5),   /* Livraison */
  .orders-table .row > :nth-child(9),   /* Total CHF */
  .orders-table .row > :nth-child(12) { /* Payé */
    display: none;
  }
}

@media (max-width: 768px) {
  .client-table .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 8px 10px;
  }
  .client-table .row > div { display: none; }
  /* Nom: full width */
  .client-table .row > div:nth-child(1) {
    display: block;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Labels: next to nom */
  .client-table .row > div:nth-child(2) {
    display: flex;
    flex-shrink: 0;
    overflow: visible;
    white-space: normal;
  }
  /* Edit button (last child) */
  .client-table .row > div:last-child {
    display: block;
    flex-shrink: 0;
  }
  .client-table .row.head { display: none; }
}


.price-grid .row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.price-grid-compact .row { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── Button compact helpers ── */

#btn-new-contact-topbar { width: auto; padding: 10px 16px; align-self: flex-end; }

#client-search-results:empty { display: none; }

/* ── Animations ── */

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

/* ── Responsive ── */

@media (max-width: 900px) {
  .field-grid { grid-template-columns: 1fr 1fr; }
  .sale-context { grid-template-columns: 1fr 1fr; }
  .search-block { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Sidebar devient un panneau coulissant depuis la droite */
  .app { display: block; }

  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 264px;
    max-width: 85vw;
    height: 100vh;
    flex: none;
    padding: 20px 14px 80px;
    gap: 18px;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 90;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.28);
    overflow-y: auto;
  }

  .app.menu-open .sidebar { transform: translateX(0); }

  /* Libellés visibles dans le panneau coulissant */
  .brand-mark { display: flex; justify-content: flex-start; padding: 4px 4px 0; }
  .brand-mark img { max-width: 140px; }

  .nav { gap: 4px; }
  .nav-btn { padding: 10px 12px; justify-content: flex-start; gap: 10px; }
  .nav-icon { width: 17px; height: 17px; }
  .nav-label { display: inline; }
  .nav-btn::after { display: none; }

  /* Backdrop */
  .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 8, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 89;
  }
  .app.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }

  /* Bouton burger flottant en bas à droite — suit le thème actif (sidebar) */
  .menu-toggle {
    display: flex;
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sidebar-grad-1), var(--sidebar-grad-2));
    color: var(--sidebar-fg);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
    z-index: 95;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .menu-toggle:active { transform: scale(0.94); }

  .menu-toggle-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: var(--sidebar-fg);
    border-radius: 2px;
    transition: background 0.2s;
  }
  .menu-toggle-bars::before,
  .menu-toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--sidebar-fg);
    border-radius: 2px;
    transition: top 0.22s, transform 0.22s;
  }
  .menu-toggle-bars::before { top: -7px; }
  .menu-toggle-bars::after  { top: 7px; }

  .app.menu-open .menu-toggle-bars { background: transparent; }
  .app.menu-open .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .app.menu-open .menu-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

  #user-indicator {
    padding: 6px;
    justify-content: space-between;
    border-top-color: rgba(255, 240, 220, 0.18);
    color: rgba(255, 244, 235, 0.7);
  }
  #user-indicator .user-indicator-name { display: inline-flex; color: #fff; }

  .main { padding: 16px 16px 32px; }

  .cols-3 { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }

  .row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .modal { padding: 6px; }
  .modal-card { padding: 14px; border-radius: var(--radius-lg); max-height: 94vh; }
}

/* Mode burger forcé (toggle utilisateur via #user-indicator) — applique les
   mêmes styles que @media (max-width: 900px) pour la sidebar/menu burger,
   peu importe la largeur de l'écran. Activé par .app.force-mobile-menu. */
.app.force-mobile-menu { display: block; }
.app.force-mobile-menu .sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 264px;
  max-width: 85vw;
  height: 100vh;
  flex: none;
  padding: 20px 14px 80px;
  gap: 18px;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 90;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.28);
  overflow-y: auto;
}
.app.force-mobile-menu.menu-open .sidebar { transform: translateX(0); }
.app.force-mobile-menu .brand-mark { display: flex; justify-content: flex-start; padding: 4px 4px 0; }
.app.force-mobile-menu .brand-mark img { max-width: 100px; }
.app.force-mobile-menu .nav { gap: 4px; }
.app.force-mobile-menu .nav-btn { padding: 10px 12px; justify-content: flex-start; gap: 10px; }
.app.force-mobile-menu .nav-icon { width: 17px; height: 17px; }
.app.force-mobile-menu .nav-label { display: inline; }
.app.force-mobile-menu .nav-btn::after { display: none; }
.app.force-mobile-menu .menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 8, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 89;
}
.app.force-mobile-menu.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }
.app.force-mobile-menu .menu-toggle {
  display: flex;
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sidebar-grad-1), var(--sidebar-grad-2));
  color: var(--sidebar-fg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
  z-index: 95;
  transition: transform 0.2s, box-shadow 0.2s;
}
.app.force-mobile-menu .menu-toggle:active { transform: scale(0.94); }
.app.force-mobile-menu .menu-toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: var(--sidebar-fg);
  border-radius: 2px;
  transition: background 0.2s;
}
.app.force-mobile-menu .menu-toggle-bars::before,
.app.force-mobile-menu .menu-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--sidebar-fg);
  border-radius: 2px;
  transition: top 0.22s, transform 0.22s;
}
.app.force-mobile-menu .menu-toggle-bars::before { top: -7px; }
.app.force-mobile-menu .menu-toggle-bars::after  { top: 7px; }
.app.force-mobile-menu.menu-open .menu-toggle-bars { background: transparent; }
.app.force-mobile-menu.menu-open .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
.app.force-mobile-menu.menu-open .menu-toggle-bars::after  { top: 0; transform: rotate(-45deg); }
.app.force-mobile-menu #user-indicator {
  padding: 6px;
  justify-content: space-between;
  border-top-color: rgba(255, 240, 220, 0.18);
  color: rgba(255, 244, 235, 0.7);
}
.app.force-mobile-menu #user-indicator .user-indicator-name { display: inline-flex; color: #fff; }
.app.force-mobile-menu .main { padding: 16px 16px 32px; }

@media (max-width: 600px) {
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .span-2,
  .field-grid .span-3 { grid-column: span 1; }
  .sale-context { grid-template-columns: 1fr; }
  .top-actions .ghost { display: none; }
}

/* ── Costs section ────────────────────────────────────────── */

/* Mix table */
.costs-mix-table { display: grid; gap: 5px; }

.costs-mix-row {
  display: grid;
  /* PR E3 sous-PR5 : nb de colonnes formats dynamique (var --mix-cols posée par renderOrderMixGrid). */
  /* Bugfix : colonne Article élargie (200px) + cellules qty fixes (64px). */
  grid-template-columns: 200px repeat(var(--mix-cols, 4), 64px) 56px 44px;
  gap: 10px;
  align-items: center;
  font-size: var(--font-md);
  padding: 2px 0;
}
.costs-mix-row .input.tiny { width: 64px; max-width: 64px; }

.costs-mix-row .input.tiny {
  padding: 5px 6px;
  font-size: var(--font-sm);
  max-width: 72px;
}

.costs-mix-row.head {
  font-size: var(--font-xs);
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 4px;
}

.costs-mix-total { font-weight: 600; font-size: var(--font-md); text-align: center; }
.costs-mix-pct   { font-size: var(--font-sm); color: var(--ink-soft); text-align: right; }

/* Recipe badges */
.recipe-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.recipe-badge.cl { background: var(--fondue-cl-bg);  color: var(--fondue-cl-text); }
.recipe-badge.bl { background: var(--fondue-bl-bg);  color: var(--fondue-bl-text); }
.recipe-badge.cu { background: var(--fondue-fdc-bg); color: var(--fondue-fdc-text); }
.recipe-badge.ca { background: var(--fondue-ca-bg);  color: var(--fondue-ca-text); }

.recipe-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
}
.recipe-dot.cl { background: var(--fondue-cl-text); }
.recipe-dot.bl { background: var(--fondue-bl-text); }
.recipe-dot.cu { background: var(--fondue-fdc-text); }
.recipe-dot.ca { background: var(--fondue-ca-text); }

/* Disabled mix inputs */

/* Result card */
.costs-result    { display: grid; gap: 10px; }
.costs-kpi-row   { display: flex; justify-content: space-between; align-items: center; }
.costs-kpi-label { font-size: var(--font-md); color: var(--ink-soft); }
.costs-kpi-value { font-size: 16px; font-weight: 600; }
.costs-kpi-value.accent { color: var(--brand); }
.costs-kpi-value.strong { font-size: 22px; color: var(--profit-green); }
.costs-kpi-value.muted  { color: var(--ink-soft); }

.costs-bar-row   { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.costs-split-bar { flex: 1; height: 10px; background: #efe3d8; border-radius: 999px; overflow: hidden; }
.costs-split-profit {
  height: 100%;
  background: linear-gradient(90deg, #1e8a3a, #3fc96a);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.costs-bar-label  { font-size: var(--font-sm); font-weight: 600; }
.costs-bar-legend { display: flex; justify-content: space-between; font-size: var(--font-xs); }

/* Costs table */
.costs-table { display: grid; gap: 5px; }

.costs-row {
  display: grid;
  /* Colonnes : toggle | Description | Quantité | Prix unitaire | Coût | % charges
     Description plus modeste (1.8fr) et PU bornée (max 0.7fr, min 130px pour
     le sous-groupes prep cell), Quantité/Coût/% en pixels fixes pour rester
     alignées entre rows et avec l'en-tête. */
  grid-template-columns: 36px minmax(180px, 1.8fr) 100px minmax(130px, 0.7fr) 90px 76px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--stroke);
  font-size: var(--font-md);
  transition: border-color var(--transition);
}
/* Inputs dans la cell Description ou PU : largeur bornée pour ne pas absorber
   tout l'espace de la cellule. */
.costs-row input[type="number"].input.tiny {
  max-width: 76px;
}
.costs-row .costs-prep-cell input[type="number"].input.tiny {
  max-width: 64px;
}

.costs-row.head {
  background: var(--bg-head);
  font-weight: 600;
  font-size: var(--font-xs);
  color: #000;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.costs-row.costs-total-row {
  background: transparent;
  border-color: transparent;
  border-top: 2px solid var(--stroke);
  border-radius: 0;
  margin-top: 2px;
}

.costs-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  padding: 12px 0 4px;
  border-top: 1px solid var(--stroke);
  margin-top: 4px;
}
.costs-group-label:first-child { border-top: none; margin-top: 0; padding-top: 4px; }

.costs-row.costs-inactive { opacity: 0.45; }
.costs-row.costs-locked .cost-toggle { pointer-events: none; cursor: not-allowed; }
.costs-row.costs-locked .cost-toggle-track { opacity: 0.4; }

.costs-row.group-cl { background: var(--fondue-cl-bg);  border-color: var(--fondue-cl-bg); }
.costs-row.group-bl { background: var(--fondue-bl-bg);  border-color: var(--fondue-bl-bg); }
.costs-row.group-cu { background: var(--fondue-fdc-bg); border-color: var(--fondue-fdc-bg); }
.costs-row.group-ca { background: var(--fondue-ca-bg);  border-color: var(--fondue-ca-bg); }

.costs-row .r    { text-align: right; }
.costs-row .muted { color: var(--ink-soft); font-size: var(--font-sm); }

/* Revenue table override (PR Polish : 4 cols, plus de Unité ni PU) */
.costs-row-rev { grid-template-columns: 36px 2fr 110px 100px; }


/* Toggle switch */
.cost-toggle { display: inline-flex; cursor: pointer; }
.cost-toggle input { display: none; }

.cost-toggle-track {
  width: 28px; height: 16px;
  border-radius: 999px;
  background: #d0c8c0;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.cost-toggle-track::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.cost-toggle input:checked + .cost-toggle-track { background: var(--brand); }
.cost-toggle input:checked + .cost-toggle-track::after { left: 14px; }

/* Section label in commandes */
.costs-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 8px;
  font-weight: 600;
}

/* Recipe footer */
.costs-recipe-footer.cl { background: var(--fondue-cl-bg);  border: 1px solid var(--fondue-cl-bg); }
.costs-recipe-footer.bl { background: var(--fondue-bl-bg);  border: 1px solid var(--fondue-bl-bg); }
.costs-recipe-footer.cu { background: var(--fondue-fdc-bg); border: 1px solid var(--fondue-fdc-bg); }
.costs-recipe-footer.ca { background: var(--fondue-ca-bg);  border: 1px solid var(--fondue-ca-bg); }


/* ── Rentabilité : toggle de mode + Paniers ──────────────────────────────── */
/* Toggle Fondues/Paniers : vit dans .top-actions (topbar global, data-show-on=
   costs). navigation.js pose display:inline-flex ; même placement/wrap ≤768px
   que les boutons Importer/+Contact. Couleurs portées par .primary/.ghost
   (posées par paniers.js applyMode). */
.costs-mode-tabs { gap: 8px; align-items: center; }
.costs-mode-tab { line-height: 1; }

.panier-pos { color: var(--profit-green); }
.panier-neg { color: var(--danger); }
.panier-pct { display: block; font-size: var(--font-xs); opacity: 0.75; line-height: 1.2; }

/* Liste des paniers — chaque ligne est une carte dépliable (accordéon) */
.paniers-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.panier-list-row {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.panier-list-row:hover { border-color: var(--accent); }
.panier-list-row.open { border-color: var(--brand); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }

.panier-row-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  cursor: pointer;
}
.panier-row-head:hover { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.panier-list-row.open .panier-row-head { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.panier-list-main { min-width: 0; }
.panier-list-name { font-weight: 600; font-size: var(--font-base); display: flex; align-items: center; gap: 6px; }
.panier-list-sub { font-size: var(--font-sm); margin-top: 2px; }
.panier-list-benef { font-weight: 700; font-size: var(--font-lg); white-space: nowrap; }
.panier-row-actions { display: flex; gap: 6px; align-items: center; }
.panier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--status-ok-bg);
  color: var(--status-ok-text);
}

/* Panneau déplié (éditeur intégré dans la ligne) */
.panier-expand { padding: 4px 14px 16px; border-top: 1px solid var(--stroke); }
.panier-expand-head { margin: 12px 0 4px; }
.panier-title-in { font-size: var(--font-base); font-weight: 600; max-width: 340px; }
.panier-expand-foot { display: flex; justify-content: flex-start; margin-top: 14px; }
.panier-add-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.panier-add-bar #panier-add-select { max-width: 320px; flex: 1 1 220px; }

.panier-table { display: grid; gap: 4px; overflow-x: auto; }
.panier-line {
  display: grid;
  grid-template-columns: 20px minmax(78px, 0.9fr) minmax(58px, 0.6fr) minmax(46px, 0.45fr) 60px 104px 56px 44px 64px 66px 26px;
  gap: 6px;
  align-items: center;
  font-size: var(--font-md);
  padding: 5px 0;
  min-width: 680px;
}
.panier-line.head { font-weight: 600; color: var(--ink-soft); font-size: var(--font-xs); border-bottom: 1px solid var(--stroke); padding-bottom: 6px; }
.panier-line:not(.head) { border-bottom: 1px solid color-mix(in srgb, var(--stroke) 55%, transparent); }
.panier-line .input.tiny { width: 100%; max-width: 100%; padding: 4px 5px; font-size: var(--font-sm); }
/* Boutons d'action compacts pour tenir dans les colonnes serrées du tableau panier */
.panier-line .icon-btn { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.panier-line .icon-btn svg { width: 13px; height: 13px; }
.panier-drag { cursor: grab; color: var(--ink-soft); display: flex; justify-content: center; }
.panier-drag:active { cursor: grabbing; }
.panier-line.dragging { opacity: 0.5; }
.panier-col-prod, .panier-col-sup, .panier-col-cat { min-width: 0; }
/* Cellule Produit : select produit + (optionnel) select variante empilés */
.panier-col-prod { display: flex; flex-direction: column; gap: 3px; }
.panier-col-prod .input.tiny { width: 100%; }
.panier-line-variante { font-size: var(--font-xs); }
.panier-col-sup .muted, .panier-col-cat .muted {
  font-size: var(--font-xs); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panier-col-dosage .input.tiny { width: 100%; }
.panier-col-buy { display: flex; gap: 4px; }
.panier-col-buy .input.tiny { min-width: 0; }
.panier-col-buy input.input.tiny { flex: 1 1 auto; }
.panier-col-buy select.input.tiny { flex: 0 0 44px; width: 44px; padding-left: 2px; padding-right: 0; }
.panier-cell-total, .panier-cell-marge { font-variant-numeric: tabular-nums; }
.panier-line .r { text-align: right; }
.panier-empty { padding: 14px; }
/* Champs non résolus au transfert Article↔Panier — à compléter par l'utilisateur */
.panier-line--review { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.panier-cell--review .input.tiny,
.panier-cell--review select.input.tiny {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.panier-review-note {
  font-size: var(--font-sm);
  color: var(--brand);
  margin: 6px 0;
  font-weight: 500;
}

.panier-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-top: 12px; }
.panier-foot-fields { display: flex; gap: 16px; flex-wrap: wrap; }
.panier-foot-fields label { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-sm); color: var(--ink-soft); }
.panier-foot-fields .input.tiny { width: 120px; }
.panier-summary { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 24px; }
.panier-kpi { display: flex; flex-direction: column; gap: 2px; }
.panier-kpi-l { font-size: var(--font-xs); color: var(--ink-soft); }
.panier-kpi-v { font-size: var(--font-base); font-weight: 600; }
.panier-kpi--strong .panier-kpi-v { font-size: 18px; font-weight: 700; }
@media (max-width: 700px) {
  .panier-row-head { grid-template-columns: 1fr auto; }
  .panier-list-benef { grid-column: 1; grid-row: 2; }
  .panier-summary { grid-template-columns: repeat(2, auto); }
}

/* ── Global responsive < 1280px ────────────────────────────────────────────── */
@media (max-width: 1280px) {

  /* All multi-column grids become single column */
  .cols-2 { grid-template-columns: 1fr !important; }
  .cols-3 { grid-template-columns: 1fr !important; }
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .order-header { grid-template-columns: 1fr 1fr 1fr; }

  /* Mix de production: keep label inline with inputs (largeurs fixes pour
     éviter que les champs qty prennent 100% en responsive). */
  .costs-mix-row {
    grid-template-columns: 180px repeat(var(--mix-cols, 4), 60px) 50px 36px;
    gap: 6px;
  }
  .costs-mix-row .input.tiny {
    width: 60px;
    max-width: 60px;
    padding: 4px 4px;
    font-size: var(--font-sm);
  }
  /* Charges table: toggle+desc on line 1, numeric data on line 2 (qty+unit fusionnés) */
  .costs-row {
    grid-template-columns: 36px 1fr 1fr 1fr 1fr;
    row-gap: 4px;
  }
  .costs-row > :nth-child(1) { grid-row: 1; grid-column: 1; }
  .costs-row > :nth-child(2) { grid-row: 1; grid-column: 2 / 6; }
  .costs-row > :nth-child(3) { grid-row: 2; grid-column: 2; }
  .costs-row > :nth-child(4) { grid-row: 2; grid-column: 3; }
  .costs-row > :nth-child(5) { grid-row: 2; grid-column: 4; }
  .costs-row > :nth-child(6) { grid-row: 2; grid-column: 5; }

  /* Revenue table (4 cols) — desc full-width on line 1, qty+rev on line 2 */
  .costs-row-rev {
    grid-template-columns: 36px 1fr 1fr;
  }
  .costs-row-rev > :nth-child(2) { grid-column: 2 / 4; }
  .costs-row-rev > :nth-child(3) { grid-row: 2; grid-column: 2; }
  .costs-row-rev > :nth-child(4) { grid-row: 2; grid-column: 3; }

  /* Recettes: 3 cols → 1 col */
  #tab-costs .cols-3 { grid-template-columns: 1fr; }
}

/* ── Labels — couleurs par groupe ──────────────────────────────────────────
   Les variables --group-*-bg / --group-*-text sont déclarées dans le bloc :root
   au top du fichier (single source of truth). Les 3 variantes partagent
   structure et fond/couleur via --lbl-bg/--lbl-fg (scopés par sélecteur). */
.label-tag.pdv-label,
.label-tag.client-label,
.label-tag.fournisseur-label {
  padding: 2px 8px;
  font-size: var(--font-xs);
  border-radius: 12px;
  background: var(--lbl-bg);
  color: var(--lbl-fg);
  border-color: color-mix(in srgb, var(--lbl-fg) 30%, transparent);
}
.label-tag.pdv-label         { --lbl-bg: var(--group-pdv-bg);         --lbl-fg: var(--group-pdv-text); }
.label-tag.client-label      { --lbl-bg: var(--group-client-bg);      --lbl-fg: var(--group-client-text); }
.label-tag.fournisseur-label { --lbl-bg: var(--group-fournisseur-bg); --lbl-fg: var(--group-fournisseur-text); }

.label-tag.pdv-label.active,         .label-tag.pdv-label:hover,
.label-tag.client-label.active,      .label-tag.client-label:hover,
.label-tag.fournisseur-label.active, .label-tag.fournisseur-label:hover {
  background: var(--lbl-fg);
  color: #fff;
  border-color: var(--lbl-fg);
}

/* ── Label section separators ── */

/* ── PDV section titles (active + inactive) ── */
.pdv-active-title .badge { background: var(--brand); color: #fff; }
.pdv-inactive-title .badge { background: var(--bg-2); color: var(--ink-soft); }
.pdv-item.inactive { opacity: 0.55; }
.pdv-item.inactive .pdv-primary { background: var(--bg-2); }

/* ── Contacts unified table ── */
.contacts-table .row {
  grid-template-columns:
    40px               /* ID       */
    minmax(0, 2fr)     /* Nom      */
    minmax(0, 1.2fr)   /* Labels   */
    minmax(0, 1fr)     /* Tél      */
    minmax(0, 1.2fr)   /* Email    */
    60px               /* NPA      */
    minmax(0, .8fr)    /* Lieu     */
    48px               /* Actions  */
    36px;              /* Checkbox */
}
.contacts-table .contact-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.contacts-table .row > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contacts-table .row > div.row-actions { overflow: visible; }
.contacts-table .row > div.contact-labels-cell {
  overflow: visible;
  white-space: normal;
}
.contacts-table .row:not(.head) {
  cursor: pointer;
}
.contacts-table .row:not(.head):hover {
  background: var(--hover-bg);
}
.contacts-table .row.expanded {
  background: var(--card);
}
.contacts-table .row.inactive {
  opacity: 0.55;
}
.contacts-table .row.sale-selected {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}
.contacts-table .contact-tel-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contacts-table .contact-tel-cell .tel2 {
  font-size: var(--font-xs);
  color: var(--ink-soft);
}

/* ── Contacts toolbar & filters ── */
#tab-contacts .toolbar { flex-direction: column; align-items: stretch; }
.contact-group-tab svg { vertical-align: -2px; margin-right: 4px; }
.contact-search-wrap { flex: 1; position: relative; }
#contact-search { width: 100%; padding-right: 28px; }
#contact-filter-count { font-size: var(--font-sm); color: var(--ink-soft); font-style: italic; white-space: nowrap; }
.archived-controls svg { vertical-align: -1px; }
.bulk-actions-buttons.bulk-actions-extra { margin-top: 6px; }

/* ── Supplier order modal ── */
#supplier-order-modal .modal-card { max-width: 440px; }
#supplier-order-modal .modal-body { padding: 16px 0 0; }
.so-form { display: flex; flex-direction: column; gap: 12px; }
.so-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#so-total { background: var(--surface-raised, var(--bg-2)); font-weight: 600; }
#supplier-order-modal .modal-footer { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; }

/* ── Contact group sub-tabs ── */
.contact-group-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.contact-group-tab {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--ink-soft);
  font-size: var(--font-md);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}
.contact-group-tab:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.contact-group-tab.active {
  background: var(--ink);
  color: var(--card);
  border-color: var(--ink);
  font-weight: 600;
}
.contact-group-tab[data-group="client"] {
  background: var(--group-client-bg);
  color: var(--group-client-text);
  border-color: color-mix(in srgb, var(--group-client-text) 30%, transparent);
}
.contact-group-tab[data-group="client"].active {
  background: var(--group-client-text);
  border-color: var(--group-client-text);
  color: #fff;
}
.contact-group-tab[data-group="pdv"] {
  background: var(--group-pdv-bg);
  color: var(--group-pdv-text);
  border-color: color-mix(in srgb, var(--group-pdv-text) 30%, transparent);
}
.contact-group-tab[data-group="pdv"].active {
  background: var(--group-pdv-text);
  border-color: var(--group-pdv-text);
  color: #fff;
}
.contact-group-tab[data-group="fournisseur"] {
  background: var(--group-fournisseur-bg);
  color: var(--group-fournisseur-text);
  border-color: color-mix(in srgb, var(--group-fournisseur-text) 30%, transparent);
}
.contact-group-tab[data-group="fournisseur"].active {
  background: var(--group-fournisseur-text);
  border-color: var(--group-fournisseur-text);
  color: #fff;
}

/* Pastille "Nouveaux" : poussée à droite, gris par défaut, noir si active.
   Affiche les contacts auto-créés par webhook e-shop pas encore acquittés. */
.contact-new-tab {
  margin-left: auto;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: var(--bg-2);
  color: var(--ink-soft);
  font-size: var(--font-md);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.contact-new-tab:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.contact-new-tab.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
}
.contact-new-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
}
.contact-new-tab.active .contact-new-count {
  background: #fff;
  color: var(--ink);
}
.contact-new-count[hidden] { display: none; }

/* Pastille label de filtre "vide" (aucun contact n'a ce label) : grisée + non cliquable */
.label-filter-btn.empty {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* ── Contact expand detail ── */
.contact-row-detail {
  display: none;
  grid-column: 1 / -1;
  padding: 12px 16px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin: 0 0 4px;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.contact-row-detail.show { display: flex; }
.contact-row-detail .stat-item { min-width: 120px; }
.contact-row-detail .stat-item em {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-style: normal;
  margin-bottom: 2px;
}
.contact-row-detail .stat-item strong { font-size: var(--font-base); }

/* ── Contact group blocks ── */
.contact-group-block { padding: 4px 0; }
.contact-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.contact-group-name {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--ink);
  min-width: 80px;
}
/* Inputs name / colors / delete : masques par defaut, visibles uniquement en mode edit global */
.contact-group-name-input,
.contact-group-block .group-color-label,
.contact-group-block .group-delete-btn,
.contact-group-block .contact-group-add-label-row { display: none; }
.contact-group-block.editing .contact-group-name { display: none; }
.contact-group-block.editing .contact-group-name-input,
.contact-group-block.editing .group-color-label,
.contact-group-block.editing .contact-group-add-label-row { display: flex; }
.contact-group-block.editing .group-delete-btn { display: inline-grid; }
.contact-group-name-input {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--ink);
  border: 1px solid var(--stroke);
  border-radius: 4px;
  padding: 3px 8px;
  min-width: 120px;
}
.group-color-label {
  font-size: var(--font-xs);
  color: var(--ink-soft);
  align-items: center;
  gap: 4px;
}
.group-color-label input[type="color"] {
  width: 28px;
  height: 22px;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.group-color-preview {
  padding: 2px 10px;
  font-size: var(--font-xs);
  border-radius: 12px;
}
/* Boutons "+ Ajouter un groupe" (en haut) et "+ Ajouter un label" (par groupe) */
.contact-groups-add-row,
.contact-group-add-label-row { margin: 8px 0; }
.btn-add-group-card,
.btn-add-label-group {
  font-size: var(--font-sm);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.btn-add-group-card { background: var(--bg-2, #f3f4f6); color: var(--ink); border: 1px dashed var(--stroke); }
.btn-add-label-group { background: var(--bg, #fafafa); color: var(--ink-soft); border: 1px dashed var(--stroke); }
.btn-add-group-card:hover { border-color: var(--ink-soft); }
.btn-add-label-group:hover { border-color: var(--ink-soft); color: var(--ink); }
/* Le bouton "+ Ajouter un groupe" et "+ Ajouter un label" ne s'affichent qu'en mode edit global */
#card-labels-contact:not(.editing) .contact-groups-add-row { display: none; }

/* ── Mobile contacts ── */
@media (max-width: 768px) {
  .contacts-table .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 8px 10px;
  }
  .contacts-table .row > div { display: none; }
  .contacts-table .row > div:nth-child(2) {
    display: block;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Labels masqués en mobile pour donner toute la place au nom (point 5). */
  /* .contacts-table .row > div:nth-child(3) reste display:none (hérité). */
  .contacts-table .row > div:nth-child(8) {
    display: block;
    flex-shrink: 0;
  }
  .contacts-table .row.head { display: none; }
  .contact-group-tabs { overflow-x: auto; }
}

#tab-contacts .card { overflow: auto; }

/* ── Client row expand in-place (legacy, kept for compatibility) ── */
.client-row-detail.show { display: flex; }
.client-row-detail .stat-item { min-width: 120px; }
.client-row-detail .stat-item em {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-style: normal;
  margin-bottom: 2px;
}
.client-row-detail .stat-item strong { font-size: var(--font-base); }
.client-table .row.expanded { background: var(--card); }

/* ── PDV label filter bar ── */
.label-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.label-filter-btn {
  padding: 7px 12px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--ink-soft);
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}
.label-filter-btn:hover { border-color: var(--accent); color: var(--ink); }
.label-filter-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Variantes par groupe — même structure que .label-tag.*-label, factorisée
   via --lbl-bg/--lbl-fg scopés par sélecteur. */
.label-filter-btn.client-filter-btn,
.label-filter-btn.pdv-filter-btn,
.label-filter-btn.fournisseur-filter-btn,
.label-filter-btn.inactive-filter-btn {
  background: var(--lbl-bg);
  color: var(--lbl-fg);
  border-color: var(--lbl-border, color-mix(in srgb, var(--lbl-fg) 30%, transparent));
}
.label-filter-btn.client-filter-btn      { --lbl-bg: var(--group-client-bg);      --lbl-fg: var(--group-client-text); }
.label-filter-btn.pdv-filter-btn         { --lbl-bg: var(--group-pdv-bg);         --lbl-fg: var(--group-pdv-text); }
.label-filter-btn.fournisseur-filter-btn { --lbl-bg: var(--group-fournisseur-bg); --lbl-fg: var(--group-fournisseur-text); }
.label-filter-btn.inactive-filter-btn    { --lbl-bg: var(--bg-2);                 --lbl-fg: var(--ink-soft); --lbl-border: var(--stroke); }

.label-filter-btn.client-filter-btn.active,
.label-filter-btn.pdv-filter-btn.active,
.label-filter-btn.fournisseur-filter-btn.active,
.label-filter-btn.inactive-filter-btn.active {
  background: var(--lbl-fg);
  color: #fff;
  border-color: var(--lbl-fg);
}

/* ── Archived contacts toggle ── */
/* ── Archived controls ── */
.archived-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 4px;
}
.status-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  font-weight: 600;
  min-width: 90px;
}
.status-filter-label svg { vertical-align: -1px; }
.contact-row[data-archived="1"] .contact-id::after {
  content: 'archivé';
  font-size: 9px;
  color: var(--ink-soft);
  margin-left: 4px;
  font-style: italic;
}

/* ── Section Commande ── */

.card-head--tight { margin-bottom: 8px; }
.card-head--wrap  { flex-wrap: wrap; gap: 8px; }
.card-title--inline { margin: 0; }
.filter-bar { display: flex; align-items: center; gap: 8px; }
.filter-count { font-size: var(--font-sm); color: var(--ink-soft); font-style: italic; white-space: nowrap; }
.order-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
}
.order-save-btn { min-width: 220px; }
.order-summary-pad { padding: 8px 0; }
#order-history-season { min-width: 130px; }

.order-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.order-cheese-table {
  display: flex;
  flex-direction: column;
}
.order-cheese-row {
  display: grid;
  /* Largeurs revues + gap pour éviter le chevauchement de "Qté nette"
     (.order-col-net) sur les colonnes voisines (BUG-28). */
  grid-template-columns: 1.5fr 0.7fr 0.7fr 0.9fr 0.7fr 0.9fr;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--stroke);
  font-size: var(--font-md);
}
.order-cheese-row > div { padding: 0 4px; }
/* "Qté nette" highlight : padding interne sans negative margin (le gap+padding
   parent gère déjà la séparation, plus besoin de mordre sur les voisins). */
.order-col-net {
  background: rgba(210, 162, 76, 0.12);
  border-radius: 4px;
  padding: 4px 6px;
}

.order-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-base);
}

.order-history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.order-history-table {
  display: flex;
  flex-direction: column;
}
/* En-têtes (head) des tables order-cheese / order-history — pattern partagé. */
.order-cheese-row.head,
.order-history-row.head {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--stroke);
  padding-bottom: 8px;
}
.order-history-actions button.danger:hover {
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
  color: var(--brand);
}

/* ── Commandes en cours ── */
.active-order {
  border: 1px solid var(--stroke);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--card);
}
.active-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.active-order-header .order-id {
  font-weight: 700;
  font-size: var(--font-lg);
}
.active-order-header .order-dates {
  font-size: var(--font-sm);
  color: var(--ink-soft);
}
.active-order-table {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.active-order-row {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 1fr;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--stroke);
  font-size: var(--font-md);
}
.active-order-row.head {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--stroke);
  padding-bottom: 6px;
}
.reception-row { grid-template-columns: 1.5fr 0.8fr 1fr 0.7fr; }
.order-received-col {
  background: rgba(210, 162, 76, 0.12);
  border-radius: 4px;
  padding: 4px 6px;
}
.active-order-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Badges d'étape commande ── */
.stage-badge {
  display: inline-block;
  font-size: var(--font-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  vertical-align: middle;
}
.stage-badge.stage-cheese   { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.stage-badge.stage-fondue   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.stage-badge.stage-stock    { background: var(--status-ok-bg); color: var(--status-ok-text); border-color: var(--status-ok-border); }
.stage-badge.stage-archived { background: var(--bg-2); color: var(--ink-soft); border-color: var(--stroke); }

/* ── Section Lots / Livraisons ── */
.lots-section {
  border-top: 1px dashed var(--stroke);
  margin-top: 10px;
  padding-top: 10px;
  margin-bottom: 12px;
}
.lots-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.lots-section-title {
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.lots-section-count {
  font-size: var(--font-xs);
  color: var(--ink-soft);
}
.lots-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lot-row {
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 8px 12px;
  position: relative;
}
.lot-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
/* Refonte BUG-? (12 mai 2026) : header en 2 colonnes — lot-id + lot-meta empilés à gauche,
   actions Delete/Print/Edit à droite. lot-meta passe sous lot-id. */
.lot-row-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.lot-row-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lot-row-header-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
/* Mode édition : on cache les boutons Delete/Print/Edit pour éviter les actions destructrices
   pendant l'édition. Save/Close apparaissent en haut à droite du .lot-edit-form. */
.lot-row.editing .lot-row-header-actions { visibility: hidden; }
.lot-row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}
.lot-row-actions-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lot-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--ink);
}
.lot-meta {
  font-size: var(--font-xs);
  color: var(--ink-soft);
}

/* Pastille statut "En stock / Épuisé" (remplace l'ancien bouton "Marquer comme épuisé") */
.lot-status-pill {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 3px 12px;
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  transition: filter .12s ease;
}
.lot-status-pill.in-stock {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}
.lot-status-pill.depleted {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}
.lot-status-pill:hover { filter: brightness(0.95); }

/* Badge "En stock / Épuisé" dans la liste archived-lots-line (un par lot, par ligne) */
.archived-lots-line .archived-lot-line-item {
  display: block;
  padding: 1px 0;
}
.lot-status-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: 600;
}
.lot-status-badge.in-stock { background: #dcfce7; color: #15803d; }
.lot-status-badge.depleted { background: #fee2e2; color: #b91c1c; }

/* Form d'édition d'un lot — actions Save/Close en haut à droite (en absolute) */
.lot-edit-form {
  position: relative;
  margin-top: 8px;
  padding: 12px;
  padding-top: 36px; /* laisse de la place sous les actions absolues */
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
}
.lot-edit-form-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.lot-edit-form-actions .lot-edit-form-close {
  padding: 5px 8px;
  line-height: 1;
  font-size: 16px;
}
.lot-edit-form-dates {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}
.lot-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lot-type-chip {
  display: inline-block;
  font-size: var(--font-xs);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .08s ease, box-shadow .08s ease, opacity .12s ease;
  user-select: none;
}
.lot-type-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.lot-type-chip:active { transform: translateY(0); }
.lot-type-chip.cl { background: var(--fondue-cl-bg);  color: var(--fondue-cl-text); }
.lot-type-chip.bl { background: var(--fondue-bl-bg);  color: var(--fondue-bl-text); }
.lot-type-chip.cu { background: var(--fondue-fdc-bg); color: var(--fondue-fdc-text); }
.lot-type-chip.ca { background: var(--fondue-ca-bg);  color: var(--fondue-ca-text); }
.lot-type-chip.depleted {
  opacity: 0.4;
  text-decoration: line-through;
}
.lot-type-chip.depleted:hover {
  opacity: 0.7;
}
.lot-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Modale lot (enregistrer une livraison) ── */
.lot-modal-label {
  display: block;
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.lot-modal-dates {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.lot-modal-grid-wrap {
  margin-bottom: 16px;
}
.lot-modal-type-row {
  display: grid;
  grid-template-columns: 170px repeat(4, 84px) 36px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--stroke);
}
/* Sans surcharge, `.input { min-width: 160px }` global fait déborder les inputs 84px. */
.lot-modal-type-row > select[data-lot-type-select] {
  font-size: var(--font-md);
  font-weight: 600;
  padding: 6px 8px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.lot-modal-type-row .lot-modal-cell .input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.lot-modal-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px;
}
.lot-modal-type-row.head {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--stroke);
}
.lot-modal-type-label {
  font-size: var(--font-md);
  font-weight: 600;
}
.lot-modal-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.lot-modal-cell .input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 6px 8px;
}
/* Glow animé sur le champ DLC du formulaire lot — utilise --brand pour rester
   cohérent avec le thème actif (au lieu du rouge "erreur" hardcodé). */
.lot-dlc-glow {
  animation: dlcGlow 2s ease-in-out infinite;
}
@keyframes dlcGlow {
  0%, 100% {
    box-shadow: 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent);
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  }
  50% {
    box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 60%, transparent);
    border-color: color-mix(in srgb, var(--brand) 80%, transparent);
  }
}

.lot-modal-remaining {
  font-size: 10px;
  color: var(--ink-soft);
  text-align: right;
  font-style: normal;
  font-weight: 400;
  height: 14px;
  line-height: 14px;
  overflow: hidden;
}
.lot-modal-remaining.zero { color: var(--ink-soft); }
.lot-modal-remaining.over { color: var(--danger); }
.lot-modal-remaining.positive { color: #22c55e; }
.lot-modal-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-radius: 8px;
  /* Refonte 10 mai 2026 : preview ID du lot remonté en tête de body
     → margin-bottom pour espacer des inputs date qui suivent.
     (Avant : margin-top, car preview en bas de body.) */
  margin-bottom: 12px;
}
.lot-modal-preview .lot-id {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--ink);
}

/* ── Lot inline form (refonte UX 10 mai 2026 — BUG-33) ─────────────────────
   Note : visibilité par défaut gérée par inline style="display:none" sur le
   markup (toggled à '' par le handler [data-add-lot]). On NE met PAS display
   dans cette règle — sinon `style.display=''` ne saurait pas révéler. */
.lot-inline-form {
  margin-top: 12px;
  padding: 16px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
}
.lot-inline-form-head {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lot-inline-form-preview {
  /* override .lot-modal-preview margin-bottom hérité (qui s'appliquait à la
     position bas avant la refonte). Ici on est dans une row flex, pas besoin. */
  flex: 1;
  margin: 0;
}
.lot-inline-form-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.lot-inline-form-close {
  padding: 5px 10px;
  line-height: 1;
  font-size: 16px;
}
.lot-inline-form-dates {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

/* ── Search with clear button ── */
.search-with-clear { position: relative; display: flex; align-items: center; }
.search-clear-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
  padding: 2px 6px;
  border-radius: 50%;
  transition: color .1s, background .1s;
}
.search-clear-btn:hover { color: var(--brand); background: rgba(0,0,0,0.05); }

/* ── Login overlay ── */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
}
.login-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 40px 36px 32px;
  width: 320px;
  max-width: 90vw;
  box-shadow: 0 12px 40px rgba(47, 36, 29, 0.12);
  text-align: center;
}
.login-logo {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.login-field {
  text-align: left;
  margin-bottom: 14px;
}
.login-field label {
  display: block;
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.login-field .input {
  width: 100%;
  box-sizing: border-box;
}
.login-btn {
  margin-top: 8px;
  padding: 12px 24px;
  font-size: var(--font-base);
  font-weight: 600;
}

/* ── Déconnexion auto sur inactivité (modale de compte à rebours) ── */
.idle-logout-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000; /* au-dessus de tout, y compris #login-overlay et modales */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(47, 36, 29, 0.45);
  backdrop-filter: blur(2px);
}
.idle-logout-overlay.show { display: flex; }
.idle-logout-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 28px 32px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 12px 40px rgba(47, 36, 29, 0.18);
  text-align: center;
}
.idle-logout-title {
  margin: 0 0 10px;
  font-size: var(--font-lg);
  color: var(--ink);
}
.idle-logout-text {
  margin: 0 0 20px;
  font-size: var(--font-base);
  color: var(--ink-soft);
}
.idle-logout-count {
  font-weight: 700;
  color: var(--danger);
}
.idle-logout-stay {
  padding: 11px 22px;
  font-size: var(--font-base);
  font-weight: 600;
}

/* ── User indicator (sidebar/bottom) ── */
#user-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  font-size: var(--font-sm);
  color: var(--sidebar-fg);
  opacity: 0.75;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: auto;
}
#user-indicator .user-indicator-name { opacity: 1; }
.user-indicator-action-btn { padding: 4px; }
.user-indicator-action-btn svg { display: block; }

/* ── Pastilles utilisateurs (avatars avec initiale)
   Fond = couleur de page, texte + bordure = couleur primaire du thème.
   Comme la sidebar est elle-même en couleur primaire, l'inversion garantit le contraste.
   Chaque pastille peut porter ses propres `--brand` / `--bg` en inline style
   (utilisés pour rendre la pastille d'un autre user dans sa propre couleur de thème). */
.user-indicator-avatars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}
.user-indicator-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--brand);
  border: 2px solid var(--brand);
  box-sizing: border-box;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  flex: 0 0 auto;
  user-select: none;
}

/* ── Recipe cards (modal) ── */
.recipe-card {
  border: 2px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
  break-inside: avoid;
}
.recipe-card-cl { border-left: 5px solid #d4a017; }
.recipe-card-bl { border-left: 5px solid #4a7fb5; }
.recipe-card-cu { border-left: 5px solid #5a9a5a; }
.recipe-card-ca { border-left: 5px solid #8a6ab5; }

.recipe-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.recipe-card-format {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.recipe-card-count {
  font-size: 16px;
  color: var(--ink-soft);
  font-weight: 500;
}

.recipe-card-table { font-size: var(--font-base); }
.recipe-card-table-4col .recipe-card-row { grid-template-columns: 1.6fr 0.6fr 1fr 1fr; }
.recipe-card-row {
  display: grid;
  grid-template-columns: 1.6fr 0.6fr 1fr;
  padding: 8px 0;
  border-bottom: 1px solid var(--stroke);
  align-items: center;
}
.recipe-card-row.head {
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--stroke);
  padding-bottom: 8px;
}
.recipe-card-row.total {
  border-top: 2px solid var(--ink);
  border-bottom: none;
  font-weight: 700;
}
.recipe-card-row.grey { opacity: 0.5; }

.recipe-pct-badge {
  display: inline-block;
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--font-md);
  font-weight: 600;
  cursor: help;
  position: relative;
}

/* Écart % vs recette de référence (affiché à l'écran seulement) */
.recipe-pct-diff {
  display: inline-block;
  margin-left: 4px;
  font-size: var(--font-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: help;
}
.recipe-pct-diff.neutral  { color: var(--ink-soft); }
.recipe-pct-diff.positive { color: var(--green, #2a7d2a); }
.recipe-pct-diff.negative { color: var(--red, #c0392b); }
/* ── Tooltips custom (remplacent les tooltips natifs HTML title) ──────────
   Rendus par js/tooltips.js avec un délai d'apparition court (200ms). */
.custom-tooltip {
  position: fixed;
  background: var(--tooltip-bg);
  color: #fff4eb;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: var(--font-sm);
  font-family: inherit;
  line-height: 1.4;
  max-width: 320px;
  white-space: pre-line;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-out;
}
.custom-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.recipe-pct-badge[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tooltip-bg);
  color: #fff4eb;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: var(--font-xs);
  font-weight: 400;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── Print styles ── */
/* Géré dans print.css (lié dans index.html avec media="print") */

/* ── Migrated inline-style utilities ──────────────────────────────────────── */

/* Noscript */
.noscript-msg { padding: 2rem; text-align: center; font-size: 1.1rem; }

/* Costs section */
.flex-gap-6 { display: flex; gap: 6px; }
.costs-kpi-label--bold { font-weight: 600; }
.costs-profit-sub-label { font-size: var(--font-sm); color: var(--ink-soft); }
.costs-profit-sub-value { font-size: var(--font-md); font-weight: 600; color: var(--ink-soft); }
.costs-bar-label--profit { color: #2a8a45; min-width: 32px; }
.costs-bar-label--charges { color: var(--ink-soft); min-width: 32px; text-align: right; }
.costs-legend-profit { color: #2a8a45; }
.costs-legend-charges { color: var(--ink-soft); }
.costs-prep-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--font-sm); }
.costs-input-w62 { width: 62px; }
.costs-input-w72 { width: 72px; }
.costs-input-w54 { width: 54px; }
.costs-input-w52 { width: 52px; }
.costs-revient-label { font-size: var(--font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 6px; }
.costs-mix-table--small { font-size: var(--font-sm); }
.costs-row--profit-summary { background: transparent; border: none; color: var(--ink-soft); font-size: var(--font-sm); }
.costs-profit-total { font-weight: 700; color: var(--ink); }

/* Settings section */
.toolbar--end { justify-content: flex-end; }
.field-grid--2col { grid-template-columns: 1fr 1fr; }
.settings-save-wrap { margin-top: 10px; display: flex; justify-content: flex-end; }
.btn--compact { font-size: var(--font-sm); padding: 6px 16px; }
.edit-note--template { margin-bottom: 8px; font-size: var(--font-sm); color: var(--ink-soft); }

/* Params section */
.params-contact-pad { padding: 8px 0; }
.params-loading { font-size: var(--font-md); color: var(--ink-soft); }
.params-contact-empty { font-size: var(--font-md); color: var(--ink-soft); margin: 0; }
.params-contact-fiche {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
}
.params-contact-fiche-body { flex: 1; }
.params-contact-fiche-name { font-weight: 700; font-size: var(--font-base); }
.params-contact-fiche-infos { font-size: var(--font-sm); color: var(--ink-soft); margin-top: 2px; }
.params-contact-fiche-actions { display: flex; align-items: center; gap: 6px; }
.params-contact-fiche-edit { padding: 6px 10px; }
.params-contact-fiche-unlink { padding: 6px 10px; font-size: var(--font-sm); }
/* Bouton "lien" inline dans un texte (utilisé pour "Re-lier automatiquement") */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand);
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}
.link-btn:hover { color: var(--brand-2); }

/* Sale modal — statuts */
.sale-statuts-label { margin-bottom: 8px; }
.sale-statuts-row { display: flex; gap: 20px; flex-wrap: wrap; }
.sale-statut-item { display: flex; align-items: center; gap: 8px; font-size: var(--font-md); color: var(--ink-soft); }

/* Sale modal — section titles (inline create blocks) */
.section-title--sub { font-size: var(--font-sm); margin-bottom: 4px; }

/* Sale modal — input full width */
.input--full { width: 100%; }

/* Sale modal — canton uppercase */
.input--uppercase { text-transform: uppercase; }

/* Sale modal — add row */
.btn--justify-start { justify-self: start; }

/* Sale modal — shipping */
.shipping-options { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.shipping-label { display: flex; align-items: center; gap: 8px; font-size: var(--font-base); cursor: pointer; white-space: nowrap; }
.shipping-weight-input { width: 65px; text-align: right; }
.shipping-detail { font-size: var(--font-base); color: var(--ink); margin-top: 10px; text-align: right; font-weight: 500; }

/* Sale modal — bloc récap totaux (3 lignes) */
.sale-totals-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  border-top: 1px solid var(--stroke);
  padding-top: 10px;
}
.sale-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-md);
  color: var(--ink-soft);
}
.sale-total-row--final {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  margin-top: 4px;
  border-top: 1px solid var(--stroke);
  padding-top: 8px;
}

/* Sale modal — remarques textarea */
.input--textarea-full { resize: vertical; min-width: 0; width: 100%; }

/* Contact modal */
.modal-card--contact { max-width: 640px; width: 95vw; }
.modal-header-actions { display: flex; gap: 4px; align-items: center; }
.btn--icon-pad { padding: 6px 8px 3px 8px; }

/* Responsive mobile (≤ 700px) — modales d'édition Vente / Contact / Article :
   header en colonne avec actions en haut, eyebrow puis modal-title en dessous.
   Pour les écrans plus larges, l'affichage 2 colonnes (titre à gauche, boutons
   à droite) est conservé. */
@media (max-width: 700px) {
  #sale-modal .modal-header,
  #contact-modal .modal-header,
  #article-modal .modal-header {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  #sale-modal .modal-actions,
  #contact-modal .modal-header-actions,
  #article-modal .modal-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
.contact-groups-row { display: flex; gap: 16px; align-items: center; padding-top: 6px; }
.contact-group-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.contact-toggles-row { display: flex; gap: 24px; align-items: center; }
.contact-toggle-item { display: flex; align-items: center; gap: 10px; font-size: var(--font-md); color: var(--ink-soft); }
.toggle-btn--sm { font-size: var(--font-sm); min-width: 56px; }
.contact-section-head { font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--stroke); }
.contact-labels-client-row--mb { margin-bottom: 8px; }
.contact-facturation-check-wrap { margin-bottom: 10px; }
.contact-facturation-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--font-md); }
.field-grid--no-pad { padding: 0; }
.textarea--resizable { resize: vertical; }
.lot-muted-sub { font-weight: 400; font-size: var(--font-xs); }

/* Recipe weight selects */

/* Email modal */
.btn--close-sm { padding: 6px 10px; }
.modal-body--scroll { max-height: 70vh; overflow-y: auto; }

/* Recipe modal */
.modal-card--recipe { max-width: 700px; }
.recipe-modal-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.recipe-caisse-global {
  font-size: var(--font-md);
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--stroke);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
}
.btn--print-sm { padding: 6px 12px; font-size: var(--font-sm); }

/* Article create modal */
.modal-card--article { max-width: 720px; width: 95vw; }
.article-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  padding: 0 0 12px;
}
.article-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.article-form .field--full { grid-column: 1 / -1; }
.article-form .field > span {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  font-weight: 500;
}
/* PR1 modale Article : 3 colonnes Nom Complet / Court / Diminutif */
.article-form .field-row-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px 16px;
}
.article-form .field-row-3 > .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* PR1 modale Article : colorpickers compacts inline (label + picker même ligne) */
.article-form .field-row-colors {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.article-form .field--inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  font-weight: 500;
}
.color-pick--sm {
  width: 28px;
  height: 24px;
}

/* PR3 modale Article : section Mode prix + tableau Variantes/Prix unifié */
.article-prices-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.article-prices-mode {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  font-weight: 500;
}
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 400;
}
.article-prices-table {
  display: grid;
  gap: 4px;
}
.article-prices-row {
  display: grid;
  grid-template-columns: 1fr 90px 150px 44px;
  column-gap: 8px;
  align-items: center;
}
.vp-price-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.vp-price-cell .input { flex: 1 1 auto; min-width: 0; }
.vp-price-unit { font-size: var(--font-xs); white-space: nowrap; min-width: 42px; text-align: left; }
.article-prices-row.head {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0 0 2px;
}
.article-prices-row .r {
  text-align: right;
}
.vp-delete-btn {
  padding: 0;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
}
#btn-add-variant-row {
  align-self: flex-start;
  font-size: 0.85em;
}

/* PR F (2026-05-09) : styles .prix-group--weight / .prix-grid-weight /
   .prix-cell--weight / .prix-variantes-list supprimés — card #prix-card retirée. */

.article-tracking-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 4px;
}
.article-tracking-row .checkbox {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: var(--font-md);
  cursor: pointer;
}
.article-unitcost-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
}
.article-unitcost-row .input { max-width: 160px; }
.article-unitcost-hint {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 6px;
}
.article-unitcost-auto-val {
  font-size: var(--font-sm);
  color: var(--ink-soft);
}
.article-unitcost-hint .btn-sm {
  font-size: var(--font-sm);
  padding: 4px 10px;
}
.article-unitcost-hint .btn-sm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.modal-section-title {
  margin: 16px 0 8px;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--ink);
}
.article-composition {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* La table composition se déploie librement dans la hauteur de la modale ; le
   scroll est assuré par .modal-body (un seul niveau de scroll, pas de double). */
.table-composition {
  /* pas de max-height ni overflow ici */
}
/* Toutes les rows partagent la même grille (4 colonnes), peu importe le mode,
   pour rester alignées quand on bascule entre %, g et Qté. */
.table-composition .row {
  grid-template-columns: 1fr 80px 100px 32px;
  align-items: center;
  gap: 8px;
}
/* Sticky head : reste visible quand on scrolle dans la table composition. */
.table-composition .row.head {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}
/* Aligne les en-têtes des colonnes numériques (Qté, Variante) avec leur contenu (input à droite). */
.table-composition .row.head > div.r { text-align: right; }
.table-composition .composition-product { width: 100%; }
.table-composition .composition-pct,
.table-composition .composition-qty,
.table-composition .composition-gramme {
  width: 100%;
  max-width: 80px;
  text-align: right;
  padding: 4px 6px;
}
.composition-snapshot {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  text-align: right;
  white-space: nowrap;
}
/* PR F1 : wrapper en mode qty pour caser le select variante + le snapshot dans la même cellule. */
.composition-qty-extra {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.composition-qty-extra .composition-variante {
  max-width: 70px;
  font-size: var(--font-sm);
  padding: 2px 4px;
}
.composition-qty-extra .composition-snapshot {
  flex-shrink: 0;
}
.table-composition .composition-remove {
  justify-self: end;
}
.composition-mode-row {
  display: flex;
  gap: 16px;
  padding: 4px 0 8px;
  flex-wrap: wrap;
}
.composition-mode-row .checkbox {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: var(--font-md);
  cursor: pointer;
}
.composition-sum-line {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  text-align: right;
  padding-top: 4px;
}
.composition-sum-line #art-composition-sum.ok   { color: #166534; font-weight: 600; }
.composition-sum-line #art-composition-sum.warn { color: #b45309; font-weight: 600; }
@media (max-width: 640px) {
  .article-form { grid-template-columns: 1fr; }
}

/* Lot modal */
.lot-modal-body--scroll { max-height: 75vh; overflow-y: auto; }
.lot-modal-flex1 { flex: 1; }

/* Import modal */
.modal-card--import { max-width: 520px; width: 95vw; }
.import-desc { margin: 0 0 16px; color: var(--ink-soft); font-size: var(--font-md); }
.import-dropzone-icon { color: var(--ink-soft); }
.import-dropzone-title { margin: 8px 0 4px; font-weight: 600; }
.import-dropzone-hint { margin: 0; font-size: var(--font-sm); color: var(--ink-soft); }
.import-preview-wrap { margin-top: 16px; }
.import-preview-title { font-size: var(--font-md); font-weight: 600; margin-bottom: 8px; }
.import-preview-content { max-height: 200px; overflow-y: auto; font-size: var(--font-sm); border: 1px solid var(--stroke); border-radius: 8px; padding: 10px; }
.import-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
.import-template-wrap { margin-top: 12px; }
.import-template-link { font-size: var(--font-sm); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Import ────────────────────────────────────────────────────────────────── */
.import-btn {
  gap: 6px;
  font-size: var(--font-md);
}
.import-btn svg { flex-shrink: 0; }

.import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  border: 2px dashed var(--stroke);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--bg);
}
.import-dropzone:hover,
.import-dropzone.drag-over {
  border-color: var(--accent);
  background: rgba(210, 162, 76, 0.08);
}

#import-preview table th {
  background: var(--bg-2);
  position: sticky;
  top: 0;
}

#import-modal .modal-card { max-width: 600px; }

/* ── Emails fournisseurs ──────────────────────────────────────────────── */

.email-supplier-block {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 5px;
}

.email-supplier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: var(--font-md);
}

.email-supplier-config {
  padding: 0 14px 14px;
  border-top: 1px solid var(--stroke);
}

.email-supplier-config .field-grid {
  margin-top: 12px;
}

/* Rich text toolbar */
.email-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: var(--bg-head);
  border: 1px solid var(--stroke);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.email-toolbar button,
.email-toolbar .email-color-label {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: var(--font-md);
  font-family: inherit;
  color: var(--ink);
  line-height: 1.2;
}

.email-toolbar button:hover,
.email-toolbar .email-color-label:hover {
  background: rgba(0,0,0,0.06);
  border-color: var(--stroke);
}

.email-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--stroke);
  margin: 0 4px;
}


.email-color-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #e44;
  text-underline-offset: 2px;
}

/* Contenteditable editor */
.email-editor {
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fff;
  font-family: inherit;
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--ink);
  outline: none;
}

.email-editor:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.email-editor:empty::before {
  content: attr(placeholder);
  color: var(--ink-soft);
  opacity: 0.6;
  pointer-events: none;
}

/* Client detail actions */
.client-detail-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.client-detail-actions button {
  font-size: var(--font-sm);
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.client-detail-actions button svg {
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* Liste des achats d'un fournisseur (inline dans contact-row-detail) */
.fournisseur-orders-list {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
}
.fournisseur-orders-empty {
  font-size: var(--font-sm);
  font-style: italic;
  padding: 4px 0;
}
.fournisseur-orders-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-sm);
}
.fournisseur-orders-row {
  display: grid;
  grid-template-columns: 130px 90px 1.5fr 90px 1fr;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  align-items: center;
}
.fournisseur-orders-row.head {
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border-bottom: 1px solid var(--stroke);
  border-radius: 0;
  padding-bottom: 4px;
}
.fournisseur-orders-row:not(.head):nth-child(even) { background: rgba(0, 0, 0, 0.02); }
.fournisseur-orders-row .r { text-align: right; font-variant-numeric: tabular-nums; }
.fournisseur-order-cheese { display: inline-block; }
.fournisseur-order-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.fournisseur-order-kind.kind-prod { background: var(--brand); color: #fff; }
.fournisseur-order-kind.kind-direct { background: var(--ink-soft); color: #fff; }


/* Order header icon buttons */
.order-header-icons {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.order-header-icons .icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: #fff;
  cursor: pointer;
  color: var(--ink-soft);
  transition: border-color 0.15s, background 0.15s;
}

.order-header-icons .icon-btn:hover {
  border-color: var(--stroke-hover);
  color: var(--ink);
}

.order-header-icons .icon-btn.danger:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  color: var(--brand-2);
  background: color-mix(in srgb, var(--brand) 4%, transparent);
}

.order-header-icons .icon-btn[disabled] {
  pointer-events: none;
}

.archived-order {
  opacity: 0.85;
  border-color: var(--brand);
  transition: background 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
}
.archived-order .active-order-details {
  cursor: default;
}

.archived-order:hover {
  opacity: 1;
}

/* Hover visuel sur toute la pile quand son détail est replié — cohérence avec
   .contacts-table .row:hover. Le clic-toggle reste lié au .active-order-header. */
.archived-order:has(> .active-order-details[style*="display: none"]):hover {
  background: var(--hover-bg);
  cursor: pointer;
}

/* Email preview modal */
.email-preview-block {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fff;
}

.email-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.email-preview-subject {
  font-size: var(--font-md);
  font-weight: 600;
  padding: 6px 0;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 8px;
}

.email-preview-body {
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--ink);
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 0;
}

/* Email editor overlay (on top of email modal) */
.email-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 16, 0.6);
  display: none;
  place-items: center;
  padding: 16px;
  z-index: 150;
  backdrop-filter: blur(3px);
}

.email-editor-overlay.show {
  display: grid;
}

.email-editor-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  width: 96vw;
  max-width: 700px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Toast notification */
.email-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: var(--font-md);
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 300;
}

.email-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Order Stepper ── */
.order-stepper {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--card);
}
/* Refonte 10 mai 2026 : en édition d'une commande existante, le bloc création
   est déplacé dans la card. Le mini-stepper du wizard (1-2) est alors masqué
   pour éviter le doublon avec le stepper unifié 1-6 de la card. */
.active-order.editing #order-creation-stepper { display: none; }
.order-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: default;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  text-align: center;
  user-select: none;
}
.order-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: var(--font-xs);
  font-weight: 700;
  background: var(--bg-2);
  color: var(--ink-soft);
  flex-shrink: 0;
}
.order-step.done {
  border-bottom-color: var(--brand);
  color: var(--ink-soft);
  cursor: pointer;
}
.order-step.done .step-num {
  background: var(--brand);
  color: #fff;
}
.order-step.active {
  border-bottom: none;
  color: #fff;
  background: var(--brand);
  font-weight: 700;
}
.order-step.active .step-num {
  background: #fff;
  color: var(--brand);
}
.order-step.locked {
  opacity: 0.35;
  cursor: default;
}

/* Barre d'actions alignée à droite dans les panels d'étape (5, 6, 7). */
.step-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}

/* Étape Recette (étape 5 depuis la fusion 2+3) : panel ajustement immuables */
.step-recipe-panel { padding: 8px 0; }
.step-recipe-intro {
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 12px;
  background: var(--panel, #fcf5e8);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.step-recipe-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}
.step-recipe-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.step-recipe-item:has(input:checked) {
  background: rgba(210, 162, 76, 0.1);
  border-color: var(--brand);
}
.step-recipe-qty {
  color: var(--ink-soft);
  font-size: var(--font-sm);
  margin-left: auto;
}

/* Pendant l'édition d'un achat existant : masque les autres commandes actives
   pour regrouper visuellement les étapes 1-3 (wizard) et 4-7 (carte commande). */
.active-order.hidden-during-edit { display: none; }
.order-step.done:hover {
  background: rgba(210, 162, 76, 0.08);
}

/* ── Email Step 4 — Inline supplier list ── */
.order-emails-step {
  padding: 8px 0;
}
.order-emails-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
}
.order-emails-all input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}
.email-supplier-list {
  display: flex;
  flex-direction: column;
}
.email-supplier-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--stroke);
  border-radius: 6px;
  transition: background 0.2s;
}
.email-supplier-row:last-child { border-bottom: none; }
.email-supplier-row.sent {
  background: #dcfce7;
}
.email-sent-badge {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d4a24c;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.email-sent-badge.sent {
  background: #22c55e;
}
.supplier-name {
  font-weight: 600;
  font-size: var(--font-md);
  min-width: 160px;
  white-space: nowrap;
}
.supplier-cheeses {
  font-size: var(--font-xs);
  color: var(--ink-soft);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.supplier-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.supplier-actions button {
  background: none;
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
}
.supplier-actions button:hover {
  background: var(--bg-2);
  color: var(--ink);
  border-color: var(--ink-soft);
}
/* Texto popup inline */
.texto-popup {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 16, 0.5);
  display: grid;
  place-items: center;
  z-index: 200;
  backdrop-filter: blur(2px);
}
.texto-popup-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  width: 90vw;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}
.texto-popup-card pre {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: var(--font-md);
  line-height: 1.6;
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 12px;
  margin: 12px 0;
}

/* ── Stepper section visibility ── */
.order-step-section.locked {
  display: none;
}

/* ── Accordion step sections ── */
/* Step panels (controlled by stepper tabs) */
.step-panel {
  padding: 8px 0;
  border-top: 1px dashed var(--stroke);
  margin-top: 4px;
}

/* ── Fournisseurs ────────────────────────────────────────────────────────── */

.fournisseur-global-card {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 12px 20px;
  font-size: var(--font-md);
  margin-bottom: 12px;
}
.fournisseur-global-card em {
  font-style: normal;
  opacity: 0.65;
  margin-right: 4px;
}

.fournisseur-item {
  background: var(--card);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--stroke);
  transition: background var(--transition);
}
.fournisseur-item:last-child { border-bottom: none; }
.fournisseur-item:hover { background: var(--hover-bg); }

.fournisseur-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fournisseur-primary strong {
  font-size: 13.5px;
  font-weight: 600;
}
.fournisseur-coordonnees {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--ink-soft);
  font-size: 11.5px;
}
.fournisseur-labels {
  display: inline-flex;
  gap: 4px;
}

.fournisseur-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--font-xs);
  color: var(--ink-soft);
  line-height: 1.5;
  padding-top: 2px;
}
.fournisseur-stats > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fournisseur-stats em {
  font-style: normal;
  opacity: 0.65;
  margin-right: 2px;
}
.fournisseur-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

/* History table */
.fournisseur-history {
  padding: 8px 0 4px;
}
.fournisseur-history-table {
  font-size: 11.5px;
  border-top: 1px solid var(--stroke);
}
.fh-row {
  display: grid;
  grid-template-columns: 90px 1.5fr 60px 80px 90px 50px 80px 30px;
  gap: 6px;
  padding: 5px 8px;
  align-items: center;
  border-bottom: 1px solid var(--stroke-light, var(--stroke));
}
.fh-row.fh-head {
  font-weight: 600;
  opacity: 0.7;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fh-row.fh-total {
  border-top: 2px solid var(--stroke);
  font-weight: 600;
  border-bottom: none;
}
.fh-type-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.fh-fab { background: var(--bg-2); color: var(--ink-soft); }
.fh-occ { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }

/* ── Paramètres section ────────────────────────────────────────── */
.params-header { margin-bottom: 16px; }
.params-user-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--stroke);
  font-size: var(--font-md); font-weight: 600; color: var(--ink);
}
.params-note { font-size: var(--font-md); color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; }
.params-color-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--stroke);
}
.params-color-row label { font-size: var(--font-md); font-weight: 500; color: var(--ink); }
.params-color-ctrl { display: flex; align-items: center; gap: 8px; }
.params-color-picker {
  width: 28px; height: 28px; padding: 0; margin: 0;
  border: 1px solid var(--stroke); border-radius: 50%;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.params-color-picker::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.params-color-picker::-webkit-color-swatch { border: none; border-radius: 50%; }
.params-color-picker::-moz-color-swatch { border: none; border-radius: 50%; }
.params-hex-input {
  width: 76px; padding: 4px 8px; font-size: var(--font-sm); font-family: monospace;
  border: 1px solid var(--stroke); border-radius: 6px; background: #fff;
  color: var(--ink-soft); text-align: center; cursor: pointer;
}
.params-hex-input:hover { border-color: var(--brand); }
.params-hex-input.copied { background: #dcfce7; border-color: #15803d; color: #15803d; }

/* Carte Thème : 3ème position dans le grid Paramètres (Fiche, Profil, Thème) */
.params-theme-card { order: 3; }

/* Boutons Enregistrer / Synchroniser au bas de la carte Thème */
.theme-sync-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--stroke);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.theme-save-status {
  flex: 1 1 100%;
  min-height: 18px;
  font-size: var(--font-sm);
  color: var(--ink-soft);
}
.theme-save-status.ok { color: #15803d; font-weight: 600; }
.theme-save-status.err { color: #b91c1c; font-weight: 600; }

/* ── Paramètres : carte Thème — accordéon vertical (3 thèmes empilés) ── */
.params-themes-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.params-theme-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Panel collapsé par défaut ; déployé uniquement pour le thème actif */
.theme-panel {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.params-theme-col.active .theme-panel { display: flex; }
.params-mode-btn {
  width: 100%;
  opacity: 0.4;
  text-align: center;
  transition: opacity var(--transition), box-shadow var(--transition), transform var(--transition);
}
.params-mode-btn[data-theme-mode="la-welsch"] {
  background: linear-gradient(135deg, var(--mode-lw-primary), var(--mode-lw-primary-dark));
}
.params-mode-btn[data-theme-mode="mon-producteur"] {
  background: linear-gradient(135deg, var(--mode-mp-primary), var(--mode-mp-primary-dark));
}
.params-mode-btn[data-theme-mode="personnalise"] {
  background: linear-gradient(135deg, var(--mode-pe-primary), var(--mode-pe-primary-dark));
}
/* Quand le mode a "Dégradés" désactivé → bouton plat */
.params-mode-btn.mode-flat[data-theme-mode="la-welsch"] {
  background: var(--mode-lw-primary);
}
.params-mode-btn.mode-flat[data-theme-mode="mon-producteur"] {
  background: var(--mode-mp-primary);
}
.params-mode-btn.mode-flat[data-theme-mode="personnalise"] {
  background: var(--mode-pe-primary);
}
.primary.params-mode-btn:hover { opacity: 0.85; }
.primary.params-mode-btn.active,
.primary.params-mode-btn.active:hover { opacity: 1; }

/* ── Thème : case "Dégradés" (commune à chaque colonne) ── */
.theme-gradient-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-base);
  cursor: pointer;
  user-select: none;
}
.theme-gradient-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}
.theme-reset-btn { align-self: flex-start; }

/* Sélecteur de logo (colonne Personnalisé) */
.theme-logo-select {
  padding: 4px 8px; font-size: var(--font-sm); font-family: inherit;
  border: 1px solid var(--stroke); border-radius: 6px;
  background: #fff; color: var(--ink); cursor: pointer;
}
.theme-logo-select:hover { border-color: var(--brand); }

/* ── Séparateur "Couleurs Dashboard" dans chaque colonne de thème ── */
.theme-dash-divider {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--stroke);
}

/* ── Order history filter pills ── */
.filter-pill {
  padding: 4px 12px; border-radius: 20px; font-size: var(--font-sm); font-weight: 600;
  border: 1px solid var(--stroke); background: var(--bg); color: var(--ink-soft);
  cursor: pointer; transition: all var(--transition);
}
.filter-pill:hover { border-color: var(--brand); color: var(--ink); }
.filter-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-pill.cl.active { background: var(--fondue-cl-bg); color: var(--fondue-cl-text); border-color: var(--fondue-cl-text); }
.filter-pill.bl.active { background: var(--fondue-bl-bg); color: var(--fondue-bl-text); border-color: var(--fondue-bl-text); }
.filter-pill.ca.active { background: var(--fondue-ca-bg); color: var(--fondue-ca-text); border-color: var(--fondue-ca-text); }
.filter-pill.cu.active { background: var(--fondue-fdc-bg); color: var(--fondue-fdc-text); border-color: var(--fondue-fdc-text); }

/* ── Paramètres : profil form ── */
.params-form-group { display: grid; gap: 12px; }
.params-field { display: flex; flex-direction: column; gap: 4px; }
.params-field label { font-size: var(--font-sm); font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.5px; }
.params-field .input { max-width: 260px; }
.params-msg { font-size: var(--font-sm); min-height: 18px; margin-top: 4px; }
.params-msg.ok { color: #15803d; }
.params-msg.err { color: var(--danger); }

/* ── E-shop webhook sales ── */

/* Dashboard: new webhook sale highlight */
.dash-sale-item.dash-sale-new {
  border-left: 3px solid var(--accent);
}

/* ── Sales toolbar & filters ── */
#tab-sales .toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
#tab-sales .search-with-clear { flex: 1; }
#sale-filter-season { min-width: 140px; }
#sale-filter-num { width: 100%; padding-right: 28px; }
#sale-filter-reset { white-space: nowrap; }

/* Sales list: e-shop row highlight (unverified) — couleur dérivée du thème */
.row.sale-eshop-pending {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  font-weight: 600;
  border-left: 3px solid var(--brand);
}

/* Glow animation on edit button for new e-shop sales — utilise --brand
   (couleur primaire du thème actif) au lieu de l'or hardcodé. */
@keyframes eshop-glow {
  0%, 100% { box-shadow: 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent); }
  50% { box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 80%, transparent),
                    0 0 20px color-mix(in srgb, var(--brand) 40%, transparent); }
}
.edit-sale.eshop-glow,
.edit-contact-btn.eshop-glow {
  animation: eshop-glow 1.5s ease-in-out infinite;
  border-radius: 4px;
  border: 1px solid var(--brand) !important;
  color: var(--brand) !important;
}

/* Contact row highlight for new webhook contacts — idem, thème adaptatif. */
.contact-row.contact-new-eshop {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-left: 3px solid var(--brand);
}

/* Shop toast: top notification */
.shop-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--brand);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: var(--font-base);
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s;
  z-index: 9999;
}
.shop-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* (webhook-contact-banner remplacé par eshop styles sur linked-contact-bar) */

/* ── Contact diff mode ── */
.diff-new {
  color: var(--brand) !important;
  font-weight: 600;
}
.diff-suggestion {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--brand) 5%, transparent);
  border: 1px dashed color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: 4px;
  font-size: var(--font-sm);
}
.diff-suggestion-value {
  color: var(--brand);
  font-weight: 600;
  flex: 1;
}
.diff-copy-btn {
  background: none;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  transition: all var(--transition);
}
.diff-copy-btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ── Linked-contact-bar e-shop states ── */
.linked-contact-bar.eshop-new-contact {
  background: rgba(59, 130, 246, 0.08) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: var(--radius);
}
.linked-contact-bar.eshop-diff-contact {
  background: rgba(234, 149, 20, 0.08) !important;
  border: 1px solid rgba(234, 149, 20, 0.25) !important;
  border-radius: var(--radius);
}
@keyframes contact-bar-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 14px rgba(59, 130, 246, 0.5), 0 0 24px rgba(59, 130, 246, 0.2); }
}
@keyframes contact-bar-glow-orange {
  0%, 100% { box-shadow: 0 0 4px rgba(234, 149, 20, 0.2); }
  50% { box-shadow: 0 0 14px rgba(234, 149, 20, 0.5), 0 0 24px rgba(234, 149, 20, 0.2); }
}
.linked-contact-bar.eshop-new-contact .linked-contact-edit,
.eshop-glow-blue {
  animation: contact-bar-glow 1.5s ease-in-out infinite;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  border-radius: 4px;
  color: #1e40af !important;
}
.linked-contact-bar.eshop-diff-contact .linked-contact-edit {
  animation: contact-bar-glow-orange 1.5s ease-in-out infinite;
  border: 1px solid rgba(234, 149, 20, 0.4);
  border-radius: 4px;
  color: #92400e !important;
}

/* ── Webhook e-shop badges ─────────────────────────────────────────────────── */
.badge-new-contact,
.badge-pending-merge,
.linked-contact-info .badge-new-contact,
.linked-contact-info .badge-pending-merge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  align-self: flex-start;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  color: #fff;
  vertical-align: middle;
  white-space: nowrap;
}
.badge-new-contact svg,
.badge-pending-merge svg { width: 11px; height: 11px; }
.badge-new-contact,
.linked-contact-info .badge-new-contact { background: #3b82f6; color: #fff; }
.badge-pending-merge,
.linked-contact-info .badge-pending-merge { background: var(--warning); color: #fff; }

/* État pending-merge sur la linked-contact-bar */
.linked-contact-bar.pending-merge {
  background: rgba(234, 149, 20, 0.08) !important;
  border: 1px solid rgba(234, 149, 20, 0.25) !important;
  border-radius: var(--radius);
}
.linked-contact-bar.pending-merge .linked-contact-edit {
  animation: contact-bar-glow-orange 1.5s ease-in-out infinite;
  border: 1px solid rgba(234, 149, 20, 0.4);
  border-radius: 4px;
  color: #92400e !important;
}

/* ── Webhook merge modal ────────────────────────────────────────────────── */
#webhook-merge-modal .webhook-merge-card {
  max-width: 920px;
  width: 92vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
#webhook-merge-modal .modal-body {
  overflow: auto;
}
#webhook-merge-modal .wm-intro {
  font-size: var(--font-md);
  color: var(--ink-soft);
  margin: 0 0 12px;
}
#webhook-merge-modal .wm-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#webhook-merge-modal .wm-row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  font-size: var(--font-md);
}
#webhook-merge-modal .wm-row.wm-head {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--stroke);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
#webhook-merge-modal .wm-id {
  font-size: var(--font-xs);
  color: var(--ink-soft);
  font-weight: 400;
}
#webhook-merge-modal .wm-label {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 8px;
}
#webhook-merge-modal .wm-same {
  padding: 6px 10px;
  background: var(--bg-soft, rgba(0,0,0,0.03));
  border-radius: 4px;
  display: flex;
  align-items: center;
}
#webhook-merge-modal .wm-value {
  padding: 6px 10px;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: border-color 0.15s, background 0.15s;
}
#webhook-merge-modal .wm-value:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.04);
}
#webhook-merge-modal .wm-value.wm-selected {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  font-weight: 600;
}
#webhook-merge-modal .wm-row.wm-diff .wm-label {
  color: var(--warning);
}
#webhook-merge-modal .wm-empty {
  opacity: 0.4;
  font-style: italic;
}

/* ── Debug / Diagnostic modal ─────────────────────────────────────────────── */

.debug-card { max-width: 1060px; height: 85vh; }
.debug-card .modal-close-btn { font-size: 28px; }

.debug-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.debug-total-badge {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}

.debug-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 0;
  padding-bottom: 0;
  overflow-x: auto;
  flex-shrink: 0;
}

.debug-tab {
  padding: 8px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.debug-tab:hover { color: var(--ink); }
.debug-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.debug-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: 700;
  background: var(--stroke);
  color: var(--ink-soft);
}
.debug-badge.has-issues {
  background: var(--brand);
  color: #fff;
}
.debug-badge.all-ok {
  background: var(--status-ok-bg);
  color: #166534;
}

.debug-body { padding-top: 16px; }

.debug-panel { display: none; flex-direction: column; gap: 12px; }
.debug-panel.active { display: flex; }

.debug-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--ink-soft);
  font-size: var(--font-base);
}
.debug-empty svg {
  display: block;
  margin: 0 auto 8px;
  color: var(--status-ok-bg);
}

/* ── Duplicate group card ── */
.debug-group {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 14px;
}
.debug-group-title {
  font-weight: 600;
  font-size: var(--font-base);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.debug-group-reason {
  font-size: var(--font-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(210, 162, 76, 0.2);
  color: #92400e;
}

.debug-compare {
  display: grid;
  gap: 1px;
  background: var(--stroke);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--font-md);
}
.debug-compare-header {
  display: contents;
}
.debug-compare-header > div {
  background: var(--bg-2);
  padding: 6px 10px;
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--ink-soft);
}
.debug-compare-row {
  display: contents;
}
.debug-compare-row > div {
  background: var(--card);
  padding: 5px 10px;
  min-height: 28px;
  display: flex;
  align-items: center;
}
.debug-compare-row > .debug-field-label {
  font-weight: 500;
  color: var(--ink-soft);
  font-size: var(--font-sm);
  background: var(--bg-2);
}
.debug-compare-row > .debug-field-diff {
  background: #fef3c7;
}

.debug-group-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}

/* ── Result row (orphans, missing fields) ── */
.debug-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
}
.debug-result-row:hover { background: var(--hover-bg); }

.debug-result-id {
  font-family: monospace;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  min-width: 52px;
}
.debug-result-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.debug-result-detail {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  flex-shrink: 0;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.debug-result-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.debug-result-actions .ghost {
  font-size: var(--font-sm);
  padding: 4px 10px;
}

/* ── Ignore (champs manquants) ── */
.debug-ignored-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg, #f7f5f1);
  border: 1px dashed var(--stroke);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.debug-ignored-banner strong { color: var(--ink); font-weight: 700; }
.debug-ignored-banner .ghost {
  font-size: 11.5px;
  padding: 3px 8px;
  margin-left: auto;
}
.debug-ignored-banner .ghost + .ghost { margin-left: 4px; }

.debug-ignored-details {
  margin-top: 12px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: var(--bg, #f7f5f1);
}
.debug-ignored-details > summary {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  user-select: none;
}
.debug-ignored-details[open] > summary { border-bottom: 1px solid var(--stroke); }
.debug-ignored-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.debug-result-row--ignored {
  opacity: 0.7;
  background: transparent;
}

/* ── Merge modal ── */
.merge-card { max-width: 800px; }

.merge-master-choice {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.merge-master-option {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--stroke);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.merge-master-option:hover { background: var(--hover-bg); }
.merge-master-option.selected {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.merge-master-option .merge-name {
  font-weight: 600;
  font-size: var(--font-base);
  margin-bottom: 4px;
}
.merge-master-option .merge-id {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  font-family: monospace;
}

.merge-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.merge-field-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 1px;
  font-size: var(--font-md);
}
.merge-field-row.merge-header > div {
  background: var(--bg-2);
  padding: 6px 10px;
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--ink-soft);
}
.merge-field-row > div {
  padding: 5px 10px;
  background: var(--card);
}
.merge-field-label {
  font-weight: 500;
  color: var(--ink-soft);
  font-size: var(--font-sm);
  background: var(--bg-2) !important;
  display: flex;
  align-items: center;
}
.merge-field-value {
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  align-items: center;
  min-height: 30px;
}
.merge-field-value:hover { background: var(--hover-bg); }
.merge-field-value.selected {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  font-weight: 500;
}
.merge-field-value.selected::before {
  content: "\2713";
  margin-right: 6px;
  color: var(--brand);
  font-weight: 700;
}
.merge-field-same {
  color: var(--ink-soft);
  cursor: default;
}

.merge-preview {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
}
.merge-preview-title {
  font-weight: 600;
  font-size: var(--font-md);
  margin-bottom: 8px;
  color: var(--ink-soft);
}
.merge-preview-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  font-size: var(--font-md);
}
.merge-preview-field {
  display: flex;
  gap: 4px;
}
.merge-preview-field .label {
  color: var(--ink-soft);
  font-size: var(--font-sm);
}

/* ── Contact search mini-dropdown (for linking sales) ── */
.debug-contact-search {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}
.debug-contact-search input {
  font-size: var(--font-sm);
  padding: 4px 8px;
  width: 200px;
}
.debug-contact-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 160px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}
.debug-contact-search-results.open { display: block; }
.debug-contact-search-item {
  padding: 6px 10px;
  font-size: var(--font-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--stroke);
}
.debug-contact-search-item:last-child { border-bottom: none; }
.debug-contact-search-item:hover { background: var(--hover-bg); }

@media (max-width: 768px) {
  .debug-card { padding: 14px; }
  .debug-tabs { gap: 0; }
  .debug-tab { padding: 6px 8px; font-size: var(--font-sm); }
  .merge-field-row { grid-template-columns: 100px 1fr 1fr; }
  .debug-compare { font-size: var(--font-sm); }
}

/* ── Fromage archived rows ────────────────────────────────────────────────── */

.fromage-archived {
  opacity: 0.55;
  color: var(--danger);
  font-style: italic;
}
.fromage-archived:hover { opacity: 0.85; }
.fromage-archived > div {
  pointer-events: none;
}
.fromage-archived .fromage-restore-btn {
  pointer-events: auto;
  opacity: 1;
  color: var(--brand);
}
.fromage-archived .fromage-restore-btn:hover {
  color: var(--brand-2);
}

/* ── Onglet Outils ────────────────────────────────────────────────────────── */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 4px 0;
}

.tool-tile {
  background: var(--panel, #fff);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg, 12px);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.tool-tile:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.tool-tile-icon {
  width: 30px;
  height: 30px;
  color: var(--brand);
}

.tool-tile-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.tool-tile-desc {
  font-size: var(--font-md);
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ── Modale Importer ventes ───────────────────────────────────────────────── */

.import-ventes-card {
  max-width: 1060px;
  width: 95vw;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.import-ventes-card .modal-close-btn { font-size: 28px; }

.import-ventes-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.import-ventes-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 12px;
  min-height: 0;
}

.import-ventes-step {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.import-ventes-intro {
  background: var(--bg, #f7f5f1);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: var(--font-md);
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.import-ventes-resume-wrap { margin-top: 18px; }
.import-ventes-resume-card {
  border: 1px solid var(--brand);
  border-radius: 10px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.02);
}
.import-ventes-resume-title {
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 6px;
}
.import-ventes-resume-info { font-size: var(--font-md); margin-bottom: 10px; }
.import-ventes-resume-actions { display: flex; gap: 8px; }

/* Progress bar */
.import-ventes-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.import-ventes-progress {
  flex: 1;
  height: 8px;
  background: var(--bg, #f7f5f1);
  border-radius: 4px;
  overflow: hidden;
}
.import-ventes-progress-bar {
  height: 100%;
  background: var(--brand);
  width: 0%;
  transition: width .25s ease;
}
.import-ventes-progress-label {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.import-ventes-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.chip {
  border: 1px solid var(--stroke);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--brand); }
.chip.active, .chip-filter.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.import-ventes-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
  min-height: 0;
}

.import-ventes-empty {
  padding: 36px 14px;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--font-md);
}

.import-ventes-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}

.import-ventes-row--matched, .import-ventes-row--created { border-color: #166534; background: rgba(22,101,52,0.04); }
.import-ventes-row--skipped { border-color: var(--stroke); opacity: 0.7; }

.import-ventes-row-left, .import-ventes-row-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.import-ventes-row-right { align-items: flex-start; }

.import-ventes-row-title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: var(--font-base);
}


.import-ventes-status {
  font-size: var(--font-sm);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg, #f7f5f1);
  color: var(--ink);
}
.import-ventes-status.pending.match { background: #fef3c7; color: #92400e; }
.import-ventes-status.pending.nomatch { background: #fee2e2; color: var(--danger-dark); }
.import-ventes-status.matched, .import-ventes-status.created { background: #dcfce7; color: #166534; }
.import-ventes-status.skipped { background: #e5e7eb; color: #374151; }


.import-ventes-report-section-title {
  font-size: var(--font-base);
  font-weight: 600;
  margin: 14px 0 6px 0;
}
.import-ventes-report-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 8px;
}
.import-ventes-report-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--stroke);
  font-size: var(--font-md);
}
.import-ventes-report-row:last-child { border-bottom: none; }
.import-ventes-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .import-ventes-card { padding: 14px; }
  .import-ventes-row { grid-template-columns: 1fr; }
}

/* ── Importer ventes v2 : accordéon + vue côte-à-côte ───────────────────── */

.iv-row {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.iv-row.import-ventes-row--matched,
.iv-row.import-ventes-row--created { border-color: #166534; background: rgba(22,101,52,0.03); }
.iv-row.import-ventes-row--skipped { opacity: 0.7; }

.iv-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.iv-row-header:hover { background: rgba(0,0,0,0.02); }
.iv-row[data-expanded="1"] > .iv-row-header { border-bottom: 1px solid var(--stroke); }

.iv-row-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}
.iv-chevron { color: var(--ink-soft); transition: transform .15s ease; flex-shrink: 0; }
.iv-row-header-total { font-variant-numeric: tabular-nums; }
.iv-row-header-prods { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--font-sm); }
.iv-row-header-right { flex-shrink: 0; }

.iv-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  background: var(--bg, #f7f5f1);
}
.iv-compare-col {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.iv-compare-col.src { background: rgba(0,0,0,0.015); }
.iv-compare-col.app { background: #fff; border-left: 1px solid var(--stroke); }

.iv-compare-col-title {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 4px;
}

.iv-field, .iv-editfield {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
}
.iv-field-label {
  color: var(--ink-soft);
  font-weight: 500;
}
.iv-field-val {
  min-width: 0;
  word-break: break-word;
}
.iv-field-val.muted, .iv-field-val em { color: var(--ink-soft); }
.iv-field-val.iv-products {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.iv-editfield-body {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.iv-editfield-body .input { flex: 1; min-width: 0; }
.iv-editfield-body textarea.input { width: 100%; resize: vertical; min-height: 48px; }

.iv-copy-chip {
  flex-shrink: 0;
  font-size: 10.5px;
  padding: 2px 6px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: #fff9c4;
  color: #713f12;
  cursor: pointer;
  font-weight: 600;
}
.iv-copy-chip:hover { background: #fef3c7; border-color: #f59e0b; }

.iv-saved-indicator {
  flex-shrink: 0;
  opacity: 0;
  color: #166534;
  font-weight: 700;
  font-size: var(--font-md);
  transition: opacity .3s ease;
}
.iv-saved-indicator.show { opacity: 1; }

/* Blocs liaison contact / vente */
.iv-link-block {
  background: var(--bg, #f7f5f1);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.iv-link-block--linked { border-color: #166534; background: rgba(22,101,52,0.05); }
.iv-link-block--unlinked { border-color: #b45309; background: rgba(180,83,9,0.05); }
.iv-link-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.iv-link-sub { color: var(--ink-soft); font-size: 11.5px; }
.iv-link-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #166534;
}
.iv-link-badge.warn { color: #b45309; }
.iv-link-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.iv-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex-wrap: wrap;
}
.iv-search-wrap .input { flex: 1; min-width: 120px; }
.iv-search-wrap .primary.small {
  padding: 4px 10px;
  font-size: var(--font-sm);
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.iv-search-wrap .primary.small:hover { background: var(--brand-2, var(--brand)); }

.iv-search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.iv-search-results.open { display: block; }
.iv-search-item {
  padding: 6px 10px;
  border-bottom: 1px solid var(--stroke);
  cursor: pointer;
  font-size: 12.5px;
}
.iv-search-item:last-child { border-bottom: none; }
.iv-search-item:hover { background: var(--bg, #f7f5f1); }
.iv-search-empty { padding: 10px; font-size: var(--font-sm); text-align: center; }

/* Lignes articles éditables */
.iv-lines-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.iv-line-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--font-sm);
}
.iv-line-row .input.tiny {
  width: 64px;
  padding: 2px 6px;
  font-size: var(--font-sm);
}
.iv-line-row select.input.tiny { width: auto; min-width: 160px; }
.iv-lines-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* Actions finales en bas de la colonne App */
.iv-final-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
  margin-top: 6px;
}
.iv-final-actions-spacer { flex: 1; }

/* Boutons icône */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  gap: 4px;
}
.iconbtn svg { display: block; }

/* ── Outil Analyse DLC ─────────────────────────────────────────────────── */

.dlc-audit-card {
  max-width: 1100px;
  width: 95vw;
  height: 85vh;
  display: flex;
  flex-direction: column;
}
.dlc-audit-card .modal-close-btn { font-size: 28px; }
.dlc-audit-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dlc-audit-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}
.dlc-audit-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.dlc-audit-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  min-height: 0;
}
.dlc-audit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: #fff;
}
.dlc-audit-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dlc-audit-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--font-md);
}
.dlc-audit-row-products {
  font-size: var(--font-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}
.dlc-audit-row-current { font-size: var(--font-sm); color: var(--ink-soft); }
.dlc-audit-row-reason {
  font-size: var(--font-sm);
  line-height: 1.4;
  color: var(--ink);
  background: #fffbea;
  border-left: 3px solid #d97706;
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 2px;
}
.dlc-audit-row-reason strong { font-weight: 600; color: #7c2d12; }
.dlc-audit-row-note {
  font-size: 11.5px;
  color: #92400e;
  margin-top: 2px;
  font-style: italic;
}
.dlc-audit-lot-bad {
  color: #b91c1c !important;
  text-decoration: line-through wavy #ef4444;
}
.dlc-audit-kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.dlc-audit-kind--absent { background: #fee2e2; color: var(--danger-dark); }
.dlc-audit-kind--mismatch { background: #fef3c7; color: #92400e; }
.dlc-audit-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dlc-audit-proposal-select, .dlc-audit-custom-date { min-width: 180px; }

@media (max-width: 900px) {
  .iv-compare { grid-template-columns: 1fr; }
  .iv-compare-col.app { border-left: none; border-top: 1px solid var(--stroke); }
  .iv-field, .iv-editfield { grid-template-columns: 90px minmax(0, 1fr); }
  .dlc-audit-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Archives (backups BD + app)
   ══════════════════════════════════════════════════════════════════════════ */

.archives-card {
  max-width: 1000px;
  width: 90vw;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
.archives-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.archives-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--stroke);
  flex-shrink: 0;
}
.archives-tab {
  padding: 8px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.archives-tab:hover { color: var(--ink); }
.archives-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.archives-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: 700;
  background: var(--stroke);
  color: var(--ink-soft);
}
.archives-body { padding-top: 16px; overflow: auto; }
.archives-panel { display: none; }
.archives-panel.active { display: block; }
.archives-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--ink-soft);
  font-size: var(--font-base);
}
.archives-error {
  padding: 16px;
  background: var(--status-err-bg, #fee2e2);
  color: var(--danger-dark);
  border-radius: 8px;
  font-size: var(--font-base);
}
.archives-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-base);
}
.archives-table th,
.archives-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--stroke);
}
.archives-table th {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.archives-table th:last-child { text-align: right; }
.archives-table tr:hover td { background: var(--hover-bg); }
.archives-cell-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.archives-cell-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--font-sm); color: var(--ink-soft); }
.archives-cell-size { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.archives-cell-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.archives-cell-actions .ghost.small {
  padding: 4px 10px;
  font-size: var(--font-sm);
  border-radius: 6px;
}
.archives-cell-actions .ghost.small.warn { color: #92400e; border-color: #fcd34d; }
.archives-cell-actions .ghost.small.warn:hover { background: #fef3c7; }
.archives-cell-actions .ghost.small.danger { color: var(--danger-dark); border-color: #fca5a5; }
.archives-cell-actions .ghost.small.danger:hover { background: #fee2e2; }

/* Onglet Nettoyage */
.cleanup-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--stroke);
}
.cleanup-block:last-child { border-bottom: none; }
.cleanup-title {
  margin: 0 0 4px;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--ink);
}
.cleanup-desc {
  margin: 0 0 12px;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  line-height: 1.5;
}
.cleanup-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cleanup-select, .cleanup-date {
  padding: 6px 10px;
  font-size: var(--font-sm);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--ink);
}
.cleanup-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  color: var(--ink);
}
.cleanup-result { margin-top: 12px; }
.cleanup-loading, .cleanup-empty {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  padding: 8px 0;
}
.cleanup-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.cleanup-group { margin-bottom: 12px; }
.cleanup-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: var(--font-sm);
}
.cleanup-file-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cleanup-file-name {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-soft);
}
.cleanup-file-size { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.cleanup-keep { background: var(--status-ok-bg, #dcfce7); }
.cleanup-del  { background: var(--status-err-bg, #fee2e2); }
.cleanup-keep-tag {
  font-size: var(--font-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #166534;
}
.cleanup-confirm.ghost.small.danger { color: var(--danger-dark); border-color: #fca5a5; }
.cleanup-confirm.ghost.small.danger:hover { background: #fee2e2; }

/* Modale confirmation restauration */
.restore-confirm-card { max-width: 520px; width: 90vw; }
.restore-confirm-body { padding: 16px 24px; }
.restore-confirm-msg {
  margin: 0;
  font-size: var(--font-base);
  line-height: 1.55;
  color: var(--ink);
}
.restore-confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--stroke);
}
.primary.danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.primary.danger:hover { background: #b91c1c; border-color: #b91c1c; }
.primary.danger:disabled { opacity: .6; cursor: not-allowed; }

/* Modale comparaison */
.compare-card {
  max-width: 900px;
  width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.compare-body { padding-top: 12px; overflow: auto; }
.compare-loading, .compare-empty {
  text-align: center;
  padding: 32px;
  color: var(--ink-soft);
  font-size: var(--font-base);
}

.diff-root { display: flex; flex-direction: column; gap: 8px; }
.diff-section {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: var(--bg-card, #fff);
}
.diff-summary {
  padding: 10px 14px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  font-size: var(--font-md);
  list-style: none;
}
.diff-summary::-webkit-details-marker { display: none; }
.diff-summary::before {
  content: '▸';
  color: var(--ink-soft);
  transition: transform var(--transition);
  display: inline-block;
  margin-right: 4px;
}
.diff-section[open] .diff-summary::before { transform: rotate(90deg); }
.diff-key { font-weight: 600; color: var(--ink); }
.diff-counts-archive { color: var(--ink-soft); font-size: var(--font-sm); font-variant-numeric: tabular-nums; }
.diff-counts { display: flex; gap: 8px; font-size: var(--font-sm); }
.diff-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.diff-added    { background: #d1fae5; color: #065f46; }
.diff-removed  { background: #fee2e2; color: var(--danger-dark); }
.diff-modified { background: #fef3c7; color: #92400e; }
.diff-none     { background: var(--stroke); color: var(--ink-soft); }

.diff-details {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--stroke);
  padding-top: 12px;
}
.diff-group-title {
  font-size: var(--font-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.diff-group-added    .diff-group-title { color: #065f46; }
.diff-group-removed  .diff-group-title { color: var(--danger-dark); }
.diff-group-modified .diff-group-title { color: #92400e; }
.diff-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.diff-list li {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--stroke);
  font-size: var(--font-sm);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.diff-item-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-soft); }
.diff-item-label { color: var(--ink); }
.diff-more { color: var(--ink-soft); font-style: italic; }

@media (max-width: 900px) {
  .archives-table th:nth-child(3),
  .archives-table td:nth-child(3) { display: none; }
  .archives-cell-actions { justify-content: flex-start; }
  .diff-summary { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Stock ─────────────────────────────────────────────────────────── */

.stock-toolbar { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

.stock-chip-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: var(--font-md); color: var(--ink-soft);
  border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  background: var(--card); cursor: pointer;
}
.stock-chip-toggle input { margin: 0; }

.stock-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 14px;
  padding: 12px 18px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.stock-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}
.stock-summary-label {
  font-size: var(--font-xs);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stock-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stock-summary-value.positive { color: var(--profit-green); }
.stock-summary-value.negative { color: var(--danger); }
.stock-summary-sep {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0 4px;
}

.stock-alerts {
  margin: 10px 0 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--danger);
  background: #fef2f2;
}
.stock-alerts-title { font-weight: 600; color: var(--danger-dark); font-size: var(--font-md); margin-bottom: 6px; }
.stock-alerts-list { display: flex; flex-wrap: wrap; gap: 6px; }
.stock-alert-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: var(--font-sm);
  background: #fee2e2; color: var(--danger-dark);
  border: 1px solid #fca5a5; border-radius: 999px;
  cursor: pointer; text-decoration: none;
}
.stock-alert-pill:hover { background: #fecaca; }

.stock-lot-card {
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stock-lot-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--stroke);
  font-size: var(--font-md);
}
.stock-lot-id { font-family: ui-monospace, monospace; font-weight: 600; color: var(--ink); }
.stock-lot-dlc { color: var(--ink-soft); }
.stock-lot-dlc strong { color: var(--ink); font-weight: 600; }
.stock-lot-dlc.dlc-expired strong { color: var(--danger); }
.stock-lot-dlc.dlc-soon strong { color: #d97706; }
.stock-lot-order { color: var(--ink-soft); }
.stock-lot-order a { color: var(--brand); font-weight: 600; text-decoration: none; }
.stock-lot-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }

.stock-bar {
  display: grid;
  grid-template-columns: 160px 1fr 140px;
  gap: 12px; align-items: center;
  font-size: var(--font-md); padding: 4px 0;
  scroll-margin-top: 20px;
}
.stock-bar.has-overflow .stock-bar-label { color: var(--danger-dark); font-weight: 600; }
.stock-bar-label { display: flex; align-items: center; gap: 6px; }
.stock-bar-label .fondue-badge {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.stock-bar-label .fondue-badge.cl { background: var(--fondue-cl-text); }
.stock-bar-label .fondue-badge.bl { background: var(--fondue-bl-text); }
.stock-bar-label .fondue-badge.cu { background: var(--fondue-fdc-text); }
.stock-bar-label .fondue-badge.ca { background: var(--fondue-ca-text); }

.stock-bar-track {
  position: relative;
  height: 14px;
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 7px;
}
.stock-bar-seg {
  position: absolute; top: 0; bottom: 0;
}
.stock-bar-sold { background: var(--status-ok-bg); border-radius: 6px 0 0 6px; }
.stock-bar-sold.full-width { border-radius: 6px; }
.stock-bar-over {
  background: #fecaca;
  border: 1px solid var(--danger);
  border-radius: 0 7px 7px 0;
  top: -1px; bottom: -1px;
}

.stock-bar-value { font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: right; font-size: var(--font-sm); }
.stock-bar-value strong { color: var(--ink); font-weight: 600; }
.stock-bar-value .over { color: var(--danger); font-weight: 600; margin-left: 4px; }
.stock-bar-value .depleted { color: var(--ink-soft); font-style: italic; }
.stock-bar-value .inv { color: var(--brand); font-weight: 600; margin-left: 4px; }

.stock-bar.is-depleted .stock-bar-label { color: var(--ink-soft); text-decoration: line-through; }

.stock-empty { background: var(--card); border-radius: var(--radius); padding: 40px; }

/* ── Inventaire modal ─────────────────────────────────────────────── */

.inventory-card {
  width: min(720px, 95vw);
  max-height: 85vh;
  display: flex; flex-direction: column;
}
.inventory-body { overflow-y: auto; }
.inventory-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.inventory-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  overflow: hidden;
}
.inventory-row {
  display: grid;
  grid-template-columns: 160px 90px 100px 1fr;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--stroke);
  font-size: var(--font-md);
}
.inventory-row:last-child { border-bottom: none; }
.inventory-row.head {
  background: var(--table-head-bg);
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--ink-soft);
}
.inventory-row .input { padding: 4px 8px; font-size: var(--font-md); }
.inventory-empty { padding: 20px; text-align: center; font-size: var(--font-md); }

/* ── Warning de dépassement dans la modale vente ──────────────────── */

.sale-row.has-stock-warning select[data-role="lot"] {
  border-color: var(--danger);
  background: #fef2f2;
}
.sale-stock-hint {
  display: block;
  font-size: var(--font-xs);
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.2;
}
.sale-stock-hint.warn { color: var(--danger); font-weight: 600; }

/* Options de lot en dépassement : rouge dans le dropdown */
select[data-role="lot"] option.lot-opt-overflow {
  color: var(--danger);
  background: #fef2f2;
  font-weight: 600;
}
/* Reflète la couleur sur le select lui-même quand l'option sélectionnée
   est en dépassement (signale visuellement qu'on a choisi une DLC à risque). */
select[data-role="lot"]:has(option.lot-opt-overflow:checked) {
  color: var(--danger);
  font-weight: 600;
}

/* ── PR E2-complet Phase 2 : Section Références "Charges" (compact) ─────── */
.charge-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--stroke);
  font-size: var(--font-md);
}
.charge-block:last-child {
  border-bottom: none;
}
.charge-block-head {
  display: contents;
}
.charge-label {
  flex: 0 0 auto;
  min-width: 180px;
  font-weight: 500;
}
.charge-group-tag,
.charge-group-select {
  flex: 0 0 auto;
  font-size: 0.7em;
  padding: 1px 8px;
  border-radius: 12px;
  background-color: #f3f4f6;
  color: #4b5563;
  white-space: nowrap;
}
.charge-group-select {
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%234b5563' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.charge-group-select:hover {
  border-color: rgba(0,0,0,0.15);
}
.charge-group-tag.charge-group-welsch,
.charge-group-select.charge-group-welsch {
  background-color: #fef9c3;
  color: #a16207;
}
.charge-group-tag.charge-group-fdc-cabanes,
.charge-group-select.charge-group-fdc-cabanes {
  background-color: #dcfce7;
  color: #15803d;
}
.charge-params {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  flex: 1 1 auto;
}
.charge-params.muted {
  font-style: italic;
  font-size: 0.85em;
}
.charge-param {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
}
.charge-param input.tiny.charge-param-input {
  width: 58px;
  padding: 3px 6px;
  text-align: right;
}
/* Select unité (CHF / % / Qté) — éditable en mode édition, simple texte en lecture.
   Quand l'unité = Qté, on cache complètement la pastille hors mode édition (le
   suffix texte personnalisable prend le relais). */
.charge-param-unit-select {
  font-size: 0.85em;
  padding: 2px 4px;
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  cursor: pointer;
  min-width: 48px;
}
#card-charges-calculator:not(.editing) .charge-param-unit-select {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 4px;
  color: var(--ink-soft);
}
#card-charges-calculator:not(.editing) .charge-param[data-unit="Qté"] .charge-param-unit-select {
  display: none;
}
.charge-param input.tiny.charge-param-suffix {
  width: 130px;
  padding: 3px 6px;
}
/* Suffix éditable uniquement en mode édition. Hors édition : on l'affiche
   en texte simple (style readonly via CSS). */
#card-charges-calculator:not(.editing) .charge-param-suffix {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}
/* Hors édition, suffix vide → ne s'affiche pas du tout (demande user 2026-05).
   Le placeholder=" " (espace simple) active :placeholder-shown sans afficher
   de texte d'exemple. En mode édition, il reste visible pour saisie. */
#card-charges-calculator:not(.editing) .charge-param-suffix:placeholder-shown {
  display: none;
}

/* Builder d'expression (étape 3) — V1 mul plat. Affiché en mode édition pour
   les charges custom natives. Les opérandes s'enchaînent inline avec un
   séparateur × visible hors saisie active. */
.charge-expr-builder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}
.charge-expr-builder .expr-operand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border: 1px dashed transparent;
  border-radius: 4px;
}
#card-charges-calculator.editing .charge-expr-builder .expr-operand {
  border-color: var(--stroke);
}
.charge-expr-builder .expr-kind,
.charge-expr-builder .expr-source-key,
.charge-expr-builder .expr-source-group,
.charge-expr-builder .expr-value-unit {
  font-size: 0.85em;
  padding: 2px 4px;
}
.charge-expr-builder .expr-value-input {
  width: 58px;
  padding: 3px 6px;
  text-align: right;
}
.charge-expr-builder .expr-suffix {
  width: 130px;
  padding: 3px 6px;
}
.charge-expr-builder .expr-op-sep {
  color: var(--ink-soft);
  font-size: 0.9em;
  user-select: none;
}
.charge-expr-builder .expr-remove,
.charge-expr-builder .expr-add-operand {
  flex: 0 0 auto;
}
.charge-expr-builder .expr-remove {
  width: 22px; height: 22px;
  display: none;
}
#card-charges-calculator.editing .charge-expr-builder .expr-remove {
  display: inline-grid;
}
.charge-expr-builder .expr-add-operand {
  display: none;
}
#card-charges-calculator.editing .charge-expr-builder .expr-add-operand {
  display: inline-flex;
}
/* Hors édition : on cache les selects/dropdowns et n'affiche que la valeur
   sélectionnée — ressemble à un texte naturel. */
#card-charges-calculator:not(.editing) .charge-expr-builder .expr-kind,
#card-charges-calculator:not(.editing) .charge-expr-builder .expr-source-key {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 4px;
}
#card-charges-calculator:not(.editing) .charge-expr-builder .expr-source-group,
#card-charges-calculator:not(.editing) .charge-expr-builder .expr-value-unit {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
#card-charges-calculator:not(.editing) .charge-expr-builder .expr-value-input {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}
#card-charges-calculator:not(.editing) .charge-expr-builder .expr-suffix:placeholder-shown {
  display: none;
}
/* Builder : cache la pastille unité hors édition quand Qté (le suffix prend le relais). */
#card-charges-calculator:not(.editing) .expr-value-fields[data-unit="Qté"] .expr-value-unit {
  display: none;
}
/* Cache les <span> de l'opposé (source-fields si kind=value, etc.) — déjà géré
   par l'attribut `hidden` au render initial. Le re-render au change garantit
   le hidden correct. */

/* Opérateur × affiché entre 2 paramètres consécutifs (ex. « 25 paquets × 30 km »).
   Visible uniquement hors mode édition pour ne pas alourdir la saisie. */
#card-charges-calculator:not(.editing) .charge-param + .charge-param::before {
  content: '×';
  color: var(--ink-soft);
  font-size: 0.85em;
  margin-right: 4px;
}
.charge-param-input {
  text-align: right;
}
.charge-param-label {
  font-size: 0.85em;
  white-space: nowrap;
}

/* Entête de la liste des charges (Références → Charges fondues) */
.charges-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  border-bottom: 2px solid var(--stroke);
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.charges-list-header-name {
  flex: 0 0 auto;
  min-width: 200px;
}
.charges-list-header-group {
  flex: 0 0 auto;
  min-width: 120px;
}
.charges-list-header-params {
  flex: 1 1 auto;
}
.charges-list-header-active {
  flex: 0 0 auto;
  min-width: 56px;
}
.charges-list-header-action {
  flex: 0 0 auto;
  width: 28px;
}

/* Sections par groupe (Welsch / FDC+Cabanes) avec drag'n'drop intra-groupe */
.charges-section {
  border-bottom: 1px solid var(--stroke);
}
.charges-section:last-child {
  border-bottom: none;
}
.charges-section-title {
  padding: 4px 8px;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.02);
}
#card-charges-calculator.editing .charge-block {
  cursor: grab;
}
#card-charges-calculator.editing .charge-block:active {
  cursor: grabbing;
}
.charge-block.dragging {
  opacity: 0.4;
}

/* PR Phase 3a — UI Références : label éditable + checkbox Visible */
.charge-label-input {
  flex: 0 0 auto;
  min-width: 200px;
  font-size: var(--font-md);
  font-weight: 500;
  padding: 3px 8px;
}
.charge-visible-toggle,
.charge-active-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  cursor: pointer;
  user-select: none;
  min-width: 56px;
}

/* Charges fondues — bouton supprimer aligné à droite via grid (charge-block-head display:contents) */
.charge-delete-btn {
  flex: 0 0 auto;
  margin-left: auto;
  order: 99; /* placé à la fin du flex .charge-block, après .charge-params */
  display: none; /* visible uniquement en mode édition */
}
#card-charges-calculator.editing .charge-delete-btn { display: inline-grid; }

/* Hors mode édition : verrouillage visuel des inputs (lecture seule) sans
   ajouter d'attribut disabled (qui couperait les calculs live). */
#card-charges-calculator:not(.editing) .charge-block input:not(:disabled),
#card-charges-calculator:not(.editing) .charge-block select {
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  cursor: default;
}
#card-charges-calculator:not(.editing) .charge-visible-toggle {
  pointer-events: none;
  opacity: 0.7;
}

/* Tableau Coûts : les inputs des charges (PU, PCT, toggles d'activation) ne
   sont éditables que quand la card "Charges fondues" (Références) est en mode
   édition. Le flag `body.charges-editing` est synchronisé en JS depuis
   #card-charges-calculator.classList. */
body:not(.charges-editing) #tab-costs .costs-charges-container input,
body:not(.charges-editing) #tab-costs .costs-row input {
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  cursor: default;
}
body:not(.charges-editing) #tab-costs .costs-charges-container .cost-toggle,
body:not(.charges-editing) #tab-costs .costs-row .cost-toggle {
  pointer-events: none;
  opacity: 0.7;
}

/* ── PR Polish UI : Volets repliables Welsch / Clubs-Cabanes ─────────────── */
.costs-group-fold {
  margin-top: 4px;
  border-top: 1px solid var(--stroke);
}
.costs-group-fold:first-of-type {
  border-top: none;
  margin-top: 0;
}
.costs-group-fold > summary {
  cursor: pointer;
  padding: 8px 4px;
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  list-style: none;
  user-select: none;
}
.costs-group-fold > summary::-webkit-details-marker { display: none; }
.costs-group-fold > summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 8px;
  font-size: 9px;
  transition: transform 0.15s;
  transform: translateY(-1px);
}
.costs-group-fold[open] > summary::before {
  transform: rotate(90deg) translateX(-1px);
}
.costs-group-fold[open] > summary {
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAISONS — section Références + dropdown topbar + modale
   ═══════════════════════════════════════════════════════════════════════════ */

/* Table dans Références (Nom / Début / Fin / Action) */
.seasons-table .row {
  grid-template-columns: 2fr 1fr 1fr 36px;
  align-items: center;
}
.seasons-table .season-row {
  cursor: pointer;
  transition: background var(--transition);
}
.seasons-table .season-row:hover {
  background: var(--bg-edit);
}
.seasons-table .seasons-empty {
  padding: 16px 12px;
  text-align: center;
  font-style: italic;
}
.seasons-table .seasons-empty-msg { grid-column: 1 / -1; }
#seasons-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Bouton calendrier topbar + dropdown ── */
.season-filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.season-filter-wrap .icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
}
.season-filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--brand, #c84a2c);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 2px solid var(--card, #fff);
  line-height: 1;
}
.season-filter-badge[hidden] { display: none; }
.season-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, var(--shadow));
  z-index: 200;
  padding: 8px;
}
.season-dropdown-panel[hidden] { display: none; }
.season-dropdown-actions {
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 6px;
}
.season-dropdown-toggle-all {
  font-size: var(--font-sm);
  padding: 4px 8px;
  width: 100%;
  text-align: left;
}
.season-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
/* Titre de section ("Années" / "Saisons") dans le dropdown filtre */
.season-dropdown-section-title {
  padding: 8px 10px 4px;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.season-dropdown-section-title:not(:first-child) {
  border-top: 1px solid var(--stroke);
  margin-top: 6px;
}
.season-checkbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.season-checkbox-row:hover {
  background: var(--bg);
}
.season-checkbox-name {
  font-size: var(--font-md);
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.season-checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
}
.season-dropdown-empty {
  padding: 16px 10px;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ── Modale création / édition saison ── */
.modal-card--season {
  max-width: 460px;
  width: 95vw;
}
.season-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.season-field-grid .label {
  font-size: var(--font-sm);
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.season-modal-error {
  margin-top: 12px;
  font-size: var(--font-sm);
  color: #c0392b;
  min-height: 1em;
}

/* ─── Entêtes de tableaux : texte noir/blanc strict ─────────────────────────
   Override les couleurs locales (var(--ink-soft) brun, #000 hardcodé) pour
   utiliser var(--head-fg), calculée par theme.js selon la luminance de
   var(--table-head-bg). Garantit qu'aucun thème personnalisé (incluant page
   foncée) n'affiche du brun/beige illisible sur le fond de tête. */
.row.head,
.lots-head, .dlc-head, .rabais-head, .stock-lot-head,
.stat-table-head,
.dlc-products-row--head, .stock-products-row--head,
.po-lines-head,
.lot-modal-type-row.head,
.costs-mix-row.head, .costs-row.head,
.order-cheese-row.head, .order-history-row.head, .active-order-row.head,
.recipe-card-row.head, .article-prices-row.head,
.fournisseur-orders-row.head, .inventory-row.head,
.table-composition .row.head, .table-materials .row.head, .app-mp-table .row.head {
  color: var(--head-fg) !important;
}

/* ─── App MP : tableau CRM des points de vente Mon Producteur ──────────────
   Beaucoup de colonnes (21) → grid-template avec largeurs ajustées + scroll
   horizontal au besoin. Édition inline = inputs/selects compacts dans les
   cellules. Chip Offre tri-state (cycle au clic). */

/* Même pattern que .contacts-table / .orders-table : la padding vient de la
   classe .card (18px), la table elle-même n'a PAS de padding interne. Cela
   garantit que l'espace au-dessus du header sticky est le background de la
   card (statique) et non du contenu qui scrolle. */
.app-mp-card { overflow: hidden; }
.app-mp-table {
  max-height: calc(100vh - 260px);
  overflow: auto;
  width: 100%;
}
.app-mp-table .row {
  /* Variables de référence (utilisées par sticky left offsets) :
     --col-status : 90px, --col-societe : 150px, --gap : 6px
     Si tu changes ces valeurs, met aussi à jour les calc(...) plus bas. */
  grid-template-columns:
    90px                 /* 1.  Status       (sticky left:0, FIXE) */
    180px                /* 2.  Société      (sticky left:90px, FIXE) */
    40px                 /* 3.  Canton       */
    minmax(55px, 0.5fr)  /* 4.  NPA/Lieu     (truncate à droite) */
    85px                 /* 5.  Cotisation   (select dropdown) */
    80px                 /* 6.  Offre        */
    minmax(60px, 0.5fr)  /* 7.  Membre de   (multi-select) */
    minmax(50px, 0.4fr)  /* 8.  Subvention   */
    100px                /* 9.  Paiement     */
    108px                /* 10. Date contrat (icône calendrier compacte réaffichée) */
    108px                /* 11. Date résiliation (même largeur que Date contrat) */
    32px 32px 32px       /* 12-14 App FR/DE/IT */
    32px                 /* 15. FP            */
    32px                 /* 16. CC            (panier Coup-de-Cœur) */
    minmax(50px, 0.4fr)  /* 17. Traité par   */
    32px;                /* 18. Checkbox     (sticky right:0, FIXE) */
  /* width:max-content force la row à s'étendre à la largeur réelle du contenu
     (au lieu de la largeur visible du scroll container). Sans ça, le fond
     coloré du head et des rows s'arrête au bord du viewport en cas de scroll
     horizontal — c'était le bug constaté sur le screenshot du 23 mai. */
  width: max-content;
  min-width: 100%;
  /* column-gap: 0 (les cellules se touchent → pas de zone transparente entre
     les colonnes sticky où le contenu scrollé pourrait apparaître). Le breathing
     visuel est obtenu via le padding interne des cellules (cf. règle plus bas).
     row-gap: 4px conservé pour séparer visuellement les lignes. */
  column-gap: 0;
  row-gap: 4px;
  font-size: var(--font-sm);
}
.app-mp-table .row > div {
  /* Padding interne uniforme pour le breathing visuel entre cellules
     (remplace l'ancien column-gap: 6px). */
  padding: 0 3px;
}
.app-mp-table .row.head {
  font-size: var(--font-xs);
}
/* Cellules texte qui peuvent contenir des longues valeurs : truncate à droite
   avec ellipsis. Le titre tooltip (ajouté côté JS) montre la valeur complète. */
.app-mp-table .row.app-mp-row > div {
  min-width: 0;  /* override grid item default qui empêche shrink */
}
.app-mp-table .row.app-mp-row > .app-mp-societe,
.app-mp-table .row.app-mp-row > .app-mp-npalieu {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-mp-table .row.app-mp-row > .app-mp-societe a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.app-mp-table .row.head [data-sort] {
  cursor: pointer;
  user-select: none;
}
.app-mp-table .row.head [data-sort]:hover { color: var(--brand); }
.app-mp-table .row.head [data-sort].sort-asc::after  { content: " ↑"; opacity: .6; }
.app-mp-table .row.head [data-sort].sort-desc::after { content: " ↓"; opacity: .6; }
.app-mp-table .row > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-mp-table .app-mp-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 10px;
  color: var(--ink-soft);
}
.app-mp-table .app-mp-societe a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.app-mp-table .app-mp-societe a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.app-mp-table .app-mp-bool-cell,
.app-mp-table .app-mp-select-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-mp-table .input--inline {
  padding: 4px 6px;
  font-size: var(--font-sm);
  height: auto;
  min-height: 0;
  min-width: 0;          /* override .input min-width:160px qui faisait déborder les cellules */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  border-color: transparent;
  color: var(--ink);     /* explicite : sinon le texte tapé peut être invisible selon le thème */
}
.app-mp-table .input--inline:hover {
  background: #fff;
  border-color: var(--stroke);
}
.app-mp-table .input--inline:focus {
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent);
}
.app-mp-table .input--number { text-align: right; }
/* Selects : ajout d'une flèche native via padding-right pour ne pas masquer la valeur */
.app-mp-table select.input--inline {
  padding-right: 16px;
  background-position: right 4px center;
}

/* Valeur orpheline = présente dans mp.* mais absente de la liste des références
   (typiquement après un renommage dans Références). Cadre rouge pour signaler
   à l'utilisateur qu'il faut remapper. */
.app-mp-table .input--inline.input--orphan {
  border-color: #dc2626 !important;
  background: #fef2f2;
  color: #991b1b;
}
.app-mp-table .input--inline.input--orphan:hover,
.app-mp-table .input--inline.input--orphan:focus {
  background: #fee2e2;
  border-color: #b91c1c !important;
}
.app-mp-table option.orphan-option {
  color: #991b1b;
  font-style: italic;
  background: #fef2f2;
}

/* Inputs date : on GARDE l'icône calendrier native (le picker cliquable est
   indispensable — sinon il faut saisir la date au clavier), mais en version
   compacte (icône resserrée) pour ne pas gonfler la largeur de cellule. On
   masque uniquement le spin-button + clear-button qui ne servent à rien ici. */
.app-mp-table input[type="date"].input--inline::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  padding: 0;
  margin: 0 0 0 1px;
  width: 13px;
}
.app-mp-table input[type="date"].input--inline::-webkit-calendar-picker-indicator:hover {
  opacity: 0.9;
}
.app-mp-table input[type="date"].input--inline::-webkit-inner-spin-button,
.app-mp-table input[type="date"].input--inline::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
.app-mp-table input[type="date"].input--inline {
  padding-right: 2px;
}

/* Cellule de date REQUISE mais vide : border + bg rouge léger (signal visuel
   fort sans gêner la lecture). S'applique :
   - Toujours sur Date contrat
   - Sur Date résiliation UNIQUEMENT si status 4 (Résilié) ou 5 (Fin activité)
   La classe est posée côté JS dans buildMPRow. */
.app-mp-table .input--inline.input--empty-required {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
}
.app-mp-table .input--inline.input--empty-required:hover,
.app-mp-table .input--inline.input--empty-required:focus {
  background: #fee2e2 !important;
  border-color: #b91c1c !important;
}

/* Modale configuration export/impression App MP */
.app-mp-print-card {
  max-width: 720px;
}
.app-mp-print-card .modal-close-btn { font-size: 28px; }
.app-mp-print-card .print-config-section {
  margin-bottom: 14px;
}
.app-mp-print-card .print-config-label {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--ink);
}
.app-mp-print-card .print-config-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.app-mp-print-card .print-config-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background var(--transition);
}
.app-mp-print-card .print-config-checkboxes label:hover {
  background: var(--hover-bg, #f3f4f6);
}
.app-mp-print-card .print-config-checkboxes input[type="checkbox"] {
  margin: 0;
}
.app-mp-print-card .radio-group {
  display: flex;
  gap: 16px;
}
.app-mp-print-card .radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Chip Offre tri-state */
.mp-offre-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: var(--font-xs);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: transform 80ms ease;
}
.mp-offre-chip:active { transform: scale(0.96); }
.mp-offre-chip--none {
  color: var(--ink-soft);
  background: var(--bg-2);
  border-color: var(--stroke);
}
.mp-offre-chip--speciale {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}
.mp-offre-chip--offerte {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.app-mp-toolbar { flex-direction: column; align-items: stretch; }
.app-mp-toolbar .filters { flex-wrap: wrap; gap: 8px; }
#app-mp-filter-count { font-size: var(--font-sm); color: var(--ink-soft); font-style: italic; white-space: nowrap; }
.app-mp-empty { padding: 24px; text-align: center; }

/* Bulk-bar App MP : 3 lignes (selects / toggles bool / actions extra) */
#app-mp-bulk-bar .bulk-row-toggles { flex-wrap: wrap; gap: 8px; align-items: center; }
/* Pastilles toggle pour les booléens en masse (App FR/DE/IT, Franc Paysan).
   Réutilise le style .label-filter-btn existant (cohérent avec les filtres
   de la toolbar). État .active = visuellement enfoncé → bool appliqué TRUE. */
#app-mp-bulk-bar .bulk-bool-toggle.active {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border-color: var(--brand);
  color: var(--brand-dark, var(--brand));
}

/* Icône App MP dans le header de page : un peu plus grande que les autres icônes
   de tabs (qui utilisent .page-icon à 26×26) pour mieux rendre la silhouette du SVG.
   Le sélecteur :has() cible uniquement quand le <use> pointe vers icon-mp. */
#page-icon:has(use[href="#icon-mp"]) {
  width: 34px;
  height: 34px;
  margin-top: 1px;
}

/* Highlight de la ligne du tableau App MP après "Voir dans App MP →" */
.app-mp-row--highlight {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: var(--brand);
  transition: background 250ms ease, border-color 250ms ease;
}

/* Teintes des lignes selon le status (mp.etape).
   - 03. Publié → fond vert très léger (contacts actifs/sains)
   - 04. Résilié → fond rouge très léger (à surveiller)
   - 05. Fin activité / 06. Pas intéressé → opacité réduite (peu prioritaires)
   Le hover reste prioritaire (background hover override). */
/* Background des rows via CSS var --row-bg : indispensable pour que les
   cellules sticky (Status, Société, checkbox) puissent matcher le fond de leur
   row au lieu de laisser voir le contenu scrollé derrière. */
.app-mp-table .row.app-mp-row {
  --row-bg: #fff;
  background: var(--row-bg);
}
.app-mp-table .row.app-mp-row--status-published      { --row-bg: #f0fdf4; }
.app-mp-table .row.app-mp-row--status-published:hover{ --row-bg: #dcfce7; }
.app-mp-table .row.app-mp-row--status-resilie        { --row-bg: #fef2f2; }
.app-mp-table .row.app-mp-row--status-resilie:hover  { --row-bg: #fee2e2; }
/* Dim (status 6 Pas intéressé uniquement) : fond gris + TOUT le texte de la
   row (cells texte, liens, inputs, selects, mp-multi-trigger) en gris #9ca3af.
   Override la couleur explicite du base .input (--ink) pour que les selects
   et inputs partagent l'effet "atténué". */
.app-mp-table .row.app-mp-row--status-dim {
  --row-bg: #fafafa;
}
.app-mp-table .row.app-mp-row--status-dim,
.app-mp-table .row.app-mp-row--status-dim a,
.app-mp-table .row.app-mp-row--status-dim .input--inline,
.app-mp-table .row.app-mp-row--status-dim select.input--inline,
.app-mp-table .row.app-mp-row--status-dim input.input--inline,
.app-mp-table .row.app-mp-row--status-dim .mp-multi-trigger,
.app-mp-table .row.app-mp-row--status-dim .mp-offre-chip {
  color: #9ca3af !important;
}
.app-mp-table .row.app-mp-row--status-dim:hover { --row-bg: #f3f4f6; }
.app-mp-table .row.app-mp-row--status-dim:hover,
.app-mp-table .row.app-mp-row--status-dim:hover a,
.app-mp-table .row.app-mp-row--status-dim:hover .input--inline,
.app-mp-table .row.app-mp-row--status-dim:hover select.input--inline,
.app-mp-table .row.app-mp-row--status-dim:hover input.input--inline,
.app-mp-table .row.app-mp-row--status-dim:hover .mp-multi-trigger,
.app-mp-table .row.app-mp-row--status-dim:hover .mp-offre-chip {
  color: var(--ink) !important;
}

/* ─── Sticky columns : Status (1), Société (2), Checkbox (dernière) ─────────
   - 2 premières colonnes restent visibles au scroll horizontal (left:0 et
     left:96px = 90 status + 6 gap)
   - Dernière colonne (checkbox) reste visible (right:0)
   - z-index 2 sur data rows, 3 sur header (le head sticky-top doit aussi
     dominer en horizontal) */
.app-mp-table .row.app-mp-row > div:nth-child(1),
.app-mp-table .row.app-mp-row > div:nth-child(2),
.app-mp-table .row.app-mp-row > div:last-child {
  position: sticky;
  z-index: 2;
  background: var(--row-bg);
}
.app-mp-table .row.app-mp-row > div:nth-child(1) { left: 0; }
.app-mp-table .row.app-mp-row > div:nth-child(2) { left: 90px; }
.app-mp-table .row.app-mp-row > div:last-child   { right: 0; }

/* Head row sticky horizontale (en plus du sticky vertical déjà actif via .row.head).
   IMPORTANT : la .row.head doit avoir un z-index > z-index des sticky cells des
   data rows (qui sont à 2), sinon lors du scroll vertical les cells sticky des
   data rows (Status, Société, Checkbox) passent par-dessus le header au lieu
   d'être masquées par lui. Le base .row.head a z-index:1, donc on override à 5. */
.app-mp-table .row.head {
  --row-bg: var(--bg-head, #eef2f7);
  background: var(--row-bg);
  z-index: 5;
}
.app-mp-table .row.head > div:nth-child(1),
.app-mp-table .row.head > div:nth-child(2),
.app-mp-table .row.head > div:last-child {
  position: sticky;
  z-index: 6;
  background: var(--row-bg);
}
.app-mp-table .row.head > div:nth-child(1) { left: 0; }
.app-mp-table .row.head > div:nth-child(2) { left: 90px; }
.app-mp-table .row.head > div:last-child   { right: 0; }

/* Colonne Cotisation : select dropdown centré horizontalement (les montants
   sont alimentés par references.mpCotisations). */
.app-mp-table .app-mp-cotisation-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-mp-table .app-mp-cotisation-cell .input--inline {
  text-align: center;
}

/* Multi-select inline : bouton dans la cellule + popup flottant avec checkboxes */
.mp-multi-trigger {
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Variante toolbar : ressemble aux autres selects de filtre (taille standard) */
.mp-filter-multi {
  min-width: 160px;
  font-size: var(--font-base);
}
.mp-filter-multi::after {
  /* Petit caret pour signaler que c'est cliquable comme un select */
  content: ' ▾';
  opacity: 0.5;
  font-size: 10px;
}
.mp-multi-popup {
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  padding: 6px 4px;
  max-height: 260px;
  overflow-y: auto;
  font-size: var(--font-md);
}
.mp-multi-popup .mp-multi-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.mp-multi-popup .mp-multi-option:hover {
  background: var(--hover-bg);
}
.mp-multi-popup .mp-multi-empty {
  padding: 8px 10px;
  font-size: var(--font-xs);
  font-style: italic;
}

/* Panneau Diagnostic > App MP : section import */
#debug-panel-app-mp .debug-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#debug-panel-app-mp .debug-section h3 { margin: 0; font-size: var(--font-lg); }
#debug-panel-app-mp .debug-section-stats { font-size: var(--font-md); }
#debug-panel-app-mp .debug-section-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#debug-panel-app-mp .debug-section-result { font-size: var(--font-sm); font-style: italic; min-height: 1em; }

/* ── Gestion des Profils (Paramètres → section pleine largeur) ── */
.hidden-by-role { display: none !important; }

/* Login : styles (remplace les inline retirés du HTML) */
.login-logo-img { max-width: 120px; height: auto; margin: 0; }
.login-logo-img--lw, .login-logo-img--mp { display: block; }
/* Logo Mon Producteur affiché à sa taille naturelle (pas de max-width). */
.login-logo-img--mp { max-width: none; width: auto; }
.login-logo-title { margin-top: 8px; }
.login-logo-title { font-size: 22px; font-weight: 700; margin: 0; }
.login-logo-sub { font-size: 13px; color: var(--ink-soft, #888); margin: 4px 0 0; }
.login-error { color: #dc2626; font-size: 13px; min-height: 20px; text-align: center; }
.login-btn { width: 100%; }
/* Lien discret « Ouvrir la caisse » sous le formulaire de login (hors page caisse). */
.login-caisse-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--ink-soft);
  text-decoration: none;
}
.login-caisse-link:hover { color: var(--brand); text-decoration: underline; }

.params-users-section {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.params-users-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.params-users-title { margin: 0 0 4px; font-size: var(--font-lg); font-weight: 700; }
.params-users-list { display: flex; flex-direction: column; gap: 4px; }
.params-users-empty,
.params-loading {
  padding: 16px;
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
}
.params-users-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 130px 1.4fr 110px auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke);
}
.params-users-row:last-child { border-bottom: none; }
.params-users-row.is-inactive { opacity: 0.6; }
.user-cell-name { font-weight: 600; }
.user-cell-username { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--font-sm); color: var(--ink-soft); }
.user-cell-contact { font-size: var(--font-sm); }
.user-contact-empty { color: var(--ink-soft); }

.user-role-badge,
.user-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.user-role-badge.super { background: #fef3c7; color: #92400e; }
.user-role-badge.admin { background: #dbeafe; color: #1e40af; }
.user-status-badge.active { background: #dcfce7; color: #166534; }
.user-status-badge.inactive { background: #fee2e2; color: #991b1b; }

.user-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.user-row-actions .ghost { padding: 6px; }
.user-row-actions .ghost svg { display: block; }
.user-protected-pill {
  font-size: 11px;
  color: var(--ink-soft);
  padding: 2px 8px;
  border: 1px dashed var(--stroke);
  border-radius: 10px;
  font-style: italic;
}

.params-users-msg { margin-top: 12px; min-height: 1em; font-size: var(--font-sm); }
.params-users-msg.ok { color: #166534; }
.params-users-msg.err { color: #b91c1c; }

/* Modale création/édition profil */
.user-form-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 12, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.user-form-modal .modal-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  padding: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
.user-form-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}
.user-form-modal .modal-actions { display: flex; gap: 4px; }
.user-form-modal .modal-title { font-size: var(--font-lg); font-weight: 700; }
.user-form-modal .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.user-form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.user-form-grid .params-field { display: flex; flex-direction: column; gap: 4px; }
.user-form-grid label { font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.user-form-contact-picker .user-form-contact-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.user-form-contact-picker .input { flex: 1; }
.user-form-contact-resolved { margin: 4px 0 0; font-style: italic; font-size: var(--font-sm); color: var(--ink-soft); }
.user-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 720px) {
  .params-users-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    row-gap: 4px;
  }
  .user-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Events ──────────────────────────────────────────────────────────────── */
.events-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.events-filter-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Lien « Ouvrir la caisse » : bouton ancre poussé à droite des filtres. */
.events-caisse-link {
  margin-left: auto;
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.events-search { width: 100%; margin-bottom: 14px; }

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.event-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.event-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.event-card-head { display: flex; align-items: center; justify-content: space-between; }
.event-card-id { font-size: var(--font-xs); }
.event-card-title { font-weight: 700; font-size: var(--font-lg); color: var(--ink); line-height: 1.25; }
.event-card-meta { display: flex; flex-direction: column; gap: 2px; font-size: var(--font-sm); }
.event-card-actions { margin-top: 4px; display: flex; gap: 6px; }

.event-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--ink-soft);
}
.event-status--planifie { background: var(--warning); }
.event-status--en_cours { background: var(--brand); }
.event-status--termine  { background: var(--ink-soft); }
.event-status--archived { background: #9a8f82; }

/* Éditeur de jours dans la modale event */
.event-days { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.event-days-empty { font-size: var(--font-sm); padding: 4px 0; }
.event-day-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.event-day-date { font-weight: 600; font-size: var(--font-md); color: var(--ink); }
.event-day-time { display: flex; align-items: center; gap: 6px; }
.event-day-time .label { margin: 0; font-size: var(--font-xs); }
.event-day-time .input { width: auto; }

@media (max-width: 720px) {
  .event-day-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Events — vue détail ─────────────────────────────────────────────────── */
.event-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.event-detail-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.event-detail-title { margin: 2px 0 0; font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.2; overflow-wrap: anywhere; }
.event-detail-meta { font-size: var(--font-sm); }
.event-detail-head-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.event-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

.ed-section { display: flex; flex-direction: column; gap: 10px; }
.ed-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-total { font-weight: 700; color: var(--brand); font-size: var(--font-md); }

.ed-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ed-add .input { box-sizing: border-box; }
/* Champs texte/select pleine largeur (passent à la ligne) */
.ed-add--stock [data-role="ed-stock-ref"],
.ed-add--purchase [data-role="ed-purchase-label"],
.ed-add--cost [data-role="ed-cost-label"],
.ed-add--cost [data-role="ed-cost-category"] { flex: 1 1 100%; }
/* Variante + lot fondue : largeur souple */
.ed-add--stock [data-role="ed-stock-variante"],
.ed-add--stock [data-role="ed-stock-lot"] { flex: 1 1 160px; min-width: 0; }
/* Champs numériques étroits (Qté, Coût unit., Montant) */
.ed-add [data-role="ed-stock-qty"],
.ed-add [data-role="ed-cost-amount"] { flex: 0 0 90px; }
.ed-add [data-role="ed-purchase-qty"] { flex: 0 0 80px; }
.ed-add [data-role="ed-purchase-cost"] { flex: 0 0 110px; }
/* Boutons : taille auto, poussés à droite pour ne jamais recouvrir un champ */
.ed-add > button { flex: 0 0 auto; }
.ed-add [data-action$="-add"] { margin-left: auto; }

.ed-lines { display: flex; flex-direction: column; gap: 4px; }
.ed-line {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--bg-2);
  font-size: var(--font-md);
}
.ed-line-main { font-weight: 600; color: var(--ink); }
.ed-line-sub { font-size: var(--font-sm); }
.ed-line-qty { font-weight: 700; min-width: 40px; text-align: right; }
.ed-line-actions { display: flex; gap: 4px; align-items: center; }
.ed-line--editing {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--bg-2));
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.ed-empty { padding: 6px 2px; font-size: var(--font-sm); }

@media (max-width: 720px) {
  .event-detail-head { flex-wrap: wrap; align-items: center; }
  .event-detail-head .event-detail-titlewrap { order: 3; flex-basis: 100%; }
  .event-detail-head-actions { margin-left: auto; }
}

/* ── Caisse : section back-office (liste des jours) ────────────────────────── */
.ev-caisse { margin-bottom: 16px; }
.ev-caisse-days { display: flex; flex-direction: column; gap: 8px; }
.ev-caisse-day {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.ev-caisse-day-info { display: flex; flex-direction: column; }
.ev-caisse-date { font-weight: 600; color: var(--ink); }
.ev-caisse-hours { font-size: var(--font-sm); }
.ev-caisse-day-stat { font-size: var(--font-sm); color: var(--ink-soft); white-space: nowrap; }
.ev-caisse-day-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* ── Tickets orphelins (dates modifiées après encaissement) ───────────────── */
.ev-orphans {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--stroke);
}
.ev-orphans-warn {
  font-size: var(--font-sm);
  color: var(--ink);
  background: color-mix(in srgb, var(--warning) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--stroke));
  border-radius: var(--radius);
  padding: 8px 12px;
  line-height: 1.4;
}
.ev-orphan-day {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--stroke));
  border-radius: var(--radius);
  background: var(--bg-2);
}
.ev-orphan-info { display: flex; flex-direction: column; }
.ev-orphan-stat { font-size: var(--font-sm); color: var(--ink-soft); }
.ev-orphan-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ev-orphan-remap { display: flex; align-items: center; gap: 6px; }
.ev-orphan-remap .label { font-size: var(--font-sm); color: var(--ink-soft); white-space: nowrap; }

/* ── Bilan event (Phase 5) ────────────────────────────────────────────────── */
.ev-bilan { margin-top: 16px; }
.ev-bilan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) { .ev-bilan-grid { grid-template-columns: 1fr; } }
.ev-bilan-block { display: flex; flex-direction: column; gap: 12px; }
.ev-bilan-kpis { display: flex; gap: 12px; flex-wrap: wrap; }
.ev-bilan-kpi {
  flex: 1 1 120px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.ev-bilan-kpi strong { font-size: var(--font-lg); }
.ev-bilan-subtitle {
  font-size: var(--font-sm); font-weight: 600; color: var(--ink-soft);
  margin-bottom: 6px;
}
.ev-bilan-days { display: flex; flex-direction: column; gap: 2px; }
.ev-bilan-dayrow,
.ev-bilan-mode {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 4px 0; font-size: var(--font-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--stroke) 50%, transparent);
}
.ev-bilan-mode { grid-template-columns: 1fr auto; }
.ev-bilan-lines { display: flex; flex-direction: column; }
.ev-bilan-line {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; font-size: var(--font-sm);
}
.ev-bilan-line.ev-bilan-sub { color: var(--ink-soft); }
.ev-bilan-line.ev-bilan-total {
  font-weight: 700; font-size: var(--font-base);
  border-top: 1px solid var(--stroke); margin-top: 2px; padding-top: 8px;
}
.ev-bilan-pos { color: var(--success); }
.ev-bilan-neg { color: var(--danger); }
.ev-bilan-note { font-size: var(--font-xs); margin-top: 4px; }
.ev-cogs, .ev-bilan-stock {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--stroke);
}
.ev-cogs-row {
  display: grid;
  grid-template-columns: 1.4fr auto auto 110px auto auto;
  align-items: center; gap: 8px;
  padding: 5px 0; font-size: var(--font-sm);
}
@media (max-width: 720px) {
  .ev-cogs-row { grid-template-columns: 1fr auto; grid-auto-flow: row; }
}
.ev-cogs-name { font-weight: 500; }
.ev-cogs-input { max-width: 110px; }
.ev-bilan-stockrow {
  display: grid; grid-template-columns: 1.4fr auto auto auto; gap: 10px;
  padding: 4px 0; font-size: var(--font-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--stroke) 50%, transparent);
}

/* ── Page caisse autonome (caisse.html) : sélecteur event → jour ──────────── */
body.caisse-page {
  margin: 0;
  background: var(--bg);
  min-height: 100vh;
}
.caisse-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--stroke);
  position: sticky; top: 0; z-index: 10;
}
.caisse-brand { display: flex; align-items: center; gap: 10px; }
.caisse-brand-img { max-height: 36px; width: auto; }
.caisse-brand-title { font-weight: 700; font-size: var(--font-lg); }
.caisse-nav { display: flex; align-items: center; gap: 10px; }
.caisse-main { max-width: 860px; margin: 0 auto; padding: 16px; }
.caisse-intro { margin-bottom: 12px; font-size: var(--font-sm); }
.caisse-picker { display: flex; flex-direction: column; gap: 16px; }
.caisse-empty,
.caisse-day-empty {
  padding: 20px; text-align: center;
  border: 1px dashed var(--stroke); border-radius: var(--radius);
}
.caisse-event {
  border: 1px solid var(--stroke); border-radius: var(--radius);
  background: var(--bg-2); overflow: hidden;
}
.caisse-event-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--stroke);
}
.caisse-event-title { margin: 0; font-size: var(--font-lg); }
.caisse-event-lieu { font-size: var(--font-sm); }
.caisse-days { display: flex; flex-direction: column; }
.caisse-day {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 14px; border: 0; border-bottom: 1px solid var(--stroke);
  background: transparent; cursor: pointer;
  font: inherit; color: inherit;
  transition: background 0.12s ease;
}
.caisse-day:last-child { border-bottom: 0; }
.caisse-day:hover, .caisse-day:active { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.caisse-day.is-today { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.caisse-day-date { font-weight: 600; }
.caisse-day-hours, .caisse-day-stat { font-size: var(--font-sm); color: var(--ink-soft); }
.caisse-day-go { font-weight: 600; color: var(--brand); white-space: nowrap; }
@media (max-width: 600px) {
  .caisse-day { grid-template-columns: 1fr auto; row-gap: 4px; }
  .caisse-day-go { grid-column: 1 / -1; }
}

/* ── Caisse POS : overlay plein écran tactile ─────────────────────────────── */
body.pos-open { overflow: hidden; }
.pos-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-2);
  display: flex; flex-direction: column;
}
.pos-shell { display: flex; flex-direction: column; height: 100%; position: relative; }
.pos-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: var(--brand); color: #fff;
}
.pos-head-info { display: flex; flex-direction: column; line-height: 1.2; }
.pos-head-title { font-weight: 700; font-size: var(--font-lg); }
.pos-head-sub { font-size: var(--font-sm); opacity: .85; }
.pos-close {
  border: none; background: rgba(255,255,255,.18); color: #fff;
  width: 44px; height: 44px; border-radius: var(--radius);
  font-size: 22px; cursor: pointer;
}
.pos-close:hover { background: rgba(255,255,255,.3); }

.pos-body { flex: 1; display: grid; grid-template-columns: 1fr 380px; gap: 0; min-height: 0; }
.pos-grid-wrap { padding: 16px; overflow-y: auto; }
.pos-cart {
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--stroke); background: var(--card);
}
.pos-section-title { font-weight: 700; color: var(--ink); margin: 4px 4px 12px; }
.pos-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 0;
}
.pos-cart-head .pos-section-title { margin: 0; padding: 0; }
.pos-cart-collapse {
  border: 1px solid var(--stroke); background: var(--card); color: var(--ink);
  width: 32px; height: 32px; border-radius: var(--radius);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.pos-cart-collapse:active { background: var(--bg-2); }
.pos-cart-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px 10px;
}
.pos-cart-bar-info { font-size: var(--font-md); color: var(--ink); }
.pos-cart-bar .pos-btn-primary { flex: 0 0 auto; padding: 10px 20px; }

.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pos-grid-empty, .pos-cart-empty {
  padding: 24px; text-align: center; color: var(--ink-soft); font-size: var(--font-sm);
}
.pos-prod {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 96px; padding: 12px;
  border: 1px solid var(--stroke); border-top: 4px solid var(--stroke);
  border-radius: var(--radius-lg);
  background: var(--card); cursor: pointer; text-align: left;
  transition: transform .05s ease, box-shadow .1s ease;
}
.pos-prod:active { transform: scale(.97); }
.pos-prod:hover { box-shadow: var(--shadow); }
.pos-prod.is-out { opacity: .55; }
.pos-prod-name { font-weight: 700; color: var(--ink); }
.pos-prod-sub { font-size: var(--font-xs); color: var(--ink-soft); }
.pos-prod-price { margin-top: auto; font-weight: 700; color: var(--brand); }
.pos-prod-left { font-size: var(--font-xs); color: var(--ink-soft); }
.pos-prod-left.neg { color: var(--brand); font-weight: 700; }

.pos-cart-lines { flex: 1; overflow-y: auto; padding: 0 16px; display: flex; flex-direction: column; gap: 6px; }
.pos-line {
  border: 1px solid var(--stroke); border-radius: var(--radius);
  background: var(--bg-2); padding: 7px 10px;
}
.pos-line-top { display: flex; align-items: center; gap: 8px; }
.pos-line-name { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-line-total { font-weight: 700; color: var(--ink); white-space: nowrap; }
.pos-line-total.offered { color: var(--warning); }
.pos-line-del { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 16px; padding: 2px 4px; }
.pos-line-del:hover { color: var(--brand); }
/* Une seule ligne : −Qté+  ·  rabais  ·  Offrir */
.pos-line-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: nowrap; }
.pos-qty { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pos-qty-btn {
  width: 32px; height: 32px; border-radius: var(--radius);
  border: 1px solid var(--stroke); background: var(--card);
  font-size: 18px; font-weight: 700; cursor: pointer; color: var(--ink);
}
.pos-qty-btn:active { background: var(--bg-2); }
.pos-qty-val { min-width: 24px; text-align: center; font-weight: 700; font-size: var(--font-md); }
.pos-disc-preset {
  flex: 1 1 auto; min-width: 0; max-width: 150px;
  padding: 6px; border: 1px solid var(--stroke); border-radius: var(--radius);
  background: var(--card); color: var(--ink); font-size: var(--font-sm);
}
.pos-disc-free-input { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.pos-disc-val {
  flex: 1 1 auto; min-width: 0; width: 100%;
  padding: 5px 6px; border: 1px solid var(--stroke); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
}
.pos-disc-unit, .pos-disc-free {
  flex: 0 0 auto;
  border: 1px solid var(--stroke); background: var(--card); border-radius: var(--radius);
  padding: 5px 10px; cursor: pointer; font-size: var(--font-sm); color: var(--ink);
}
.pos-disc-free { margin-left: auto; }
.pos-disc-free.active { background: var(--warning); border-color: var(--warning); color: #fff; }
.pos-disc-unit:active, .pos-disc-free:active { background: var(--bg-2); }

.pos-cart-foot { border-top: 1px solid var(--stroke); padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.pos-total-row { display: flex; align-items: baseline; justify-content: space-between; }
.pos-total { font-size: var(--font-lg); color: var(--brand); }
/* Tous les modes de paiement sur UNE seule ligne, quel que soit leur nombre
   (grid-auto-flow column → autant de colonnes égales que de modes). */
.pos-modes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.pos-mode {
  padding: 9px 4px; border-radius: var(--radius);
  border: 1px solid var(--stroke); background: var(--card); cursor: pointer;
  font-weight: 600; color: var(--ink); font-size: var(--font-sm);
  min-width: 0; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pos-mode.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pos-cart-actions { display: flex; gap: 8px; }
.pos-btn-primary {
  flex: 2; padding: 14px; border: none; border-radius: var(--radius);
  background: var(--brand); color: #fff; font-weight: 700; font-size: var(--font-md); cursor: pointer;
}
.pos-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.pos-btn-ghost {
  flex: 1; padding: 14px; border: 1px solid var(--stroke); border-radius: var(--radius);
  background: var(--card); color: var(--ink); font-weight: 600; cursor: pointer;
}
.pos-btn-ghost:disabled { opacity: .45; cursor: not-allowed; }

.pos-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 12px; border-top: 1px solid var(--stroke); background: var(--card);
}
/* Stat du jour : nb tickets + CA sur 2 lignes, alignées à droite. */
.pos-foot-stat {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  line-height: 1.2; text-align: right;
}
.pos-foot-stat-n { font-size: var(--font-sm); color: var(--ink-soft); }
.pos-foot-stat-ca { font-weight: 700; color: var(--ink); }
.pos-foot-actions { display: flex; gap: 8px; align-items: center; }
.pos-foot-actions .pos-foot-btn { flex: 0 0 auto; padding: 10px 16px; font-size: var(--font-md); }
.pos-closing {
  padding: 12px 16px 16px; background: var(--card);
  border-top: 1px solid var(--stroke);
}
.pos-closing-form, .pos-closing-done {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 420px; margin: 0 auto;
}
.pos-closing-row { display: flex; justify-content: space-between; gap: 12px; }
.pos-closing-field { display: flex; flex-direction: column; gap: 4px; }
.pos-closing-input {
  font-size: var(--font-lg); padding: 10px 12px;
  border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--bg-2);
  color: var(--ink); width: 100%;
}
.pos-closing-diff { font-weight: 700; border-top: 1px solid var(--stroke); padding-top: 8px; }
.pos-closing-pos { color: var(--success); }
.pos-closing-neg { color: var(--danger); }
.pos-tickets {
  max-height: 40vh; overflow-y: auto; padding: 8px 16px 16px;
  background: var(--card); border-top: 1px solid var(--stroke);
  display: flex; flex-direction: column; gap: 6px;
}
.pos-ticket {
  display: grid; grid-template-columns: auto auto 1fr auto auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--bg-2);
}
.pos-ticket-time { font-weight: 600; color: var(--ink); }
.pos-ticket-mode { font-size: var(--font-sm); color: var(--ink-soft); }
.pos-ticket-n { font-size: var(--font-sm); color: var(--ink-soft); }
.pos-ticket-total { font-weight: 700; color: var(--ink); }
.pos-ticket-edit, .pos-ticket-del {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--ink-soft); cursor: pointer; padding: 4px;
}
.pos-ticket-edit:hover { color: var(--brand); }
.pos-ticket-del:hover { color: var(--danger); }

.pos-edit-banner {
  margin: 0 16px 8px; padding: 8px 10px;
  background: color-mix(in srgb, var(--warning) 14%, var(--card));
  border: 1px solid var(--warning); border-radius: var(--radius);
  font-size: var(--font-sm); color: var(--ink);
}

/* Confirmation inline (ex. « Vider ») */
.pos-confirm {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); padding: 24px;
}
.pos-confirm-card {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 20px; max-width: 360px; width: 100%;
  box-shadow: var(--shadow);
}
.pos-confirm-msg { color: var(--ink); font-size: var(--font-md); margin-bottom: 16px; }
.pos-confirm-actions { display: flex; gap: 8px; }
.pos-confirm-actions .pos-btn-ghost,
.pos-confirm-actions .pos-btn-primary { flex: 1; }
.pos-btn-danger { background: var(--danger); }

@media (max-width: 720px) {
  .ev-caisse-day { grid-template-columns: 1fr auto; }
  .ev-caisse-day .btn-small { grid-column: 1 / -1; }
  .pos-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 0; }
  .pos-cart { border-left: none; border-top: 1px solid var(--stroke); max-height: 42vh; }
  .pos-body.cart-collapsed .pos-cart { max-height: none; }
}