/* ============================================================
   palette.css — ShouldCost surface mock — palette + composants locaux
   Owner: V0 · 2026-06-01 · thread should-cost-bootstrap
   ============================================================
   Surcharges --surface-* du design system v0. Ne PAS redéfinir --ds-*.
   Identité : acier / industriel sobre — gris-bleu froid, accents
   ambre (faible grounding) et ardoise. Distinct du bleu médical Health.
   ============================================================ */

:root {
  --surface-color-bg:        #f7f8fa;
  --surface-color-bg-card:   #ffffff;
  --surface-color-text:      #1d2430;
  --surface-color-muted:     #616b7a;
  --surface-color-rule:      #e2e6ec;

  --surface-color-link:       #2b4a63;   /* bleu acier */
  --surface-color-link-hover: #35597a;
  --surface-color-focus:      #3b82f6;
  --surface-color-code-bg:    rgba(43, 74, 99, 0.06);

  /* statuts de grounding / couverture (enum value_status locké) */
  --sc-extracted: #2f8a5b;   /* vert sobre — groundé */
  --sc-low:       #c4830e;   /* ambre — faible grounding */
  --sc-ambiguous: #8a5cd6;   /* violet — ambigu, non résolu */
  --sc-notfound:  #8a93a3;   /* gris — abstention explicite */
  --sc-na:        #5b7a9c;   /* bleu-gris — non applicable */
  --sc-missing:   #cdd3db;   /* gris très clair — non extrait */
  --sc-public:    #2f8a5b;   /* source publique dispo */
  --sc-gated:     #b06a1c;   /* source gatée RMI/EPC */

  --sc-tier-a:    #2f8a5b;
  --sc-tier-b:    #b06a1c;
  --sc-tier-ab:   #6b6f9c;   /* A/B mixte */
}

/* ----- bandeau FACTICE ----- */
.sc-factice {
  background: repeating-linear-gradient(45deg, #fff7e6, #fff7e6 12px, #ffefcc 12px, #ffefcc 24px);
  border: 1px solid #e8c478;
  color: #7a5410;
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-base);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-semibold);
  margin-block: var(--ds-space-4);
}

/* ----- bandeau données réelles ----- */
.sc-real {
  background: rgba(47, 138, 91, 0.10);
  border: 1px solid rgba(47, 138, 91, 0.4);
  color: #1f6b45;
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-base);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-semibold);
  margin-block: var(--ds-space-4);
}

/* ----- en-tête meta ----- */
.sc-title { margin-block: var(--ds-space-6) var(--ds-space-1); }
.sc-meta {
  color: var(--surface-color-muted);
  font-size: var(--ds-font-size-sm);
  margin-block-end: var(--ds-space-4);
}
.sc-meta code { background: var(--surface-color-code-bg); padding: 0 var(--ds-space-1); border-radius: 3px; }

/* ----- barre recherche + filtres (UX inspiré cultural-library) ----- */
.sc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); margin-block: var(--ds-space-2) var(--ds-space-2); padding: var(--ds-space-3); background: var(--surface-color-code-bg); border-radius: var(--ds-radius-base); }
.sc-toolbar[hidden] { display: none; }
.sc-header-btn { margin-inline-start: auto; background: none; border: 1px solid rgba(255,255,255,0.35); color: inherit; font: inherit; font-size: var(--ds-font-size-sm); padding: 2px var(--ds-space-3); border-radius: var(--ds-radius-base); cursor: pointer; }
.sc-header-btn:hover { background: rgba(255,255,255,0.12); }
/* légende modale */
.sc-legend-h { font-size: var(--ds-font-size-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--surface-color-muted); margin-block: var(--ds-space-4) var(--ds-space-2); }
.sc-legend-list { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.sc-legend-row { display: flex; align-items: center; gap: var(--ds-space-3); font-size: var(--ds-font-size-sm); }
.sc-legend__mark { flex: 0 0 auto; min-width: 1.6rem; text-align: center; font-weight: var(--ds-font-weight-bold); }
.sc-search {
  flex: 1 1 22rem; min-width: 14rem; font: inherit; font-size: var(--ds-font-size-base);
  padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--surface-color-rule);
  border-radius: var(--ds-radius-lg); background: var(--surface-color-bg-card); color: var(--surface-color-text);
}
.sc-search:focus { outline: 2px solid var(--surface-color-focus); outline-offset: 1px; border-color: transparent; }
.sc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); }
.sc-fgroup { display: inline-flex; align-items: center; gap: var(--ds-space-1); flex-wrap: wrap; }
.sc-fgroup__label { font-size: var(--ds-font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--surface-color-muted); margin-inline-end: var(--ds-space-1); }
.sc-chip {
  font: inherit; font-size: var(--ds-font-size-xs); cursor: pointer;
  padding: 2px var(--ds-space-3); border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--surface-color-rule); background: var(--surface-color-bg-card); color: var(--surface-color-text);
}
.sc-chip:hover { border-color: var(--surface-color-link); }
.sc-chip.is-on { background: var(--surface-color-link); color: #fff; border-color: var(--surface-color-link); }
.sc-chip--reset { color: var(--sc-gated); border-style: dashed; }
.sc-chip--export { color: var(--sc-extracted); border-color: var(--sc-extracted); font-weight: var(--ds-font-weight-semibold); }
.sc-chip--export:hover { background: var(--sc-extracted); color: #fff; }
.sc-result-count { font-size: var(--ds-font-size-sm); color: var(--surface-color-muted); margin-inline-start: auto; }
.sc-empty { color: var(--surface-color-muted); font-style: italic; padding: var(--ds-space-6); text-align: center; }
.sc-view-caption { color: var(--surface-color-muted); font-size: var(--ds-font-size-sm); margin-block: var(--ds-space-3) var(--ds-space-2); max-width: 60rem; }
.sc-groupby { display: inline-flex; align-items: center; gap: var(--ds-space-1); flex-wrap: wrap; }
.sc-mx__rowveh { color: var(--surface-color-muted); font-weight: var(--ds-font-weight-normal); font-size: 0.9em; }
.sc-tbl__grouprow th { position: sticky; left: 0; z-index: 3; background: var(--surface-color-code-bg); text-align: start; padding: var(--ds-space-2) var(--ds-space-3); font-weight: var(--ds-font-weight-semibold); color: var(--surface-color-link); }

/* ----- vue Pièces (cartes ⇄ arbre) ----- */
.sc-parts-toolbar { display: flex; align-items: center; gap: var(--ds-space-5); flex-wrap: wrap; margin-block: var(--ds-space-3); }
/* toggle d'affichage cartes/arbre — distinct des chips de groupement (segmented control) */
.sc-fgroup--display { padding-inline-end: var(--ds-space-5); border-inline-end: 1px solid var(--surface-color-rule); }
.sc-segmented { display: inline-flex; border: 1px solid var(--surface-color-rule); border-radius: var(--ds-radius-base); overflow: hidden; }
.sc-seg-btn { background: var(--surface-color-bg, #fff); border: none; font: inherit; font-size: var(--ds-font-size-sm); padding: var(--ds-space-2) var(--ds-space-4); cursor: pointer; color: var(--surface-color-fg); white-space: nowrap; }
.sc-seg-btn + .sc-seg-btn { border-inline-start: 1px solid var(--surface-color-rule); }
.sc-seg-btn:hover { background: var(--surface-color-code-bg); }
.sc-seg-btn.is-on { background: var(--surface-color-link); color: #fff; font-weight: var(--ds-font-weight-bold); }
.sc-back { background: none; border: 1px solid var(--surface-color-rule); color: var(--surface-color-link); font: inherit; font-size: var(--ds-font-size-sm); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-base); cursor: pointer; margin-block-end: var(--ds-space-4); }
.sc-back:hover { border-color: var(--surface-color-link); background: var(--surface-color-code-bg); }
/* ----- vue Galerie (cards) ----- */
.sc-gal-toolbar { display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; margin-block: var(--ds-space-3); }
.sc-gal-group { margin-block-end: var(--ds-space-6); }
.sc-gal-group__title { font-size: var(--ds-font-size-md); margin-block: var(--ds-space-3) var(--ds-space-3); padding-block-end: var(--ds-space-2); border-bottom: 2px solid var(--surface-color-rule); }
.sc-gal-group__count { font-size: var(--ds-font-size-xs); font-weight: var(--ds-font-weight-normal); color: var(--surface-color-muted); }
.sc-gcard__cat { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0 var(--ds-space-1); border-radius: 3px; background: var(--surface-color-code-bg); color: var(--surface-color-link); font-weight: var(--ds-font-weight-semibold); }
.sc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--ds-space-4); }
.sc-gcard {
  display: flex; flex-direction: column; text-align: start; cursor: pointer; overflow: hidden;
  background: var(--surface-color-bg-card); border: 1px solid var(--surface-color-rule);
  border-radius: var(--ds-radius-lg); font: inherit; color: var(--surface-color-text); padding: 0;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.sc-gcard:hover { border-color: var(--surface-color-link); box-shadow: 0 4px 16px rgba(29,36,48,0.10); transform: translateY(-2px); }
.sc-gcard__thumb { height: 9rem; background: var(--surface-color-code-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--surface-color-rule); }
.sc-gcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sc-gcard__thumb.is-empty { background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 10px, #e7ebf0 10px, #e7ebf0 20px); }
.sc-gcard__noimg { font-size: 2rem; opacity: 0.5; }
.sc-gcard__body { padding: var(--ds-space-3) var(--ds-space-4); display: flex; flex-direction: column; gap: var(--ds-space-2); flex: 1; }
.sc-gcard__title { font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-semibold); margin: 0; line-height: var(--ds-line-height-snug); }
.sc-gcard__meta { font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); margin: 0; display: flex; align-items: center; gap: var(--ds-space-1); }
.sc-gcard__cov { display: flex; align-items: center; gap: var(--ds-space-2); margin-top: auto; }
.sc-gcard__bar { flex: 1; height: 6px; background: var(--surface-color-rule); border-radius: 4px; overflow: hidden; }
.sc-gcard__barfill { display: block; height: 100%; background: var(--surface-color-link); }
.sc-gcard__covnum { font-family: var(--ds-font-family-mono); font-size: 0.65rem; color: var(--surface-color-muted); }
.sc-gcard__foot { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); }
.sc-gflag { font-size: 0.65rem; padding: 0 var(--ds-space-1); border-radius: 3px; }
.sc-gflag--conflict { background: rgba(220,38,38,0.10); color: #c0392b; }

/* ----- onglets ----- */
.sc-tabs {
  display: flex; gap: var(--ds-space-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--surface-color-rule);
  margin-block: var(--ds-space-5);
}
.sc-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: var(--ds-space-3) var(--ds-space-4);
  font: inherit; font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-semibold);
  color: var(--surface-color-muted); cursor: pointer;
}
.sc-tab--active { color: var(--surface-color-link); border-bottom-color: var(--surface-color-link); }
.sc-view[hidden] { display: none; }

/* ----- badges génériques ----- */
.sc-tier {
  display: inline-block; margin-inline-start: var(--ds-space-2);
  font-size: 0.65rem; font-weight: var(--ds-font-weight-bold);
  padding: 0 var(--ds-space-1); border-radius: 3px; vertical-align: middle;
  letter-spacing: 0.03em;
}
.sc-tier--A   { background: rgba(47,138,91,0.12);  color: var(--sc-tier-a); }
.sc-tier--B   { background: rgba(176,106,28,0.12); color: var(--sc-tier-b); }
.sc-tier--A-B { background: rgba(107,111,156,0.14); color: var(--sc-tier-ab); }

.sc-pn { font-family: var(--ds-font-family-mono); font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); background: var(--surface-color-code-bg); padding: 0 var(--ds-space-1); border-radius: 3px; }

/* ============================================================
   Vue 1 — Arbre
   ============================================================ */
.sc-tree-model { margin-block-end: var(--ds-space-6); }
.sc-tree-model__title { font-size: var(--ds-font-size-lg); margin-block-end: var(--ds-space-3); border-bottom: 1px solid var(--surface-color-rule); padding-block-end: var(--ds-space-2); }
.sc-tree-model__plat { font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-normal); color: var(--surface-color-muted); }
.sc-market { display: inline-block; margin-inline-start: var(--ds-space-2); font-size: 0.65rem; font-weight: var(--ds-font-weight-bold); padding: 0 var(--ds-space-2); border-radius: 3px; vertical-align: middle; letter-spacing: 0.04em; }
.sc-market--eu { background: rgba(43,74,99,0.12); color: var(--surface-color-link); }
.sc-market--us { background: rgba(176,106,28,0.14); color: var(--sc-gated); }
.sc-market--global { background: rgba(47,138,91,0.12); color: var(--sc-extracted); }
.sc-market--euglobal { background: rgba(107,111,156,0.16); color: var(--sc-tier-ab); }
.sc-tree-model__count { display: inline-block; margin-inline-start: var(--ds-space-2); font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); }
.sc-tree-model__count.is-thin { color: var(--sc-low); font-weight: var(--ds-font-weight-semibold); }
.sc-tree-node__left { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; }
.sc-tree-node__thumb { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--ds-radius-base); overflow: hidden; background: var(--surface-color-code-bg); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--surface-color-muted); border: 1px solid var(--surface-color-rule); }
.sc-tree-node__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sc-tree-node__thumb.is-illus { border-style: dashed; border-color: var(--sc-ambiguous); background: #eef1f5; }
.sc-tree-node__thumb.is-illus img { object-fit: contain; padding: 2px; filter: saturate(0.85); }
.sc-tree-node__thumb.is-ph { font-size: 0.9rem; }
.sc-tree-node__illusbadge { font-size: 0.6rem; color: var(--sc-ambiguous); text-transform: uppercase; letter-spacing: 0.03em; margin-inline-start: var(--ds-space-1); }
.sc-tree-node {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-3);
  width: 100%; text-align: start; background: var(--surface-color-bg-card);
  border: 1px solid var(--surface-color-rule); border-radius: var(--ds-radius-base);
  padding: var(--ds-space-3) var(--ds-space-4); margin-block-end: var(--ds-space-2);
  cursor: pointer; font: inherit; color: var(--surface-color-text);
}
.sc-tree-node:hover { border-color: var(--surface-color-link); background: var(--surface-color-code-bg); }
.sc-tree-node--assembly { font-weight: var(--ds-font-weight-semibold); border-inline-start: 3px solid var(--surface-color-link); }
.sc-tree-node:not(.sc-tree-node--assembly) { margin-inline-start: var(--ds-space-6); }
.sc-tree-node__meta { display: flex; align-items: center; gap: var(--ds-space-3); flex-shrink: 0; }
.sc-tree-node__cov { font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); }
.sc-tree-node__img { font-size: var(--ds-font-size-xs); }
.sc-vehicle-thumb { height: 2rem; width: auto; max-width: 4rem; object-fit: cover; border-radius: var(--ds-radius-base); margin-inline-start: var(--ds-space-2); vertical-align: middle; border: 1px solid var(--surface-color-rule); }

/* R6 — images part_image / vehicle_image */
.sc-img { margin: 0; display: inline-block; border: 1px solid var(--surface-color-rule); border-radius: var(--ds-radius-base); overflow: hidden; background: var(--surface-color-code-bg); }
.sc-img__el { display: block; max-width: 160px; max-height: 160px; width: auto; height: auto; }
.sc-img.is-zoom { cursor: zoom-in; }
.sc-img.is-zoom:hover { border-color: var(--surface-color-link); }
.sc-img__cap { font-size: 0.65rem; color: var(--surface-color-muted); padding: 1px var(--ds-space-2); text-align: center; }
.sc-img__full { max-width: 100%; max-height: 50vh; display: block; border-radius: var(--ds-radius-base); }
.sc-img__fullwrap { max-width: 100%; margin-block-end: var(--ds-space-3); }
.sc-img__hl { transition: outline .1s; }   /* rectangle de surlignage (zoom-out) — style dans addImgHighlight */
.sc-img-row { display: flex; gap: var(--ds-space-3); align-items: flex-start; margin-block-end: var(--ds-space-4); }
.sc-img-row__cap { font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); align-self: center; }
.sc-img-blocked { font-size: var(--ds-font-size-xs); color: var(--sc-gated); font-style: italic; }
/* illustrations génériques (≠ provenance) — traitement visuel distinct + ruban */
.sc-gcard__thumb.is-illus { position: relative; background: #eef1f5; }
.sc-gcard__thumb.is-illus img { object-fit: contain; padding: var(--ds-space-2); filter: saturate(0.85); }
.sc-illus-ribbon { position: absolute; top: 6px; left: -2px; background: var(--sc-ambiguous); color: #fff; font-size: 0.6rem; font-weight: var(--ds-font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; padding: 1px var(--ds-space-2); border-radius: 0 3px 3px 0; }
.sc-img--illus { border-style: dashed; border-color: var(--sc-ambiguous); }
.sc-img--illus .sc-img__el { object-fit: contain; max-height: 140px; filter: saturate(0.85); }
.sc-img__illuscap { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-ambiguous); text-align: center; padding: 1px; }
.sc-illus-warn { color: var(--sc-ambiguous); }
.sc-illus-credit { font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); }

/* écran de connexion (prod, 401/403) */
.sc-login-card { max-width: 28rem; margin: var(--ds-space-8) auto; text-align: center; }
.sc-login-card .ds-card__body { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-4); }
.sc-login-btn { font-size: var(--ds-font-size-md); padding: var(--ds-space-3) var(--ds-space-6); }
.sc-login-hint { font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); margin: 0; }
.sc-logout { margin-inline-start: auto; font-size: var(--ds-font-size-sm); color: var(--surface-color-link); text-decoration: none; white-space: nowrap; }
.sc-logout:hover { text-decoration: underline; }

/* ============================================================
   Vue 2 — Détail
   ============================================================ */
.sc-detail-picker { margin-block-end: var(--ds-space-4); }
.sc-detail-picker__label { font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-semibold); color: var(--surface-color-muted); }
.sc-select { font: inherit; padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--surface-color-rule); border-radius: var(--ds-radius-base); background: var(--surface-color-bg-card); }
.sc-detail-card { margin-block-end: var(--ds-space-5); }

.sc-joinkeys__caption { font-size: var(--ds-font-size-sm); color: var(--surface-color-muted); margin-block-end: var(--ds-space-3); }
.sc-joinkeys { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-2) var(--ds-space-4); margin: 0; }
.sc-joinkeys__k { font-weight: var(--ds-font-weight-semibold); color: var(--surface-color-muted); font-size: var(--ds-font-size-sm); }
.sc-joinkeys__v { margin: 0; display: flex; gap: var(--ds-space-2); align-items: baseline; flex-wrap: wrap; }
.sc-joinkeys__v code { font-family: var(--ds-font-family-mono); font-size: var(--ds-font-size-sm); }
.sc-joinkeys__hint { font-size: var(--ds-font-size-xs); color: var(--sc-gated); }

.sc-ftable { width: 100%; border-collapse: collapse; font-size: var(--ds-font-size-sm); }
.sc-ftable th { text-align: start; padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 2px solid var(--surface-color-rule); color: var(--surface-color-muted); font-size: var(--ds-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-ftable td { padding: var(--ds-space-3); border-bottom: 1px solid var(--surface-color-rule); vertical-align: top; }
.sc-frow--not_found { background: rgba(138,147,163,0.05); }
.sc-frow__cat-label { font-weight: var(--ds-font-weight-medium); }
.sc-info { background: none; border: none; cursor: pointer; color: var(--surface-color-link); font-size: var(--ds-font-size-sm); margin-inline-start: var(--ds-space-1); padding: 0; }

.sc-notfound { color: var(--sc-notfound); font-style: italic; }
.sc-notfound__hint { color: var(--surface-color-muted); font-size: var(--ds-font-size-xs); }
.sc-missing { color: var(--sc-missing); }
.sc-ambig { color: var(--sc-ambiguous); font-style: italic; }
.sc-na { color: var(--sc-na); font-style: italic; }
.sc-grounding-mark { font-size: var(--ds-font-size-xs); color: var(--sc-low); cursor: help; white-space: nowrap; }
/* cross_validated / n_sources (v4) */
.sc-xval { font-size: var(--ds-font-size-xs); cursor: help; white-space: nowrap; margin-inline-start: var(--ds-space-2); padding: 0 var(--ds-space-1); border-radius: 3px; }
.sc-xval--yes { color: var(--sc-extracted); background: rgba(47,138,91,0.12); }
.sc-xval--conflict { color: #c0392b; background: rgba(220,38,38,0.10); }
.sc-xval--single { color: var(--surface-color-muted); }
.sc-xval--dir { color: var(--sc-low); background: rgba(196,131,14,0.10); }
.sc-tbl__cvdir { color: var(--sc-low); font-weight: var(--ds-font-weight-bold); }
.sc-cell__cv--dir { color: #fff; }
/* marque coin cross-validé dans une cellule de matrice */
.sc-cell { position: relative; }
.sc-cell__cv { position: absolute; top: 0; right: 1px; font-size: 9px; line-height: 1; color: #fff; }

/* cas conflit (2+ sources divergentes) — le cas UI clé hand-off */
.sc-conflict-badge { display: inline-block; background: rgba(220,38,38,0.12); color: #c0392b; font-weight: var(--ds-font-weight-bold); font-size: 0.65rem; padding: 0 var(--ds-space-2); border-radius: 3px; letter-spacing: 0.03em; }
.sc-conflict-list { list-style: none; margin: var(--ds-space-2) 0 0; padding: 0; border-inline-start: 2px solid rgba(220,38,38,0.4); }
.sc-conflict-item { padding: 1px 0 1px var(--ds-space-3); font-size: var(--ds-font-size-xs); }
.sc-conflict-val { font-weight: var(--ds-font-weight-semibold); color: var(--surface-color-text); }
.sc-conflict-src { color: var(--surface-color-muted); }

.sc-src { display: inline-block; font-size: var(--ds-font-size-xs); padding: 0 var(--ds-space-2); border-radius: 3px; white-space: nowrap; }
.sc-src--public { background: rgba(47,138,91,0.12); color: var(--sc-public); }
.sc-src--gated  { background: rgba(176,106,28,0.12); color: var(--sc-gated); }

.sc-conf { display: inline-block; width: 64px; height: 7px; background: var(--surface-color-rule); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.sc-conf__fill { display: block; height: 100%; }
.sc-conf__fill--extracted { background: var(--sc-extracted); }
.sc-conf__fill--low { background: var(--sc-low); }
.sc-conf__num { font-family: var(--ds-font-family-mono); font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); margin-inline-start: var(--ds-space-2); }

.sc-provchip {
  display: inline-block; margin: 0 var(--ds-space-1) var(--ds-space-1) 0;
  background: var(--surface-color-code-bg); border: 1px solid var(--surface-color-rule);
  border-radius: 3px; padding: 1px var(--ds-space-2); font-size: var(--ds-font-size-xs);
  cursor: pointer; color: var(--surface-color-link); font-family: var(--ds-font-family-mono);
}
.sc-provchip:hover { border-color: var(--surface-color-link); }

/* ============================================================
   Vue 3 — Matrice
   ============================================================ */
.sc-caveat { background: rgba(196,131,14,0.08); border-inline-start: 3px solid var(--sc-low); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-base); font-size: var(--ds-font-size-sm); margin-block-end: var(--ds-space-4); }
.sc-matrix { border-collapse: collapse; font-size: var(--ds-font-size-xs); }
.sc-matrix th, .sc-matrix td { border: 1px solid var(--surface-color-rule); }
.sc-matrix__model { text-align: center; padding: var(--ds-space-2); background: var(--surface-color-code-bg); font-size: var(--ds-font-size-xs); }
.sc-matrix__part { padding: var(--ds-space-1) var(--ds-space-2); text-align: center; color: var(--surface-color-muted); font-weight: var(--ds-font-weight-normal); white-space: nowrap; }
.sc-matrix__part { cursor: help; }
.sc-matrix__part abbr { text-decoration: none; font-family: var(--ds-font-family-mono); border-bottom: 1px dotted var(--surface-color-muted); }
.sc-matrix__feat { text-align: start; padding: var(--ds-space-2) var(--ds-space-3); white-space: nowrap; font-weight: var(--ds-font-weight-normal); cursor: help; }
.sc-matrix__featname { border-bottom: 1px dotted var(--surface-color-muted); }
.sc-tier { cursor: help; }
.sc-abbr-key { margin-block-start: var(--ds-space-3); font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); line-height: var(--ds-line-height-snug); }
.sc-abbr-key strong { color: var(--surface-color-text); }
.sc-matrix__corner { background: var(--surface-color-bg); }
.sc-matrix__compl { padding: var(--ds-space-1) var(--ds-space-2); min-width: 90px; }
.sc-cell { width: 26px; height: 26px; cursor: pointer; }
.sc-cell--extracted { background: var(--sc-extracted); }
.sc-cell--low { background: var(--sc-low); }
.sc-cell--ambiguous { background: var(--sc-ambiguous); opacity: 0.7; }
.sc-cell--not_found { background: var(--sc-notfound); opacity: 0.55; }
.sc-cell--not_applicable { background: var(--sc-na); opacity: 0.35; background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.5) 3px, rgba(255,255,255,0.5) 6px); }
.sc-cell--missing { background: var(--sc-missing); opacity: 0.4; }
.sc-cell:hover { outline: 2px solid var(--surface-color-link); outline-offset: -2px; }

.sc-complbar { display: inline-block; width: 48px; height: 7px; background: var(--surface-color-rule); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.sc-complbar__fill { display: block; height: 100%; background: var(--surface-color-link); }
.sc-complbar__num { font-family: var(--ds-font-family-mono); font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); margin-inline-start: var(--ds-space-2); }

.sc-legend { display: flex; gap: var(--ds-space-4); flex-wrap: wrap; margin-block-start: var(--ds-space-4); font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); }
.sc-legend__item { display: flex; align-items: center; gap: var(--ds-space-2); }
.sc-legend__swatch { width: 14px; height: 14px; cursor: default; }

/* ============================================================
   Vue 3bis — Matrice transposée/groupée/sticky (scale 100-200+ parts)
   ============================================================ */
.sc-mx-toolbar { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; margin-block: var(--ds-space-3); }
.sc-mx-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--surface-color-rule); border-radius: var(--ds-radius-base); }
.sc-mx { border-collapse: separate; border-spacing: 0; font-size: var(--ds-font-size-xs); background: var(--surface-color-bg-card); }
.sc-mx th, .sc-mx td { border-right: 1px solid var(--surface-color-rule); border-bottom: 1px solid var(--surface-color-rule); }
/* header row sticky en haut */
.sc-mx thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-color-bg-card); }
/* colonne pièce sticky à gauche */
.sc-mx__corner { position: sticky; left: 0; top: 0; z-index: 4; background: var(--surface-color-bg); text-align: start; padding: var(--ds-space-2); min-width: 13rem; font-weight: var(--ds-font-weight-semibold); }
.sc-mx__pname { position: sticky; left: 0; z-index: 1; background: var(--surface-color-bg-card); text-align: start; font-weight: var(--ds-font-weight-normal); padding: 2px var(--ds-space-2); min-width: 13rem; max-width: 18rem; cursor: pointer; white-space: nowrap; overflow: hidden; }
.sc-mx__pname.is-assembly { font-weight: var(--ds-font-weight-semibold); }
.sc-mx__pname:hover { color: var(--surface-color-link); }
.sc-mx__pnametext { display: inline-block; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.sc-mx__camico { font-size: 0.7em; }
/* en-têtes de features rotés (compact à n colonnes grand) */
.sc-mx__fcol { height: 9rem; vertical-align: bottom; padding: var(--ds-space-1) 0; text-align: center; white-space: nowrap; }
.sc-mx__frot { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 7.5rem; overflow: hidden; text-overflow: ellipsis; font-weight: var(--ds-font-weight-normal); }
.sc-mx__fcol .sc-tier { display: block; margin: var(--ds-space-1) auto 0; }
.sc-mx__complcol { min-width: 6rem; padding: var(--ds-space-1); }
/* groupes véhicule (collapsible) */
.sc-mx__grouprow th { position: sticky; left: 0; z-index: 1; }
.sc-mx__group { text-align: start; background: var(--surface-color-code-bg); cursor: pointer; padding: var(--ds-space-2) var(--ds-space-3); font-weight: var(--ds-font-weight-semibold); user-select: none; }
.sc-mx__group:hover { background: rgba(43,74,99,0.10); }
.sc-mx__caret { color: var(--surface-color-link); font-weight: var(--ds-font-weight-bold); }
.sc-mx__groupmeta { font-weight: var(--ds-font-weight-normal); color: var(--surface-color-muted); }
.sc-mx__compl { padding: 2px var(--ds-space-2); min-width: 6rem; background: var(--surface-color-bg-card); }
.sc-mx .sc-cell { width: 26px; min-width: 26px; height: 24px; cursor: pointer; }
.sc-mx .sc-cell:hover { outline: 2px solid var(--surface-color-link); outline-offset: -2px; }

/* ============================================================
   Vue Tableau valeurs (Excel-like)
   ============================================================ */
.sc-tbl-toolbar { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); align-items: center; margin-block: var(--ds-space-3); }
.sc-tbl-vf { display: inline-flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; }
.sc-tbl-cols { display: inline-flex; align-items: center; gap: var(--ds-space-1); flex-wrap: wrap; max-width: 100%; }
.sc-select--sm { font-size: var(--ds-font-size-xs); padding: 2px var(--ds-space-2); }
.sc-search--sm { flex: 0 0 8rem; min-width: 6rem; font-size: var(--ds-font-size-xs); padding: 2px var(--ds-space-2); border-radius: var(--ds-radius-base); }
.sc-tbl-wrap { overflow: auto; max-height: 72vh; max-width: 100%; border: 1px solid var(--surface-color-rule); border-radius: var(--ds-radius-base); }
.sc-tbl { border-collapse: separate; border-spacing: 0; font-size: var(--ds-font-size-xs); background: var(--surface-color-bg-card); white-space: nowrap; }
.sc-tbl th, .sc-tbl td { border-right: 1px solid var(--surface-color-rule); border-bottom: 1px solid var(--surface-color-rule); }
.sc-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-color-bg-card); vertical-align: bottom; padding: var(--ds-space-2); text-align: start; cursor: pointer; }
.sc-tbl thead th:hover { background: var(--surface-color-code-bg); }
.sc-tbl__corner { position: sticky; left: 0; top: 0; z-index: 4; background: var(--surface-color-bg); min-width: 11rem; max-width: 12rem; }
.sc-tbl__flabel { display: block; font-weight: var(--ds-font-weight-semibold); }
.sc-tbl__pname { position: sticky; left: 0; z-index: 1; background: var(--surface-color-bg-card); text-align: start; font-weight: var(--ds-font-weight-normal); padding: 4px var(--ds-space-2); min-width: 11rem; max-width: 12rem; cursor: pointer; }
.sc-tbl__pname.is-assembly { font-weight: var(--ds-font-weight-semibold); }
.sc-tbl__pname:hover { color: var(--surface-color-link); }
.sc-tbl__pnametext { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; white-space: nowrap; }
.sc-tbl__pveh { display: block; font-size: 0.65rem; color: var(--surface-color-muted); font-weight: var(--ds-font-weight-normal); }
.sc-tbl__cell { padding: 4px var(--ds-space-2); max-width: 9rem; }
.sc-tbl__val { display: inline-block; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.sc-tbl__confval { display: inline-block; max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.sc-tbl__cell.is-click { cursor: pointer; }
.sc-tbl__cell.is-click:hover { background: var(--surface-color-code-bg); }
.sc-tbl__cell--not_found, .sc-tbl__cell--missing { background: rgba(138,147,163,0.04); }
.sc-tbl__cell--ambiguous { background: rgba(220,38,38,0.05); }
.sc-tbl__val { font-weight: var(--ds-font-weight-medium); }
.sc-tbl__cv { color: var(--sc-extracted); font-weight: var(--ds-font-weight-bold); }
.sc-tbl__confval { font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); }
.sc-tbl__empty { color: var(--sc-missing); }

/* ============================================================
   Vue Sources — bibliographie
   ============================================================ */
.sc-sources-intro { color: var(--surface-color-muted); font-size: var(--ds-font-size-sm); margin-block: var(--ds-space-3) var(--ds-space-4); max-width: 52rem; }
.sc-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--ds-space-4); }
.sc-source { border-inline-start: 3px solid var(--surface-color-rule); }
.sc-source-meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); align-items: center; }
.sc-srclic { font-size: var(--ds-font-size-xs); padding: 0 var(--ds-space-2); border-radius: 3px; }
.sc-srclic--public_clear { background: rgba(47,138,91,0.12); color: var(--sc-extracted); }
.sc-srclic--rmi_licensed { background: rgba(176,106,28,0.12); color: var(--sc-gated); }
.sc-srclic--TO_CONFIRM { background: rgba(196,131,14,0.14); color: var(--sc-low); }
.sc-srclic--owner_cleared_login_gated { background: rgba(43,74,99,0.12); color: var(--surface-color-link); }
.sc-srclic--tos_grey, .sc-srclic--unverified, .sc-srclic--unknown { background: rgba(220,38,38,0.10); color: #c0392b; }
.sc-source-pub { font-size: var(--ds-font-size-sm); color: var(--surface-color-text); margin-block: var(--ds-space-1); }
.sc-source-contrib { font-size: var(--ds-font-size-sm); color: var(--surface-color-muted); margin-block: var(--ds-space-2); }
.sc-source-stat { font-weight: var(--ds-font-weight-semibold); color: var(--surface-color-link); }
.sc-source-note { font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); font-style: italic; margin-block: var(--ds-space-2); }
.sc-source-link { margin-block-start: var(--ds-space-2); }
.sc-sources-foot { font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); margin-block-start: var(--ds-space-5); }

/* ============================================================
   Vue 4 — Export
   ============================================================ */
.sc-export-points { font-size: var(--ds-font-size-sm); margin-block: var(--ds-space-3); padding-inline-start: var(--ds-space-5); }
.sc-export-points li { margin-block-end: var(--ds-space-1); }
.sc-export-btns { display: flex; gap: var(--ds-space-3); margin-block: var(--ds-space-4); flex-wrap: wrap; }
.sc-export-h3 { font-size: var(--ds-font-size-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--surface-color-muted); margin-block: var(--ds-space-5) var(--ds-space-2); }
.sc-json { background: #0f1722; color: #cdd9e5; padding: var(--ds-space-4); border-radius: var(--ds-radius-base); overflow: auto; max-height: 28rem; font-size: var(--ds-font-size-xs); font-family: var(--ds-font-family-mono); line-height: 1.5; }

/* ============================================================
   Modale
   ============================================================ */
#sc-modal { border: none; border-radius: var(--ds-radius-lg); padding: 0; width: min(40rem, 92vw); }
#sc-modal::backdrop { background: rgba(29,36,48,0.45); }
#sc-modal .ds-card__header { display: flex; justify-content: space-between; align-items: center; }
#sc-modal .ds-card__body { max-height: 70vh; overflow-y: auto; }
.sc-kv { display: grid; grid-template-columns: 11rem 1fr; gap: var(--ds-space-2) var(--ds-space-4); padding-block: var(--ds-space-1); font-size: var(--ds-font-size-sm); border-bottom: 1px solid var(--surface-color-rule); }
.sc-kv__k { color: var(--surface-color-muted); font-weight: var(--ds-font-weight-semibold); }
.sc-deeplink { margin-block-start: var(--ds-space-4); }
.sc-modal-note { font-size: var(--ds-font-size-xs); color: var(--surface-color-muted); margin-block-start: var(--ds-space-3); font-style: italic; }