/* ============================================================================
   ShelfIQ — Layout & components
   ============================================================================ */

@import url('tokens.css');

/* Police du module Non-régression. TWK Everett reste volontairement en tête
   de pile pour prendre le relais dès que ses fichiers licenciés seront
   disponibles ; Geist assure aujourd'hui le rendu réellement visible. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
}

/* ------------------------------------------------- Ruptures en cours (65166) */
.current-oos-page { display: grid; gap: 18px; }
.current-oos-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.current-oos-title-logo {
  height: 26px;
  width: 26px;
  flex: none;
}
.current-oos-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  /* Le `gap` de `.current-oos-page` suffit au-dessus : on resserre la barre
     contre la carte des filtres dont elle dépend. */
  margin-top: -6px;
}
.current-oos-schedule-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.current-oos-schedule-button svg,
.current-oos-schedule-title-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.current-oos-schedule-modal {
  width: 650px;
  display: flex;
  flex-direction: column;
}
.current-oos-schedule-head,
.current-oos-schedule-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}
.current-oos-schedule-head { border-bottom: 1px solid var(--border); }
.current-oos-schedule-head > div:nth-child(2) { flex: 1; min-width: 0; }
.current-oos-schedule-head h3 { margin: 0; font-size: 18px; }
.current-oos-schedule-head p {
  margin: 3px 0 0;
  color: var(--gray-500);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.current-oos-schedule-title-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--primary, #2f6df6);
  background: #eef4ff;
}
.current-oos-schedule-title-icon svg { width: 21px; height: 21px; }
.current-oos-schedule-body {
  padding: 4px 20px 20px;
  overflow: auto;
}
.current-oos-schedule-loading {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gray-500);
}
.current-oos-schedule-enabled {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 2px;
  padding: 12px;
  border-radius: 10px;
  background: var(--gray-50, #f8fafc);
}
.current-oos-schedule-enabled input { margin-top: 3px; }
.current-oos-schedule-enabled span { display: grid; gap: 2px; }
.current-oos-schedule-enabled small { color: var(--gray-500); }
.current-oos-schedule-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.current-oos-schedule-section:last-of-type { border-bottom: 0; }
.current-oos-schedule-section h4 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--gray-700);
}
.current-oos-schedule-section .muted { margin: 8px 0 0; font-size: 12px; }
.current-oos-schedule-formats {
  display: flex;
  gap: 10px;
}
.current-oos-schedule-formats label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 110px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.current-oos-schedule-recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.current-oos-schedule-recipient {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  border-radius: 999px;
  color: #173f9d;
  background: #eef4ff;
  font-size: 12px;
}
.current-oos-schedule-recipient button {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.current-oos-schedule-recipient-input { display: flex; gap: 8px; }
.current-oos-schedule-recipient-input .input { flex: 1; }
.current-oos-schedule-days,
.current-oos-schedule-hours {
  display: grid;
  gap: 6px;
}
.current-oos-schedule-days { grid-template-columns: repeat(7, 1fr); }
.current-oos-schedule-hours { grid-template-columns: repeat(8, 1fr); }
.current-oos-schedule-days button,
.current-oos-schedule-hours button {
  padding: 7px 4px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--gray-600);
  background: white;
  cursor: pointer;
  font-size: 12px;
}
.current-oos-schedule-days button.selected,
.current-oos-schedule-hours button.selected {
  border-color: #2f6df6;
  color: #173f9d;
  background: #eef4ff;
  font-weight: 700;
}
.current-oos-schedule-error {
  margin: 12px 0 0;
  color: var(--danger, #d92d20);
  font-size: 13px;
}
.current-oos-schedule-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}
@media (max-width: 650px) {
  .current-oos-schedule-hours { grid-template-columns: repeat(4, 1fr); }
  .current-oos-schedule-days { grid-template-columns: repeat(4, 1fr); }
}
.current-oos-tab-icon {
  font-size: 18px;
  font-weight: 800;
  color: var(--danger, #d92d20);
}
.current-oos-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* Cartes côte à côte espacées par `gap` : le margin-top global des `.card`
   adjacentes décalerait les 2e et 3e vers le bas. */
.current-oos-kpis .card + .card { margin-top: 0; }
.current-oos-kpi {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  overflow: hidden;
}
.current-oos-kpi-title {
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
}
.current-oos-kpi-body {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 16px 16px;
}
.current-oos-kpi-scope {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 650;
}
.current-oos-kpi-label {
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 650;
  color: var(--gray-800);
}
.current-oos-kpi-value {
  margin: 0;
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
.current-oos-kpi-gauge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.current-oos-kpi-donut {
  position: relative;
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
}
.current-oos-kpi-donut svg {
  width: 100%;
  height: 100%;
  /* Le tracé part de midi, sinon l'arc démarre à 3 h. */
  transform: rotate(-90deg);
}
.current-oos-kpi-donut circle {
  fill: none;
  stroke-width: 8;
}
.current-oos-kpi-donut-track { stroke: var(--gray-200); }
.current-oos-kpi-donut-value {
  stroke: #ea580c;
  stroke-linecap: round;
}
.current-oos-kpi-donut-rate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-800);
}
.current-oos-kpi-gauge-counts {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.current-oos-kpi-gauge-counts strong {
  font-size: 24px;
  font-weight: 800;
}
.current-oos-kpi-gauge-counts span {
  font-size: 12px;
  color: var(--gray-500);
}
.current-oos-kpi-split {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  /* Aligné sur la jauge du dessus, pas sur toute la carte : une barre pleine
     largeur se lisait comme un réglage manipulable. */
  width: min(100%, 220px);
  justify-self: center;
}
.current-oos-kpi-split-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--gray-200);
}
.current-oos-kpi-split-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 10px;
  border-radius: 999px;
  background: #7c3aed;
}
.current-oos-kpi-split-pct {
  position: absolute;
  top: 50%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.current-oos-kpi-split-pct.is-inside {
  transform: translate(-100%, -50%);
  padding-right: 8px;
  color: white;
}
.current-oos-kpi-split-pct.is-outside {
  transform: translateY(-50%);
  padding-left: 7px;
  color: #7c3aed;
}
.current-oos-kpi-split-legend {
  display: grid;
  justify-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--gray-600);
}
.current-oos-kpi-split-legend > span {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.current-oos-kpi-split-legend > span::before {
  content: "";
  align-self: center;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
}
.current-oos-kpi-split-legend strong {
  font-size: 13px;
  color: var(--gray-900);
}
.current-oos-kpi-split-long { color: #7c3aed; }
.current-oos-kpi-split-short { color: var(--gray-400); }
.current-oos-kpi-split-legend > span > span:last-child { color: var(--gray-600); }
.current-oos-kpi-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.current-oos-kpi-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
}
.current-oos-kpi-list li:last-child { border-bottom: 0; }
.current-oos-kpi-list-labels {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.current-oos-kpi-list-labels strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.current-oos-kpi-list-labels small {
  font-size: 11px;
  color: var(--gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.current-oos-kpi-list-value {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
}
.current-oos-kpi-empty {
  margin: 0;
  padding: 12px 0;
  text-align: center;
  font-size: 12px;
  color: var(--gray-500);
}
@media (max-width: 900px) {
  .current-oos-kpis { grid-template-columns: minmax(0, 1fr); }
}
.current-oos-filter-card { padding: 16px; }
.current-oos-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.current-oos-filter {
  display: grid;
  gap: 6px;
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 650;
}
.current-oos-stock-menu {
  display: grid;
  gap: 10px;
  padding: 10px;
  overflow: visible;
}
.current-oos-stock-operators {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.current-oos-stock-operators .btn {
  min-width: 0;
  height: 38px;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-color: var(--gray-300);
  color: var(--gray-700);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.current-oos-stock-operators .btn.active {
  border-color: var(--niq-500);
  background: var(--niq-500);
  color: white;
  box-shadow: 0 0 0 3px rgb(45 109 246 / 12%);
}
.current-oos-stock-value {
  display: grid;
  gap: 6px;
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 650;
}
.current-oos-stock-value .input { min-width: 0; }
.current-oos-stock-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.current-oos-multi {
  display: block;
  width: 100%;
}
.current-oos-multi-control {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 38px;
  padding: 5px 34px 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.current-oos-multi-control:hover { border-color: var(--gray-300); }
.current-oos-multi-control.open,
.current-oos-multi-control:focus,
.current-oos-multi-control:focus-within {
  border-color: var(--niq-400);
  box-shadow: 0 0 0 3px rgb(45 109 246 / 10%);
  outline: none;
}
.current-oos-multi-placeholder {
  overflow: hidden;
  color: var(--gray-500);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.current-oos-multi-input {
  flex: 1 1 70px;
  min-width: 70px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-900);
  font: inherit;
  font-weight: 500;
  outline: none;
}
.current-oos-multi-input::placeholder {
  color: var(--gray-500);
  font-weight: 500;
}
.current-oos-multi-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 5px 3px 8px;
  border-radius: 6px;
  background: var(--niq-100);
  color: var(--niq-800);
  font-size: 12px;
  font-weight: 600;
}
.current-oos-multi-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.current-oos-multi-chip button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--niq-700);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.current-oos-multi-chip button:hover { background: rgb(25 68 168 / 12%); }
.current-oos-multi .cb-menu { min-width: 100%; }
.current-oos-search-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto auto auto;
  gap: 8px;
  margin-top: 14px;
}
.current-oos-barcode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
  font-size: 13px;
  color: var(--gray-600);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.current-oos-barcode-toggle input {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.current-oos-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.current-oos-results-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}
.current-oos-loading,
.current-oos-empty {
  padding: 32px;
  text-align: center;
  color: var(--gray-500);
}
.current-oos-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Cartes fantômes : elles occupent la place des vraies lignes pendant la
   requête, donc la page ne saute pas quand les résultats arrivent. */
.current-oos-skeleton {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.current-oos-skeleton-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.current-oos-skeleton-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
}
.current-oos-skeleton-lines {
  display: grid;
  flex: 1 1 auto;
  gap: 10px;
}
.current-oos-list {
  display: grid;
  gap: 24px;
  transition: opacity .15s ease;
}
.current-oos-list.is-refreshing { opacity: .55; pointer-events: none; }
.current-oos-category-group,
.current-oos-subcategory-group,
.current-oos-aisle-group {
  display: grid;
}
.current-oos-category-group { gap: 14px; }
.current-oos-subcategory-group {
  gap: 12px;
  margin-left: 12px;
}
.current-oos-aisle-group {
  gap: 0;
  margin-left: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: white;
}
.current-oos-category-head,
.current-oos-subcategory-head,
.current-oos-aisle-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}
.current-oos-category-head {
  padding: 12px 14px;
  border: 1px solid #dfe7f6;
  border-left: 3px solid #77a0ee;
  border-radius: var(--radius-md);
  background: #f2f6fd;
  color: #26364d;
  font-size: 16px;
}
.current-oos-subcategory-head {
  padding: 9px 12px;
  border: 1px solid #e8ebf1;
  border-radius: var(--radius-md);
  background: #fafbfc;
  color: #536071;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.current-oos-aisle-head {
  min-height: 44px;
  padding: 9px 14px;
  border-bottom: 1px solid #dfe4eb;
  background: #eef1f5;
  color: #354357;
  font-size: 14px;
}
.current-oos-group-count {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fde7e9;
  color: #c52236;
  font-size: 12px;
  font-weight: 750;
  text-transform: none;
  letter-spacing: 0;
}
.current-oos-aisle-articles {
  display: grid;
  gap: 14px;
  padding: 14px;
  background: var(--gray-50);
}
.current-oos-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 650;
}
.current-oos-pagination-range {
  color: var(--gray-400);
  font-weight: 500;
}
.current-oos-card { overflow: hidden; padding: 0; }
.current-oos-card.is-price-error {
  border-color: var(--niq-500);
  box-shadow: 0 0 0 1px var(--niq-500);
}
.current-oos-card.is-price-error .current-oos-alert {
  background: var(--niq-50);
  color: var(--niq-700);
}
.current-oos-card.is-price-error .current-oos-duration {
  background: var(--niq-500);
}
.current-oos-card.is-previous-product {
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px #7c3aed;
}
.current-oos-card.is-previous-product .current-oos-alert {
  background: #f5f3ff;
  color: #6d28d9;
}
.current-oos-card.is-previous-product .current-oos-duration {
  background: #7c3aed;
}
.current-oos-previous-note {
  margin: 5px 0;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 650;
}
.current-oos-reference-missing {
  color: var(--gray-500);
  font-size: 12px;
  font-style: italic;
}
.current-oos-duration {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--radius-md);
  background: var(--niq-500);
  color: white;
  font-size: 14px;
  white-space: nowrap;
}
.current-oos-alert-badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 7px;
}
.current-oos-recoverable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid #fdba74;
  border-radius: var(--radius-md);
  background: #fff7ed;
  color: #c2410c;
  font-size: 14px;
  white-space: nowrap;
}
.current-oos-recoverable-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("/static/icons/piggy-bank-light.png") center / contain no-repeat;
  mask: url("/static/icons/piggy-bank-light.png") center / contain no-repeat;
}
.current-oos-card-body {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(0, 1.45fr) auto;
  gap: 16px;
  padding: 16px;
}
.current-oos-history {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.current-oos-crop {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-50);
}
.current-oos-crop.is-now {
  border-color: var(--niq-200);
  background: var(--niq-50);
}
.current-oos-crop.is-now .current-oos-crop-label {
  border-bottom-color: var(--niq-200);
  background: var(--niq-50);
  color: var(--niq-700);
}
.current-oos-crop.is-now img { background: var(--niq-50); }
.current-oos-crop-label {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  background: white;
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 700;
}
.current-oos-crop a {
  position: relative;
  display: block;
  height: 190px;
  cursor: zoom-in;
}
/* Le conteneur reprend le rapport du crop : sans cela `object-fit: contain`
   laisserait des bandes et la boîte du slot tomberait à côté du produit. */
.current-oos-crop a.has-box {
  height: auto;
  aspect-ratio: var(--crop-ratio, 5 / 4);
}
.current-oos-crop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #edf1f5;
}
.current-oos-crop a.has-box img { object-fit: fill; }
.current-oos-crop-box {
  position: absolute;
  border: 1.5px solid #7ba4ea;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(31 41 55 / 22%);
  pointer-events: none;
}
.current-oos-crop.is-now .current-oos-crop-box { border-color: #ec6b7c; }
.current-oos-crop-missing {
  display: grid;
  place-items: center;
  height: 190px;
  padding: 16px;
  color: var(--gray-500);
  font-size: 12px;
  text-align: center;
}
.current-oos-product {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: white;
}
.current-oos-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 10px 8px 12px;
  border-radius: var(--radius-md);
  background: #fff1f1;
  color: #cf202f;
  font-weight: 750;
}
.current-oos-alert-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.current-oos-product-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: start;
  gap: 12px;
}
.current-oos-product-copy { min-width: 0; }
.current-oos-product-copy h3 {
  margin: 0 0 6px;
  color: var(--gray-900);
  font-size: 20px;
  line-height: 1.15;
}
.current-oos-product-copy p {
  margin: 3px 0;
  font-size: 12px;
  line-height: 1.35;
}
.current-oos-barcode {
  width: min(100%, 250px);
  height: 46px;
  margin-top: 7px;
  padding: 3px 0;
  overflow: hidden;
  background: white;
}
.current-oos-barcode svg {
  display: block;
  width: 100%;
  height: 100%;
}
.current-oos-product-thumb {
  width: 104px;
  height: 104px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  cursor: zoom-in;
}
.current-oos-product-thumb:hover { border-color: var(--niq-300); }
.current-oos-product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.oos-lightbox { width: min(1040px, 94vw); }
.oos-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.oos-lightbox-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.oos-lightbox-title .muted { font-size: 12px; }
/* Même principe que les vignettes de la liste : le cadre reprend le rapport du
   crop pour que la boîte du slot reste alignée sur le produit. */
.oos-lightbox-figure {
  position: relative;
  margin: 0 auto;
  background: #edf1f5;
}
.oos-lightbox-figure.has-box {
  width: 100%;
  aspect-ratio: var(--crop-ratio, 5 / 4);
  max-height: 72vh;
}
.oos-lightbox-figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 72vh;
  object-fit: contain;
}
.oos-lightbox-figure.has-box img { object-fit: fill; }
.oos-lightbox-figure.is-product {
  padding: 18px;
  background: white;
}
.oos-lightbox-figure.is-product img { max-height: 42vh; }
.oos-lightbox-figure .current-oos-crop-box { border-color: #ec6b7c; }
.oos-lightbox-linked-eans {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: white;
}
.oos-lightbox-linked-eans-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.oos-lightbox-linked-eans > p {
  margin: 4px 0;
  font-size: 12px;
}
.oos-lightbox-linked-ean-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
}
.oos-lightbox-linked-ean {
  /* Assez large pour afficher un EAN13 complet sans ellipse. */
  flex: 0 0 116px;
  display: grid;
  grid-template-rows: 84px auto;
  gap: 4px;
  min-width: 0;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
}
.oos-lightbox-linked-ean:hover { border-color: var(--niq-300); }
.oos-lightbox-linked-ean img {
  width: 100%;
  height: 84px;
  object-fit: contain;
}
.oos-lightbox-linked-ean span {
  overflow: hidden;
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oos-lightbox-alternatives {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--gray-50);
}
.oos-lightbox-alternatives-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.oos-lightbox-alternatives-head p {
  margin: 2px 0 0;
  font-size: 12px;
}
.oos-lightbox-alternative-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(68px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
}
.oos-lightbox-alternative {
  position: relative;
  min-width: 68px;
  height: 86px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
}
.oos-lightbox-alternative:hover { border-color: var(--niq-300); }
.oos-lightbox-alternative.is-selected {
  border-color: var(--niq-500);
  box-shadow: 0 0 0 2px var(--niq-100);
}
.oos-lightbox-alternative.is-loading {
  background: linear-gradient(100deg, #eef1f5 30%, #f8f9fb 50%, #eef1f5 70%);
  background-size: 220% 100%;
}
.oos-lightbox-alternative img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.oos-lightbox-alternative > span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgb(31 41 55 / 75%);
  color: white;
  font-size: 10px;
  font-weight: 750;
}
.oos-lightbox-feedback {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 650;
}
.oos-lightbox-feedback.is-success { color: #13834e; }
.oos-lightbox-feedback.is-error { color: var(--danger); }
.oos-lightbox-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
@media (max-width: 700px) {
  .oos-lightbox-alternatives-head {
    align-items: stretch;
    flex-direction: column;
  }
  .oos-lightbox-alternative-grid {
    grid-template-columns: repeat(10, 74px);
  }
}
.current-oos-place {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  justify-items: stretch;
  align-self: stretch;
  gap: 8px;
  width: 168px;
}
.current-oos-dates {
  display: grid;
  gap: 2px;
  color: var(--gray-500);
  font-size: 10px;
  font-style: italic;
  line-height: 1.3;
  text-align: right;
}
.current-oos-locator {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  background: #f4f6f9;
}
/* La gondole occupe toute la hauteur laissée par les photos : les niveaux
   s'étirent au lieu de se tasser en bandes de quelques pixels. */
.current-oos-map {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 150px;
}
.current-oos-map-row {
  display: flex;
  flex: 1 1 0;
  gap: 3px;
  min-height: 11px;
  max-height: 30px;
}
.current-oos-map-row > span {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #c3cbd7;
  border-radius: 1px;
  background: white;
}
.current-oos-camera {
  display: grid;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #d7dce4;
}
.current-oos-camera-id {
  min-width: 0;
  overflow: hidden;
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.current-oos-camera-actions {
  display: grid;
  gap: 6px;
}
.current-oos-camera-actions .btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding: 5px 6px;
  font-size: 11px;
  white-space: nowrap;
}
.current-oos-map-row > span.is-active {
  border-color: #c52236;
  background: #e8384f;
  box-shadow: 0 0 0 1px #fbd5da;
}
.current-oos-location {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  overflow: hidden;
  border: 2px solid #94a5bd;
  border-radius: 8px;
  background: #f7f9fc;
  color: #2f4057;
  box-shadow: 0 2px 5px rgb(42 57 78 / 8%);
}
.current-oos-location > span {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 5px 3px 6px;
}
.current-oos-location > span + span { border-left: 1px solid #ccd5e1; }
.current-oos-location small {
  color: #718096;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
.current-oos-location strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
}
.current-oos-product-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.current-oos-product-chips .chip {
  background: var(--niq-50);
  color: var(--niq-700);
  font-weight: 650;
}
.current-oos-loss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
}
.current-oos-loss-chips .chip {
  font-weight: 650;
}
.current-oos-loss-now {
  background: #fff7ed;
  color: #c2410c;
}
.current-oos-loss-close {
  background: #fef2f2;
  color: #b91c1c;
}
.current-oos-price {
  background: var(--niq-50);
  color: var(--niq-700);
}
@media (max-width: 1100px) {
  .current-oos-filters { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .current-oos-card-body { grid-template-columns: 1fr; }
  .current-oos-place {
    grid-auto-flow: column;
    grid-template-rows: none;
    justify-content: start;
    align-items: center;
    width: auto;
    gap: 14px;
  }
  .current-oos-dates { text-align: left; }
  .current-oos-location { width: 120px; }
  .current-oos-locator { width: 168px; }
}
@media (max-width: 700px) {
  .current-oos-filters { grid-template-columns: 1fr; }
  .current-oos-search-row { grid-template-columns: 1fr 1fr; }
  .current-oos-search-row .input { grid-column: 1 / -1; }
  .current-oos-barcode-toggle { grid-column: 1 / -1; }
  .current-oos-results-head { align-items: flex-start; }
  .current-oos-alert {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .current-oos-alert-badges {
    justify-content: flex-start;
    width: 100%;
  }
  .current-oos-subcategory-group,
  .current-oos-aisle-group { margin-left: 0; }
  .current-oos-history { grid-template-columns: 1fr; }
  .current-oos-crop a:not(.has-box),
  .current-oos-crop-missing { height: 220px; }
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
}

* { box-sizing: border-box; }

:root {
  /* Hauteur cumulée des barres sticky en haut de page : header (64px) puis
     barre d'onglets. Référence pour tout élément sticky du contenu. */
  --sticky-chrome-h: 112px;
}

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--gray-800);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
a { color: var(--niq-600); text-decoration: none; }
a:hover { text-decoration: underline; }

[x-cloak] { display: none !important; }

/* ------------------------------------------------------------------ Header */

.header {
  position: sticky; top: 0; z-index: 50;
  background: white;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: 1600px; margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; gap: 24px;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
}
.logo-niq {
  height: 22px;
  width: auto;
  display: block;
}
.logo-niq path { fill: var(--niq-500); }
.logo-niq-brand {
  height: 18px;
}

.logo-vusion {
  height: 22px;
  width: 22px;
  display: block;
}
.logo-vusion path { fill: var(--vusion-500); }
.logo-vusion-brand {
  height: 28px;
  width: 28px;
}
.logo-vusion-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--vusion-600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.partner-vusion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand-text {
  display: flex; flex-direction: column; line-height: 1.15;
}
.brand-name {
  font-weight: 700; font-size: 17px; color: var(--gray-900);
  letter-spacing: -0.01em;
}
.brand-tag {
  font-size: 11px; color: var(--gray-500); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.partners {
  display: flex; align-items: center; gap: 18px;
}

/* ─── Language switcher ─── */
/* ------------------------------------------------------------ Enseigne filter */
.enseigne-switch {
  position: relative;
}
.enseigne-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--niq-300);
  border-radius: var(--radius-md);
  background: var(--niq-50);
  color: var(--niq-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.enseigne-btn:hover {
  border-color: var(--niq-500);
  background: var(--niq-100);
}
.enseigne-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
  z-index: 50;
}
.enseigne-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  transition: background 0.1s;
}
.enseigne-item:hover { background: var(--gray-50); }
.enseigne-item.active {
  background: var(--niq-50);
  color: var(--niq-700);
  font-weight: 600;
}

.lang-switch {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lang-btn:hover {
  border-color: var(--niq-300);
  background: var(--niq-50);
  color: var(--niq-700);
}
.lang-flag { line-height: 1; }
.lang-chev { color: var(--gray-500); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
  z-index: 50;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray-700);
  text-align: left;
}
.lang-item:hover {
  background: var(--gray-50);
}
.lang-item.active {
  background: var(--niq-50);
  color: var(--niq-700);
  font-weight: 600;
}
.lang-item .lang-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
}
.lang-item.active .lang-code {
  background: var(--niq-500);
  color: white;
}
.partner {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--gray-500); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.partner img { height: 22px; }
.partner-vusion { color: var(--vusion-600); }

/* ----------------------------------------------------------------- Tabbar */

.tabbar {
  background: white;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 64px; z-index: 40;
}
.tabbar-inner {
  max-width: 1600px; margin: 0 auto;
  padding: 0 24px;
  display: flex; gap: 4px;
  overflow-x: auto;
}
.tab {
  padding: 14px 18px;
  border: none; background: none;
  font-size: 14px; font-weight: 500;
  color: var(--gray-600);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 150ms;
}
.tab:hover { color: var(--niq-700); background: var(--bg-hover); }
.tab.active {
  color: var(--niq-700);
  border-bottom-color: var(--niq-500);
  font-weight: 600;
}
.tab .count {
  display: inline-block;
  margin-left: 6px;
  background: var(--vusion-100);
  color: var(--vusion-700);
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
}

/* ------------------------------------------------------- Admin sub-tabs */

.subtabs {
  display: flex; gap: 4px;
  margin: 6px 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.subtab {
  padding: 9px 16px;
  border: none; background: none;
  font-size: 13.5px; font-weight: 500;
  color: var(--gray-600);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all 120ms;
  cursor: pointer;
}
.subtab:hover { color: var(--niq-700); }
.subtab.active {
  color: var(--niq-700);
  border-bottom-color: var(--niq-500);
  font-weight: 600;
}

/* Flags booléens dans le tableau magasins */
.mag-flag { font-weight: 700; }
.mag-flag-on  { color: var(--niq-600, #2563eb); }
.mag-flag-off { color: var(--gray-400, #9ca3af); }

/* Modal édition / création magasin */
.admin-mag-modal {
  width: 660px; max-width: 95vw;
  display: flex; flex-direction: column;
}
.admin-mag-modal-head,
.admin-mag-modal-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px;
  flex-wrap: wrap;
}
.admin-mag-modal-head { border-bottom: 1px solid var(--border); }
.admin-mag-modal-head h3 { margin: 0; font-size: 16px; flex: 1; }
.admin-mag-modal-foot { border-top: 1px solid var(--border); }
.admin-mag-form {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.admin-mag-field { display: flex; flex-direction: column; gap: 5px; }
.admin-mag-field-label { font-size: 12px; font-weight: 600; color: var(--gray-600); }
.admin-mag-field .input { width: 100%; }
.admin-mag-field .input[readonly] { background: var(--gray-50, #f9fafb); color: var(--gray-500); }
.admin-mag-field-bool {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding-bottom: 8px;
}
.admin-mag-field-bool input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
.admin-mag-field .req { color: var(--danger, #e5484d); margin-left: 2px; }
@media (max-width: 640px) {
  .admin-mag-form { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------- Main */

.main {
  max-width: 1600px; margin: 0 auto;
  padding: 28px 24px 80px;
}
.page-title {
  font-size: 24px; font-weight: 700; color: var(--gray-900);
  margin: 0 0 4px; letter-spacing: -0.01em;
}
.page-subtitle {
  font-size: 14px; color: var(--gray-500); margin: 0 0 24px;
}
.page-title-sub {
  font-weight: 500;
  color: var(--gray-500);
}

/* ----------------------------------------------------- Pills / Badges status */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
  text-transform: uppercase;
  line-height: 1.6;
}
.pill-niq {
  background: rgba(45, 109, 246, 0.12);
  color: var(--niq-700, #1a4cb8);
  border-color: rgba(45, 109, 246, 0.30);
}
.pill-warn {
  background: rgba(254, 200, 52, 0.18);
  color: #8a5a00;
  border-color: rgba(254, 200, 52, 0.55);
}

/* Sources données (ESL Vusion solo si blink only / IA patch / mobile) — même famille que .pill
 * Important : ne jamais mettre display:flex sur un <td> : ça remplace table-cell
 * et casse la grille du tableau + zones cliquables. Le flex vit dans .pill-stack-inner. */
.pill-stack {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tbl td.pill-stack-cell {
  vertical-align: middle;
}
.tbl td.pill-stack-cell .pill-stack-inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 220px;
}
/* ESL Vusion — accent charte Vusion */
.pill-sync-esl {
  background: rgba(254, 200, 52, 0.18);
  color: #8a5a00;
  border-color: rgba(254, 200, 52, 0.55);
}
.pill-sync-ia {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.4);
}
.pill-sync-agnostic {
  background: rgba(45, 109, 246, 0.12);
  color: var(--niq-700, #1944a8);
  border-color: rgba(45, 109, 246, 0.4);
}
.pill-sync-mobile {
  background: rgba(100, 116, 139, 0.14);
  color: #334155;
  border-color: rgba(100, 116, 139, 0.35);
}

/* ------------------------------------------------------------ Drapeau pays */
.flag {
  font-size: 16px;
  line-height: 1;
  margin-right: 4px;
}
.flag-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------------------------------------------- Carte d'identité magasin */
.store-identity {
  padding: 18px 22px;
  margin-bottom: 22px;
}
.store-identity .card-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.identity-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.identity-grid dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
.identity-grid dd {
  margin: 0;
  font-size: 14px;
  color: var(--gray-900);
  word-break: break-word;
}
.identity-grid dd a { color: var(--niq-700, #1a4cb8); text-decoration: none; }
.identity-grid dd a:hover { text-decoration: underline; }

/* ─────────────────────────── Icônes inline (SVG) ───────────────────────────
 * Utilisation : <span class="icon" x-html="iconCat()"></span>
 * Hérite de la couleur courante via `currentColor`.
 */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -0.18em;
  flex: 0 0 auto;
}
.icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}
.icon-cat,
.icon-subcat,
.icon-supplier,
.icon-camera,
.icon-store,
.icon-photo,
.icon-facing,
.icon-sku {
  color: var(--niq-500, #2D6DF6);
  font-size: 1.05em;
}
.icon-subcat   { color: var(--niq-700, #1a4cb8); }
.icon-supplier { color: var(--niq-500, #2D6DF6); }
.icon-camera   { color: var(--niq-500, #2D6DF6); }
.icon-store    { color: var(--niq-500, #2D6DF6); }
.icon-photo    { color: var(--niq-500, #2D6DF6); }
.icon-facing   { color: var(--niq-500, #2D6DF6); }
.icon-sku      { color: var(--niq-500, #2D6DF6); }
.icon-target   { color: var(--niq-500, #2D6DF6); }
.icon-admin    { color: var(--niq-500, #2D6DF6); }
/* Variantes de tailles courantes */
.icon-sm { font-size: 0.95em; }
.icon-md { font-size: 1.2em; }
.icon-lg { font-size: 1.45em; }
/* Espacement standard entre une icône et un libellé */
.icon + .icon-label,
.icon-label + .icon { margin-left: 6px; }
.tab .icon { margin-right: 6px; color: inherit; }
.tab.active .icon { color: var(--niq-500, #2D6DF6); }

/* Libellé de ligne avec icône à gauche (drill-down) */
.row-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Chips à puce (catégorie / sous-catégorie) avec icône */
.chip .icon { margin-right: 6px; }
.chip { display: inline-flex; align-items: center; }

/* Page title avec icône à gauche : flex uniquement si une .icon est présente */
.page-title:has(> .icon) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-title .icon { color: var(--niq-500, #2D6DF6); }

/* KPI label avec icône */
.kpi-label .icon { margin-right: 6px; }

/* Card title avec icône */
.card-title .icon { margin-right: 6px; }

/* Champ de saisie avec icône préfixée */
.combo-icon { position: relative; }
.combo-icon-prefix {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.05em;
  color: var(--niq-500, #2D6DF6);
}
.input.has-icon { padding-left: 32px; }

/* Chip discret pour rappeler l'identifiant interne d'un magasin */
.store-id-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray-100, #f1f5f9);
  color: var(--gray-500, #64748b);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.02em;
  border: 1px solid var(--border, #e5e7eb);
}

/* Cellule de tableau sur 2 lignes (libellé principal + sub-label gris) */
.cell-2lines {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.cell-2lines .muted {
  font-size: 11px;
  color: var(--gray-500);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ---------------------------------------------------------------- KPI cards */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.kpi-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--niq-500);
}
.kpi-card.accent::before { background: var(--vusion-500); }
.kpi-label {
  font-size: 12px; font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 28px; font-weight: 700; color: var(--gray-900);
  line-height: 1.1;
}
.kpi-hint {
  font-size: 12px; color: var(--gray-500); margin-top: 4px;
}

/* ------------------------------------------------------------- Skeletons */

@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--gray-100) 0%,
    var(--gray-200) 45%,
    var(--gray-100) 90%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: 6px;
}
.skeleton-kpi {
  height: 28px;
  width: 48%;
  margin-top: 2px;
}
.skeleton-line {
  height: 12px;
  width: 100%;
  border-radius: 4px;
}
.skeleton-line-sm {
  width: 48px;
  margin-left: auto;
}
.skeleton-row td {
  padding-top: 14px;
  padding-bottom: 14px;
}
.skeleton-row:hover td { background: transparent; cursor: default; }
/* Même ratio que .photo-card-media, sinon la grille saute quand les skeletons
   sont remplacés par les vraies cartes. */
.skeleton-photo {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}
.photo-card-skeleton {
  pointer-events: none;
}
.photo-card-skeleton .photo-card-body {
  min-height: 72px;
}

/* ----------------------------------------------------------- Generic cards */

.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
/* En grille (ex. overview Top stores / Top suppliers) les cartes sont côte à côte
   et l'espacement vient de `gap` : on annule le margin-top des siblings adjacents
   qui décalerait la 2e carte vers le bas. */
.grid-2 .card + .card { margin-top: 0; }
.card-title {
  font-size: 15px; font-weight: 700; color: var(--gray-900);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.card-title .badge {
  font-size: 11px; font-weight: 600; color: var(--niq-700);
  background: var(--niq-50); padding: 2px 8px; border-radius: 999px;
}

.grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.card-flex {
  display: flex;
  flex-direction: column;
}
.card-flex .tbl { flex: 1 1 auto; }

/* Overview : aligne la hauteur des lignes des encarts Top stores / Top suppliers
   (les lignes magasin font 2 lignes, les fournisseurs 1) pour les mettre à niveau. */
.grid-2 .card-flex .tbl tbody td {
  height: 48px;
  vertical-align: middle;
}
.cell-icon-2lines {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cell-icon-2lines .icon { flex: 0 0 auto; }
.card-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  text-align: right;
}
.card-footer a {
  color: var(--niq-700);
  font-weight: 600;
  text-decoration: none;
}
.card-footer a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: white;
  color: var(--gray-700);
  font-size: 13px; font-weight: 500;
  transition: all 120ms;
}
/* text-decoration : neutralise le `a:hover { underline }` global pour les
   boutons rendus en <a> (liens export, réalogramme ouvrable en nouvel onglet). */
.btn:hover { background: var(--bg-hover); border-color: var(--gray-300); text-decoration: none; }

.btn-primary {
  background: var(--niq-500); color: white; border-color: var(--niq-500);
}
.btn-primary:hover { background: var(--niq-600); border-color: var(--niq-600); }

.btn-accent {
  background: var(--vusion-500); color: white; border-color: var(--vusion-500);
}
.btn-accent:hover { background: var(--vusion-600); border-color: var(--vusion-600); }

/* Spinner intégré à un bouton : hérite de la couleur du texte, donc lisible
   aussi bien sur un bouton blanc que sur un `.btn-primary` plein. */
.btn-spinner {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: spin 700ms linear infinite;
  /* Couche de composition dédiée : l'animation reste fluide même quand le
     thread principal travaille (cf. `.loader`). */
  will-change: transform;
}

.btn-ghost { border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-danger {
  border-color: var(--danger, #e5484d);
  color: var(--danger, #e5484d);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger, #e5484d);
  color: #fff;
}
.shelf-pdf-btn {
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  align-items: center;
  justify-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.shelf-pdf-btn:disabled {
  opacity: 0.88;
  cursor: wait;
}
/* Astuce: les 2 enfants occupent la même cellule grid → la cellule prend la
   largeur du plus large (le mesureur), et le label visible reste centré. */
.shelf-pdf-btn-label,
.shelf-pdf-btn-measure {
  grid-area: 1 / 1;
  white-space: nowrap;
  display: inline-block;
}
.shelf-pdf-btn-measure {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
/* Anime « . », « .. », « ... » à la fin du label de chargement,
   sans changer la largeur du bouton (le mesureur réserve déjà la place). */
.shelf-pdf-btn:disabled .shelf-pdf-btn-label::after {
  content: "";
  display: inline-block;
  width: 1.4em;
  text-align: left;
  animation: shelfPdfDots 1.2s steps(4, end) infinite;
}
@keyframes shelfPdfDots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: "..."; }
}

/* ----------------------------------------------------------------- Inputs */

.input, .select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  font-size: 13px;
  color: var(--gray-800);
  font-family: inherit;
  min-width: 140px;
}
.input:focus, .select:focus {
  outline: none; border-color: var(--niq-500);
  box-shadow: 0 0 0 3px rgba(45, 109, 246, 0.18);
}

/* Selects natifs : on retire l'apparence OS et on ajoute un chevron cohérent. */
select.select, select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
}
select.select:hover, select.input:hover { border-color: var(--gray-300); }
select.select:focus, select.input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%232d6df6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select.select option { color: var(--gray-800); }

.filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Combo input + datalist : ajoute un caret pour indiquer le dropdown */
.combo { position: relative; display: inline-block; }
.combo input.input {
  padding-right: 28px;
  min-width: 220px;
}
.combo::after {
  content: "";
  position: absolute; right: 10px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--gray-500);
  border-bottom: 2px solid var(--gray-500);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  opacity: 0.6;
}
.combo:focus-within::after { border-color: var(--niq-500); opacity: 1; }

/* Combobox Alpine searchable (vue SKU, etc.) */
.cb {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.cb-control { position: relative; }
.cb-input {
  width: 100%;
  min-width: 220px;
  padding-right: 44px !important;
}
.cb-control.has-value .cb-input { padding-right: 52px !important; }
.cb-prefix {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}
.cb-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gray-500);
  border-bottom: 2px solid var(--gray-500);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  opacity: 0.65;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.cb-control.open .cb-caret {
  transform: translateY(-30%) rotate(225deg);
  border-color: var(--niq-500);
  opacity: 1;
}
.cb-clear {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--gray-500);
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cb-clear:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}
.cb-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
}
.cb-option {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--gray-800);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-option:hover,
.cb-option.active {
  background: var(--niq-50);
  color: var(--niq-800);
}
.cb-option.selected {
  font-weight: 600;
}
.cb-option.selected::after {
  content: "✓";
  float: right;
  color: var(--niq-500);
  font-weight: 600;
  margin-left: 8px;
}
.cb-empty {
  padding: 10px;
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
}

/* ------------------------------------------------------------------ Table */

.tbl {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.tbl th {
  text-align: left;
  padding: 10px 12px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
  font-weight: 600; color: var(--gray-700);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  position: sticky; top: 0;
}
.tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--gray-800);
}
.tbl tr:hover td { background: var(--bg-hover); cursor: pointer; }
.tbl.nreg-tbl tr:hover td { cursor: default; }
.nreg-model-spec {
  margin-bottom: 18px;
}
.nreg-model-spec-value {
  overflow-wrap: anywhere;
}
.tbl.nreg-tbl td.nreg-metric-name[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.tbl.nreg-tbl tr:hover td.nreg-metric-name[title] { cursor: help; }
.nreg-table-scroll {
  max-height: 921px; /* en-tête + environ 20 lignes de 44 px */
  overflow-x: auto;
  overflow-y: scroll;
}
.nreg-result-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.nreg-result-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--gray-700);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.nreg-result-group:hover { background: var(--gray-50); }
.nreg-result-group.active {
  background: var(--niq-50);
  border-color: var(--niq-200);
  color: var(--niq-700);
  font-weight: 700;
}
.nreg-result-group b {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gray-100);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.nreg-result-group.active b { background: var(--bg-card); }
.nreg-result-table {
  padding: 0;
}
.nreg-result-table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.nreg-result-table-head strong {
  font-size: 14px;
}
.nreg-result-table.is-stacked .nreg-table-scroll {
  max-height: 440px;
}
.nreg-table-scroll .nreg-tbl tbody tr {
  height: 44px;
}
.nreg-table-scroll .nreg-tbl th,
.nreg-table-scroll .nreg-tbl td {
  white-space: nowrap;
}
.nreg-table-scroll .nreg-tbl tbody tr:hover td {
  cursor: pointer;
}
.nreg-table-scroll .nreg-tbl tbody tr.selected td,
.nreg-table-scroll .nreg-tbl tbody tr.selected:hover td {
  background: var(--niq-100);
}
.nreg-table-scroll .nreg-tbl tbody tr:focus {
  outline: 2px solid var(--niq-500);
  outline-offset: -2px;
}
.nreg-table-scroll .nreg-tbl td.nreg-actions {
  width: 1%;
  white-space: nowrap;
}

/* Historique des runs : `table-layout: fixed` + colgroup pour que tous les
   tableaux de groupe (Type × Programme) partagent exactement la même grille.
   En layout automatique, chacun se dimensionnait sur son propre contenu et les
   colonnes se décalaient d'un groupe à l'autre. Le `min-width` conserve des
   colonnes lisibles : en dessous, la carte défile horizontalement. */
.nreg-runs-tbl {
  table-layout: fixed;
  width: 100%;
  min-width: 1240px;
}
.nreg-runs-tbl th,
.nreg-runs-tbl td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* En pourcentages : la grille reste identique d'un groupe à l'autre tout en
   occupant toute la largeur disponible. Des largeurs en pixels laissaient tout
   l'espace excédentaire à la seule colonne Erreur. Total = 100 %. */
.nreg-runs-tbl .col-run { width: 5%; }
.nreg-runs-tbl .col-kind { width: 6%; }
.nreg-runs-tbl .col-program { width: 8%; }
.nreg-runs-tbl .col-model { width: 13%; }
.nreg-runs-tbl .col-code { width: 6%; }
.nreg-runs-tbl .col-images { width: 6%; }
.nreg-runs-tbl .col-dataset { width: 10%; }
.nreg-runs-tbl .col-status { width: 8%; }
.nreg-runs-tbl .col-started { width: 10%; }
.nreg-runs-tbl .col-duration { width: 6%; }
.nreg-runs-tbl .col-actions { width: 9%; }
.nreg-runs-tbl .col-error { width: 13%; }
/* Les largeurs viennent du colgroup : cette règle générique fausserait la
   grille des tableaux de runs. */
.nreg-table-scroll .nreg-runs-tbl td.nreg-actions {
  width: auto;
}
.nreg-runs-tbl .nreg-url {
  display: block;
  max-width: 100%;
}

.nreg-hud-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 12px;
}

/* Actions destructrices calées sur le bord droit du tableau qui suit : la barre
   a la même largeur que la carte, `margin-left: auto` aligne donc le bloc sur
   l'angle haut droit du tableau. `flex: 0 0 auto` l'empêche d'être renvoyé à la
   ligne par un message de statut long. */
.nreg-hud-danger {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}
/* Le compteur et le message cèdent la place au lieu de pousser le bloc. */
.nreg-hud-bar > .muted {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nreg-hud-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-600);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.nreg-hud-option input { margin: 0; }
.nreg-hud-type {
  min-width: 160px;
  max-width: 240px;
}
@media (max-width: 760px) {
  /* Le bloc passe à la ligne mais reste collé au bord droit du tableau. */
  .nreg-hud-danger {
    padding-left: 0;
    border-left: 0;
  }
}
.nreg-url {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.nreg-detail-loading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nreg-details,
.nreg-detail-loading,
.nreg-detail-error {
  margin-top: 32px;
}
.nreg-details-head {
  margin-bottom: 14px;
}
.nreg-report-kpis {
  margin-bottom: 16px;
}
.nreg-job-id {
  overflow-wrap: anywhere;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14px;
}
.nreg-cmp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}
.nreg-cmp-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nreg-cmp-toolbar .input {
  width: auto;
}
.nreg-gap-bad {
  color: var(--danger);
  font-weight: 600;
}
.nreg-module {
  --font-sans: "TWK Everett", "Geist", Arial, Helvetica, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-sans);
}
.nreg-module button,
.nreg-module input,
.nreg-module select,
.nreg-module textarea { font-family: inherit; }
/* Chiffres tabulaires sur toutes les valeurs qui se lisent en colonne ou qui
   se réécrivent en place pendant le chargement : en chasse proportionnelle un
   « 1 » est plus étroit qu'un « 8 », et les compteurs sautillaient à chaque
   rafraîchissement. */
.nreg-module .nreg-benchmark-stats strong,
.nreg-module .nreg-benchmark-tree b,
.nreg-module .nreg-benchmark-heatmap-part b,
.nreg-module .nreg-benchmark-podium li b,
.nreg-module .nreg-benchmark-avg-badge,
.nreg-module .nreg-benchmark-table td,
.nreg-module .nreg-resource-kpi strong { font-variant-numeric: tabular-nums; }
/* Le fond de carte est mutualisé plus bas avec le Benchmark et les Résultats. */
.nreg-exec-page,
.nreg-debug-page {
  display: grid;
  gap: 16px;
}
.nreg-upload-page {
  display: grid;
  gap: 16px;
  min-height: 160px;
}
.nreg-upload-form {
  display: grid;
  gap: 18px;
}
.nreg-upload-form p {
  margin: 4px 0 0;
}
.nreg-upload-guide {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 13px;
}
.nreg-upload-guide code {
  overflow-wrap: anywhere;
  color: #1d4ed8;
  font-weight: 700;
}
.nreg-upload-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.nreg-upload-fields label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}
.nreg-upload-fields .input {
  width: 100%;
}
.nreg-upload-picker,
.nreg-upload-selection {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}
.nreg-upload-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.nreg-upload-mode label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
}
.nreg-upload-selection ul {
  display: grid;
  gap: 5px;
  max-height: 190px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.nreg-upload-selection li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.nreg-upload-selection code {
  overflow-wrap: anywhere;
}
.nreg-upload-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nreg-upload-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.nreg-upload-success p {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}
.nreg-exec-page > .card + .card {
  margin-top: 0;
}
.nreg-exec-server p,
.nreg-exec-form p,
.nreg-exec-job p {
  margin: 4px 0 0;
}
.nreg-exec-health {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.nreg-mem-gauge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-600);
}
.nreg-mem-label { letter-spacing: .04em; }
/* Barre de remplissage plutôt qu'une pile à cellules : la mémoire est un taux
   d'occupation, pas une réserve qui se vide. */
.nreg-mem-bar {
  display: inline-block;
  overflow: hidden;
  width: 58px;
  height: 6px;
  border-radius: 999px;
  background: var(--gray-200);
}
.nreg-mem-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gray-400);
  transition: width .3s, background .3s;
}
.nreg-mem-gauge.is-ok .nreg-mem-bar i { background: var(--success); }
.nreg-mem-gauge.is-warn .nreg-mem-bar i { background: var(--warning); }
.nreg-mem-gauge.is-critical .nreg-mem-bar i { background: var(--danger); }
.nreg-mem-gauge.is-critical .nreg-mem-value { color: var(--danger); }
.nreg-mem-value {
  min-width: 32px;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.nreg-exec-form {
  display: grid;
  gap: 18px;
}
.nreg-exec-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.nreg-exec-fields label {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 7px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}
.nreg-exec-fields .input {
  width: 100%;
}
.nreg-exec-fields .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
}
.nreg-exec-launch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.nreg-exec-findbox-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.nreg-exec-findbox-links + .nreg-json {
  margin-top: 14px;
}
.nreg-exec-job-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 0;
  scrollbar-width: thin;
}
.nreg-exec-job-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  max-width: 260px;
  padding: 9px 12px;
  border: 1px solid var(--gray-200);
  border-bottom-color: var(--gray-300);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--gray-50);
  color: var(--gray-600);
  cursor: pointer;
}
.nreg-exec-job-tab:hover,
.nreg-exec-job-tab.active {
  border-color: var(--niq-500);
  background: #fff;
  color: var(--gray-900);
}
.nreg-exec-job-tab.active {
  box-shadow: inset 0 -2px 0 var(--niq-500);
}
.nreg-exec-job-tab .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nreg-exec-job-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
.nreg-exec-job-tab-close:hover:not(:disabled) {
  background: var(--gray-200);
  opacity: 1;
}
.nreg-exec-job-tab-close:disabled {
  opacity: 0.22;
  cursor: not-allowed;
}
.nreg-exec-job-tab-status {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 999px;
}
.nreg-exec-job-tab-status.is-running {
  background: #eab308;
}
.nreg-exec-job-tab-status.is-success {
  background: #22a06b;
}
.nreg-exec-job-tab-status.is-error {
  background: var(--danger);
}
.nreg-exec-job-tab-status.is-pulsing {
  animation: nregExecTabPulse 1.35s ease-in-out infinite;
}
@keyframes nregExecTabPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.72); }
}
.nreg-exec-job {
  display: grid;
  gap: 18px;
}
.nreg-exec-console {
  display: grid;
  gap: 8px;
}
.nreg-exec-console-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.nreg-exec-console-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nreg-exec-console-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-page);
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.nreg-exec-console-toggle i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-300);
}
.nreg-exec-console-toggle.active {
  border-color: var(--success);
  background: #ecfdf5;
  color: #047857;
}
.nreg-exec-console-toggle.active i { background: var(--success); }
.nreg-exec-console-frame {
  position: relative;
}
.nreg-exec-console-grip {
  position: absolute;
  right: 0;
  bottom: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 52px;
  height: 16px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--gray-800);
  cursor: ns-resize;
  touch-action: none;
}
.nreg-exec-console-grip i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gray-400);
}
.nreg-exec-console-grip:hover { background: var(--gray-700); }
.nreg-exec-console-grip:hover i { background: var(--gray-200); }
body.is-resizing-ns,
body.is-resizing-ns * {
  cursor: ns-resize !important;
  user-select: none;
}
.nreg-exec-console-body {
  height: 280px;
  min-height: 120px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--gray-900);
  color: var(--gray-100);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
}
.nreg-exec-console-empty {
  color: var(--gray-400);
}
.nreg-exec-log {
  display: grid;
  grid-template-columns: 7.5rem 4.5rem minmax(0, 1fr);
  gap: 10px;
  padding: 1px 0;
}
.nreg-exec-log-time {
  color: var(--gray-400);
  white-space: nowrap;
}
.nreg-exec-log-level {
  font-weight: 700;
  letter-spacing: .04em;
}
.nreg-exec-log-msg {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.nreg-exec-log.is-info .nreg-exec-log-level { color: #67e8f9; }
.nreg-exec-log.is-warn .nreg-exec-log-level { color: #fbbf24; }
.nreg-exec-log.is-error .nreg-exec-log-level { color: #fb7185; }
.nreg-exec-log.is-debug .nreg-exec-log-level { color: #94a3b8; }
.nreg-exec-result {
  display: grid;
  gap: 16px;
}
.nreg-exec-result > .card + .card {
  margin-top: 0;
}
.nreg-exec-artifacts .nreg-detail-loading {
  margin-top: 0;
}
.nreg-exec-progress-status {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -12px;
  color: var(--gray-700);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.nreg-exec-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gray-100);
}
.nreg-exec-progress span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: var(--niq-500);
  animation: nregExecProgress 1.25s ease-in-out infinite;
}
.nreg-exec-progress.is-determinate span {
  transform: none;
  animation: none;
  transition: width 220ms ease;
}
@keyframes nregExecProgress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}
.nreg-exec-job-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nreg-exec-monitor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: -8px;
  font-size: 13px;
  color: var(--gray-600);
}
.nreg-exec-monitor-sep {
  opacity: 0.5;
}
.nreg-exec-pulse {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--gray-300);
  flex: none;
}
.nreg-exec-pulse.is-active {
  background: var(--niq-500);
  animation: nregExecPulse 1.4s ease-in-out infinite;
}
@keyframes nregExecPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45, 109, 246, 0.35); }
  50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(45, 109, 246, 0); }
}
.nreg-exec-cancel-notice {
  margin: -8px 0 0;
}
.nreg-exec-kpis {
  margin-bottom: 0;
}
.nreg-exec-job-error {
  padding: 12px;
  border-radius: var(--radius-md);
  background: #fff0f0;
  color: var(--danger);
}
.nreg-debug-page .card p {
  margin: 4px 0 0;
}
.nreg-debug-result {
  margin: 12px 0 0;
  padding: 12px;
  overflow: auto;
  max-height: 420px;
  border-radius: var(--radius-md);
  background: var(--bg-page);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nreg-exec-e2e-report p {
  margin: 4px 0 0;
}
.nreg-exec-e2e-entry + .nreg-exec-e2e-entry {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.nreg-exec-e2e-file {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.nreg-exec-e2e-json {
  margin: 12px 0 0;
  padding: 14px;
  max-height: 640px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .nreg-exec-fields,
  .nreg-upload-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .nreg-exec-fields,
  .nreg-upload-fields {
    grid-template-columns: 1fr;
  }
  .nreg-exec-server .row-between,
  .nreg-exec-job > .row-between {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}
/* Les sous-onglets Benchmark AI partagent le même habillage : un fond
   différent les ferait passer pour des pages distinctes. */
.nreg-benchmark,
.nreg-results,
.nreg-exec-page,
.nreg-upload-page,
.nreg-debug-page {
  --bench-panel: var(--bg-card);
  --bench-border: var(--border);
  --bench-text: var(--gray-800);
  --bench-muted: var(--gray-500);
  margin-top: 12px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 10% -12%, rgba(45, 109, 246, .1), transparent 30%),
    radial-gradient(circle at 94% 0%, rgba(254, 200, 52, .14), transparent 26%),
    var(--bg-page);
  color: var(--bench-text);
}
.nreg-benchmark-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 300px;
  color: var(--bench-muted);
}
.nreg-benchmark-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--bench-border);
  border-radius: 8px;
  background: var(--gray-50);
  color: var(--bench-muted);
  font-size: 12px;
}
.nreg-benchmark-progress .loader {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.nreg-benchmark-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nreg-benchmark-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid var(--bench-border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.nreg-benchmark-stats > div {
  display: grid;
  gap: 3px;
  padding: 15px 18px;
  border-right: 1px solid var(--bench-border);
}
.nreg-benchmark-stats > div:last-child { border-right: 0; }
.nreg-benchmark-stats strong { color: var(--gray-900); font-size: 22px; }
.nreg-benchmark-stats strong.nreg-benchmark-date { font-size: 13px; padding-top: 7px; }
.nreg-benchmark-stats span {
  color: var(--bench-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nreg-benchmark-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  transition: grid-template-columns .2s ease;
}
.nreg-benchmark-layout.sidebar-collapsed { grid-template-columns: 42px minmax(0, 1fr); }
.nreg-benchmark-main { min-width: 0; }
.nreg-benchmark-sidebar {
  position: sticky;
  /* Le header (64px) et la barre d'onglets (~48px) sont eux-mêmes sticky :
     sans ce décalage, le haut du menu passe dessous au défilement. */
  top: calc(var(--sticky-chrome-h) + 12px);
  z-index: 1;
  min-width: 0;
  max-height: calc(100vh - var(--sticky-chrome-h) - 24px);
  overflow: auto;
  border: 1px solid var(--bench-border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.nreg-benchmark-sidebar-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 0;
  border-bottom: 1px solid var(--bench-border);
  background: var(--gray-50);
  color: var(--gray-600);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.nreg-benchmark-sidebar-toggle > span:first-child { font-size: 15px; line-height: 1; }
.nreg-benchmark-layout.sidebar-collapsed .nreg-benchmark-sidebar {
  overflow: hidden;
}
.nreg-benchmark-layout.sidebar-collapsed .nreg-benchmark-sidebar-toggle {
  justify-content: center;
  height: 100%;
  min-height: 170px;
  padding: 10px 5px;
  border-bottom: 0;
  writing-mode: vertical-rl;
}
.nreg-benchmark-layout.sidebar-collapsed .nreg-benchmark-sidebar-toggle > span:first-child {
  writing-mode: horizontal-tb;
}
.nreg-benchmark-layout.sidebar-collapsed .nreg-benchmark-sidebar-content { display: none; }
.nreg-benchmark-sidebar-head {
  display: grid;
  gap: 1px;
  padding: 9px 12px 6px;
}
.nreg-benchmark-sidebar-head strong { color: var(--gray-900); font-size: 12px; }
.nreg-benchmark-sidebar-head small {
  color: var(--bench-muted);
  font-size: 10px;
  line-height: 1.3;
}
.nreg-benchmark-tree {
  display: grid;
  padding: 0 7px 7px;
}
.nreg-benchmark-tree-group { display: grid; }
.nreg-benchmark-tree-family {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
}
.nreg-benchmark-tree-root,
.nreg-benchmark-tree-family-btn,
.nreg-benchmark-tree-child,
.nreg-benchmark-tree-chevron {
  display: grid;
  align-items: center;
  gap: 4px;
  width: 100%;
  /* Ligne d'arborescence : hauteur fixe pour que les huit entrées et les
     filtres tiennent dans la hauteur visible sans défilement. */
  height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--gray-700);
  font: inherit;
  font-size: 13px;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}
.nreg-benchmark-tree-root { grid-template-columns: 18px minmax(0, 1fr) auto; }
.nreg-benchmark-tree-family-btn {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  font-weight: 700;
}
.nreg-benchmark-tree-child { grid-template-columns: 11px 18px minmax(0, 1fr) auto; padding-left: 13px; }
.nreg-benchmark-tree-chevron {
  padding: 0;
  color: var(--gray-400);
  font-size: 11px;
  text-align: center;
}
.nreg-benchmark-tree-root:hover,
.nreg-benchmark-tree-family-btn:hover,
.nreg-benchmark-tree-child:hover,
.nreg-benchmark-tree-chevron:hover { background: var(--gray-50); }
.nreg-benchmark-tree-root.active,
.nreg-benchmark-tree-family-btn.active,
.nreg-benchmark-tree-child.active {
  background: var(--niq-50);
  color: var(--niq-700);
  font-weight: 700;
}
/* `is-empty` et non `empty` : cette dernière est la classe globale de l'encart
   « aucune donnée » (padding 40px), qui écraserait la hauteur de la ligne. */
.nreg-benchmark-tree-root.is-empty,
.nreg-benchmark-tree-family-btn.is-empty,
.nreg-benchmark-tree-child.is-empty { opacity: .52; }
.nreg-benchmark-tree b {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gray-100);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.nreg-benchmark-tree .active b { background: var(--bg-card); }
/* Une seule ligne par entrée : un libellé qui passe à la ligne doublerait la
   hauteur de la branche et le menu ne tiendrait plus dans la page. */
.nreg-benchmark-tree-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nreg-benchmark-tree-branch { color: var(--gray-300); font-family: var(--font-mono); }
.nreg-benchmark-tree-icon { color: var(--niq-600); font-weight: 800; text-align: center; }
.nreg-benchmark-filters {
  display: grid;
  gap: 11px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--bench-border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.nreg-benchmark-sidebar .nreg-benchmark-filters {
  gap: 8px;
  margin: 0;
  padding: 10px 11px 12px;
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: none;
}
.nreg-benchmark-sidebar .nreg-benchmark-filter {
  grid-template-columns: 1fr;
  gap: 4px;
}
.nreg-benchmark-sidebar .nreg-benchmark-filter > span { font-size: 9.5px; }
.nreg-benchmark-filter {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.nreg-benchmark-filter > span {
  color: var(--bench-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
/* Filtres en combobox : ils encaissent l'arrivée de nouveaux modèles et
   versions sans allonger le menu, contrairement aux pastilles d'origine. */
.nreg-benchmark-filter-cb { display: block; min-width: 0; }
.nreg-benchmark-filter-cb .cb-input {
  min-width: 0;
  padding: 6px 40px 6px 9px !important;
  font-size: 11px;
}
/* Menu dans le flux : la barre latérale a son propre défilement, un menu
   positionné en absolu y serait rogné dès la deuxième ligne de filtres. */
.nreg-benchmark-sidebar .nreg-benchmark-filter-cb .cb-menu {
  position: static;
  margin-top: 4px;
  max-height: 190px;
  box-shadow: none;
}
.nreg-benchmark-filter-cb .cb-option {
  padding: 5px 8px;
  font-size: 11px;
}
.nreg-benchmark-filter-cb .cb-clear { right: 26px; }
.nreg-benchmark-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
/* Carte plate : le liseré et le dégradé de gauche se lisaient comme une ombre.
   L'identité de la carte passe maintenant par la couleur de son titre, reprise
   sur la pastille et sur le rang 1 du podium. */
.nreg-benchmark-insight {
  --insight-accent: var(--niq-600);
  display: grid;
  gap: 5px;
  padding: 15px 17px;
  border: 1px solid var(--bench-border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.nreg-benchmark-insight.fast { --insight-accent: #ea580c; }
.nreg-benchmark-insight.balanced { --insight-accent: var(--vusion-600); }
.nreg-benchmark-insight > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--insight-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nreg-benchmark-insight > span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--insight-accent);
}
.nreg-benchmark-insight small { color: var(--gray-500); }
/* Podium : le vainqueur reste détaché, les suivants donnent l'écart. */
.nreg-benchmark-podium {
  display: grid;
  gap: 3px;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}
.nreg-benchmark-podium li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px;
  color: var(--gray-600);
  font-size: 11px;
}
.nreg-benchmark-podium li b {
  color: var(--bench-muted);
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}
.nreg-benchmark-insight .nreg-benchmark-podium-label {
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.nreg-benchmark-podium li em {
  color: var(--gray-500);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.nreg-benchmark-podium li.lead { color: var(--gray-900); font-size: 12px; }
.nreg-benchmark-insight .lead .nreg-benchmark-podium-label { font-weight: 700; }
.nreg-benchmark-podium li.lead em { color: var(--gray-700); font-weight: 700; }
.nreg-benchmark-podium li.lead b { color: var(--insight-accent); font-size: 11px; }
.nreg-benchmark-card {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--bench-border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.nreg-benchmark-card-head { margin-bottom: 14px; }
.nreg-benchmark-card-head > div { display: flex; align-items: center; gap: 10px; }
/* Numéro de carte (01…08) : même police que le reste du module. Le mono
   d'origine tranchait avec les titres, alors que ce numéro est un repère de
   lecture, pas une valeur technique. Chiffres tabulaires pour que tous les
   numéros occupent la même largeur d'une carte à l'autre. */
.nreg-benchmark-card-head > div > span {
  color: var(--niq-500);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.nreg-benchmark-card h3 { margin: 0; color: var(--gray-900); font-size: 14px; letter-spacing: .02em; }
.nreg-benchmark-card .input {
  width: auto;
  min-width: 150px;
}
/* Sélecteurs du 04 : deux listes courtes côte à côte. Le plancher de 150 px les
   rendait plus larges que leur contenu et poussait les boutons d'action. */
.nreg-benchmark-card .input.nreg-select-compact {
  min-width: 0;
  padding-right: 26px;
}
.nreg-benchmark-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.nreg-chart-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* `flex: none` : dans l'en-tête du tableau 08 le champ de recherche réclame
     280 px, et sans cela il écrase le bouton jusqu'à tronquer son libellé. */
  flex: none;
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}
.nreg-chart-action > span[aria-hidden="true"] {
  font-size: 15px;
  line-height: 1;
}
body.nreg-chart-modal-open { overflow: hidden; }
.nreg-benchmark-card-expanded {
  position: fixed;
  inset: 18px;
  z-index: 115;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 0 0 100vmax rgba(17, 24, 39, .52), var(--shadow-lg);
}
.nreg-benchmark-chart { height: 330px; }
/* Dashboard empilé : un graphique par ligne, sur toute la largeur. Juxtaposer
   deux cartes à demi-largeur écrasait les libellés de modèle du classement et
   les colonnes de la heatmap. */
.nreg-benchmark-top,
.nreg-benchmark-two {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
/* Cartes 01 et 02 : la colonne flex permet à la zone de contenu d'occuper tout
   ce qui reste sous l'en-tête. */
.nreg-benchmark-top > .nreg-benchmark-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Hauteur de contenu définie : au-delà c'est la zone qui défile plutôt que la
   carte qui s'allonge. Sans ce plafond, chaque modèle ou dataset ajouté fait
   déborder le classement et la heatmap vers le bas, et la heatmap vers la
   droite. */
.nreg-benchmark-scroll,
.nreg-benchmark-top .nreg-benchmark-heatmap {
  flex: 1 1 auto;
  height: 560px;
  max-height: none;
  overflow: auto;
}
/* Hauteur du parent définie : le classement remplit toute la carte, et la
   hauteur minimale posée par le rendu (une ligne par barre) prend le relais
   quand il y a trop de modèles pour tenir sans défilement. */
.nreg-benchmark-scroll > .leaderboard-chart { height: 100%; }
/* Base 0 : la hauteur vient de l'espace restant, jamais du canvas, sinon un
   canvas resté grand gonfle le conteneur au retour en vue normale. */
.nreg-benchmark-card-expanded > .nreg-benchmark-chart,
.nreg-benchmark-card-expanded .nreg-benchmark-scroll,
.nreg-benchmark-top > .nreg-benchmark-card-expanded .nreg-benchmark-heatmap {
  flex: 1 1 0;
  min-height: 0;
  height: auto !important;
}
/* Plein écran : la hauteur du parent ne vient plus d'un `height` fixe, le
   pourcentage ne s'y résoudrait pas — on repasse par une répartition flex. */
.nreg-benchmark-card-expanded .nreg-benchmark-scroll {
  display: flex;
  flex-direction: column;
}
.nreg-benchmark-card-expanded .nreg-benchmark-scroll > .leaderboard-chart {
  flex: 1 1 0;
  height: auto;
}
.nreg-benchmark-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: -4px 0 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--bench-border);
}
/* Légende de la matrice : elle sépare les courbes de la matrice sous elles,
   le trait passe donc au-dessus plutôt qu'en dessous. */
.nreg-distribution-legend-matrix {
  margin: 14px 0 10px;
  padding: 12px 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--bench-border);
}
.nreg-benchmark-legend-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--niq-50);
}
.nreg-benchmark-legend-metric strong { color: var(--niq-700); font-size: 11px; }
.nreg-benchmark-legend-metric em { color: var(--niq-600); font-size: 10px; font-style: normal; }
.nreg-benchmark-legend-hint {
  flex: 1 1 220px;
  color: var(--bench-muted);
  font-size: 10px;
  line-height: 1.5;
}
.nreg-benchmark-legend-solo {
  flex-basis: 100%;
  color: var(--bench-muted);
  font-size: 11px;
  font-style: italic;
}
.nreg-benchmark-legend-frameworks {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.nreg-benchmark-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gray-600);
  font-size: 10px;
  font-weight: 600;
}
.nreg-benchmark-legend-item i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
/* Classement 01 : le remplissage porte le device, pas le framework. */
.nreg-benchmark-legend-solid i {
  background: var(--gray-500);
}
.nreg-benchmark-legend-hollow i {
  background: rgba(107, 114, 128, .35);
  border: 1.5px solid var(--gray-500);
}
.nreg-benchmark-legend-dash i {
  width: 14px;
  height: 0;
  border-radius: 0;
  background: transparent;
  border-top: 2px dashed var(--gray-500);
}
.nreg-benchmark-scale {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--bench-muted);
  font-size: 9px;
  font-weight: 800;
}
/* Le dégradé est posé par `adminNregBenchmarkHeatmapScaleGradient()`, seule
   source de vérité de la rampe : la pastille montre ainsi exactement les
   teintes des cases, compression logarithmique comprise. Celui écrit ici ne
   sert que de repli si le style inline n'est pas appliqué. */
.nreg-benchmark-scale i {
  width: 82px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: linear-gradient(90deg, #dbeafe, #bfdbfe 20%, #93c5fd 42%, #60a5fa 60%, #1d4ed8 72%, #172554);
}
.nreg-benchmark-heatmap { max-height: 620px; overflow: auto; }
.nreg-benchmark-heatmap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-card);
}
/* Colonne des modèles figée : avec beaucoup de datasets le tableau défile
   horizontalement, il faut garder le nom du modèle sous les yeux. */
.nreg-benchmark-heatmap tbody th,
.nreg-benchmark-heatmap thead th:first-child {
  position: sticky;
  left: 0;
  /* `width: 1%` colle la colonne à son contenu — déjà tronqué par
     `adminNregBenchmarkShortLabel` : sans ça la répartition de la largeur
     restante lui donne la plus grosse part et laisse un grand vide après le
     libellé, au lieu d'élargir les cases de la heatmap. */
  width: 1%;
  background: var(--bg-card);
  box-shadow: 3px 0 0 var(--bg-card);
}
.nreg-benchmark-heatmap thead th:first-child { z-index: 2; }
.nreg-benchmark-heatmap tbody th {
  /* Plafond de sécurité : au-delà de la troncature JS (35 caractères ≈ 220 px)
     pour ne pas retrancher une seconde fois derrière le « … ». */
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nreg-benchmark-heatmap table,
.nreg-benchmark-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  color: var(--gray-700);
  font-size: 11px;
}
/* Largeur intrinsèque : les cellules gardent leur taille lisible et c'est le
   conteneur qui défile, au lieu d'écraser les colonnes jusqu'à l'illisible. */
.nreg-benchmark-heatmap table { width: auto; min-width: 100%; }
.nreg-benchmark-heatmap th { padding: 9px; color: var(--gray-500); text-align: left; }
.nreg-benchmark-heatmap td {
  min-width: 118px;
  padding: 5px 6px;
  border-radius: 7px;
  text-align: center;
  font-weight: 800;
  white-space: nowrap;
}
/* Une ligne par device dans la case : l'étiquette GPU/CPU reste discrète
   pour que la valeur garde le premier plan. Interlignage serré, les deux
   lignes doivent se lire comme un bloc et non comme deux cellules. */
.nreg-benchmark-heatmap-part {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  line-height: 1.1;
}
.nreg-benchmark-heatmap-part b { font-size: 13px; }
.nreg-benchmark-heatmap-part i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .75;
}
/* Graphique 05 — matrice de distributions.
   Une ligne reste lisible avec 13 modèles, mais se compacte automatiquement
   jusqu'à 50 lignes dans la hauteur d'un écran. Contrairement aux courbes
   superposées, aucune information n'en masque une autre. */
.nreg-distribution-matrix {
  --nreg-dist-label: clamp(150px, 26%, 270px);
  min-width: 0;
  padding: 4px 2px 0;
  color: var(--gray-600);
  font-variant-numeric: tabular-nums;
}
.nreg-distribution-axis,
.nreg-distribution-row {
  display: grid;
  grid-template-columns: var(--nreg-dist-label) minmax(0, 1fr);
  column-gap: 10px;
  align-items: stretch;
}
.nreg-distribution-axis {
  height: 27px;
  align-items: end;
  font-size: 9px;
  font-weight: 700;
  color: var(--bench-muted);
}
.nreg-distribution-axis-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nreg-distribution-axis-scale {
  position: relative;
  height: 16px;
  border-bottom: 1px solid var(--gray-300);
}
.nreg-distribution-axis-scale span {
  position: absolute;
  bottom: 3px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.nreg-distribution-axis-scale span:first-child { transform: none; }
.nreg-distribution-axis-scale span:last-child { transform: translateX(-100%); }
.nreg-distribution-rows {
  display: grid;
  grid-auto-rows: clamp(
    11px,
    calc((min(68vh, 680px) - 32px) / var(--nreg-dist-rows)),
    22px
  );
  gap: 1px;
}
.nreg-distribution-row {
  min-height: 0;
}
.nreg-distribution-label {
  align-self: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(8px, 0.72vw, 10px);
  font-weight: 650;
  line-height: 1;
}
.nreg-distribution-plot {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 1px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(25% - 1px),
    rgba(148, 163, 184, .24) calc(25% - 1px),
    rgba(148, 163, 184, .24) 25%
  );
}
.nreg-distribution-band {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
}
.nreg-distribution-cells {
  position: absolute;
  inset: 0;
  display: grid;
  /* Une colonne par tranche persistée par TEST_CV, pas un découpage arbitraire. */
  grid-template-columns: repeat(var(--nreg-dist-bins, 8), minmax(0, 1fr));
  gap: 1px;
}
.nreg-distribution-cells i {
  min-width: 0;
  border-radius: 1px;
  transition: outline-color .12s ease, filter .12s ease;
}
.nreg-distribution-cells i:hover {
  z-index: 4;
  outline: 1px solid var(--gray-800);
  filter: saturate(1.25);
}
.nreg-distribution-kind {
  position: absolute;
  z-index: 3;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(15, 23, 42, .78);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .03em;
  pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.nreg-distribution-marker {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: none;
}
.nreg-distribution-marker-p50 {
  border-left: 2px solid rgba(15, 23, 42, .92);
}
.nreg-distribution-marker-p90 {
  border-left: 1px dashed rgba(255, 255, 255, .96);
  filter: drop-shadow(1px 0 0 rgba(15, 23, 42, .8));
}
.nreg-distribution-x-title {
  margin: 5px 0 0 calc(var(--nreg-dist-label) + 10px);
  text-align: center;
  color: var(--bench-muted);
  font-size: 9px;
  font-weight: 700;
}
.nreg-distribution-legend-density i {
  width: 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(16,185,129,.08), rgba(16,185,129,.92));
}
.nreg-distribution-legend-p50 i {
  width: 0;
  height: 10px;
  border-radius: 0;
  border-left: 2px solid var(--gray-800);
  background: transparent;
}
.nreg-distribution-legend-p90 i {
  width: 0;
  height: 10px;
  border-radius: 0;
  border-left: 1px dashed var(--gray-500);
  background: transparent;
}
.memory-chart { height: 360px; }
.resource-chart { min-height: 390px; }
.nreg-resource-ranking-scroll {
  max-height: 760px;
  overflow: auto;
}
.nreg-resource-dashboard { min-width: 0; }
.nreg-benchmark-card-expanded .nreg-resource-dashboard {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}
.nreg-resource-accuracy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  flex: 1 1 280px;
  color: var(--gray-600);
  font-size: 12px;
}
.nreg-resource-accuracy input[type="range"] {
  flex: 1 1 auto;
  min-width: 120px;
  accent-color: var(--niq-500);
}
.nreg-resource-accuracy strong {
  flex: 0 0 auto;
  min-width: 4.2em;
  font-variant-numeric: tabular-nums;
  color: var(--gray-800);
}
.nreg-resource-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.nreg-resource-intro p {
  max-width: 780px;
  margin: 0;
  color: var(--bench-muted);
  font-size: 11px;
  line-height: 1.5;
}
.nreg-resource-intro .input { max-width: min(420px, 45%); }
.nreg-resource-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.nreg-resource-kpi {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--bench-border);
  border-radius: 9px;
  background: var(--gray-50);
}
.nreg-resource-kpi-primary {
  border-color: var(--niq-200);
  background: var(--niq-50);
}
.nreg-resource-kpi-money {
  border-color: #86efac;
  background: #f0fdf4;
}
/* Le prix estimé s'affiche en décimal, donc parfois sur une dizaine de chiffres :
   il doit pouvoir passer à la ligne au lieu d'être coupé par une ellipse. */
.nreg-resource-kpi-money strong {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.nreg-resource-kpi span {
  display: block;
  margin-bottom: 5px;
  color: var(--gray-500);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nreg-resource-kpi strong {
  display: block;
  overflow: hidden;
  color: var(--gray-900);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nreg-resource-kpi small {
  display: block;
  margin-top: 4px;
  color: var(--gray-500);
  font-size: 9px;
  line-height: 1.3;
}
.nreg-resource-technical {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--bench-border);
  border-radius: 9px;
  background: var(--gray-50);
}
.nreg-resource-technical summary {
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.nreg-resource-technical p,
.nreg-resource-method-warning {
  color: var(--bench-muted);
  font-size: 10px;
  line-height: 1.5;
}
.resource-technical-chart { height: 390px; margin-top: 8px; }
.nreg-resource-method-warning {
  margin: 11px 0 0;
  padding-left: 10px;
  border-left: 3px solid #f59e0b;
}
.nreg-benchmark-search { min-width: min(280px, 100%) !important; }
.nreg-benchmark-table { max-height: 520px; overflow: auto; }
.nreg-benchmark-table table { border-spacing: 0; }
.nreg-benchmark-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--gray-50);
  color: var(--gray-500);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.nreg-benchmark-table th:hover { color: var(--niq-600); }
.nreg-benchmark-table td { padding: 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.nreg-benchmark-table tbody tr { transition: background .14s; }
.nreg-benchmark-table tbody tr:hover { background: var(--niq-50); }
.nreg-benchmark-table td small { display: block; margin-top: 2px; color: var(--gray-400); }
.nreg-benchmark-avg-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--niq-50);
  color: var(--niq-700);
  font-size: 9px;
  font-weight: 800;
}
.nreg-benchmark-empty { margin-top: 14px; background: var(--bg-card); color: var(--gray-500); }
.nreg-benchmark-helpbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
.nreg-benchmark-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nreg-help-dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--niq-500);
  border-radius: 999px;
  background: transparent;
  color: var(--niq-600);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .14s, color .14s;
}
button.nreg-help-dot:hover {
  background: var(--niq-500);
  color: #fff;
}
.nreg-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: flex-end;
  background: rgba(17, 24, 39, .45);
}
.nreg-help-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 14px;
  width: min(460px, 100%);
  height: 100%;
  padding: 20px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}
.nreg-help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.nreg-help-head h3 {
  margin: 0;
  font-size: 16px;
}
.nreg-help-head p {
  margin: 4px 0 0;
  font-size: 12px;
}
.nreg-help-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nreg-help-tabs button {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-page);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.nreg-help-tabs button.active {
  border-color: var(--niq-500);
  background: var(--niq-50);
  color: var(--niq-700);
}
.nreg-help-body {
  overflow: auto;
  padding-right: 4px;
}
.nreg-help-group + .nreg-help-group { margin-top: 20px; }
.nreg-help-group h4 {
  position: sticky;
  top: 0;
  margin: 0 0 8px;
  padding: 4px 0;
  background: var(--bg-card);
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.nreg-help-group dl { margin: 0; }
.nreg-help-entry {
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.nreg-help-entry dt {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 700;
}
.nreg-help-entry dd {
  margin: 3px 0 0;
  color: var(--gray-600);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 1000px) {
  .nreg-benchmark-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .nreg-benchmark-stats { grid-template-columns: repeat(2, 1fr); }
  .nreg-benchmark-stats > div { border-bottom: 1px solid var(--bench-border); }
  .nreg-benchmark-insights { grid-template-columns: 1fr; }
  .nreg-resource-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .nreg-benchmark,
  .nreg-results,
  .nreg-exec-page,
  .nreg-upload-page,
  .nreg-debug-page { padding: 14px; }
  .nreg-benchmark-layout,
  .nreg-benchmark-layout.sidebar-collapsed { grid-template-columns: 1fr; }
  .nreg-benchmark-sidebar { position: static; max-height: none; }
  .nreg-benchmark-layout.sidebar-collapsed .nreg-benchmark-sidebar-toggle {
    min-height: 0;
    writing-mode: horizontal-tb;
  }
  .nreg-benchmark-filter { grid-template-columns: 1fr; }
  .nreg-benchmark-stats { grid-template-columns: 1fr; }
  .nreg-benchmark-stats > div { border-right: 0; }
  .nreg-benchmark-card-head { align-items: flex-start; flex-direction: column; }
  .nreg-benchmark-card .input { width: 100%; }
  .nreg-benchmark-card-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .nreg-benchmark-card-actions .input { flex: 1 1 100%; }
  .nreg-benchmark-card-expanded { inset: 0; border-radius: 0; }
  .nreg-resource-intro { align-items: stretch; flex-direction: column; }
  .nreg-resource-intro .input { max-width: 100%; }
  .nreg-resource-kpis { grid-template-columns: 1fr; }
}
.nreg-comparisons-scroll {
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.nreg-json {
  margin-top: 16px;
}
.nreg-json summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--niq-700);
  font-weight: 600;
}
.nreg-json-copy {
  margin-left: auto;
  font-weight: 600;
}
.nreg-runtime-value {
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.nreg-json pre {
  max-height: 520px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--gray-900);
  color: var(--gray-100);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nreg-artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.nreg-artifact {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--gray-50);
}
.nreg-artifact img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: white;
}
.nreg-artifact figcaption {
  padding: 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.tbl tr.subrow td { background: var(--gray-50); font-size: 12.5px; color: var(--gray-700); }
.tbl tr.subrow:hover td { background: var(--niq-50); }
.tbl tr.substorerow td {
  background: #f7fafc; font-size: 12.5px; color: var(--gray-800);
}
.tbl tr.substorerow:hover td { background: var(--niq-50); }
.tbl tr.subcamrow td {
  background: #fbfdff; font-size: 12px; color: var(--gray-700);
}
.tbl tr.subcamrow:hover td { background: var(--niq-100); }
.tbl tr.loadingrow td {
  background: var(--gray-50); font-size: 12px; color: var(--gray-500);
  font-style: italic;
}
.tbl tr.loadingrow:hover td { background: var(--gray-50); cursor: default; }
.link-realogramme {
  margin-left: 10px;
  color: var(--niq-600);
  font-weight: 600;
  font-size: 11.5px;
}
.tbl tr.subcamrow:hover .link-realogramme { color: var(--niq-700); text-decoration: underline; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .pct-bar {
  display: inline-block; height: 6px;
  background: var(--niq-200);
  border-radius: 3px; vertical-align: middle;
  margin-right: 8px;
}

/* -------------------------------------------------------------- Photo grid */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.photo-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 150ms;
  display: flex;
  flex-direction: column;
}
.photo-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Le ratio est porté par le conteneur, jamais par l'<img> : la hauteur réservée
   ne dépend donc ni du chargement ni d'une image cassée (les navigateurs
   dimensionnent leur placeholder « ? » à leur guise et ignorent l'aspect-ratio
   de l'image, ce qui décalait les cartes voisines). */
.photo-card-media {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
  overflow: hidden;
}
.photo-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-card-body {
  padding: 12px 14px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.photo-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.photo-card-titlewrap {
  min-width: 0;
}
.photo-card-sub {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.photo-card-price {
  font-weight: 600;
  color: var(--gray-800);
}
.badge-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: var(--niq-50);
  color: var(--niq-700);
  border: 1px solid var(--niq-200);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-tab-disabled {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.store-disabled-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.store-disabled-toggle input {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.photo-card-title {
  font-size: 13px; font-weight: 600; color: var(--gray-900);
  margin-bottom: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.photo-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px; color: var(--gray-500);
  margin-bottom: 10px;
}
.photo-card-meta-left {
  display: flex;
  gap: 12px;
  min-width: 0;
}
.photo-card-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
}
.photo-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  /* Colle les boutons en bas : les cartes d'une même ligne s'alignent même si
     un libellé passe sur deux lignes. */
  margin-top: auto;
}
.photo-card-actions-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.photo-card-actions-row .btn {
  flex: 1 1 0;
  justify-content: center;
}

/* ---------------------------------------------------------- Compare drawer */

.compare-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  background: var(--vusion-500); color: white;
  border: none; border-radius: 999px;
  padding: 12px 20px;
  font-weight: 600; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-lg);
  transition: all 150ms;
}
.compare-fab:hover { background: var(--vusion-600); transform: translateY(-2px); }
.compare-fab .badge-count {
  background: white; color: var(--vusion-700);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 700;
}

/* ----------------------------------------------------------- Compare grid */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.compare-tile {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.compare-tile img {
  width: 100%; border-radius: var(--radius-md);
  background: var(--gray-100);
}

/* ---------------------------------------------------------------- Loading */

.loader {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--gray-300);
  border-top-color: var(--niq-500);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  /* Promotion sur une couche de composition dédiée : l'animation `transform`
     tourne alors côté compositeur (GPU) et reste fluide même quand le thread
     principal est bloqué (rendu d'une grosse liste, parsing JSON…). Sans ça, le
     spinner se figeait pendant l'attente de la réponse serveur. */
  will-change: transform;
}
/* translateZ(0) maintenu sur toute la boucle → la couche GPU n'est jamais
   abandonnée entre deux tours (sinon micro-freezes sous charge). */
@keyframes spin {
  from { transform: translateZ(0) rotate(0deg); }
  to   { transform: translateZ(0) rotate(360deg); }
}

/* Overlay de chargement : voile gris doux plein écran + pastille centrée. */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 44, 52, 0.22);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  pointer-events: auto;
}
.loading-toast {
  width: fit-content;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}

.sku-thumb-cell {
  position: relative;
  width: 48px;
  padding: 4px 8px;
}
.sku-row-loading {
  opacity: 0.72;
  pointer-events: none;
}
.sku-row-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  z-index: 2;
  border-top-color: var(--vusion-500);
}
.sku-thumb-loading {
  opacity: 0.35;
  filter: blur(1px);
}
.sku-detail-loader-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.empty {
  text-align: center; padding: 40px 20px;
  color: var(--gray-500); font-size: 13px;
}

/* ------------------------------------------------------------------- Utils */

.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spacer { flex: 1; }
.muted { color: var(--gray-500); }
.mono { font-family: var(--font-mono); }
.chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--gray-100); color: var(--gray-700);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.chip-niq    { background: var(--niq-50);    color: var(--niq-700); }
.chip-vusion { background: var(--vusion-100); color: var(--vusion-700); }

.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--gray-500);
  margin-bottom: 12px;
}
.breadcrumb a { color: var(--niq-600); }
.breadcrumb .sep { color: var(--gray-400); }

/* ------------------------------------------------------------------ Modal */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(17, 24, 39, 0.5);
  display: grid; place-items: center;
  z-index: 100;
}
.modal {
  background: white;
  max-width: 95vw; max-height: 92vh;
  border-radius: var(--radius-lg);
  overflow: auto;
  box-shadow: var(--shadow-lg);
}
.modal img { display: block; max-width: 100%; }

/* ----------------------------------------------------- API doc snippets */

.snippet {
  background: var(--gray-900); color: #e5e7eb;
  padding: 14px 16px; border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 12px;
  overflow-x: auto;
  position: relative;
}
.snippet pre { margin: 0; white-space: pre; }
.snippet .copy {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white; font-size: 11px;
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.snippet .copy:hover { background: rgba(255, 255, 255, 0.2); }

.endpoint-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: white;
}
.endpoint-method {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  margin-right: 8px;
}
.method-get  { background: #dbeafe; color: #1e40af; }
.method-post { background: #d1fae5; color: #065f46; }
.endpoint-path {
  font-family: var(--font-mono); font-weight: 600; color: var(--gray-800);
}
.endpoint-desc { color: var(--gray-600); font-size: 13px; margin-top: 6px; }

/* Démarcation des groupes d'endpoints (standard vs admin) dans la vue API Docs */
.endpoint-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.endpoint-group-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-700, #374151);
}
.endpoint-group-head--admin {
  margin-top: 26px;
  border-bottom-color: var(--danger, #e5484d);
}
.endpoint-group-head--admin .endpoint-group-title { color: var(--danger, #e5484d); }

/* Carte d'endpoint admin : accent latéral + fond légèrement teinté */
.endpoint-card--admin {
  border-left: 3px solid var(--danger, #e5484d);
  background: #fef5f5;
}

/* Chip « rôle admin requis » */
.chip-admin {
  background: #fdecec;
  color: var(--danger, #c0392b);
  border: 1px solid #f5c2c2;
}

/* ─────────────────────────────── Shelf viewer (réalogramme) ─────────────────────────────── */

.shelf-viewer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shelf-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.shelf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1100px) {
  .shelf-layout { grid-template-columns: 1fr; }
}

.shelf-canvas {
  position: relative;
  background: var(--gray-900);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
/* Zone scrollable : pan quand zoom > 100%. */
.shelf-viewport {
  display: block;
  width: 100%;
  overflow: auto;
  min-height: 220px;
  max-height: calc(100vh - 240px);
}
.shelf-viewport.can-pan { cursor: grab; }
.shelf-viewport.is-panning { cursor: grabbing; }
.shelf-viewport.is-panning * { pointer-events: none; }
.shelf-canvas-inner {
  position: relative;
  display: block;
  line-height: 0;
  width: calc(100% * var(--shelf-zoom, 1));
  box-sizing: border-box;
}
.shelf-canvas-inner img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.shelf-zoom-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.62);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.shelf-zoom-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #f9fafb;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease;
}
.shelf-zoom-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.shelf-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.shelf-zoom-level {
  min-width: 46px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Bascule vignettes, posée dans la barre flottante au-dessus de l'image : la
   commande est là où se trouve son effet, plutôt que dans la barre d'outils. */
.shelf-thumbs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.shelf-thumbs-btn .icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}
.shelf-thumbs-btn .icon svg { width: 100%; height: 100%; }
/* Vignettes masquées : icône estompée + barre oblique, pour lire l'état sans
   dépendre du seul tooltip. */
.shelf-thumbs-btn.is-off { opacity: 0.5; }
.shelf-thumbs-btn.is-off::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  border-radius: 1px;
}
.shelf-zoom-sep {
  width: 1px;
  height: 16px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.28);
}
.shelf-canvas-skeleton {
  min-height: 320px;
  background: var(--gray-800);
}
/* Réserve une hauteur au tout premier chargement (pas d'ancienne image). */
.shelf-canvas.is-loading {
  min-height: 220px;
}
/* Badge « pilule » non-bloquant en haut de l'image : signale que la photo
   charge, SANS masquer le planogramme (déjà affiché par-dessus). */
.shelf-canvas-loader {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.shelf-canvas-loader .loader {
  width: 14px;
  height: 14px;
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
.shelf-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.shelf-overlay .bbox {
  pointer-events: all;
}
/* Trait blanc en pointillés (repère 0..1 + non-scaling-stroke). */
.shelf-overlay .bbox {
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.25px;
  stroke-dasharray: 5px 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: pointer;
  transition: stroke .15s ease, stroke-width .15s ease, stroke-opacity .15s ease;
}

/* ───────────── Compliance planogramme (POG HQ vs CV courante) ───────────── */
.shelf-subtabs { margin: -4px 0 0; }
.pogcmp-view { min-height: 320px; }
.pogcmp-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 190px)) minmax(220px, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  align-items: stretch;
}
/* Cartes côte à côte : l'espacement vient de `gap`, on annule le margin-top
   des siblings `.card + .card` qui décalerait toutes les cartes sauf la 1re. */
.pogcmp-kpis .card + .card,
.pogcmp-layout .card + .card { margin-top: 0; }
/* Colonne : le libellé occupe 2 lignes dans toutes les cartes, donc les
   valeurs et les compteurs restent alignés même quand le libellé tient
   sur une seule ligne. */
.pogcmp-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}
.pogcmp-kpi > span {
  min-height: 2.6em;
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.pogcmp-kpi > strong {
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pogcmp-kpi > small { color: var(--gray-500); }
.pogcmp-kpi-main { border-color: #f59e0b; }
.pogcmp-map-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 3px;
  padding: 10px;
  text-align: right;
}
.pogcmp-layout {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.4fr) minmax(260px, .7fr);
  gap: 14px;
  align-items: stretch;
}
.pogcmp-plan,
.pogcmp-realogram,
.pogcmp-deviations {
  display: flex;
  flex-direction: column;
  padding: 14px;
  min-width: 0;
}
.pogcmp-plan h3,
.pogcmp-realogram h3,
.pogcmp-deviations h3 { margin: 0; font-size: 14px; }
.pogcmp-shelves {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  max-height: calc(100vh - 300px);
  overflow: auto;
}
.pogcmp-shelf-title {
  margin-bottom: 5px;
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.pogcmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 4px;
}
.pogcmp-cell {
  position: relative;
  min-width: 0;
  height: 76px;
  padding: 15px 3px 3px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.pogcmp-cell img { width: 100%; height: 100%; object-fit: contain; }
.pogcmp-pos {
  position: absolute; top: 2px; left: 5px;
  font-size: 10px; font-weight: 800;
}
.pogcmp-facing {
  position: absolute; right: 3px; bottom: 2px;
  padding: 1px 3px; border-radius: 3px;
  background: rgba(255,255,255,.88); font-size: 9px; font-weight: 800;
}
/* En-tête commun aux trois colonnes : même hauteur que le sélecteur et les
   boutons de zoom, donc les trois contenus démarrent à la même ligne. */
.pogcmp-pane-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  margin-bottom: 10px;
}
.pogcmp-realogram { position: relative; }
/* Le zoom n'est plus posé sur la photo mais dans l'en-tête blanc : variante
   claire de la pilule sombre du réalogramme. */
.pogcmp-zoom {
  position: static;
  background: var(--gray-100);
  box-shadow: none;
}
.pogcmp-zoom .shelf-zoom-btn { color: var(--gray-700); }
.pogcmp-zoom .shelf-zoom-btn:hover:not(:disabled) { background: rgba(17, 24, 39, .08); }
.pogcmp-viewport {
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 340px);
  border-radius: 7px;
  background: var(--gray-100);
}
.pogcmp-overlay { pointer-events: auto; }
.pogcmp-slot rect {
  fill: rgba(255,255,255,.05);
  stroke-width: 2px;
  cursor: pointer;
}
.pogcmp-slot.is-selected rect { stroke-width: 4px; filter: drop-shadow(0 0 3px #fff); }
.pogcmp-ok rect, .pogcmp-dot.pogcmp-ok { stroke: #16a34a; background: #16a34a; }
.pogcmp-wrong_position rect, .pogcmp-dot.pogcmp-wrong_position {
  stroke: #f59e0b; background: #f59e0b;
}
.pogcmp-wrong_shelf rect, .pogcmp-dot.pogcmp-wrong_shelf {
  stroke: #ea580c; background: #ea580c;
}
.pogcmp-missing rect, .pogcmp-dot.pogcmp-missing { stroke: #dc2626; background: #dc2626; }
.pogcmp-extra rect, .pogcmp-dot.pogcmp-extra { stroke: #7c3aed; background: #7c3aed; }
.pogcmp-cell.pogcmp-ok { border-color: #16a34a; }
.pogcmp-cell.pogcmp-wrong_position { border-color: #f59e0b; }
.pogcmp-cell.pogcmp-wrong_shelf { border-color: #ea580c; }
.pogcmp-cell.pogcmp-missing { border-color: #dc2626; background: #fff7f7; }
.pogcmp-cell.is-selected { box-shadow: 0 0 0 3px rgba(17,24,39,.24); }
.pogcmp-legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 10px; font-size: 11px; color: var(--gray-600);
}
.pogcmp-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.pogcmp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pogcmp-deviation-list {
  display: flex; flex-direction: column; flex: 1; gap: 6px;
  min-height: 0; max-height: calc(100vh - 350px); overflow: auto;
}
.pogcmp-deviation {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 8px;
  width: 100%; padding: 9px 10px; border: 1px solid var(--border);
  border-left-width: 4px; border-radius: 7px; background: #fff;
  color: inherit; text-align: left; cursor: pointer;
}
.pogcmp-deviation small { grid-column: 1 / -1; color: var(--gray-500); }
.pogcmp-deviation.pogcmp-wrong_position { border-left-color: #f59e0b; }
.pogcmp-deviation.pogcmp-wrong_shelf { border-left-color: #ea580c; }
.pogcmp-deviation.pogcmp-missing { border-left-color: #dc2626; }
.pogcmp-deviation.pogcmp-extra { border-left-color: #7c3aed; }
.pogcmp-deviation.is-selected { background: #f3f4f6; box-shadow: 0 0 0 2px #9ca3af; }
.pogcmp-status { font-size: 10px; font-weight: 800; text-transform: uppercase; }
@media (max-width: 1280px) {
  .pogcmp-layout { grid-template-columns: minmax(250px, .8fr) minmax(420px, 1.2fr); }
  .pogcmp-deviations { grid-column: 1 / -1; }
  .pogcmp-deviation-list { max-height: 320px; }
}
@media (max-width: 850px) {
  .pogcmp-kpis { grid-template-columns: repeat(3, 1fr); }
  .pogcmp-map-meta { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
  .pogcmp-layout { grid-template-columns: 1fr; }
  .pogcmp-deviations { grid-column: auto; }
  .pogcmp-shelves, .pogcmp-deviation-list { max-height: none; }
}
.shelf-overlay .bbox:hover,
.shelf-overlay .bbox-hovered {
  stroke: rgba(255, 255, 255, 0.98);
  stroke-width: 1.75px;
  stroke-dasharray: 6px 4px;
}
.shelf-overlay .bbox-selected {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 4px 3px;
}
.shelf-overlay .bbox-tab-active {
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.25px;
  stroke-dasharray: 5px 5px;
}
/* Pilotage des états via attributs sur le <svg> (pas de rerender SVG). */
.shelf-overlay[data-hover-idx] .bbox[data-slot-idx]:not([data-hover-idx-match]) {
  /* placeholder — la règle utile est ci-dessous via sélecteur d'attribut dynamique */
}
.shelf-overlay .bbox[data-tab][data-slot-idx] {
  /* base déjà définie plus haut (.bbox) */
}
/* Hover via attribut data-hover-idx du parent : on cible la bbox dont data-slot-idx == data-hover-idx du parent.
   Comme CSS ne peut pas comparer deux attributs, on utilise un trick : on encode l'idx hover dans une classe sur le parent
   via JS minimal (cf. _applyShelfHoverIdx). À défaut on garde :hover natif. */
.shelf-overlay[data-hover-idx="-1"] .bbox-hovered { /* no-op */ }
/* Tablette active : on stylise toutes les bbox de la même tablette. */
.shelf-overlay[data-tab-active="1"] .bbox[data-tab="1"],
.shelf-overlay[data-tab-active="2"] .bbox[data-tab="2"],
.shelf-overlay[data-tab-active="3"] .bbox[data-tab="3"],
.shelf-overlay[data-tab-active="4"] .bbox[data-tab="4"],
.shelf-overlay[data-tab-active="5"] .bbox[data-tab="5"],
.shelf-overlay[data-tab-active="6"] .bbox[data-tab="6"],
.shelf-overlay[data-tab-active="7"] .bbox[data-tab="7"],
.shelf-overlay[data-tab-active="8"] .bbox[data-tab="8"],
.shelf-overlay[data-tab-active="9"] .bbox[data-tab="9"],
.shelf-overlay[data-tab-active="10"] .bbox[data-tab="10"],
.shelf-overlay[data-tab-active="11"] .bbox[data-tab="11"],
.shelf-overlay[data-tab-active="12"] .bbox[data-tab="12"] {
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.25px;
  stroke-dasharray: 5px 5px;
}
/* Pastille : ellipse rx≠ry (repère étiré) = cercle pixel-perfect ; masque = chiffres découpés. */
.shelf-overlay .bbox-badge-fill {
  fill: #fff;
  pointer-events: none;
}
.shelf-overlay .bbox-badge-ring {
  stroke: rgba(0, 0, 0, 0.14);
  stroke-width: 1px;
  pointer-events: none;
}
.shelf-overlay .bbox-badge-knockout {
  font-family: var(--font-sans);
  font-weight: 700;
  pointer-events: none;
}
/* Rupture longue potentielle : slot signalé par le pipeline OOS. Trait plein
   ambre (même palette que les ruptures partielles de la vue ruptures) + léger
   voile, pour ressortir sur les pointillés blancs des slots normaux. */
.shelf-overlay .bbox.bbox-rupture-pot {
  stroke: rgba(245, 158, 11, 0.95);
  stroke-width: 2px;
  stroke-dasharray: none;
  fill: rgba(245, 158, 11, 0.16);
}
.shelf-overlay .bbox.bbox-rupture-pot:hover,
.shelf-overlay .bbox.bbox-rupture-pot.bbox-hovered,
.shelf-overlay .bbox.bbox-rupture-pot.bbox-selected {
  stroke: rgb(217, 119, 6);
  stroke-width: 2.5px;
  fill: rgba(245, 158, 11, 0.26);
}
.shelf-overlay .bbox-badge-ring.is-rupture-pot {
  stroke: rgba(217, 119, 6, 0.9);
  stroke-width: 2px;
}
/* États sentinelles enrichis par EAN_REFERENCE. Ces règles suivent la règle
   ambre afin que bleu/violet priment si un ancien flag potentiel coexiste. */
.shelf-overlay .bbox.bbox-price-error {
  stroke: #2563eb;
  stroke-width: 2px;
  stroke-dasharray: none;
  fill: rgba(37, 99, 235, 0.16);
}
.shelf-overlay .bbox.bbox-price-error:hover,
.shelf-overlay .bbox.bbox-price-error.bbox-hovered,
.shelf-overlay .bbox.bbox-price-error.bbox-selected {
  stroke: #1d4ed8;
  stroke-width: 2.5px;
  fill: rgba(37, 99, 235, 0.26);
}
.shelf-overlay .bbox-badge-ring.is-price-error {
  stroke: #1d4ed8;
  stroke-width: 2px;
}
.shelf-overlay .bbox.bbox-previous-product {
  stroke: #7c3aed;
  stroke-width: 2px;
  stroke-dasharray: none;
  fill: rgba(124, 58, 237, 0.16);
}
.shelf-overlay .bbox.bbox-previous-product:hover,
.shelf-overlay .bbox.bbox-previous-product.bbox-hovered,
.shelf-overlay .bbox.bbox-previous-product.bbox-selected {
  stroke: #6d28d9;
  stroke-width: 2.5px;
  fill: rgba(124, 58, 237, 0.26);
}
.shelf-overlay .bbox-badge-ring.is-previous-product {
  stroke: #6d28d9;
  stroke-width: 2px;
}

/* Survol slot : panneau description ancré au slot survolé. */
.shelf-slot-hover-pop {
  overflow: visible;
  pointer-events: none;
}
.shelf-slot-hover-panel {
  width: 100%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.97);
  padding: 6px 8px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.shelf-slot-hover-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gray-900);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; /* Increased to allow more text lines */
  overflow: hidden;
  word-break: break-word;
}
.shelf-slot-hover-ean {
  margin-top: 3px;
  font-size: 10px;
  font-style: italic;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelf-side {
  display: flex; flex-direction: column;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
}

.shelf-tabs-tree {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 78vh; overflow-y: auto;
  padding-right: 2px;
}
.shelf-tab-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.shelf-tab-card.current {
  border-color: var(--niq-500);
  box-shadow: 0 0 0 1px var(--niq-500);
}
.shelf-tab-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.shelf-tab-header:hover { background: var(--niq-50); }
.shelf-tab-card.current .shelf-tab-header { background: var(--niq-50); }
.tab-chev {
  width: 14px; text-align: center;
  color: var(--gray-500); font-size: 12px;
}
.tab-meta { font-size: 11.5px; }
.tab-spacer { flex: 1; }
.badge-current {
  background: var(--niq-500); color: white;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.btn-xs {
  padding: 3px 8px; font-size: 11px; line-height: 1;
  border: 1px solid var(--border); background: white;
  color: var(--niq-700); border-radius: 6px; cursor: pointer;
}
.btn-xs:hover { background: var(--niq-50); border-color: var(--niq-500); }
.shelf-tab-content {
  border-top: 1px solid var(--border);
  background: var(--gray-50);
  max-height: 40vh; overflow-y: auto;
}

/* legacy rules conservées pour compat (boutons simples) */
.shelf-tab-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  text-align: left;
  cursor: pointer;
  gap: 2px;
  font-size: 13px;
}
.shelf-tab-btn:hover { background: var(--bg-hover); }
.shelf-tab-btn.active {
  background: var(--niq-50);
  border-color: var(--niq-500);
  color: var(--niq-700);
}
.shelf-tab-btn .muted { font-size: 11px; }

.shelf-slot-list {
  max-height: 60vh;
  overflow-y: auto;
}
.shelf-slot-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.shelf-slot-item:last-child { border-bottom: none; }
.shelf-slot-item:hover { background: var(--bg-hover); }
.shelf-slot-item.active {
  background: rgba(234, 88, 12, 0.08);
  box-shadow: inset 3px 0 0 rgb(234, 88, 12);
}
.shelf-slot-num {
  flex: 0 0 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--gray-100);
  font-weight: 700; font-size: 12px;
  color: var(--gray-700);
}
.shelf-slot-item.active .shelf-slot-num {
  background: rgb(234, 88, 12); color: white;
}
.shelf-slot-body { flex: 1; min-width: 0; }
.shelf-slot-title {
  font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shelf-slot-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--gray-600);
  margin-top: 2px;
}
.badge-promo {
  background: var(--danger); color: white;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
/* Badge « potentiel » : slot marqué rupture longue potentielle (même ambre que
   la bbox correspondante dans l'overlay). */
.badge-rupture-pot {
  background: rgba(245, 158, 11, 0.2);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.55);
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chip-rupture-pot {
  background: rgba(245, 158, 11, 0.2);
  color: #92400e;
}
.badge-slot-special {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-slot-special.is-price-error {
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.45);
}
.badge-slot-special.is-previous-product {
  background: rgba(124, 58, 237, 0.14);
  color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, 0.45);
}
.shelf-slot-reference-missing {
  margin-top: 3px;
  color: var(--gray-500);
  font-size: 11px;
  font-style: italic;
}
/* Prix OCR (PRIXLU) vs master file (TBL_ARTICLE.PRIX) — même code couleur que
   l'onglet Admin › Compliance : vert = identiques, orange = divergents. */
.shelf-slot-price {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted, #6b7280);
  line-height: 1.2;
}
.shelf-slot-price.is-price-ok { color: #0aa689; }
.shelf-slot-price.is-price-wrong { color: #d97706; }
.shelf-slot-price.is-price-missing { color: #94a3b8; font-weight: 500; }
/* Prix partiellement lu (masque troué) : dégradé et jamais compté comme écart,
   la valeur affichée n'étant qu'une des hypothèses OCR. */
.shelf-slot-price.is-price-partial {
  color: #94a3b8;
  font-weight: 500;
  font-style: italic;
}
.shelf-price-prefix {
  font-weight: 500;
  color: inherit;
  opacity: 0.85;
  margin-right: 2px;
}
/* Marqueur de prix OCR partiellement lu (PRIX_MASK contient un « X »). */
.shelf-price-approx {
  margin-right: 1px;
  opacity: 0.7;
  cursor: help;
}
.shelf-price-sep {
  margin: 0 2px;
  opacity: 0.55;
  font-weight: 500;
}

/* ─────────────────────────────── EAN thumbs ─────────────────────────────── */

.shelf-slot-thumb {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  object-fit: contain;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.sku-thumb-sm {
  width: 40px; height: 40px;
  object-fit: contain;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  display: block;
}
.sku-thumb-lg {
  width: 120px; height: 120px;
  object-fit: contain;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--shadow-sm);
  flex: 0 0 120px;
}

/* ── Indicateur admin de source de vignette ────────────────────────────────
   Trait sous la vignette : BLEU = Azure Blob Storage (source par défaut),
   JAUNE = backup media.belive.ai. Visible uniquement pour les rôles admin
   (classe posée par thumbSrcClass()). Trait interne (inset) → pas de décalage
   de mise en page et respecte le border-radius de la vignette. */
img.thumb-src-blob   { box-shadow: inset 0 -4px 0 0 #2D6DF6; }
img.thumb-src-belive { box-shadow: inset 0 -4px 0 0 #FEC834; }
/* La grande vignette SKU a déjà une ombre portée : composer avec le trait. */
.sku-thumb-lg.thumb-src-blob   { box-shadow: var(--shadow-sm), inset 0 -4px 0 0 #2D6DF6; }
.sku-thumb-lg.thumb-src-belive { box-shadow: var(--shadow-sm), inset 0 -4px 0 0 #FEC834; }

/* Bouton admin « Belive → Azure » (visible si trait jaune). */
.thumb-with-src {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex: 0 0 auto;
}
.thumb-with-src--sm { gap: 4px; }
.thumb-promote-btn {
  font-size: 11px;
  padding: 2px 8px;
  line-height: 1.3;
  background: #FEC834;
  border: 1px solid #e0b020;
  color: #1a1a1a;
  white-space: nowrap;
}
.thumb-promote-btn:hover:not(:disabled) {
  filter: brightness(0.95);
}
.thumb-promote-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ─────────────────────────────── Rupture viewer ─────────────────────────────── */
.rupture-viewer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rupture-head {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.rupture-head-title {
  flex: 1 1 220px;
  min-width: 0;
}
.rupture-head-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.shelf-histo-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.shelf-histo-label {
  font-size: 12px;
  white-space: nowrap;
}
/* Barre d'outils du réalogramme : elle porte beaucoup de contrôles, donc on
   autorise le retour à la ligne et on interdit aux éléments de se comprimer.
   Sans ça, flex rétrécit les chips jusqu'à les rendre illisibles. */
.shelf-toolbar {
  /* La barre occupe toujours sa propre ligne, sur toute la largeur : la
     hauteur de l'en-tête ne dépend plus de la largeur des contrôles, donc
     l'affichage ne saute plus quand les données remplacent le skeleton. */
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 8px;
}
/* Deux colonnes : le contexte du rayon à gauche, les actions à droite. */
.shelf-toolbar-info,
.shelf-toolbar-actions {
  flex-wrap: wrap;
  row-gap: 8px;
}
.shelf-toolbar-info > *,
.shelf-toolbar-actions > * { flex: 0 0 auto; }
/* Les actions restent à droite même quand les deux groupes tombent chacun sur
   leur propre ligne : space-between n'aligne plus rien avec un seul groupe. */
.shelf-toolbar-actions { margin-left: auto; }

/* Bouton d'action réduit à son icône. Le libellé traduit vit dans
   title + aria-label : rien n'est perdu pour le lecteur d'écran. */
.btn-icon {
  justify-content: center;
  padding: 0;
  width: 30px;
  height: 30px;
}
.btn-icon .icon { font-size: 15px; }
.btn-icon[aria-pressed="true"] {
  background: var(--niq-50);
  border-color: var(--niq-500);
  color: var(--niq-700);
}

/* Relevé d'accuracy prix (« 45/50 ») dans la barre d'outils du réalogramme. */
.shelf-accuracy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative; /* ancre le tooltip d'erreur */
}
.shelf-accuracy-label {
  font-size: 12px;
  white-space: nowrap;
}
/* Input + bouton soudés : un seul contrôle visuel, bordure partagée. */
.shelf-accuracy-group {
  display: inline-flex;
  align-items: stretch;
}
.shelf-accuracy-input {
  width: 76px;
  min-width: 0;
  padding: 5px 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.shelf-accuracy-input:focus { z-index: 1; }
.shelf-accuracy-input.is-invalid {
  border-color: var(--danger, #e5484d);
}
.shelf-accuracy-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18);
}
.shelf-accuracy-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
  height: auto;
}
/* Message d'erreur hors du flux : il ne doit jamais élargir la barre d'outils. */
.shelf-accuracy-error {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 20;
  width: max-content;
  max-width: 260px;
  padding: 5px 9px;
  border-radius: var(--radius-md);
  background: var(--danger, #e5484d);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.chip-accuracy {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.35);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip-histo {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.chip-histo-warn {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.45);
}
.dr-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 4px 0;
  border-top: 1px solid var(--gray-200, #e2e8f0);
  margin-top: 6px;
}

.rupture-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, #fff);
  font-size: 13px;
}
.rupture-period-label {
  font-weight: 500;
  white-space: nowrap;
}

/* Date-range picker (store detail + ruptures) */
.dr {
  position: relative;
  display: inline-block;
}
.dr-trigger {
  min-width: 12.5rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.dr-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 280px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
}
.dr-panel--end {
  left: auto;
  right: 0;
}
.dr-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.dr-month {
  font-weight: 600;
  font-size: 13px;
  text-transform: capitalize;
  color: var(--gray-800);
}
.dr-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--gray-50, #f8fafc);
  color: var(--gray-700);
  font-size: 16px;
  line-height: 1;
}
.dr-nav-btn:hover { background: var(--gray-100, #f1f5f9); }
.dr-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
}
.dr-weeks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dr-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dr-day {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--gray-800);
  font-size: 13px;
  line-height: 32px;
  text-align: center;
}
.dr-day:hover:not(:disabled):not(.is-empty) { background: var(--gray-100, #f1f5f9); }
.dr-day.is-empty {
  color: transparent;
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.dr-day.is-disabled {
  color: var(--gray-300);
  cursor: not-allowed;
}
.dr-day.is-inrange { background: rgba(254, 200, 52, 0.22); border-radius: 0; }
.dr-day.is-start,
.dr-day.is-end,
.dr-day.is-single {
  background: var(--niq-500);
  color: #111;
  font-weight: 600;
}
.dr-day.is-start { border-radius: 6px 0 0 6px; }
.dr-day.is-end { border-radius: 0 6px 6px 0; }
.dr-day.is-single { border-radius: 6px; }
.dr-day.is-today:not(.is-start):not(.is-end):not(.is-single):not(.is-inrange) {
  box-shadow: inset 0 0 0 1px var(--niq-500);
}
.dr-hint {
  margin: 8px 0 0;
  font-size: 12px;
}
.rupture-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .rupture-layout { grid-template-columns: 1fr; }
}
/* Colonne gauche : image + navigateur temporel collés, pour naviguer dans le
   temps sans jamais avoir à scroller par-dessus la photo. */
.rupture-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rupture-canvas {
  position: relative;
  background: var(--gray-900);
  border-radius: 10px;
  overflow: hidden;
  padding: 8px;
}
/* Zone de défilement : centre la photo tant qu'elle rentre, puis laisse
   scroller (pan) quand elle est zoomée au-delà du cadre. `safe center` évite
   le rognage du haut/gauche impossible à atteindre quand le contenu déborde. */
.rupture-viewport {
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  min-height: 224px;
  max-height: calc(56vh - 16px);
}
/* Glisser pour déplacer la photo une fois zoomée. */
.rupture-viewport.can-pan { cursor: grab; }
.rupture-viewport.is-panning { cursor: grabbing; }
.rupture-viewport.is-panning * { pointer-events: none; }
.rupture-viewport img {
  -webkit-user-drag: none;
  user-select: none;
}
/* Barre de zoom flottante (hors zone de scroll → reste fixe pendant le pan). */
.rupture-zoom-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.62);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.rupture-zoom-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #f9fafb;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease;
}
.rupture-zoom-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.rupture-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.rupture-zoom-level {
  min-width: 46px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* ── Navigateur temporel unifié (jours + heures) ── */
.rupture-timenav {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  bottom: 8px;
  z-index: 5;
}
.rupture-timenav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rupture-timenav-label {
  flex: 0 0 auto;
  min-width: 42px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}
.rupture-nav-arrow {
  flex: 0 0 auto;
  padding: 4px 10px;
}
.rupture-strip {
  position: relative;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2px;
  scroll-behavior: smooth;
}
.rupture-strip > * { flex: 0 0 auto; }
.rupture-frame-range {
  flex: 1 1 auto;
  min-width: 0;
}
.rupture-timenav-clock {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  margin-left: 2px;
}
.rupture-timenav-hours {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.rupture-timenav-empty { font-size: 12px; }
.rupture-days {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rupture-days-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rupture-days-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.rupture-days-controls input[type="range"] {
  width: 100%;
}
.rupture-days-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.rupture-day-chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.rupture-day-chip.active {
  border-color: #fb923c;
  background: #fff7ed;
  color: #9a3412;
}
.rupture-canvas-inner {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  max-height: 100%;
}
.rupture-frame-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(320px, 100%);
  min-height: min(220px, 62vh);
}
.rupture-image-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.6);
  z-index: 10;
  border-radius: 4px;
}
.rupture-image-loader-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  will-change: transform;
}
.rupture-canvas-inner img {
  width: auto;
  height: auto;
  max-width: calc(100% * var(--rupture-zoom, 1));
  max-height: calc(54vh * var(--rupture-zoom, 1));
  display: block;
  margin: 0 auto;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.rupture-img-loading {
  opacity: 0.4;
  filter: blur(1px);
}
.rupture-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.15s ease-in-out;
}
.rupture-overlay-hidden {
  opacity: 0;
}
.rupture-empty {
  color: #e5e7eb;
  font-size: 14px;
  text-align: center;
  padding: 24px 12px;
}
.rupture-box {
  fill: rgba(255, 255, 255, 0.05);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
}
.rupture-shelf-box {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1px;
  stroke-dasharray: 4px 3px;
  vector-effect: non-scaling-stroke;
}
/* Inventory low : slot planogramme reporté sur la photo (carré jaune). */
.rupture-inventory-box {
  fill: rgba(250, 204, 21, 0.18);
  stroke: rgba(250, 204, 21, 0.95);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.rupture-box.status-open {
  stroke: rgba(220, 38, 38, 0.95);
  fill: rgba(220, 38, 38, 0.14);
}
.rupture-box.status-closed {
  stroke: rgba(22, 163, 74, 0.95);
  fill: rgba(22, 163, 74, 0.14);
}
.rupture-box.changed {
  stroke-width: 2.3px;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.65));
}
.rupture-box.hovered {
  stroke: #fff !important;
  stroke-width: 3px !important;
  fill: rgba(255, 255, 255, 0.7) !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
}
.rupture-box.carryover {
  /* Carry-over : rupture toujours ouverte mais sans event sur la photo
     courante. Trait pointillé pour signaler le caractère hérité. */
  stroke-dasharray: 5px 4px;
  fill: rgba(220, 38, 38, 0.06);
}
.rupture-box.carryover.status-open {
  stroke: rgba(220, 38, 38, 0.75);
}
/* Rupture partielle (étagère partiellement vide) : ambre, pour la distinguer
   de la rupture totale (rouge). Ne s'applique qu'aux ruptures ouvertes ; une
   rupture fermée reste verte quel que soit son type. */
.rupture-box.status-open.rupture-partial {
  stroke: rgba(245, 158, 11, 0.95);
  fill: rgba(245, 158, 11, 0.16);
}
.rupture-box.carryover.status-open.rupture-partial {
  stroke: rgba(245, 158, 11, 0.8);
  fill: rgba(245, 158, 11, 0.07);
}
/* Légende de l'overlay ruptures (sous l'image) : rappel des couleurs des cadres
   dessinés sur la photo (rupture totale/partielle, changement de statut, etc.).
   Repliable via un bouton pour ne pas encombrer la vue par défaut. */
.rupture-legend-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.rupture-legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 10px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600);
  cursor: pointer;
}
.rupture-legend-toggle:hover {
  background: var(--gray-50, #f9fafb);
}
.rupture-legend-caret {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 10px;
  line-height: 1;
}
.rupture-legend-caret.open {
  transform: rotate(90deg);
}
.rupture-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 10px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--gray-600);
}
.rupture-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.rupture-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.rupture-legend-swatch.sw-total { border: 2px solid rgba(220, 38, 38, 0.95); background: rgba(220, 38, 38, 0.16); }
.rupture-legend-swatch.sw-partial { border: 2px solid rgba(245, 158, 11, 0.95); background: rgba(245, 158, 11, 0.18); }
.rupture-legend-swatch.sw-closed { border: 2px solid rgba(22, 163, 74, 0.95); background: rgba(22, 163, 74, 0.16); }
.rupture-legend-swatch.sw-carryover { border: 2px dashed rgba(220, 38, 38, 0.8); background: rgba(220, 38, 38, 0.08); }
.rupture-legend-swatch.sw-realogram { border: 1.5px dashed rgba(100, 116, 139, 0.9); background: rgba(148, 163, 184, 0.12); }
.rupture-legend-swatch.sw-low { border: 2px solid rgba(202, 138, 4, 0.9); background: rgba(250, 204, 21, 0.28); }
.rupture-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-open { background: rgba(220, 38, 38, 0.12); color: #991b1b; }
.chip-closed { background: rgba(22, 163, 74, 0.13); color: #166534; }
.chip-change { background: rgba(245, 158, 11, 0.2); color: #92400e; }
.chip-total { background: rgba(220, 38, 38, 0.12); color: #991b1b; }
.chip-partial { background: rgba(245, 158, 11, 0.2); color: #92400e; }
.chip-carryover {
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
  border: 1px dashed rgba(220, 38, 38, 0.55);
}
.chip-low {
  background: rgba(250, 204, 21, 0.22);
  color: #854d0e;
  border: 1px solid rgba(202, 138, 4, 0.55);
}
/* Section « niveau bas » du snapshot */
.rupture-low-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rupture-low-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600);
}
.rupture-low-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: rgba(250, 204, 21, 0.85);
  border: 1.5px solid rgba(202, 138, 4, 0.9);
  flex-shrink: 0;
}
.rupture-item.low strong { color: #854d0e; }
.rupture-list {
  margin-top: 12px;
  max-height: 50vh;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.rupture-item {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.rupture-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rupture-item-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  display: block;
}
.rupture-item-body {
  flex: 1 1 auto;
  min-width: 0;
}
.rupture-item-ean {
  display: block;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  line-height: 1.25;
  margin-bottom: 4px;
}
.rupture-item-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
.rupture-item.open strong { color: #b91c1c; }
.rupture-item.closed strong { color: #166534; }
.rupture-item.changed { background: rgba(254, 243, 199, 0.35); }
.rupture-item.hovered {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.65), 0 2px 8px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 1;
}
.rupture-item.carryover {
  /* Reportée depuis une frame antérieure : visuellement plus discret. */
  opacity: 0.85;
  background: rgba(220, 38, 38, 0.04);
}
.rupture-item.carryover strong {
  border-bottom: 1px dashed rgba(220, 38, 38, 0.55);
}
.rupture-item-since {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Bouton « aller au moment de la rupture » (redirige jour + frame du since). */
.rupture-since-jump {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rupture-since-jump:hover {
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(220, 38, 38, 0.6);
}
.rupture-timeline {
  padding: 12px 14px;
}
.rupture-timeline-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.rupture-timeline-controls input[type="range"] {
  width: 100%;
}
.rupture-ticks {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.rupture-tick {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 82px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 12px;
}
.rupture-tick small {
  font-size: 10px;
  color: var(--gray-500);
}
.rupture-tick.active {
  border-color: #fb923c;
  background: #fff7ed;
}

/* ── Diagnostic REASON (admin) : cadres cliquables + panneau détaillé ── */
.rupture-overlay-admin .rupture-box { cursor: pointer; }
.rupture-item.has-reason { cursor: pointer; }
.rupture-item.selected {
  border-color: var(--niq-400, #93c5fd);
  box-shadow: 0 0 0 1px var(--niq-300, #bfdbfe) inset;
}
.rupture-reason-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gray-100, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--gray-600, #4b5563);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.rupture-reason-caret { font-size: 9px; color: var(--gray-500, #6b7280); }
.rupture-reason {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--gray-50, #f9fafb);
  cursor: default;
  text-align: center;
}
.rupture-reason-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--gray-700, #374151);
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
  word-break: break-word;
  text-align: center;
}
.rupture-reason-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  width: 100%;
}
.rupture-reason-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11.5px;
  padding: 4px 2px;
  border-bottom: 1px dotted var(--border, #e5e7eb);
  min-width: 0;
  text-align: center;
}
.rupture-reason-k {
  color: var(--gray-500, #6b7280);
  word-break: break-word;
  line-height: 1.25;
}
.rupture-reason-v {
  color: var(--gray-800, #1f2937);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.rupture-reason-raw {
  margin-top: 8px;
  font-size: 11px;
  text-align: left;
}
.rupture-reason-raw summary {
  cursor: pointer;
  color: var(--gray-500, #6b7280);
  user-select: none;
  text-align: center;
}
.rupture-reason-raw pre {
  margin: 6px 0 0;
  padding: 8px;
  max-height: 220px;
  overflow: auto;
  border-radius: 6px;
  background: var(--gray-900, #111827);
  color: #e5e7eb;
  font-size: 10.5px;
  line-height: 1.45;
  white-space: pre;
}

@media (max-width: 900px) {
  .rupture-viewport {
    max-height: calc(44vh - 16px);
  }
  .rupture-canvas-inner img {
    max-height: calc(42vh * var(--rupture-zoom, 1));
  }
  /* Le navigateur temporel reste collé en bas de l'écran sur mobile :
     l'image défile au-dessus, les barres jour/heure restent accessibles. */
  .rupture-timenav {
    bottom: 0;
    box-shadow: 0 -6px 18px rgba(17, 24, 39, 0.12);
  }
}

/* ─────────────────────────────── PROJECT DOCS ────────────────────────────── */
.docs { max-width: 1080px; }

.docs-brief {
  padding: 26px 28px;
  background:
    radial-gradient(120% 200% at 0% 0%, var(--niq-50) 0%, transparent 55%),
    radial-gradient(120% 200% at 100% 100%, #fff7e3 0%, transparent 55%),
    #ffffff;
  border-left: 4px solid var(--niq-500);
}
.docs-brief-tag { margin-bottom: 8px; }
.badge.badge-niq {
  background: var(--niq-500);
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 4px 10px;
}
.docs-brief-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.2;
  color: var(--niq-700, #1d4dbf);
}
.docs-brief-lede {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gray-700);
}
.docs-h3 {
  margin: 18px 0 6px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-600);
}
.docs-quote {
  margin: 12px 0 4px;
  padding: 12px 16px;
  border-left: 3px solid #fec834;
  background: #fffaee;
  border-radius: 0 8px 8px 0;
  color: var(--gray-700);
  font-style: italic;
}
.docs-quote p { margin: 0 0 4px; }
.docs-quote cite {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--gray-600);
}
.docs-brief-sources {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--gray-600);
}
.docs-brief-sources a {
  color: var(--niq-600, var(--niq-500));
  text-decoration: none;
}
.docs-brief-sources a:hover { text-decoration: underline; }

.docs-pipeline { padding: 22px 20px; }
.pipe-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.pipe-step {
  flex: 1 1 130px;
  min-width: 130px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pipe-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.pipe-step-source { background: linear-gradient(180deg, #f3f7ff 0%, #e8f0ff 100%); border-color: var(--niq-200); }
.pipe-step-storage { background: linear-gradient(180deg, #eef9ff 0%, #d8efff 100%); border-color: #b6dcff; }
.pipe-step-api { background: linear-gradient(180deg, #f0e9ff 0%, #e1d2ff 100%); border-color: #c4abff; }
.pipe-step-ui { background: linear-gradient(180deg, #fff8e0 0%, #ffeeb0 100%); border-color: var(--vusion-200); }

.pipe-icon { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.pipe-title { font-weight: 600; font-size: 13px; color: var(--gray-900); }
.pipe-meta { font-size: 11px; color: var(--gray-600); margin-top: 4px; }

.pipe-arrow {
  display: flex;
  align-items: center;
  font-size: 22px;
  color: var(--gray-400);
  font-weight: 600;
  flex: 0 0 auto;
}
@media (max-width: 880px) {
  .pipe-arrow { transform: rotate(90deg); flex-basis: 100%; justify-content: center; }
  .pipe-step { flex-basis: 100%; }
}

.docs-list {
  margin: 8px 0 4px;
  padding-left: 22px;
  line-height: 1.7;
}
.docs-list li { margin-bottom: 4px; }

.docs-callout {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--niq-50);
  border-left: 3px solid var(--niq-500);
  border-radius: 6px;
  font-size: 13px;
}

.docs-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.docs-grid-2 > div {
  padding: 12px 14px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.docs-grid-2 h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600);
}
@media (max-width: 720px) {
  .docs-grid-2 { grid-template-columns: 1fr; }
}

.docs-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.docs-fields .field {
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--gray-700);
}

.docs-glossary {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 18px;
  margin: 6px 0 0;
}
.docs-glossary dt {
  font-weight: 600;
  color: var(--niq-700);
}
.docs-glossary dd {
  margin: 0;
  color: var(--gray-700);
}
@media (max-width: 600px) {
  .docs-glossary { grid-template-columns: 1fr; }
  .docs-glossary dt { margin-top: 6px; }
}

/* ------------------------------------------------------------------ Login */

.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(254, 200, 52, 0.42) 0, transparent 34%),
    linear-gradient(135deg, #1f2933 0%, #111827 52%, #3a2a00 100%);
}
.login-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.32);
  padding: 48px 40px 36px;
  width: 380px;
  max-width: 92vw;
  text-align: center;
}
.login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}
.logo-niq-login {
  display: none;
}
.logo-vusion-login {
  width: 44px;
  height: 44px;
  display: block;
}
.logo-vusion-login path { fill: var(--vusion-500); }
.login-logo-text {
  font-size: 22px;
  font-weight: 750;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}
.login-title {
  margin: 0 0 2px;
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}
.login-subtitle {
  margin: 0 0 28px;
  font-size: 13px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-input {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  color: var(--gray-800);
  background: var(--bg-page);
  outline: none;
  transition: border-color 0.15s;
}
.login-input:focus {
  border-color: var(--vusion-500);
  box-shadow: 0 0 0 3px rgba(254, 200, 52, 0.22);
}
.login-input::placeholder { color: var(--gray-400); }
.login-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  text-align: left;
}
.login-btn {
  padding: 12px 0;
  border: none;
  border-radius: 8px;
  background: var(--vusion-500);
  color: #1f2933;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, transform 0.15s;
}
.login-btn:hover {
  background: var(--vusion-600);
  transform: translateY(-1px);
}
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-footer {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--gray-400);
}

/* ---------------------------------------------------------------- User menu */

.user-switch { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color 0.15s;
}
.user-btn:hover { border-color: var(--niq-400); }
.user-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--niq-500);
  color: white;
  font-weight: 700;
  font-size: 13px;
}
.user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 100;
  overflow: hidden;
}
.user-menu-info {
  padding: 14px 16px 10px;
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--border);
}
.user-menu-info strong { font-size: 14px; color: var(--gray-800); }
.user-menu-info .muted { font-size: 12px; }
.user-pays {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: var(--niq-50, #eef3fe);
  color: var(--niq-600);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.user-menu-logout {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--danger);
  cursor: pointer;
}
.user-menu-logout:hover {
  background: var(--bg-page);
}

/* ─── Toggle source ruptures (réservé à Tim) ─── */
.user-menu-devrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.user-menu-devrow-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.user-menu-devrow-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
}
.user-menu-devrow-hint {
  font-size: 10px;
  color: var(--gray-500, #94a3b8);
}
.rupture-source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.rupture-source-state {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500, #94a3b8);
  min-width: 30px;
  text-align: right;
}
.rupture-source-toggle.is-dev .rupture-source-state {
  color: var(--niq-600, #0aa689);
}
.rupture-source-track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--gray-300, #cbd5e1);
  transition: background 0.15s;
}
.rupture-source-toggle.is-dev .rupture-source-track {
  background: var(--niq-500, #0aa689);
}
.rupture-source-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.15s;
}
.rupture-source-toggle.is-dev .rupture-source-knob {
  left: 18px;
}

/* ----------------------------------------- Références cibles (liste d'alerte) */
.tab .count.count-alert {
  background: #fde2e2;
  color: var(--danger);
}
.zone-badge {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  white-space: nowrap;
  background: var(--gray-100); color: var(--gray-700);
}
.zone-badge.zone-embase { background: #fde2e2; color: #b91c1c; }   /* bas : à surveiller */
.zone-badge.zone-haut   { background: #fff1c2; color: #92600c; }   /* haut : à surveiller */
.zone-badge.zone-yeux   { background: #d7f5e6; color: #047857; }   /* hauteur des yeux : idéal */
.zone-badge.zone-milieu { background: var(--niq-50); color: var(--niq-700); }
.zone-badge.zone-unknown { background: var(--gray-100); color: var(--gray-500); }

.badge-alert {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: #fde2e2; color: var(--danger);
}
.badge-ok {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: #d7f5e6; color: #047857;
}
.tbl tr.row-alert td { background: #fff7f7; }
.tbl tr.row-alert:hover td { background: #ffecec; }
/* Cellule-lien (ex. EAN → fiche SKU) : ne déclenche pas l'action de la ligne. */
.tbl a.link-cell { color: var(--niq-600); font-weight: 600; }
.tbl a.link-cell:hover { color: var(--niq-700); text-decoration: underline; }

/* Cellule EAN : texte sélectionnable + bouton dédié vers la fiche SKU. */
.ean-cell { white-space: nowrap; cursor: default; }
.ean-cell .ean-text { user-select: text; cursor: text; }
.ean-sku-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px; padding: 2px 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  background: white; color: var(--niq-600); cursor: pointer;
  vertical-align: middle;
}
.ean-sku-btn:hover { background: var(--niq-50); border-color: var(--niq-500); color: var(--niq-700); }
.ean-sku-btn .icon { width: 14px; height: 14px; display: inline-flex; }
.ean-sku-btn .icon svg { width: 14px; height: 14px; }

/* Pagination (affichage web). */
.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 14px;
}
.pager .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----------------------------------------------------------- Admin Compliance */

.cmp-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}
.cmp-kpi-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}
.cmp-kpi-legends {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  width: 100%;
  margin: 4px 0 12px;
}
.cmp-kpi-legends--flat {
  padding: 0;
  background: transparent;
  border: none;
}
.cmp-kpi-legend-sep {
  color: var(--muted, #94a3b8);
  margin: 0 2px;
  font-weight: 600;
}
.cmp-kpi-legend-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
  white-space: nowrap;
  flex-shrink: 0;
}
.cmp-kpi-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}
.cmp-kpi-legend-chip .cmp-kpi-legend-val {
  min-width: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gray-700, #374151);
}
.cmp-kpi-metrics .cmp-kpi-actions {
  margin-left: auto;
}
.cmp-kpis-inline {
  margin: 0;
  flex: 1;
  justify-content: flex-end;
}
.cmp-kpis-inline .cmp-kpi {
  padding: 6px 10px;
  min-width: 72px;
}
.cmp-kpis-inline .cmp-kpi-val { font-size: 15px; }
.cmp-kpi {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmp-kpi-hero {
  border-color: var(--niq-500, #0aa689);
  background: linear-gradient(180deg, #ecfdf8 0%, #fff 70%);
  min-width: 120px;
}
.cmp-kpi-hero .cmp-kpi-val { font-size: 22px; }
.cmp-kpi-val {
  font-weight: 700;
  font-size: 18px;
  color: var(--niq-700);
  font-variant-numeric: tabular-nums;
}
.cmp-kpi-lbl {
  font-size: 11px;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cmp-kpi-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.cmp-kpi-legend.cmp-kpi-legend--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.cmp-kpi-legend-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted, #6b7280);
}
.cmp-kpi-legend-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gray-700, #374151);
  min-width: 1.2em;
}
.cmp-kpi-legend-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cmp-kpi-counts .cmp-kpi-val {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cmp-kpi-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.cmp-store-overview { margin-bottom: 10px; }
.cmp-cam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}
.cmp-cam-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: white;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms, transform 80ms;
  color: inherit;
  min-height: 96px;
}
.cmp-cam-card:hover {
  border-color: var(--niq-500);
  box-shadow: 0 0 0 2px rgba(10, 166, 137, 0.12);
}
.cmp-cam-card.active {
  border-color: var(--niq-600);
  box-shadow: 0 0 0 2px rgba(10, 166, 137, 0.28);
  transform: translateY(-1px);
}
.cmp-cam-card.is-loading { opacity: 0.85; }
.cmp-cam-card:not(.has-truth) { opacity: 0.72; }
.cmp-cam-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cmp-cam-id {
  font-weight: 700;
  font-size: 13px;
}
.cmp-cam-card .badge-muted {
  background: var(--gray-100, #f3f4f6);
  color: var(--muted, #6b7280);
}
.cmp-cam-f1 {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--niq-700);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cmp-cam-block-lbl {
  display: block;
  font-size: 11px;
  margin-top: 2px;
}
.cmp-cam-divider {
  border: 0;
  border-top: 1px solid var(--border, #e5e7eb);
  margin: 10px 0 8px;
}
.cmp-cam-block-price .cmp-cam-f1.cmp-cam-price-val {
  font-size: 16px;
  color: var(--niq-700);
}
.cmp-cam-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.cmp-cam-legend-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted, #6b7280);
}
.cmp-cam-legend-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gray-700, #374151);
  min-width: 1.2em;
}
.cmp-cam-legend-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cmp-cam-mini-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted, #6b7280);
  align-items: center;
}
.cmp-cam-mini-counts span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cmp-detail {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cmp-detail-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.cmp-detail-head-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cmp-authorized-cats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.cmp-authorized-cats-label {
  color: var(--muted, #6b7280);
  font-size: 11px;
  font-weight: 600;
}
.cmp-category-audit {
  white-space: nowrap;
}
.cmp-category-audit.is-ok {
  background: #dcfce7;
  color: #166534;
}
.cmp-category-audit.is-error {
  background: #fee2e2;
  color: #991b1b;
}
.cmp-kpi-metrics--detail {
  margin-left: auto;
  width: auto;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.cmp-kpi-metrics--detail .cmp-kpi {
  padding: 6px 10px;
  min-width: 72px;
}
.cmp-kpi-metrics--detail .cmp-kpi-val {
  font-size: 15px;
}
.cmp-selectable {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
/* Vue Image = surface de dessin : tous les panneaux qui apparaissent à la
   sélection (barre EAN, Chroma, Identify) passent SOUS le canvas. Sinon leur
   apparition au pointerdown pousse l'image vers le bas en pleine prise du
   slot — et le delta de drag, calculé sur la géométrie décalée, déplace la
   bbox tout seul. `order` suffit : le DOM reste partagé avec la vue Grille. */
.cmp-pane-truth.is-image-view .cmp-image-view { order: 1; }
.cmp-pane-truth.is-image-view .cmp-edit-bar {
  order: 2;
  position: static;
  margin: 10px 0 0;
}
.cmp-pane-truth.is-image-view .cmp-chroma { order: 3; }
.cmp-pane-truth.is-image-view .cmp-identify-result { order: 4; }
.cmp-edit-bar.is-sticky {
  position: sticky;
  top: 0;
  z-index: 4;
  background: white;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 8px 0;
  border-top: none;
  border-bottom: 1px solid var(--border);
}
.cmp-action-toast {
  flex: 1 1 180px;
  min-width: 140px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
  border: 1px solid var(--border);
  background: #f8fafb;
  color: var(--muted, #6b7280);
}
.cmp-action-toast.is-ok {
  border-color: #b6e4da;
  background: #ecfdf8;
  color: var(--niq-700, #0f766e);
  font-weight: 600;
}
.cmp-action-toast.is-err {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--danger, #b91c1c);
  font-weight: 600;
}
.cmp-cell.is-flash {
  outline: 2px solid var(--niq-500, #0aa689);
  box-shadow: 0 0 0 3px rgba(10, 166, 137, 0.25);
  animation: cmp-flash-pulse 0.9s ease-out 1;
}
@keyframes cmp-flash-pulse {
  0% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.cmp-side-apply {
  flex: 0 0 auto;
  align-self: center;
  padding: 3px 8px;
  font-size: 11px;
}
.cmp-split {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(300px, 1.2fr) minmax(220px, 0.9fr);
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1280px) {
  .cmp-split {
    grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.1fr);
  }
  .cmp-pane-side {
    grid-column: 1 / -1;
    max-height: 360px;
  }
}
@media (max-width: 900px) {
  .cmp-split { grid-template-columns: 1fr; }
}
.cmp-pane {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  min-height: 0;
}
.cmp-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  min-height: 40px;
}
.cmp-pane-truth .cmp-grid-wrap,
.cmp-pane-daily .cmp-daily-viewport,
.cmp-pane-side .cmp-side-tree {
  flex: 1 1 auto;
  min-height: 220px;
  max-height: min(68vh, 680px);
}
.cmp-canvas {
  position: relative;
  background: var(--gray-100, #f3f4f6);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  min-height: 180px;
}
.cmp-canvas.is-drawing { cursor: crosshair; }
.cmp-canvas.is-editing-bbox { cursor: grabbing; }
.cmp-canvas.is-edit-move { cursor: grabbing; }
.cmp-canvas.is-edit-n,
.cmp-canvas.is-edit-s { cursor: ns-resize; }
.cmp-canvas.is-edit-e,
.cmp-canvas.is-edit-w { cursor: ew-resize; }
.cmp-canvas.is-edit-nw,
.cmp-canvas.is-edit-se { cursor: nwse-resize; }
.cmp-canvas.is-edit-ne,
.cmp-canvas.is-edit-sw { cursor: nesw-resize; }
.cmp-overlay .cmp-bbox.cmp-editable { cursor: move; }
.cmp-overlay .cmp-handle {
  fill: #1d4ed8;
  stroke: #ffffff;
  stroke-width: 1.5;
  pointer-events: all;
}
.cmp-overlay .cmp-handle-n,
.cmp-overlay .cmp-handle-s { cursor: ns-resize; }
.cmp-overlay .cmp-handle-e,
.cmp-overlay .cmp-handle-w { cursor: ew-resize; }
.cmp-overlay .cmp-handle-nw,
.cmp-overlay .cmp-handle-se { cursor: nwse-resize; }
.cmp-overlay .cmp-handle-ne,
.cmp-overlay .cmp-handle-sw { cursor: nesw-resize; }
.cmp-canvas-inner {
  position: relative;
  width: 100%;
  line-height: 0;
}
.cmp-canvas-inner img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.cmp-daily-viewport {
  position: relative;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  background: var(--gray-100, #f3f4f6);
  border-radius: var(--radius-md, 8px);
}
/* Attente de la photo (changement de jour) : voile sur le cadre, jamais sur la
   barre d'outils ni sur la bande de jours, qui restent cliquables. */
.cmp-stage-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
}
.cmp-daily-viewport.can-pan { cursor: grab; }
.cmp-daily-viewport.is-panning { cursor: grabbing; }
.cmp-daily-viewport.is-panning * { pointer-events: none; }
.cmp-daily-stage {
  width: calc(100% * var(--cmp-zoom, 1));
  max-width: none;
  flex: 0 0 auto;
  overflow: visible;
  background: transparent;
  min-height: 0;
}
/* Navigation photo du panneau Daily (X derniers jours, photos seules). */
.cmp-daynav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.cmp-daynav-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.cmp-daynav-lbl {
  flex: 0 0 auto;
  font-size: 11.5px;
  line-height: 22px;   /* aligné sur la première ligne de chips */
  cursor: help;
}
/* Pas de scroll horizontal : la fenêtre fait quelques jours, les chips
   passent à la ligne. Une barre de défilement ici se superposait aux chips
   (overlay macOS) et rognait les libellés. */
.cmp-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.cmp-strip > * { flex: 0 0 auto; }
.cmp-daynav-loader { flex: 0 0 auto; margin-top: 3px; }
.cmp-strip-skel { display: flex; gap: 6px; }
.cmp-day-skel {
  width: 46px;
  height: 22px;
  border-radius: 999px;
}
.cmp-day-chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  line-height: 14px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--gray-700, #374151);
}
.cmp-day-chip:hover { border-color: var(--niq-400, #34d3b5); }
.cmp-day-chip.is-current { font-weight: 600; }
.cmp-day-chip.active {
  border-color: var(--niq-600, #089377);
  background: var(--niq-50, #ecfdf8);
  color: var(--niq-800, #06614f);
  font-weight: 600;
}
.cmp-daynav-hist {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  border-radius: var(--radius-sm, 6px);
  font-size: 12px;
  color: #92400e;
}
.cmp-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.62);
  backdrop-filter: blur(4px);
}
.cmp-zoom-btn {
  min-width: 28px;
  height: 26px;
  padding: 0 7px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #f9fafb;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.cmp-zoom-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.cmp-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.cmp-zoom-level {
  min-width: 42px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.cmp-side-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}
.cmp-side-tab {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.cmp-side-tab.current {
  border-color: var(--niq-500);
  box-shadow: 0 0 0 1px var(--niq-500);
}
.cmp-side-tab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  background: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: inherit;
}
.cmp-side-tab-head:hover { background: var(--niq-50, #ecfdf8); }
.cmp-side-tab.current .cmp-side-tab-head { background: var(--niq-50, #ecfdf8); }
.cmp-side-tab-body {
  border-top: 1px solid var(--border);
  background: var(--gray-50, #f9fafb);
  max-height: 42vh;
  overflow-y: auto;
}
.cmp-side-slot {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.cmp-side-slot:last-child { border-bottom: none; }
.cmp-side-slot:hover,
.cmp-side-slot.is-hover { background: rgba(37, 99, 235, 0.08); }
.cmp-side-slot.is-hover:not(.active) {
  box-shadow: inset 3px 0 0 #2563eb;
}
.cmp-side-slot.active {
  background: rgba(37, 99, 235, 0.12);
  box-shadow: inset 4px 0 0 #2563eb, 0 0 0 2px rgba(37, 99, 235, 0.45);
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}
.cmp-side-slot.cmp-cell-wrong_ean.active {
  box-shadow: inset 4px 0 0 #d97706, 0 0 0 2px rgba(217, 119, 6, 0.4);
  outline-color: #d97706;
}
.cmp-side-slot.cmp-cell-fp.active {
  box-shadow: inset 4px 0 0 #7c3aed, 0 0 0 2px rgba(124, 58, 237, 0.4);
  outline-color: #7c3aed;
}
.cmp-side-ord {
  flex: 0 0 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--gray-100, #f3f4f6);
  font-weight: 700;
  font-size: 11px;
  color: var(--gray-700, #374151);
}
.cmp-side-slot.active .cmp-side-ord {
  background: #2563eb;
  color: white;
}
.cmp-side-thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  flex: 0 0 auto;
}
.cmp-side-body { flex: 1; min-width: 0; }
.cmp-side-title {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cmp-side-ean {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #6b7280);
}
.cmp-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cmp-overlay .cmp-bbox {
  stroke: #9ca3af;
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
  fill: transparent;
}
.cmp-overlay .cmp-bbox.cmp-tp { stroke: #0aa689; stroke-dasharray: none; stroke-width: 2; }
.cmp-overlay .cmp-bbox.cmp-wrong_ean { stroke: #d97706; stroke-dasharray: none; stroke-width: 2; }
.cmp-overlay .cmp-bbox.cmp-fn { stroke: #dc2626; stroke-dasharray: none; stroke-width: 2; }
.cmp-overlay .cmp-bbox.cmp-fp { stroke: #7c3aed; stroke-dasharray: 4 2; stroke-width: 1.5; }
.cmp-overlay .cmp-bbox.cmp-drawing {
  stroke: #0aa689;
  stroke-dasharray: 4 2;
  fill: rgba(10, 166, 137, 0.15);
}
.cmp-overlay .cmp-bbox.cmp-dim { opacity: 0.18; }
.cmp-overlay .cmp-bbox.cmp-active { opacity: 1; }
.cmp-overlay .cmp-bbox.cmp-hov {
  stroke: #3b82f6 !important;
  stroke-width: 3.5 !important;
  stroke-dasharray: none !important;
  fill: rgba(59, 130, 246, 0.18) !important;
}
.cmp-overlay .cmp-bbox.cmp-selected {
  stroke: #1d4ed8 !important;
  stroke-width: 4.5 !important;
  stroke-dasharray: none !important;
  fill: rgba(37, 99, 235, 0.28) !important;
  filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.85));
}
.cmp-overlay .cmp-bbox-label {
  fill: #ffffff;
  paint-order: stroke;
  stroke: rgba(17, 24, 39, 0.85);
  stroke-width: 0.004;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
}
.cmp-overlay .cmp-bbox-label-active {
  fill: #1d4ed8;
  stroke: #ffffff;
  stroke-width: 0.006;
  font-weight: 800;
}
.cmp-edit-bar {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cmp-winner-debug {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--gray-50, #f9fafb);
  font-size: 11px;
}
.cmp-winner-loading,
.cmp-winner-api,
.cmp-winner-why,
.cmp-winner-merge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.cmp-winner-section + .cmp-winner-section { margin-top: 10px; }
.cmp-winner-title {
  margin-bottom: 5px;
  color: var(--text, #111827);
  font-size: 12px;
  font-weight: 700;
}
.cmp-winner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, auto));
  gap: 3px 7px;
}
.cmp-winner-grid > span { color: var(--muted, #6b7280); }
.cmp-winner-grid > code { overflow-wrap: anywhere; }
.cmp-winner-ean {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: inherit;
}
.cmp-winner-ean.is-gt code {
  font-weight: 800;
  color: #166534;
}
.cmp-winner-gt {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.cmp-winner-why { margin-top: 6px; }
.cmp-winner-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.cmp-winner-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.cmp-winner-table th,
.cmp-winner-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.cmp-winner-table th {
  color: var(--muted, #6b7280);
  font-weight: 600;
}
.cmp-winner-table tr.is-gt {
  background: rgba(22, 163, 74, 0.12);
}
.cmp-winner-merge { margin-top: 9px; }
.cmp-winner-raw { margin-top: 9px; }
.cmp-winner-raw summary { cursor: pointer; color: var(--muted, #6b7280); }
.cmp-winner-raw pre {
  max-height: 260px;
  margin: 6px 0 0;
  padding: 8px;
  overflow: auto;
  border-radius: 4px;
  background: #111827;
  color: #e5e7eb;
  font-size: 10px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cmp-side-ean.cmp-selectable {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #6b7280);
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.cmp-identify-result {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  font-size: 13px;
  line-height: 1.4;
}
.chroma-tab { margin-top: 12px; }
.chroma-tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.chroma-audit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}
.chroma-audit-store {
  flex: 1;
  min-width: 240px;
}
.chroma-audit-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  outline: none;
}
.chroma-audit-pos {
  min-width: 4.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.chroma-audit-current {
  margin: 0 0 10px;
  font-size: 13px;
}
.cmp-chroma {
  margin-top: 8px;
  padding: 10px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
}
.cmp-chroma-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cmp-chroma-head code {
  font-size: 12px;
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.cmp-chroma-error {
  color: var(--danger, #e5484d);
  font-size: 12px;
  margin-bottom: 8px;
}
.cmp-chroma-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}
.cmp-chroma-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
}
.cmp-chroma-pill.warn,
.cmp-chroma-badge.warn {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
}
/* Vecteur indexé sans fichier dans ITALY_448 : information, pas erreur —
   l'EAN reste servi par la collection (vignettes encodées ailleurs). */
.cmp-chroma-pill.orphan,
.cmp-chroma-badge.orphan {
  background: rgba(37, 99, 235, 0.12);
  color: #1e40af;
}
.cmp-chroma-pill.ok,
.cmp-chroma-badge.ok {
  background: rgba(22, 163, 74, 0.13);
  color: #166534;
}
.cmp-chroma-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 3px solid rgba(37, 99, 235, 0.55);
  background: rgba(37, 99, 235, 0.06);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--text, #111827);
}
.cmp-chroma-backends {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--gray-50, #f9fafb);
  font-size: 12px;
}
.cmp-chroma-backends-lead {
  margin: 0 0 4px;
  font-weight: 600;
}
.cmp-chroma-backends-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.cmp-chroma-backends-table th,
.cmp-chroma-backends-table td {
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.cmp-chroma-backends-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #6b7280);
}
.cmp-chroma-backends-table tr.is-audited {
  background: rgba(22, 163, 74, 0.07);
}
.cmp-chroma-backends-note {
  margin: 8px 0 0;
  color: var(--muted, #6b7280);
  font-size: 11px;
}
.cmp-chroma-badge.muted {
  background: var(--gray-100, #f3f4f6);
  color: var(--muted, #6b7280);
}
.cmp-chroma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.cmp-chroma-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cmp-chroma-card.is-orphan { border-color: rgba(220, 38, 38, 0.45); }
.cmp-chroma-card.is-warn { border-color: rgba(245, 158, 11, 0.55); }
.cmp-chroma-card.is-ok { border-color: rgba(22, 163, 74, 0.35); }
.cmp-chroma-card.is-removing { opacity: 0.55; pointer-events: none; }
.cmp-chroma-card.is-rotating { opacity: 0.65; }
.cmp-chroma-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #fff;
}
.cmp-chroma-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}
.cmp-chroma-rotate {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.cmp-chroma-rotate button {
  width: 28px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}
.cmp-chroma-rotate button:hover { background: rgba(22, 101, 52, 0.94); }
.cmp-chroma-rotate button:disabled { opacity: 0.45; cursor: not-allowed; }
.cmp-chroma-x {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.cmp-chroma-card:hover .cmp-chroma-x,
.cmp-chroma-card:focus-within .cmp-chroma-x,
.cmp-chroma-x:focus-visible {
  opacity: 1;
  transform: scale(1);
}
.cmp-chroma-x:hover { background: #b91c1c; }
.cmp-chroma-x:disabled { opacity: 0.4; cursor: not-allowed; }
.cmp-chroma-confirm {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 7px 7px;
  background: rgba(17, 24, 39, 0.88);
  color: #fff;
  z-index: 3;
  animation: cmp-chroma-confirm-in 0.16s ease;
}
@keyframes cmp-chroma-confirm-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cmp-chroma-confirm-msg {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-chroma-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cmp-chroma-confirm-ok,
.cmp-chroma-confirm-cancel {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cmp-chroma-confirm-ok {
  background: #16a34a;
  color: #fff;
}
.cmp-chroma-confirm-ok:hover { background: #15803d; }
.cmp-chroma-confirm-cancel {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.cmp-chroma-confirm-cancel:hover { background: rgba(255, 255, 255, 0.28); }
.cmp-chroma-confirm-ok:disabled,
.cmp-chroma-confirm-cancel:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cmp-chroma-card-meta {
  padding: 4px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmp-chroma-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 4px;
}
.cmp-chroma-file {
  font-size: 10px;
  color: var(--muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-identify-thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
}
.cmp-identify-result code {
  font-size: 12px;
  background: white;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.cmp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}
.cmp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9ca3af;
}
.cmp-dot.cmp-tp { background: #0aa689; }
.cmp-dot.cmp-wrong_ean { background: #d97706; }
.cmp-dot.cmp-fn { background: #dc2626; }
.cmp-dot.cmp-fp { background: #7c3aed; }
.cmp-dot.cmp-oos { background: #64748b; }
.cmp-dot.cmp-pl0 { background: #0aa689; }
.cmp-dot.cmp-pl1 { background: #eab308; }
.cmp-dot.cmp-pl2 { background: #d97706; }
.cmp-dot.cmp-pl3 { background: #ea580c; }
.cmp-dot.cmp-pl4 { background: #dc2626; }
.cmp-dot.cmp-plna { background: #94a3b8; }

.cmp-oos-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.cmp-kpi-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 140px;
}

.cmp-overlay .cmp-bbox.cmp-oos { stroke: #64748b; stroke-dasharray: 4 3; stroke-width: 2; }
.cmp-cell.cmp-cell-oos:not(.is-selected):not(.is-hover) { border-color: #64748b; }
.cmp-side-slot.cmp-cell-oos.active { outline-color: #64748b; }

/* Truth grid (tablette / ordre) */
.cmp-filters .combo { min-width: 180px; }
.cmp-filters .combo input.input { width: 100%; min-width: 0; }
.stale-warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  white-space: nowrap;
}
.stale-warn--icon {
  padding: 0;
  border: none;
  background: transparent;
  gap: 0;
}
.stale-warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.cmp-load-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
  border: 1px solid var(--border);
  background: #f8fafb;
  color: var(--muted, #6b7280);
}
.cmp-load-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmp-load-status.is-busy {
  border-color: #b6e4da;
  background: #ecfdf8;
  color: var(--niq-700, #0aa689);
}
.cmp-load-status.is-done {
  border-color: var(--border);
  background: #f8fafb;
  color: var(--muted, #6b7280);
}
.cmp-load-status.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--danger, #b91c1c);
}
.cmp-load-status .loader {
  width: 14px;
  height: 14px;
  border-width: 2px;
  flex-shrink: 0;
}
.cmp-load-bar {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(10, 166, 137, 0.15);
  overflow: hidden;
}
.cmp-load-status.is-error .cmp-load-bar {
  display: none;
}
.cmp-load-bar-indeterminate {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: inherit;
  background: var(--niq-500, #12b89a);
  animation: cmp-load-slide 1.15s ease-in-out infinite;
  will-change: transform;
}
@keyframes cmp-load-slide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.cmp-view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--gray-100, #f3f4f6);
  padding: 2px;
  border-radius: var(--radius-sm, 6px);
}
.cmp-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 2px;
}
.cmp-level {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--gray-50, #f9fafb);
  padding: 8px;
}
.cmp-level.current {
  border-color: var(--niq-500, #0aa689);
  box-shadow: 0 0 0 1px rgba(10, 166, 137, 0.25);
  background: #fff;
}
.cmp-level-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cmp-level-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--niq-700);
}
.cmp-level-cells {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.cmp-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 118px;
  width: 118px;
  padding: 7px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: white;
  cursor: pointer;
  text-align: center;
  transition: border-color 120ms, box-shadow 120ms, transform 80ms;
  scroll-snap-align: start;
}
.cmp-cell:hover,
.cmp-cell.is-hover {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
  background: rgba(239, 246, 255, 0.9);
}
.cmp-cell.is-selected {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.55);
  background: #eff6ff;
  transform: translateY(-1px);
  z-index: 2;
}
.cmp-cell.cmp-cell-tp:not(.is-selected):not(.is-hover) { border-color: #0aa689; }
.cmp-cell.cmp-cell-wrong_ean:not(.is-selected):not(.is-hover) { border-color: #d97706; }
.cmp-cell.cmp-cell-fn:not(.is-selected):not(.is-hover) { border-color: #dc2626; }
.cmp-cell-pos {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  letter-spacing: 0.01em;
}
.cmp-cell-thumb {
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: var(--gray-50, #f9fafb);
  border-radius: 4px;
}
.cmp-cell-title {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gray-800, #1f2937);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  min-height: 2.5em;
}
.cmp-cell-ean {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--gray-700, #374151);
  line-height: 1.2;
}
.cmp-cell-price,
.cmp-side-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted, #6b7280);
  line-height: 1.2;
}
.cmp-cell-soucat,
.cmp-side-soucat {
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted, #6b7280);
  font-weight: 500;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-side-soucat {
  display: block;
  margin-top: 1px;
}
.cmp-side-price {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2px;
}
.cmp-cell-price.is-price-ok,
.cmp-side-price.is-price-ok { color: #0aa689; }
.cmp-cell-price.is-price-near,
.cmp-side-price.is-price-near { color: #d97706; }
.cmp-cell-price.is-price-wrong,
.cmp-side-price.is-price-wrong { color: #dc2626; }
.cmp-cell-price.is-price-missing,
.cmp-side-price.is-price-missing { color: #94a3b8; font-weight: 500; }
.cmp-kpi-price-lvls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 10px;
  line-height: 1.3;
  margin-top: 4px;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.cmp-price-lvl-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cmp-euro-err {
  display: inline-block;
  margin-left: 6px;
  color: #dc2626;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.cmp-side-tab-title {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.cmp-price-prefix {
  font-weight: 500;
  color: var(--muted, #6b7280);
  margin-right: 4px;
}
.cmp-price-sep {
  margin: 0 2px;
  opacity: 0.55;
  font-weight: 500;
}
.cmp-side-price.is-price-ok .cmp-price-prefix,
.cmp-side-price.is-price-near .cmp-price-prefix,
.cmp-side-price.is-price-wrong .cmp-price-prefix,
.cmp-side-price.is-price-missing .cmp-price-prefix {
  color: inherit;
  opacity: 0.85;
}

/* ═══════════════════════ Admin › HITL (revue humaine du réalogramme) ═══════════════════════
   Palette d'états, reprise de l'éditeur EAN Conad pour que le code couleur soit
   le même d'un outil à l'autre :
     rouge  = mauvais produit (≠ TBL_COMPLIANCE)     gris   = position hors vérité terrain
     ambre  = EAN sentinelle 9999… (trou à combler)  vert   = conforme
     jaune  = correction réservée (rien en base)     bleu   = correction appliquée
     ardoise = fausse alerte écartée
   Les classes .hitl-* sont autonomes : elles ne dépendent pas des styles .cmp-*
   du sous-onglet Compliance, qui peuvent bouger indépendamment. */

.hitl-toolbar {
  display: grid;
  gap: 10px;
}
.hitl-toolbar-fields {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(280px, 2fr) 88px;
  gap: 10px;
  align-items: end;
  min-width: 0;
}
.hitl-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.hitl-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hitl-field .input { width: 100%; min-width: 0; }
.hitl-field-wide,
.hitl-field-narrow { min-width: 0; }
.hitl-toolbar-actions .btn { margin-left: auto; }
@media (max-width: 1050px) {
  .hitl-toolbar-fields {
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 88px;
  }
  .hitl-field-wide { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 650px) {
  .hitl-toolbar-fields { grid-template-columns: 1fr 88px; }
  .hitl-toolbar-fields .hitl-field:first-child,
  .hitl-field-wide { grid-column: 1 / -1; }
  .hitl-toolbar-actions .btn { margin-left: 0; width: 100%; }
}
.hitl-field-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray-500);
}
.hitl-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
}
.hitl-check input { cursor: pointer; }

.hitl-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.hitl-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hitl-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--gray-100);
  color: var(--gray-700);
}
.hitl-chip-pending,
.hitl-chip-mismatch     { background: #fde2e2; color: #b91c1c; }
.hitl-chip-absent       { background: var(--gray-200); color: var(--gray-700); }
.hitl-chip-placeholder  { background: #fdebd0; color: #9a4a06; }
.hitl-chip-ok           { background: #d7f5e6; color: #047857; }
.hitl-chip-no_truth     { background: var(--gray-100); color: var(--gray-500); }
.hitl-chip-planned      { background: #fef3c7; color: #92600c; }
.hitl-chip-applied      { background: #dbeafe; color: #1d4ed8; }
.hitl-chip-dismissed    { background: var(--gray-100); color: var(--gray-500); }

.hitl-warn {
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
}
.hitl-msg { font-size: 12px; font-weight: 600; }
.hitl-msg.is-ok  { color: #047857; }
.hitl-msg.is-err { color: #b91c1c; }

.hitl-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--info);
  border-radius: 50%;
  animation: hitl-spin 0.8s linear infinite;
  vertical-align: -2px;
}
@keyframes hitl-spin { to { transform: rotate(360deg); } }

/* Bandeau d'application : volontairement voyant, c'est le seul geste de la page
   qui écrit dans les tables du pipeline CV. */
.hitl-apply-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md);
  background: #fffbeb;
  font-size: 12.5px;
  font-weight: 600;
  color: #92600c;
}

.hitl-split {
  display: grid;
  grid-template-columns: minmax(340px, 1.35fr) minmax(320px, 0.95fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}
@media (max-width: 1100px) {
  .hitl-split { grid-template-columns: 1fr; }
}
.hitl-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  min-height: 0;
}
/* Colonne de décision : longue (slot, catalogue, historique, vérité terrain),
   elle défile pour ne pas repousser la photo hors de l'écran. */
.hitl-pane-side {
  max-height: min(84vh, 900px);
  overflow: auto;
  overscroll-behavior: contain;
}
.hitl-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* « safe center » : l'image reste centrée tant qu'elle tient, puis s'aligne au
   bord dès qu'elle déborde — sinon le haut et la gauche sortent de la zone
   défilable et deviennent inatteignables au zoom. */
.hitl-viewport {
  position: relative;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  max-height: min(72vh, 760px);
}
/* Pastille de chargement des slots, posée au-dessus de la photo sans la
   masquer : on voit que ça travaille tout en gardant l'image lisible. */
.hitl-viewport-loader {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}

.hitl-stage {
  width: calc(100% * var(--hitl-zoom, 1));
  max-width: none;
  flex: 0 0 auto;
}
.hitl-canvas-inner {
  position: relative;
  width: 100%;
  line-height: 0;
}
.hitl-canvas-inner img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.hitl-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.hitl-overlay .hitl-bbox {
  fill: transparent;
  stroke: #94a3b8;
  stroke-width: 1.5;
}
.hitl-overlay .hitl-mismatch          { stroke: #ef4444; stroke-width: 2.5; fill: rgba(239, 68, 68, 0.18); }
.hitl-overlay .hitl-absent_compliance { stroke: #94a3b8; stroke-width: 2; fill: rgba(148, 163, 184, 0.14); }
.hitl-overlay .hitl-placeholder       { stroke: #f59e0b; stroke-width: 2.5; fill: rgba(245, 158, 11, 0.20); }
.hitl-overlay .hitl-ok                { stroke: #10b981; fill: rgba(16, 185, 129, 0.06); }
.hitl-overlay .hitl-no_truth          { stroke: #cbd5e1; fill: transparent; }
.hitl-overlay .hitl-planned           { stroke: #eab308; stroke-width: 2.5; fill: rgba(234, 179, 8, 0.26); }
.hitl-overlay .hitl-applied           { stroke: #3b82f6; stroke-width: 2.5; fill: rgba(59, 130, 246, 0.18); }
.hitl-overlay .hitl-dismissed         { stroke: #64748b; stroke-dasharray: 0.01 0.008; fill: rgba(100, 116, 139, 0.10); }
.hitl-overlay .hitl-hover    { stroke-width: 3; }
.hitl-overlay .hitl-selected { stroke: #0f172a; stroke-width: 4; fill: rgba(15, 23, 42, 0.10); }
.hitl-overlay .hitl-bbox-label {
  fill: #0f172a;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 0.004;
}
.hitl-overlay .hitl-thumb { opacity: 0.95; }

.hitl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--gray-600);
}
.hitl-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.hitl-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  border: 1.5px solid transparent;
}
.hitl-dot-mismatch    { background: rgba(239, 68, 68, 0.25);   border-color: #ef4444; }
.hitl-dot-absent      { background: rgba(148, 163, 184, 0.25); border-color: #94a3b8; }
.hitl-dot-placeholder { background: rgba(245, 158, 11, 0.25);  border-color: #f59e0b; }
.hitl-dot-ok          { background: rgba(16, 185, 129, 0.20);  border-color: #10b981; }
.hitl-dot-planned     { background: rgba(234, 179, 8, 0.30);   border-color: #eab308; }
.hitl-dot-applied     { background: rgba(59, 130, 246, 0.25);  border-color: #3b82f6; }
.hitl-dot-dismissed   { background: rgba(100, 116, 139, 0.18); border-color: #64748b; }

.hitl-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  margin-bottom: 10px;
  background: var(--bg-card);
}
.hitl-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hitl-card-head h4 { margin: 0; font-size: 14px; font-weight: 750; }
.hitl-sub-title {
  display: block;
  font-size: 12px;
  font-weight: 750;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Onglets du panneau de décision : historique / catalogue / vérité terrain.
   Empilés, ces trois blocs faisaient plusieurs écrans de haut. */
.hitl-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: -2px 0 10px;
  overflow-x: auto;
}
.hitl-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-600);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.hitl-tab:hover { color: var(--niq-700); }
.hitl-tab.is-active {
  color: var(--niq-700);
  border-bottom-color: var(--niq-500);
}
.hitl-tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-600);
}
.hitl-tab.is-active .hitl-tab-count {
  background: var(--niq-100, #e0e7ff);
  color: var(--niq-700);
}

.hitl-product {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 9px;
  align-items: center;
  margin-top: 6px;
}
.hitl-product-thumb,
.hitl-candidate > img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.hitl-product-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  min-width: 0;
}
.hitl-expected,
.hitl-decision {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.hitl-candidate {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 6px;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
}
.hitl-candidate:hover { border-color: var(--info); background: var(--bg-hover); }
.hitl-candidate-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  min-width: 0;
}
.hitl-candidate-body > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hitl-catalog-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
/* 4 produits visibles (2 × 2), le reste au scroll : la grille ne doit pas
   repousser le bouton « charger plus » et la vérité terrain hors de l'écran.
   La hauteur de carte est figée — donc calculable — parce que les trois lignes
   de texte sont tronquées à une ligne chacune (`white-space: nowrap`). */
.hitl-products {
  /* 6 padding ×2 + 3 gaps ×3 + image 76 + 16 + 14 + 14 + bordures 2 = 144 */
  --hitl-prod-card-h: 144px;
  --hitl-prod-gap: 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hitl-prod-gap);
  margin-top: 8px;
  max-height: calc(2 * var(--hitl-prod-card-h) + var(--hitl-prod-gap));
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Évite que la dernière rangée soit coupée pile au bord : on sent qu'il y a
     une suite. */
  padding-right: 2px;
}
.hitl-product-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  height: var(--hitl-prod-card-h, auto);
  overflow: hidden;
}
.hitl-product-card:hover { border-color: var(--info); background: var(--bg-hover); }
.hitl-product-card img {
  width: 100%;
  height: 76px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.hitl-product-name {
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hitl-product-meta {
  font-size: 10.5px;
  line-height: 14px;
  color: var(--gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Admin › OOS continu */
.oos-monitor {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.oos-monitor-toolbar,
.oos-monitor-section-title,
.oos-monitor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.oos-monitor-toolbar h2,
.oos-monitor-section-title h3 { margin: 0; }
.oos-monitor-toolbar p { margin: 4px 0 0; }
.oos-monitor-actions { flex-wrap: wrap; justify-content: flex-end; }
.oos-monitor-source { margin: 0; }
.oos-monitor-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.oos-monitor-kpis .card {
  display: grid;
  gap: 5px;
  min-height: 88px;
  align-content: center;
}
/* Cartes côte à côte : l'espacement vient du `gap`, le margin-top des siblings
   `.card + .card` décalerait toutes les cartes sauf la première. */
.oos-monitor-kpis .card + .card { margin-top: 0; }
.oos-monitor-kpis span {
  color: var(--gray-600);
  font-size: 12px;
}
.oos-monitor-kpis strong {
  font-size: 25px;
  line-height: 1;
}
.oos-monitor-filters {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) repeat(2, minmax(190px, 1fr)) minmax(170px, .8fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}
.oos-monitor-filters label {
  display: grid;
  gap: 5px;
  color: var(--gray-600);
  font-size: 12px;
}
.oos-monitor-filters input,
.oos-monitor-filters select {
  width: 100%;
  min-height: 36px;
}
.oos-monitor-section-title { margin-bottom: 12px; }
.oos-monitor-scroll {
  max-height: min(55vh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
}
.oos-monitor-scroll thead th { z-index: 2; }
.oos-monitor-table { table-layout: fixed; }
.oos-monitor-table td { vertical-align: top; }
.oos-monitor-table .col-status { width: 108px; }
.oos-monitor-table .col-store { width: 18%; }
.oos-monitor-table .col-camera { width: 22%; }
.oos-monitor-table .col-time { width: 190px; }
.oos-monitor-table .col-num { width: 90px; }
.oos-monitor-table .col-error { width: auto; }
.oos-monitor-table .col-action { width: 132px; }
.oos-monitor-table .col-store,
.oos-monitor-table .col-camera { overflow-wrap: anywhere; }
.oos-monitor-history-time {
  white-space: nowrap;
  user-select: all;
}
.oos-monitor-error-modal {
  display: grid;
  width: min(760px, 92vw);
  max-height: 80vh;
  grid-template-rows: auto minmax(0, 1fr);
}
.oos-monitor-error-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.oos-monitor-error-head small { display: block; margin-top: 4px; }
.oos-monitor-error-body {
  margin: 0;
  padding: 16px 20px;
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}
.oos-monitor-id {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Message tronqué sur une ligne : la version complète s'ouvre dans la modale. */
.oos-monitor-error {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--niq-700);
  font: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.oos-monitor-error:hover { text-decoration: underline; }
.oos-monitor-status {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  color: var(--gray-700);
  background: var(--gray-100);
}
.oos-monitor-status.is-done { color: #166534; background: #dcfce7; }
.oos-monitor-status.is-processing { color: #1d4ed8; background: #dbeafe; }
.oos-monitor-status.is-failed { color: #b91c1c; background: #fee2e2; }
.oos-monitor-status.is-pending { color: #92400e; background: #fef3c7; }
.text-danger { color: #b91c1c !important; }

@media (max-width: 1100px) {
  .oos-monitor-kpis { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .oos-monitor-filters { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 700px) {
  .oos-monitor-toolbar { align-items: flex-start; flex-direction: column; }
  .oos-monitor-actions { justify-content: flex-start; }
  .oos-monitor-kpis { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .oos-monitor-filters { grid-template-columns: 1fr; }
}