/* ══════════════════════════════════════════════════════════════════════════
   LES JETONS DU THEME CLAIR, DEFINIS ICI.
   ⚠️ CAUSE RACINE trouvee apres quatre correctifs sans effet : plusieurs regles
   de ce fichier ecrivent `var(--vf-surface-2)`, `var(--vf-text)`, etc. — mais
   AUCUN de ces jetons n'est defini dans cette feuille (verifie : 0 occurrence).
   Ils viennent de global.css, dont le bloc clair ne s'applique pas sur ces
   pages. Chaque `var()` retombait donc sur sa valeur sombre, et les boutons de
   filtre restaient noirs avec un texte fonce dessus — 1,15 de contraste.

   Ajouter des regles par-dessus ne pouvait RIEN changer : le probleme n'etait
   pas la cascade, c'etait la valeur. On declare donc les jetons ici, avec les
   memes valeurs que global.css, pour que cette feuille tienne toute seule.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --vf-bg: #f6f7f9;
  --vf-surface: #ffffff;
  --vf-surface-2: #f1f3f6;
  --vf-surface-3: #e5e8ee;
  --vf-border: #dfe3ea;
  --vf-text: #0f1115;
  --vf-text-2: #55606f;
  --vf-text-3: #5f6773;
  --vf-accent: #2563eb;
}
/* ══════════════════════════════════════════════════════════════════════════════
   Design des pages Ventes / Achats — RÈGLES COPIÉES TELLES QUELLES depuis le
   dashboard.html de l'extension (.pageview, .mini-kpi, .filter-bar, .vh-bar…).
   Variables du thème remplacées par leurs valeurs ; les @media sont conservés
   (les aplatir ferait s'appliquer partout les règles mobiles).
   ══════════════════════════════════════════════════════════════════════════════ */
.pageview { padding: 24px 28px; }
.pageview .ph-title-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.pageview h2 { color: #FFFFFF; font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.pageview .ph-subtitle { color: #9CA3AF; font-size: 14px; margin-top: 4px; }
.icon-square { width: 36px; height: 36px; background: #1F1F1F; border: 1px solid #2A2A2A; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; cursor: pointer; flex-shrink: 0; }
.icon-square { transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.icon-square:hover { background: #2A2A2A; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.mini-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; align-items: start; }
.mini-kpi { background: #161616; border: 1px solid #2A2A2A; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.45); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.mini-kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, #3B82F6, transparent 75%); opacity: 0.75; }
.mini-kpi:hover { transform: translateY(-3px); border-color: rgba(59,130,246,0.40); box-shadow: 0 14px 34px rgba(0,0,0,0.45), 0 0 0 1px rgba(59,130,246,0.15); }
.mini-kpi .mk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mini-kpi .mk-label { color: #9CA3AF; font-size: 12px; font-weight: 500; }
.mini-kpi .mk-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(59, 130, 246, 0.15); color: #3B82F6; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mini-kpi .mk-value { color: #FFFFFF; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; margin-top: 4px; }
.mini-kpi .mk-sub { color: #9CA3AF; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.mini-kpi .mk-sub.blue { color: #3B82F6; }
.mini-kpi .mk-stats { display: flex; gap: 14px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #1F1F1F; color: #9CA3AF; font-size: 11.5px; }
.filter-bar { background: #161616; border: 1px solid #2A2A2A; border-radius: 14px; padding: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.filter-bar .grow { flex: 1; min-width: 180px; }
.fb-input { background: #1F1F1F; border: 1px solid #2A2A2A; border-radius: 8px; padding: 8px 12px; color: #FFFFFF; font-size: 13px; width: 100%; font-family: inherit; }
.fb-input::placeholder { color: #6B7280; }
.fb-input { transition: border-color 0.15s, box-shadow 0.15s; }
.fb-input:focus { outline: none; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.fb-btn { display: inline-flex; align-items: center; gap: 6px; background: #1F1F1F; border: 1px solid #2A2A2A; border-radius: 8px; padding: 7px 12px; color: #FFFFFF; font-size: 13px; font-weight: 500; cursor: pointer; }
.fb-btn:hover { background: #2A2A2A; }
.fb-btn { transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.fb-btn.primary { background: linear-gradient(135deg,#60A5FA,#2563EB); border-color: transparent; box-shadow: 0 3px 12px rgba(59,130,246,0.30); }
.fb-btn.primary:hover { background: linear-gradient(135deg, #4F8DF7, #2563EB); box-shadow: 0 6px 18px rgba(59,130,246,0.45); }
.fb-btn .starter-tag { background: rgba(255,255,255,0.2); color: #FFFFFF; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.status-seg { display: flex; background: #161616; border: 1px solid #2A2A2A; border-radius: 12px; padding: 4px; gap: 2px; margin-bottom: 16px; overflow-x: auto; }
.status-btn { transition: color 0.15s, background 0.15s; }
.status-btn.active { background: #2A2A2A; color: #FFFFFF; }
.status-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: transparent; border: none; color: #9CA3AF; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; white-space: nowrap; flex: 1; justify-content: center; }
.status-btn:hover { color: #E5E7EB; }
.status-btn.active.transit { background: rgba(168, 85, 247, 0.15); color: #C4B5FD; }
.status-btn.active.transit svg { color: #A855F7; }
.status-btn .count { font-weight: 700; }
.item-check { width: 16px; height: 16px; border: 1.5px solid #6B7280; border-radius: 4px; margin-top: 6px; flex-shrink: 0; cursor: pointer; }
@media (max-width: 1100px) { .mini-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.ach-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 4px 14px; color: #9CA3AF; font-size: 13px; }
.ach-toolbar .selection-count { color: #9CA3AF; }
.ach-toolbar .selection-actions { margin-left: auto; display: flex; gap: 8px; }
.ach-toolbar .selection-actions button { background: #1A1A1A; border: 1px solid #2A2A2A; color: #FFF; padding: 6px 12px; border-radius: 6px; font-size: 12.5px; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px; }
.ach-toolbar .selection-actions button:hover { border-color: #3B82F6; }
.mini-kpi.mk-feat { border-color:rgba(52,211,153,.5) !important; background:linear-gradient(180deg,rgba(52,211,153,.10),rgba(52,211,153,0)) !important; }
.fb-btn.active { background:#3B82F6; color:#fff; border-color:#3B82F6; }
.vh-bar { background: #161616; border: 1px solid #2A2A2A; border-radius: 14px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.45); transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.vh-bar:hover { border-color: rgba(59,130,246,0.5); box-shadow: 0 10px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(59,130,246,0.15); }
.vh-bar-main { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; }
.vh-bar-check { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; border: 1.5px solid #6B7280; border-radius: 5px; cursor: pointer; }
.vh-bar-check:hover { border-color: #3B82F6; }
.vh-bar-check.checked, .vh-bar-check.partial { background: #3B82F6; border-color: #3B82F6; position: relative; }
.vh-bar-check.checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vh-bar-check.partial::after { content: ''; position: absolute; left: 3px; top: 7px; width: 10px; height: 2px; background: #fff; border-radius: 1px; }
.vh-bar-photo { width: 88px; height: 88px; flex-shrink: 0; border-radius: 10px; object-fit: cover; background: linear-gradient(135deg,#2A2A2A,#1A1A1A); display: flex; align-items: center; justify-content: center; color: #4B5563; }
.vh-bar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vh-bar-title { color: #2DD4BF; font-size: 14.5px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.vh-bar-title:hover { text-decoration: underline; }
.vh-bar-sub { color: #9CA3AF; font-size: 12.5px; }
.vh-bar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #9CA3AF; font-size: 12px; margin-top: 2px; }
.vh-bar-label { display: inline-flex; align-items: center; gap: 4px; background: #1F1F1F; color: #9CA3AF; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; cursor: pointer; }
.vh-bar-label:hover { color: #FFF; }
.vh-bar-status { flex-shrink: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 14px; }
.vh-bar-status .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.vh-bar-status.green { background: rgba(16,185,129,0.12); color: #34D399; }
.vh-bar-status.green  .dot { background: #34D399; }
.vh-bar-status.orange { background: rgba(249,115,22,0.12); color: #FB923C; }
.vh-bar-status.orange .dot { background: #FB923C; }
.vh-bar-status.gray { background: #1F1F1F; color: #9CA3AF; }
.vh-bar-status.gray   .dot { background: #9CA3AF; }
.vh-bar-foot { display: flex; align-items: center; gap: 26px; padding: 10px 16px; border-top: 1px solid #1F1F1F; }
.vh-bar-stat { display: flex; flex-direction: column; gap: 1px; }
.vh-bar-stat-val { font-size: 15px; font-weight: 700; color: #FFF; }
.vh-bar-stat-val.blue { color: #3B82F6; }
.vh-bar-stat-label { font-size: 9.5px; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.4px; }
.vh-bar-foot-spacer { flex: 1; }
.vh-bar-btn { background: rgba(59,130,246,0.15); color: #3B82F6; border: none; padding: 7px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; transition: background 150ms ease; }
.vh-bar-btn:hover { background: rgba(59,130,246,0.25); }
.vh-bar-btn:disabled { opacity: 0.5; cursor: default; }
.vh-bar-btn { margin-right: 4px; }
.vh-bar-note { display: inline-flex; align-items: center; gap: 5px; background: rgba(245,158,11,0.14); color: #FBBF24; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.vh-bar-note:hover { background: rgba(245,158,11,0.22); }
.vh-avoir-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.3px; }
.vh-avoir-tag.annul { background: rgba(248,113,113,0.16); color: #F87171; }
.vh-avoir-tag.partial { background: rgba(245,158,11,0.16); color: #FBBF24; }
.vh-dir { font-weight: 800; font-size: 13px; margin-right: 3px; cursor: help; }
.vh-dir.vente { color: #34D399; }
.vh-dir.achat { color: #FB923C; }
.vh-lot-tag { background: #6D28D9; color: #FFF; font-size: 9px; font-weight: 800; letter-spacing: .3px; padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-left: 6px; }
.vh-bar-row.sku-row { flex-wrap: wrap; row-gap: 6px; }
.fb-btn-active { border-color:#007AFF !important; color:#FFF !important; background:rgba(0,122,255,.12) !important; }
.mini-kpi { border-radius:16px; }
.mini-kpi:hover { transform:translateY(-3px); border-color:#3B82F6; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.fb-btn.primary,.btn.primary { background:linear-gradient(135deg,#3B82F6,#2563EB) !important; color:#fff !important; border:none !important; border-radius:10px !important; font-weight:700 !important; box-shadow:0 4px 14px rgba(59,130,246,.35); }
.fb-btn.primary:hover,.btn.primary:hover { background:linear-gradient(135deg,#4C8DF8,#2D6FF0) !important; box-shadow:0 8px 22px rgba(59,130,246,.5); transform:translateY(-1px); }
.fb-btn.primary:active,.btn.primary:active { transform:translateY(0); }
.fb-input { border-radius:10px; }
.fb-input:focus { outline:none; border-color:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.18); }
.fb-btn.primary { background:linear-gradient(135deg,#3D8BFF,#1E5FF5) !important; box-shadow:0 3px 10px rgba(37,99,235,.32) !important; }
.fb-btn.primary:hover { background:linear-gradient(135deg,#4C92FF,#256BF0) !important; box-shadow:0 5px 15px rgba(37,99,235,.40) !important; }
.mini-kpi::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; padding:1.5px; background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), #4F8DF7, rgba(59,130,246,0) 45%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s ease; }
.mini-kpi:hover::after { opacity:1; }

/* Pagination, rangée de sélection et carrousel de lot — mêmes règles que le dashboard */
.vh-select-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px 12px; color: #9CA3AF; font-size: 13px; }
.vh-select-box { margin-top: 0 !important; }
.vh-select-label { cursor: pointer; user-select: none; }
.vh-select-label:hover { color: #FFFFFF; }
.vh-select-clear { margin-left: auto; background: transparent; border: none; color: #6B7280; cursor: pointer; font-size: 12px; font-family: inherit; padding: 4px 8px; }
.vh-select-clear:hover { color: #FFFFFF; }
.vh-select-del { margin-left: 0 !important; color: #F87171; font-weight: 600; }
.vh-select-del:hover { color: #FCA5A5; }
.vh-select-row .vh-sel-act { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; background: #1F1F1F; border: 1px solid #2A2A2A; color: #9CA3AF; font-weight: 600; font-size: 12.5px; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.vh-select-row .vh-sel-act:hover { background: #2A2A2A; border-color: rgba(59,130,246,0.45); color: #FFFFFF; }
.vh-select-row .vh-sel-act:active { transform: scale(0.97); }
.vh-select-row .vh-select-del.vh-sel-act { background: rgba(248,113,113,0.09); border-color: rgba(248,113,113,0.32); color: #F87171; }
.vh-select-row .vh-select-del.vh-sel-act:hover { background: rgba(248,113,113,0.17); border-color: rgba(248,113,113,0.55); color: #FCA5A5; }
.vh-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 0 6px; }
.vh-pager-info { color: #9CA3AF; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vh-lot-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 28px; padding: 0; background: rgba(0,0,0,0.62); border: none; border-radius: 6px; color: #FFF; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 2; }
.vh-lot-arrow:hover { background: rgba(0,0,0,0.85); color: #22C55E; }
.vh-lot-arrow-l { left: 2px; }
.vh-lot-arrow-r { right: 2px; }
.vh-lot-count { position: absolute; bottom: 3px; right: 3px; background: rgba(0,0,0,0.66); color: #FFF; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 5px; font-variant-numeric: tabular-nums; }

/* Menu « N / page » — mêmes classes que le dropdown du dashboard */
.cdd { position: relative; }
.cdd-btn { display: inline-flex; align-items: center; gap: 6px; background: #1F1F1F; border: 1px solid #2A2A2A; border-radius: 8px; padding: 7px 12px; color: #FFFFFF; font-size: 13px; font-weight: 500; cursor: pointer; width: 100%; justify-content: space-between; font-family: inherit; }
.cdd-btn:hover { background: #2A2A2A; }
.cdd-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #1F1F1F; border: 1px solid #2A2A2A; border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); z-index: 50; display: none; min-width: 180px; }
.cdd-menu.open { display: block; }
.cdd-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; color: #FFFFFF; font-size: 13px; font-weight: 500; border-radius: 6px; cursor: pointer; gap: 12px; }
.cdd-item:hover { background: #2A2A2A; }
.cdd-item.selected { color: #3B82F6; }
.cdd-item .arrow { font-size: 10px; opacity: 0; }
.cdd-item.selected .arrow { opacity: 1; }

/* Adaptations minimales au site (la sidebar remplace la coquille de l'extension) */
.pageview { max-width: none; }
.vh-bar-photo img { width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
.vh-bar-title { cursor:default; }
.vh-bar-title:hover { text-decoration:none; }
.vh-bar-btn { text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.status-btn { display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  color:#9CA3AF; font-size:13px; font-weight:600; font-family:inherit; padding:8px 14px; border-radius:9px; white-space:nowrap; }
.status-btn .count { background:rgba(255,255,255,.07); border-radius:99px; padding:1px 7px; font-size:11.5px; }
@media (max-width: 640px) { .mini-kpi-grid { grid-template-columns: 1fr; } .pageview { padding:22px 16px 40px; } }

/* ══════════════════════════════════════════════════════════════════════════
   CLIENTS (/clients) — tableau triable avec commandes dépliables.
   Reprend les cotes de la vue « view-clients » de l'extension.
   ══════════════════════════════════════════════════════════════════════════ */
.vf-ct { display: flex; flex-direction: column; }
.vf-ct-head,
.vf-ct-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr 1fr;
  align-items: center; gap: 12px;
  padding: 12px 18px;
}
.vf-ct-head {
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: #6B7280;
}
.vf-ct-head .vf-th {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  transition: color .15s ease;
}
.vf-ct-head .vf-th:hover { color: #E5E7EB; }
.vf-ct-head .vf-th:focus-visible { outline: 2px solid #3B82F6; outline-offset: 3px; border-radius: 4px; }
.vf-arrow { opacity: .35; font-size: 10px; }
.vf-arrow.on { opacity: 1; color: #3B82F6; }

.vf-ct-row {
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  font-size: 13.5px; color: #D1D5DB; cursor: pointer;
  transition: background .15s ease;
}
.vf-ct-row:hover { background: rgba(59, 130, 246, .06); }
.vf-ct-row:focus-visible { outline: 2px solid #3B82F6; outline-offset: -2px; }
.vf-ct-row.on { background: rgba(59, 130, 246, .08); }
.vf-ct-cli { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vf-ct-cli b { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-ct-chev { flex: 0 0 auto; font-style: normal; color: #6B7280; transition: transform .2s ease; }
.vf-ct-row.on .vf-ct-chev { transform: rotate(90deg); color: #3B82F6; }
.vf-ct-row small { color: #6B7280; }
.vf-ct-eur { font-weight: 700; color: #34D399; font-variant-numeric: tabular-nums; }
.vf-ct-void { padding: 40px 18px; text-align: center; font-size: 13px; color: #6B7280; }

.vf-ct-orders { padding: 4px 18px 14px 40px; background: rgba(0, 0, 0, .18); }
.vf-ct-orders-t { margin: 8px 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #6B7280; }
.vf-ct-order {
  display: grid; grid-template-columns: minmax(0, 2fr) 1fr 90px 80px;
  align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid rgba(255, 255, 255, .05); border-radius: 8px;
  font-size: 12.5px; color: #9CA3AF; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.vf-ct-order:hover { border-color: rgba(59, 130, 246, .4); background: rgba(59, 130, 246, .06); }
.vf-ct-order .t { color: #E5E7EB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-ct-order .p { text-align: right; font-weight: 700; color: #34D399; font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .vf-ct-head { display: none; }
  .vf-ct-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .vf-ct-cli { grid-column: 1 / -1; }
  .vf-ct-order { grid-template-columns: 1fr auto; }
  .vf-ct-order .s, .vf-ct-order .d { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LITIGES (/litiges) — une carte par vente en retour ou suspendue.
   ══════════════════════════════════════════════════════════════════════════ */
.vf-lit {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; margin-bottom: 10px;
  background: #161616; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.vf-lit:hover { border-color: rgba(249, 115, 22, .4); transform: translateY(-1px); }
.vf-lit-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vf-lit-tag {
  padding: 3px 10px; border: 1px solid; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.vf-lit-d { font-size: 12px; color: #6B7280; }
.vf-lit-t {
  font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vf-lit-t:hover { color: #93C5FD; text-decoration: underline; }
.vf-lit-m { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12.5px; color: #9CA3AF; }
.vf-lit-p { margin-left: auto; font-weight: 700; color: #E5E7EB; font-variant-numeric: tabular-nums; }
.vf-lit-cta {
  align-self: flex-start; margin-top: 2px;
  font-size: 12.5px; font-weight: 600; color: #93C5FD; text-decoration: none;
}
.vf-lit-cta:hover { text-decoration: underline; }
.vf-lit-cta.off { color: #4B5563; cursor: default; }
.vf-lit-void { padding: 40px 18px; text-align: center; font-size: 13.5px; color: #6B7280; }

/* ══════════════════════════════════════════════════════════════════════════════
   MODE CLAIR — bloc de surcharges (06/08/2026)

   ⚠️ MÉTHODE : AUCUNE règle ci-dessus n'a été modifiée. Tout ce qui suit est
   préfixé par :root[data-theme="light"] et reste donc inerte tant que
   l'attribut n'est pas posé sur <html>. Le mode sombre est intouchable PAR
   CONSTRUCTION : il n'y a rien à démontrer ligne à ligne.

   Priorité aux jetons de src/styles/global.css (ils basculent tout seuls) ;
   valeur en dur uniquement quand aucun jeton ne porte la bonne TEINTE.

   Rappel des paires qui s'inversent : --vf-accent est l'APLAT (fond bleu),
   --vf-accent-ink est le bleu EN TEXTE. Même logique pour success / warn /
   danger. En clair l'« ink » est plus FONCÉ que l'aplat, en sombre il est plus
   clair : mettre --vf-accent sur du texte suffit à rater le contraste.

   Une liste des règles volontairement NON surchargées est donnée à la fin :
   rien n'a été oublié par distraction.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── En-tête de page ─────────────────────────────────────────────────────── */
:root[data-theme="light"] .pageview h2 { color: var(--vf-text); }
:root[data-theme="light"] .pageview .ph-subtitle { color: var(--vf-text-2); }

/* ── Bouton icône carré ──────────────────────────────────────────────────── */
:root[data-theme="light"] .icon-square {
  background: var(--vf-surface-2); border-color: var(--vf-border); color: var(--vf-text);
}
:root[data-theme="light"] .icon-square:hover {
  background: var(--vf-surface-3); border-color: var(--vf-accent); box-shadow: var(--vf-ring);
}

/* ── Cartes KPI ──────────────────────────────────────────────────────────── */
/* L'ombre noire à 45 % devient une ombre bleu-ardoise diluée : sur #f6f7f9 le
   noir ne fait pas une ombre, il fait une salissure sous la carte. */
:root[data-theme="light"] .mini-kpi {
  background: var(--vf-surface); border-color: var(--vf-border); box-shadow: var(--vf-shadow-sm);
}
/* Filet de 2 px en haut de carte : décoratif, il garde sa teinte bleue. */
:root[data-theme="light"] .mini-kpi::before {
  background: linear-gradient(90deg, var(--vf-accent), transparent 75%);
}
/* Deux règles :hover existent plus haut (l.17 puis l.100) ; c'est la SECONDE
   qui gagne en sombre. On ne reproduit donc que celle-là, adaptée. */
:root[data-theme="light"] .mini-kpi:hover {
  border-color: var(--vf-accent);
  box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 12px 30px rgba(15,23,42,.10);
}
/* Halo qui suit la souris sur le bord de la carte. */
:root[data-theme="light"] .mini-kpi::after {
  background: radial-gradient(160px circle at var(--mx,50%) var(--my,50%), #2563eb, rgba(37,99,235,0) 45%);
}
:root[data-theme="light"] .mini-kpi .mk-icon {
  background: var(--vf-accent-wash); color: var(--vf-accent-ink);
}
:root[data-theme="light"] .mini-kpi .mk-value { color: var(--vf-text); }
:root[data-theme="light"] .mini-kpi .mk-sub { color: var(--vf-text-2); }
/* Bleu EN TEXTE à 12 px : --vf-accent (#2563eb) donnerait 5,2:1, correct, mais
   l'« ink » (#1d4ed8, 7,4:1) reste lisible même sur la carte teintée mk-feat. */
:root[data-theme="light"] .mini-kpi .mk-sub.blue { color: var(--vf-accent-ink); }
:root[data-theme="light"] .mini-kpi .mk-stats { border-top-color: var(--vf-border); color: var(--vf-text-2); }
/* Carte « mise en avant » : le VERT veut dire « ça va bien », il reste vert.
   Il fonce simplement (#34d399 → #059669) pour tenir sur blanc. !important
   obligatoire : la règle d'origine en porte un. */
:root[data-theme="light"] .mini-kpi.mk-feat {
  border-color: rgba(5,150,105,.45) !important;
  background: linear-gradient(180deg, rgba(5,150,105,.10), rgba(5,150,105,0)) !important;
}

/* ── Barre de filtres, champs et boutons ─────────────────────────────────── */
:root[data-theme="light"] .filter-bar {
  background: var(--vf-surface); border-color: var(--vf-border); box-shadow: var(--vf-shadow-sm);
}
:root[data-theme="light"] .fb-input {
  background: var(--vf-surface-2); border-color: var(--vf-border); color: var(--vf-text);
}
:root[data-theme="light"] .fb-input::placeholder { color: var(--vf-text-3); }
:root[data-theme="light"] .fb-input:focus { border-color: var(--vf-accent); box-shadow: var(--vf-ring); }
/* ⚠️ COMMENTAIRE PLACE AU-DESSUS, JAMAIS DANS LE BLOC.
   Le precedent vivait a l'interieur de la regle et contenait litteralement les
   mots « background: var(--vf-surface-2) ». Resultat : le bouton restait #1F1F1F
   alors que la couleur du texte de la MEME regle s'appliquait — symptome exact
   d'un bloc mal analyse, ou la premiere declaration est perdue et les suivantes
   passent. Un commentaire ne coute rien au-dessus ; a l'interieur il peut couter
   une declaration.
   `!important` en plus : cette regle doit battre `.fb-btn { background:#1F1F1F }`
   pose 300 lignes plus haut, et on ne veut plus dependre de l'ordre. */
:root[data-theme="light"] .fb-btn {
  background-color: var(--vf-surface-2) !important;
  background-image: none !important;
  border-color: var(--vf-border) !important;
  color: var(--vf-text) !important;
}
:root[data-theme="light"] .fb-btn:hover { background-color: var(--vf-surface-3); }
/* Bouton principal : dégradé bleu conservé, mais assombri. Le texte reste
   BLANC dessus, donc les deux bornes doivent être foncées (#2563eb = 5,2:1,
   #1d4ed8 = 7,4:1). Le dégradé clair d'origine (#3D8BFF) donnerait 2,9:1. */
:root[data-theme="light"] .fb-btn.primary,
:root[data-theme="light"] .btn.primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(37,99,235,.28) !important;
}
:root[data-theme="light"] .fb-btn.primary:hover,
:root[data-theme="light"] .btn.primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  box-shadow: 0 5px 15px rgba(37,99,235,.36) !important;
}
/* La pastille « starter » vit dans un bouton dont le fond change selon la
   variante : sur le bouton principal (bleu) elle reste blanche, sur un bouton
   ordinaire (fond #f1f3f6) un blanc à 20 % serait invisible → noir dilué. */
:root[data-theme="light"] .fb-btn .starter-tag { background: rgba(15,23,42,.10); color: var(--vf-text); }
:root[data-theme="light"] .fb-btn.primary .starter-tag { background: rgba(255,255,255,.22); color: #fff; }
:root[data-theme="light"] .fb-btn.active {
  background: var(--vf-accent); color: #fff; border-color: var(--vf-accent);
}
/* .fb-btn-active (classe distincte de .fb-btn.active) : bleu iOS #007AFF sur
   fond très pâle AVEC UN TEXTE BLANC — invisible en clair. On garde la teinte
   (h≈211°) et on descend le texte à #0062cc (5,8:1). */
:root[data-theme="light"] .fb-btn-active {
  border-color: #0062cc !important; color: #0062cc !important; background: rgba(0,122,255,.10) !important;
}

/* ── Segments de statut ──────────────────────────────────────────────────── */
:root[data-theme="light"] .status-seg { background: var(--vf-surface); border-color: var(--vf-border); }
:root[data-theme="light"] .status-btn { color: var(--vf-text-2); }
:root[data-theme="light"] .status-btn:hover { color: var(--vf-text); }
:root[data-theme="light"] .status-btn.active { background: var(--vf-surface-3); color: var(--vf-text); }
/* Le VIOLET signifie « en transit ». Il reste violet (h≈271°), il fonce :
   #C4B5FD sur blanc ne donne que 1,7:1, #6D28D9 donne 7,1:1. */
:root[data-theme="light"] .status-btn.active.transit { background: rgba(109,40,217,.12); color: #6d28d9; }
:root[data-theme="light"] .status-btn.active.transit svg { color: #7c3aed; }
/* Compteur : blanc à 7 % = strictement invisible sur fond clair. */
:root[data-theme="light"] .status-btn .count { background: rgba(15,23,42,.07); }

/* ── Cases à cocher ──────────────────────────────────────────────────────── */
:root[data-theme="light"] .item-check { border-color: var(--vf-text-3); }
:root[data-theme="light"] .vh-bar-check { border-color: var(--vf-text-3); }
:root[data-theme="light"] .vh-bar-check:hover { border-color: var(--vf-accent); }
/* Case cochée : aplat bleu + coche blanche (les ::after restent #fff, ils sont
   posés sur le bleu, pas sur la carte — aucune surcharge nécessaire). */
:root[data-theme="light"] .vh-bar-check.checked,
:root[data-theme="light"] .vh-bar-check.partial {
  background: var(--vf-accent); border-color: var(--vf-accent);
}

/* ── Barre d'outils sélection (Achats) ───────────────────────────────────── */
:root[data-theme="light"] .ach-toolbar { color: var(--vf-text-2); }
:root[data-theme="light"] .ach-toolbar .selection-count { color: var(--vf-text-2); }
:root[data-theme="light"] .ach-toolbar .selection-actions button {
  background: var(--vf-surface-2); border-color: var(--vf-border); color: var(--vf-text);
}
:root[data-theme="light"] .ach-toolbar .selection-actions button:hover { border-color: var(--vf-accent); }

/* ── Ligne d'article (.vh-bar) ───────────────────────────────────────────── */
:root[data-theme="light"] .vh-bar {
  background: var(--vf-surface); border-color: var(--vf-border); box-shadow: var(--vf-shadow-sm);
}
:root[data-theme="light"] .vh-bar:hover {
  border-color: rgba(37,99,235,.50);
  box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 10px 26px rgba(15,23,42,.09), 0 0 0 1px rgba(37,99,235,.15);
}
/* Emplacement photo : le dégradé n'est visible que sans image (l'<img> le
   recouvre). Il devient un gris clair, et l'icône d'attente reste lisible. */
:root[data-theme="light"] .vh-bar-photo {
  background: linear-gradient(135deg, var(--vf-surface-2), var(--vf-surface-3));
  color: var(--vf-text-3);
}
/* ⚠️ TURQUOISE VINTED — c'est la couleur de marque, elle ne devient pas bleue.
   #2DD4BF sur blanc = 2,6:1 (échec). #0b7f86 = 4,78:1 et conserve exactement
   la même teinte (183°, celle de #09b1ba). */
:root[data-theme="light"] .vh-bar-title { color: #0b7f86; }
:root[data-theme="light"] .vh-bar-sub { color: var(--vf-text-2); }
:root[data-theme="light"] .vh-bar-row { color: var(--vf-text-2); }
/* Pastilles d'état — chaque couleur porte un sens, aucune ne change de teinte. */
:root[data-theme="light"] .vh-bar-status.green { background: rgba(5,150,105,.12); color: var(--vf-success-ink); }
:root[data-theme="light"] .vh-bar-status.green .dot { background: var(--vf-success); }
/* Orange VIF (#F97316, h≈25°) et non ambre : on ne le remplace pas par
   --vf-warn-ink (#92400e, h≈32°, plus brun) pour ne pas confondre les deux
   familles utilisées côte à côte dans ce fichier. #9a3412 = 7,4:1. */
:root[data-theme="light"] .vh-bar-status.orange { background: rgba(234,88,12,.12); color: #9a3412; }
:root[data-theme="light"] .vh-bar-status.orange .dot { background: #c2410c; }
:root[data-theme="light"] .vh-bar-status.gray { background: var(--vf-surface-2); color: var(--vf-text-2); }
:root[data-theme="light"] .vh-bar-status.gray .dot { background: var(--vf-text-2); }
:root[data-theme="light"] .vh-bar-foot { border-top-color: var(--vf-border); }
:root[data-theme="light"] .vh-bar-stat-val { color: var(--vf-text); }
:root[data-theme="light"] .vh-bar-stat-val.blue { color: var(--vf-accent-ink); }
:root[data-theme="light"] .vh-bar-btn { background: var(--vf-accent-wash); color: var(--vf-accent-ink); }
:root[data-theme="light"] .vh-bar-btn:hover { background: rgba(37,99,235,.18); }
/* Note manuscrite = ambre « en attente ». Reste ambre, fonce. */
:root[data-theme="light"] .vh-bar-note { background: rgba(217,119,6,.14); color: var(--vf-warn-ink); }
:root[data-theme="light"] .vh-bar-note:hover { background: rgba(217,119,6,.20); }
/* Étiquettes d'avoir : ROUGE = annulé, AMBRE = partiel. Teintes conservées. */
:root[data-theme="light"] .vh-avoir-tag.annul { background: rgba(220,38,38,.12); color: var(--vf-danger-ink); }
:root[data-theme="light"] .vh-avoir-tag.partial { background: rgba(217,119,6,.16); color: var(--vf-warn-ink); }
/* Sens du flux : vert = vente (entrée), orange = achat (sortie). */
:root[data-theme="light"] .vh-dir.vente { color: var(--vf-success-ink); }
:root[data-theme="light"] .vh-dir.achat { color: #9a3412; }

/* ── Rangée de sélection et pagination ───────────────────────────────────── */
:root[data-theme="light"] .vh-select-row { color: var(--vf-text-2); }
:root[data-theme="light"] .vh-select-clear { color: var(--vf-text-3); }
:root[data-theme="light"] .vh-select-clear:hover { color: var(--vf-text); }
/* ⚠️ Le bouton de suppression reste ROUGE, et son survol FONCE au lieu de
   s'éclaircir (#FCA5A5 sur blanc = 1,9:1). C'est exactement l'erreur du
   06/08 sur « Se déconnecter » : un danger qui vire au bleu ne prévient plus. */
:root[data-theme="light"] .vh-select-del { color: var(--vf-danger-ink); }
:root[data-theme="light"] .vh-select-del:hover { color: var(--vf-danger-hi); }
:root[data-theme="light"] .vh-select-row .vh-sel-act {
  background: var(--vf-surface-2); border-color: var(--vf-border); color: var(--vf-text-2);
}
:root[data-theme="light"] .vh-select-row .vh-sel-act:hover {
  background: var(--vf-surface-3); border-color: rgba(37,99,235,.45); color: var(--vf-text);
}
:root[data-theme="light"] .vh-select-row .vh-select-del.vh-sel-act {
  background: var(--vf-danger-wash); border-color: rgba(220,38,38,.30); color: var(--vf-danger-ink);
}
:root[data-theme="light"] .vh-select-row .vh-select-del.vh-sel-act:hover {
  background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.50); color: var(--vf-danger-hi);
}
:root[data-theme="light"] .vh-pager-info { color: var(--vf-text-2); }

/* ── Menu « N / page » ───────────────────────────────────────────────────── */
:root[data-theme="light"] .cdd-btn {
  background: var(--vf-surface-2); border-color: var(--vf-border); color: var(--vf-text);
}
:root[data-theme="light"] .cdd-btn:hover { background: var(--vf-surface-3); }
/* Un menu flottant doit paraître AU-DESSUS de la page : fond blanc pur + ombre
   douce, pas le gris des champs. */
:root[data-theme="light"] .cdd-menu {
  background: var(--vf-surface); border-color: var(--vf-border); box-shadow: var(--vf-sh-menu);
}
:root[data-theme="light"] .cdd-item { color: var(--vf-text); }
:root[data-theme="light"] .cdd-item:hover { background: var(--vf-surface-2); }
:root[data-theme="light"] .cdd-item.selected { color: var(--vf-accent-ink); }

/* ── CLIENTS (/clients) ──────────────────────────────────────────────────── */
:root[data-theme="light"] .vf-ct-head { border-bottom-color: var(--vf-hairline); color: var(--vf-text-3); }
:root[data-theme="light"] .vf-ct-head .vf-th:hover { color: var(--vf-text); }
:root[data-theme="light"] .vf-ct-head .vf-th:focus-visible { outline-color: var(--vf-accent); }
:root[data-theme="light"] .vf-arrow.on { color: var(--vf-accent-ink); }
/* #D1D5DB est un texte volontairement en retrait par rapport au #fff du nom du
   client : on garde cette hiérarchie (secondaire pour la ligne, principal pour
   le nom) plutôt que de tout écraser en #0f1115. */
:root[data-theme="light"] .vf-ct-row { border-bottom-color: rgba(15,23,42,.07); color: var(--vf-text-2); }
:root[data-theme="light"] .vf-ct-row:hover { background: rgba(37,99,235,.06); }
:root[data-theme="light"] .vf-ct-row:focus-visible { outline-color: var(--vf-accent); }
:root[data-theme="light"] .vf-ct-row.on { background: rgba(37,99,235,.09); }
:root[data-theme="light"] .vf-ct-cli b { color: var(--vf-text); }
:root[data-theme="light"] .vf-ct-chev { color: var(--vf-text-3); }
:root[data-theme="light"] .vf-ct-row.on .vf-ct-chev { color: var(--vf-accent-ink); }
:root[data-theme="light"] .vf-ct-row small { color: var(--vf-text-3); }
/* Montant encaissé : le VERT est porteur de sens (argent rentré), il fonce. */
:root[data-theme="light"] .vf-ct-eur { color: var(--vf-success-ink); }
:root[data-theme="light"] .vf-ct-void { color: var(--vf-text-3); }
/* Panneau dépliant : le noir à 18 % devient un ardoise très dilué — il doit
   rester en RETRAIT par rapport à la carte blanche, pas plus clair qu'elle. */
:root[data-theme="light"] .vf-ct-orders { background: rgba(15,23,42,.04); }
:root[data-theme="light"] .vf-ct-orders-t { color: var(--vf-text-3); }
:root[data-theme="light"] .vf-ct-order { border-color: var(--vf-hairline); color: var(--vf-text-2); }
:root[data-theme="light"] .vf-ct-order:hover { border-color: rgba(37,99,235,.40); background: rgba(37,99,235,.06); }
:root[data-theme="light"] .vf-ct-order .t { color: var(--vf-text); }
:root[data-theme="light"] .vf-ct-order .p { color: var(--vf-success-ink); }

/* ── LITIGES (/litiges) ──────────────────────────────────────────────────── */
:root[data-theme="light"] .vf-lit { background: var(--vf-surface); border-color: var(--vf-hairline); }
/* L'ORANGE du survol dit « attention, dossier à traiter » : teinte conservée. */
:root[data-theme="light"] .vf-lit:hover { border-color: rgba(234,88,12,.45); }
:root[data-theme="light"] .vf-lit-d { color: var(--vf-text-3); }
:root[data-theme="light"] .vf-lit-t { color: var(--vf-text); }
:root[data-theme="light"] .vf-lit-t:hover { color: var(--vf-accent-ink); }
:root[data-theme="light"] .vf-lit-m { color: var(--vf-text-2); }
:root[data-theme="light"] .vf-lit-p { color: var(--vf-text); }
:root[data-theme="light"] .vf-lit-cta { color: var(--vf-accent-ink); }
/* État désactivé : il doit se LIRE comme inactif face au lien bleu actif.
   3,3:1 assumé — WCAG exempte les commandes désactivées du seuil 4,5:1. */
:root[data-theme="light"] .vf-lit-cta.off { color: #868e9b; }
:root[data-theme="light"] .vf-lit-void { color: var(--vf-text-3); }

/* ══════════════════════════════════════════════════════════════════════════════
   LAISSÉ TEL QUEL — décisions, pas des oublis
   ──────────────────────────────────────────────────────────────────────────────
   1) Superpositions posées SUR UNE PHOTO (.vh-lot-arrow, .vh-lot-count) :
      fond noir à 62-85 %, texte blanc, et un survol VERT #22C55E. Une photo
      reste une photo dans les deux thèmes ; ce voile sombre est justement ce
      qui rend les flèches lisibles quelle que soit l'image. L'éclaircir en
      mode clair rendrait le carrousel illisible sur une photo claire.
   2) .vh-lot-tag (badge « LOT ») : blanc sur violet #6D28D9 = 7,1:1. Déjà
      conforme sur fond blanc, et la teinte porte un sens. Rien à changer.
   3) Coches blanches .vh-bar-check.checked::after / .partial::after : elles
      sont posées sur l'aplat bleu, pas sur la carte. Elles restent blanches.
   4) .vf-lit-tag : sa couleur et son fond ne sont PAS dans cette feuille
      (border: 1px solid → currentColor, teinte posée ailleurs). Rien à
      surcharger ici sans savoir ce qui l'alimente.
   5) ⚠️ RÈGLES CONTENANT « label » — NON TOUCHÉES, sur consigne explicite
      (aucune règle dont le sélecteur contient « bordereau », « bd- »,
      « label » ou « print » ne doit être surchargée) :
         .mini-kpi .mk-label       color #9CA3AF   → 2,6:1 sur carte blanche
         .vh-bar-label             fond #1F1F1F / color #9CA3AF (pastille
                                   sombre sur carte claire)
         .vh-bar-label:hover       color #FFF      → invisible au survol
         .vh-bar-stat-label        color #6B7280   → 4,8:1, reste conforme
         .vh-select-label:hover    color #FFFFFF   → invisible au survol
      Ces cinq règles n'ont rien à voir avec le bordereau imprimé, mais elles
      tombent dans le filtre demandé. À signaler avant de les traiter.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   MODE CLAIR — les boutons de la barre de filtres.
   `.fb-btn` gardait son fond #1F1F1F en clair, pendant qu'une regle globale
   faisait passer son texte au fonce : texte fonce sur bouton noir, 1,15 de
   contraste. On corrige le FOND, pas le texte — le texte fonce est juste, c'est
   le bouton qui n'avait pas suivi le theme.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `!important` assume. Une regle claire existait deja pour `.fb-btn`, posee
   sur `var(--vf-surface-2)` — mais elle rendait la valeur SOMBRE. Ma regle a
   specificite egale et posterieure ne l'emportait pas non plus (verifie sur la
   page servie : fond toujours rgb(31,31,31)). Plutot que de continuer a chercher
   quelle declaration gagne, on tranche sur un selecteur etroit. */
:root[data-theme="light"] .fb-btn {
  background: #ffffff !important;
  border-color: #dfe3ea !important;
  color: #0f1115 !important;
}
:root[data-theme="light"] .filter-bar,
:root[data-theme="light"] .vh-pager,
:root[data-theme="light"] .vh-pager button,
:root[data-theme="light"] .filter-bar button {
  background: #ffffff !important;
  border-color: #dfe3ea !important;
  color: #0f1115 !important;
}
:root[data-theme="light"] .fb-btn:hover:not(:disabled) {
  background: #f1f3f6;
  border-color: #c9d2e0;
}
/* Le bouton principal garde son aplat bleu et son texte blanc : c'est une
   couleur de sens, pas un decor. */
:root[data-theme="light"] .fb-btn.primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}


/* ══════════════════════════════════════════════════════════════════════════
   DERNIER RECOURS — spécificité maximale, valeurs littérales.
   Cinq règles précédentes n'ont pas suffi. Constat décisif : dans le MÊME bloc
   ajouté, `.filter-bar` est bien passé en blanc alors que `.fb-btn` est resté
   noir. La seule différence entre les deux : `.fb-btn` porte une règle
   antérieure en `var(--vf-surface-2) !important` (ligne 366), et ce `var()`
   rend #1F1F1F alors que le jeton est déclaré #f1f3f6 ligne 18.

   Autrement dit : la variable ne se résout pas comme elle devrait dans ce
   contexte. Plutôt que de continuer à en dépendre, on écrit la couleur en dur,
   avec trois classes de spécificité pour qu'aucune règle du fichier ne puisse
   la battre. C'est laid, mais c'est la seule chose qui ne peut pas échouer.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] body .fb-btn,
html[data-theme="light"] body button.fb-btn {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #dfe3ea !important;
  color: #0f1115 !important;
}
html[data-theme="light"] body .fb-btn:hover:not(:disabled) {
  background: #f1f3f6 !important;
  background-color: #f1f3f6 !important;
}
/* Le bouton principal garde son bleu : couleur de sens, pas de décor. */
html[data-theme="light"] body .fb-btn.primary {
  background: linear-gradient(135deg,#3b82f6,#2563eb) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}