/* AlphaEdge Docs — https://api-docs.alphaedge-ai.com (light) */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("https://api-docs.alphaedge-ai.com/static/api_app/font/Atkinson_Hyperlegible_Next/AtkinsonHyperlegibleNext-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #01123c;
  --color-secondary: #dbe8ff;
  --color-text: #0c0c10;
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --bleu-1: var(--color-primary);
  --bleu-2: var(--color-secondary);
  --bleu-2-bordure: #d8dce2;
  --noir: var(--color-text);
  --gris: var(--color-bg);
  --blanc: var(--color-surface);
  --gris-texte: #6d6d6d;
  --gris-bordure: #e0e0e0;
  --blanc-texte: #ffffff;
  --vert-1: #003333;
  --vert-2: #e7ffde;
  --rouge-1: #c00;
  --rouge-2: #fef2f2;
  --orange-warning: #d97706;
  --orange-accent: #b83400;
  --fs-subtitle-xs: 0.8125rem;
  --fs-subtitle-sm: clamp(1rem, 0.4rem + 0.55vw, 1.5rem);
  --topbar-h: 89px;
  --shell-top: var(--topbar-h);
  --sidebar-w: 280px;
  --sidebar-w-expanded: 280px;
  --sidebar-w-collapsed: 64px;
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", monospace;
  --icon-invert: 0;
  color-scheme: light;
}

html.dark {
  --bleu-1: #dbe8ff;
  --bleu-2: #1a2338;
  --bleu-2-bordure: #343434;
  --noir: #f1f1ed;
  --gris: #111212;
  --blanc: #141414;
  --gris-texte: #a0a0a0;
  --gris-bordure: #343434;
  --gris-separator: #3d3d3d;
  --vert-1: #e7ffde;
  --vert-2: #003333;
  --rouge-1: #fca5a5;
  --rouge-2: #450a0a;
  --icon-invert: 1;
  color-scheme: dark;
}

*, *::before, *::after { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--gris);
  color: var(--noir);
  line-height: 1.55;
  min-height: 100vh;
  font-size: var(--fs-subtitle-xs);
  -webkit-font-smoothing: antialiased;
}

/* ─── Topbar (docs-topbar) ─── */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--gris);
  border-bottom: 1px solid var(--bleu-2-bordure);
  gap: 18px;
  box-sizing: border-box;
}

.topbar-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-svg {
  height: 44px;
  width: auto;
  display: block;
  filter: invert(var(--icon-invert, 0));
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  color: var(--noir);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--bleu-2);
  color: var(--bleu-1);
  border-color: var(--bleu-1);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

.topbar-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  position: fixed;
  left: 50vw;
  transform: translateX(-50%);
  z-index: 11;
}

.top-tab {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.top-tab:hover:not(.disabled) {
  background: var(--bleu-2);
  color: var(--bleu-1);
}

.top-tab.active {
  background: var(--bleu-2);
  color: var(--bleu-1);
  border-color: transparent;
}

.top-tab.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.health-pill {
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  color: var(--gris-texte);
  white-space: nowrap;
}

.health-pill[role="button"] {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.health-pill[role="button"]:hover {
  background: var(--bleu-2);
  border-color: var(--bleu-1);
}

.health-pill[role="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.health-pill.idle {
  color: var(--gris-texte);
  border-color: var(--bleu-2-bordure);
  background: var(--gris);
}

.health-pill.loaded {
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--bleu-2-bordure));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--blanc));
}

.health-pill.warn { color: var(--orange-warning); }

html.dark .health-pill.idle {
  background: color-mix(in srgb, var(--blanc) 6%, var(--gris));
  color: var(--gris-texte);
}

html.dark .health-pill.loaded {
  color: var(--bleu-1);
  border-color: color-mix(in srgb, var(--bleu-1) 45%, var(--bleu-2-bordure));
  background: color-mix(in srgb, var(--bleu-1) 14%, var(--blanc));
}

html.dark .health-pill[role="button"]:hover {
  color: var(--bleu-1);
  background: color-mix(in srgb, var(--bleu-1) 10%, var(--bleu-2));
  border-color: var(--bleu-1);
}

body.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.modal[hidden] {
  display: none !important;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--noir) 48%, transparent);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  padding: 24px;
  box-shadow: 0 16px 48px color-mix(in srgb, var(--noir) 18%, transparent);
}

.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--noir);
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.modal-panel p {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  line-height: 1.55;
  margin-bottom: 10px;
}

.modal-hint {
  color: var(--gris-texte);
  font-size: 0.72rem;
}

.modal-status {
  min-height: 1.2em;
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--orange-warning);
  margin-bottom: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.modal-panel-wide {
  max-width: 640px;
  width: min(96vw, 640px);
}

.modal-panel .btn.is-danger,
#confirm-modal-ok.is-danger {
  background: #b33a3a;
  border-color: #b33a3a;
  color: #fff;
}

.modal-panel .btn.is-danger:hover,
#confirm-modal-ok.is-danger:hover {
  background: #9a2f2f;
  border-color: #9a2f2f;
}

/* ─── Layout ─── */

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

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--gris);
  border-right: 1px solid var(--bleu-2-bordure);
  padding: 20px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  left: 0;
  top: var(--shell-top, var(--topbar-h));
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
}

/* Hors flux sidebar : fixé au bord droit pour ne pas être clipé par overflow */
.sidebar-collapse {
  position: fixed;
  left: var(--sidebar-w);
  top: calc(
    var(--shell-top, var(--topbar-h)) +
      (100vh - var(--shell-top, var(--topbar-h))) / 2
  );
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bleu-2-bordure);
  border-left: none;
  border-radius: 0;
  background: var(--gris);
  color: var(--bleu-1);
  cursor: pointer;
  box-shadow: none;
  transform: translateY(-50%);
  transition:
    left 0.2s ease,
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.sidebar-collapse svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.sidebar-collapse:hover {
  background: var(--bleu-2);
  color: var(--bleu-1);
  border-color: var(--bleu-2-bordure);
}

html.sidebar-collapsed .sidebar-collapse svg,
.sidebar.is-collapsed .sidebar-collapse svg {
  transform: rotate(180deg);
}

html.sidebar-collapsed {
  --sidebar-w: var(--sidebar-w-collapsed);
}

.sidebar.is-collapsed {
  padding-top: 16px;
}

.sidebar.is-collapsed .nav-section-title {
  font-size: 0;
  letter-spacing: 0;
  margin: 8px 10px;
  padding: 0;
  height: 1px;
  overflow: hidden;
  color: transparent;
}

.sidebar.is-collapsed .nav-section-title::after {
  flex: none;
  width: 100%;
}

.sidebar.is-collapsed .side-link {
  justify-content: center;
  gap: 0;
  padding: 12px 0;
  font-size: 0;
  letter-spacing: 0;
  border-left-width: 0;
  border-left-color: transparent;
}

.sidebar.is-collapsed .side-link.active {
  border-left-color: transparent;
  box-shadow: inset 3px 0 0 var(--bleu-1);
}

.sidebar.is-collapsed .side-icon {
  width: 18px;
  height: 18px;
}

.sidebar.is-collapsed .sidebar-ocr-notice {
  display: none !important;
}

.sidebar.is-collapsed .sidebar-footer {
  padding: 12px 8px 16px;
}

.sidebar.is-collapsed .health-pill-sidebar {
  font-size: 0;
  line-height: 0;
  min-height: 36px;
  padding: 8px;
}

.sidebar.is-collapsed .health-pill-sidebar::before {
  content: "●";
  font-size: 0.85rem;
  line-height: 1;
  color: currentColor;
}

.sidebar-footer {
  display: none;
  margin-top: auto;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--bleu-2-bordure);
  background: var(--gris);
}

.sidebar-ocr-notice {
  margin-top: auto;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--orange-warning) 8%, var(--gris));
}

.sidebar-ocr-notice[hidden] {
  display: none !important;
}

.sidebar-ocr-notice-title {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--orange-accent);
}

.sidebar-ocr-notice-text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--gris-texte);
}

html.dark .sidebar-ocr-notice {
  background: color-mix(in srgb, var(--orange-warning) 12%, var(--gris));
}

html.dark .sidebar-ocr-notice-title {
  color: var(--orange-warning);
}

/* Si le bandeau OCR est visible, le footer mobile ne pousse plus tout en bas. */
.sidebar:has(.sidebar-ocr-notice:not([hidden])) .sidebar-footer {
  margin-top: 0;
}

.sidebar-brand {
  display: none;
}

.sidebar-close {
  display: none;
}

.health-pill-sidebar {
  width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1.35;
}

.nav-section { margin-bottom: 8px; }

.nav-section-title {
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--gris-texte);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gris-bordure);
  min-width: 0;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.side-link:hover {
  background: var(--bleu-2);
  color: var(--bleu-1);
}

.side-link.active {
  background: var(--bleu-2);
  color: var(--bleu-1);
  border-left-color: var(--bleu-1);
  font-weight: 600;
}

.side-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}

.side-link.active .side-icon { color: var(--bleu-1); }

/* ─── Content ─── */

.content {
  flex: 1;
  margin-left: var(--sidebar-w);
  padding-top: var(--shell-top, var(--topbar-h));
  background: var(--gris);
  border-left: 1px solid var(--bleu-2-bordure);
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* clip (pas hidden) : conserve sticky des enfants (ex. sommaire docs) */
  overflow-x: clip;
  transition: margin-left 0.2s ease;
}

/* Page WER active : pas de scroll page, liste/détail remplissent le viewport */
html:has(#page-wer.page-view.active),
body:has(#page-wer.page-view.active) {
  height: 100%;
  overflow: hidden;
}

.content:has(#page-wer.page-view.active) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.page-view {
  display: none;
}

.page-view.active {
  display: block;
}

.page-panel-narrow {
  max-width: 560px;
}

.page-panel.panel {
  padding: 20px;
  background: var(--gris);
  border: none;
  box-shadow: none;
}

.page-panel {
  margin: 36px 18px 24px;
  background: var(--gris);
  border: none;
  box-shadow: none;
}

.page-hero {
  padding: 32px 35px 0;
  background: transparent;
  border-bottom: none;
}

.eyebrow {
  text-transform: uppercase;
  font-size: var(--fs-subtitle-xs);
  letter-spacing: 1px;
  color: var(--bleu-1);
  font-weight: 700;
  margin-bottom: 6px;
}

.page-hero h1 {
  font-size: var(--fs-subtitle-sm);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--noir);
  margin-bottom: 10px;
}

.page-hero p {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  line-height: 1.6;
  max-width: 640px;
}

/* ─── Cards (AlphaEdge .card / .card-grid) ─── */

.card-grid,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 28px 18px 12px;
  padding: 20px;
  box-sizing: border-box;
  width: auto;
}

@media (max-width: 960px) {
  .card-grid, .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .card-grid, .stat-grid { grid-template-columns: 1fr; }
}

.stat-card,
.panel,
.dataset-card,
.wer-review-card,
.wer-card {
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  padding: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.panel {
  scroll-margin-top: calc(var(--topbar-h) + 12px);
}

.panel-hint {
  margin-top: -4px;
  margin-bottom: 16px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.mobile-charts-slider {
  display: contents;
}

@media (max-width: 900px) {
  .charts-grid { grid-template-columns: 1fr; }
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--bleu-1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.panel-title {
  font-size: var(--fs-subtitle-sm);
  font-weight: 700;
  color: var(--noir);
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

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

.panel-header .panel-title { margin-bottom: 0; }

.panel-header-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-header-title--with-search {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 420px;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.panel-search-input {
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  font: inherit;
  font-family: var(--mono);
  font-size: var(--fs-subtitle-xs);
  color: var(--noir);
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

.panel-search-input::-webkit-search-decoration,
.panel-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.dataset-filter-select {
  display: none;
}

.panel-search-input::placeholder {
  color: var(--gris-texte);
  opacity: 0.85;
}

.panel-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.panel-header-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-count {
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--gris-texte);
}

.hint {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  margin-bottom: 12px;
  line-height: 1.5;
}

.form-field-status {
  display: block;
  margin-top: 6px;
  margin-bottom: 0;
}

.form-field-status.is-ok {
  color: var(--vert-1, #2d6a4f);
}

.form-field-status.is-error {
  color: #b33a3a;
}

abbr.audio-hours-abbr {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

.stat-value {
  font-size: var(--fs-subtitle-sm);
  font-weight: 700;
  color: var(--noir);
  letter-spacing: -0.3px;
}

.stat-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.stat-cost {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--orange-accent);
  white-space: nowrap;
  letter-spacing: 0;
}

html.dark .stat-cost {
  color: var(--orange-warning);
}

.token-stat-grid .stat-card {
  min-width: 0;
}

.token-kpi-layout {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 14px;
  margin: 28px 18px 12px;
  padding: 20px;
  box-sizing: border-box;
  width: auto;
  align-items: stretch;
}

.token-stat-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  padding: 20px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--blanc);
  isolation: isolate;
}

.token-stat-hero .stat-label {
  margin-top: 0;
  margin-bottom: 0;
}

.token-hero-row {
  align-items: baseline;
  gap: 12px;
  width: 100%;
}

.token-hero-value {
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  font-weight: 800;
  color: var(--noir);
  letter-spacing: 0;
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
}

.token-hero-cost {
  margin-top: 0;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 700;
  color: var(--orange-accent);
  letter-spacing: 0;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

html.dark .token-hero-cost {
  color: var(--orange-warning);
}

.token-kpi-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  min-width: 0;
  align-content: start;
}

@media (max-width: 960px) {
  .token-kpi-layout {
    grid-template-columns: 1fr;
  }

  .token-kpi-secondary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .token-kpi-secondary {
    grid-template-columns: 1fr;
  }
}

.stat-label {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}

/* ─── Filters ─── */

.filter-chips { display: flex; gap: 10px; flex-wrap: wrap; }

.panel-header--datasets {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.datasets-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
  min-width: 0;
}

.datasets-toolbar .datasets-search-input {
  flex: 0 1 280px;
  width: auto;
  min-width: 160px;
  max-width: 320px;
  margin-right: auto;
  padding-top: 6px;
  padding-bottom: 6px;
}

.datasets-toolbar .filter-chips {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  align-items: center;
}

.datasets-toolbar .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  box-sizing: border-box;
}

.datasets-toolbar .wer-filters-toggle {
  flex-shrink: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  box-sizing: border-box;
  line-height: 1.45;
}

.overview-charts-toolbar {
  justify-content: flex-end;
}

.overview-charts-toolbar .wer-filters-toggle {
  margin-left: auto;
}

#page-overview .panel-header--datasets .panel-hint,
#page-overview .panel-header--overview-stats .panel-hint {
  margin: 0;
  flex: 1 1 100%;
}

.panel-header--overview-stats {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.overview-stats-title-row {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.overview-stats-title-row .panel-title {
  margin: 0;
}

.overview-stats-title-row .wer-filters-toggle {
  flex-shrink: 0;
  margin-left: auto;
}

.panel-header--overview-stats .wer-filters-panel {
  width: 100%;
}

.panel-header--datasets .wer-filters-panel {
  width: 100%;
}

.chip {
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  padding: 6px 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chip:hover {
  background: var(--bleu-2);
  color: var(--bleu-1);
}

.chip.active {
  background: var(--bleu-2);
  color: var(--bleu-1);
  border-color: var(--bleu-1);
}

/* ─── Feeds ─── */

.datasets-feed,
.wer-feed,
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.empty-state {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  padding: 24px 0;
  text-align: center;
}

.dataset-card,
.wer-review-card {
  width: 100%;
  box-sizing: border-box;
}

.dataset-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dataset-card-head > .wer-card-menu {
  margin-left: auto;
}

.datasets-feed .dataset-card--with-menu {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px 12px;
}

.datasets-feed .dataset-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.datasets-feed .dataset-card-aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: stretch;
  min-width: 2.5rem;
}

.datasets-feed .dataset-card-wer-corner {
  flex: 0 0 auto;
  margin: 0 0 6px;
  white-space: nowrap;
  line-height: 1.2;
}

.datasets-feed .dataset-card-wer-corner--empty {
  display: block;
  min-height: 1.2em;
  margin-bottom: 6px;
  visibility: hidden;
}

.datasets-feed .dataset-card-menu-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
}

.datasets-feed .dataset-card-menu-wrap .wer-card-menu-list {
  min-width: 200px;
}

.datasets-feed .dataset-card-head > .wer-card-menu {
  display: none;
}

.datasets-feed .dataset-card-head .wer-badge {
  margin-left: auto;
}

.dataset-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: color-mix(in srgb, #e8a317 22%, var(--blanc));
  border: 1px solid color-mix(in srgb, #d4890a 55%, var(--bleu-2-bordure));
  color: var(--noir);
  box-sizing: border-box;
}

.dataset-note-text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-subtitle-xs);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.dataset-note-edit {
  appearance: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, #d4890a 40%, var(--bleu-2-bordure));
  background: color-mix(in srgb, var(--blanc) 85%, #e8a317);
  color: var(--noir);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
}

.dataset-note-edit:hover {
  background: var(--blanc);
}

html.dark .dataset-note {
  background: color-mix(in srgb, #e8a317 18%, var(--noir));
  border-color: color-mix(in srgb, #e8a317 40%, var(--bleu-2-bordure));
}

html.dark .dataset-note-edit {
  background: color-mix(in srgb, #e8a317 12%, var(--noir));
}

.dataset-id {
  font-weight: 700;
  color: var(--noir);
  word-break: break-word;
}

.dataset-meta {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  margin-top: 6px;
}

.dataset-desc {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  margin-top: 8px;
  line-height: 1.5;
}

.dataset-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.dataset-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 10px;
}

.dataset-card-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.datasets-feed .dataset-card:hover {
  border-color: color-mix(in srgb, var(--bleu-1) 30%, var(--bleu-2-bordure));
  box-shadow: 0 10px 24px rgba(1, 18, 60, 0.07);
  transform: translateY(-1px);
  z-index: 1;
}

/* Menu ⋯ ouvert : la carte reste au-dessus des voisines (hover / transform). */
.datasets-feed .dataset-card.is-card-menu-open,
.datasets-feed .dataset-card.is-card-menu-open:hover,
.wer-review-list .wer-review-card.is-card-menu-open,
.wer-review-list .wer-review-card.is-card-menu-open:hover {
  z-index: 50;
}

.datasets-feed .dataset-card.has-wer-report {
  cursor: pointer;
}

.datasets-feed .dataset-card.has-wer-report:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  outline-offset: 2px;
}

.datasets-feed .dataset-card-head .wer-badge {
  margin-left: auto;
  flex-shrink: 0;
}

.dataset-link {
  color: var(--bleu-1);
  font-weight: 600;
  font-size: var(--fs-subtitle-xs);
  text-decoration: none;
}

.dataset-link:hover { text-decoration: underline; }

.tag {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 10px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  color: var(--bleu-1);
}

.tag-muted {
  color: var(--gris-texte);
  background: var(--gris);
}

.tag-ok {
  color: var(--bleu-1);
  background: var(--bleu-2);
  border: 1px solid var(--bleu-2-bordure);
}

.tag-warn {
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fdba74;
}

.wer-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.wer-badge {
  font-size: var(--fs-subtitle-sm);
  font-weight: 700;
  color: var(--bleu-1);
}

.wer-badge.is-failed {
  color: var(--rouge-1);
  font-size: var(--fs-subtitle-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.wer-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
}

.wer-card-stats strong { color: var(--noir); font-weight: 600; }

/* ─── Forms ─── */

.compact-form { gap: 10px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--gris-texte);
}

.form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  box-shadow: none;
  padding: 8px 0 10px;
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  width: 100%;
  transition: border-color 0.2s;
}

.form input:not([type="checkbox"]):not([type="hidden"])::placeholder {
  color: var(--gris-texte);
  opacity: 0.7;
}

.form input:not([type="checkbox"]):not([type="hidden"]):focus {
  outline: none;
  border-bottom-color: var(--bleu-1);
}

.form select,
.form select.form-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  box-shadow: none;
  padding: 8px 28px 10px 0;
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.2s;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris-texte) 50%),
    linear-gradient(135deg, var(--gris-texte) 50%, transparent 50%);
  background-position: calc(100% - 4px) 55%, calc(100% + 1px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form select:hover,
.form select.form-select:hover {
  border-bottom-color: color-mix(in srgb, var(--bleu-1) 55%, var(--bleu-2-bordure));
}

.form select:focus,
.form select.form-select:focus {
  outline: none;
  border-bottom-color: var(--bleu-1);
  background-image: linear-gradient(45deg, transparent 50%, var(--bleu-1) 50%),
    linear-gradient(135deg, var(--bleu-1) 50%, transparent 50%);
}

.form select:disabled,
.form select.form-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

html.dark .form select,
html.dark .form select.form-select {
  color: var(--noir);
  border-bottom-color: var(--bleu-2-bordure);
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.checkbox-row label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--noir);
  font-weight: 500;
}

.manual-panel { padding: 0; border: none; box-shadow: none; background: transparent; margin: 0 18px 14px; }

/* ─── Manuel : onglets & formulaires ─── */

.page-hero-compact {
  margin-bottom: 20px;
}

.page-hero-compact h1 {
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
}

.manual-shell {
  padding: 0;
  overflow: visible;
  position: relative;
}

.manual-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 18px 28px 14px;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid var(--bleu-2-bordure);
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

.manual-tabs.filter-chips {
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - 56px);
  margin: 0 28px;
  padding: 18px 0 14px;
  border-bottom: none;
}

.manual-tabs.filter-chips::after {
  content: none;
}

.manual-tabs .manual-tab,
.manual-tab.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 10px 18px;
  margin: 0;
  border-radius: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gris-texte);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--bleu-1) 12%, var(--bleu-2-bordure));
}

.manual-tabs .manual-tab + .manual-tab,
.manual-tab.chip + .manual-tab.chip {
  margin-left: 0;
}

.manual-tabs .manual-tab:hover:not(:disabled),
.manual-tab.chip:hover {
  z-index: 1;
  background: color-mix(in srgb, var(--bleu-2) 55%, var(--blanc));
  color: var(--bleu-1);
  border-color: transparent;
}

.manual-tabs .manual-tab.active,
.manual-tab.chip.active {
  z-index: 2;
  background: var(--blanc);
  color: var(--bleu-1);
  border-color: var(--bleu-2-bordure);
  box-shadow: inset 0 -2px 0 var(--bleu-1);
}

html.dark .manual-tabs .manual-tab,
html.dark .manual-tab.chip {
  color: var(--gris-texte);
  background: transparent;
  border-color: transparent;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, #dbe8ff 14%, var(--bleu-2-bordure));
}

html.dark .manual-tabs .manual-tab:hover:not(:disabled),
html.dark .manual-tab.chip:hover {
  background: color-mix(in srgb, var(--bleu-2) 70%, var(--blanc));
  color: var(--bleu-1);
}

html.dark .manual-tabs .manual-tab.active,
html.dark .manual-tab.chip.active {
  background: var(--blanc);
  color: var(--bleu-1);
  border-color: var(--gris-bordure);
  box-shadow: inset 0 -2px 0 #dbe8ff;
}

.manual-tab-panel {
  padding: 28px 28px 32px;
  position: relative;
  z-index: 1;
}

.manual-tab-panel[hidden] {
  display: none;
}

.manual-card-head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bleu-2-bordure);
}

.manual-card-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--noir);
}

.manual-card-desc {
  margin: 0;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  line-height: 1.5;
  max-width: 63h;
}

.manual-form {
  gap: 20px;
}

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

.manual-form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pipeline-sample-hint {
  margin: 0.35rem 0 0.75rem;
}

.manual-form-span2 {
  grid-column: 1 / -1;
}

.dataset-combobox {
  position: relative;
  width: 100%;
}

.dataset-combobox-dropdown {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 280px;
  overflow: auto;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--noir) 12%, transparent);
}

.dataset-combobox-list {
  display: flex;
  flex-direction: column;
}

.dataset-combobox-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--noir);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dataset-combobox-option:hover,
.dataset-combobox-option.is-active {
  background: color-mix(in srgb, var(--bleu-2) 55%, var(--blanc));
}

.dataset-combobox-empty {
  padding: 10px 12px;
  color: var(--gris-texte);
  font-size: var(--fs-subtitle-xs);
}

.dataset-combobox-option-meta,
.dataset-combobox-option-wer {
  flex-shrink: 0;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  white-space: nowrap;
}

.dataset-combobox-option-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dataset-combobox-option-wer.is-failed {
  color: var(--rouge, #c0392b);
}

.dataset-combobox-option-wer.has-wer {
  color: var(--bleu-1, #2563eb);
  font-weight: 600;
}

.fusion-sources-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fusion-sources-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fusion-sources-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fusion-source-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)) auto;
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--bleu-2) 25%, var(--blanc));
  align-items: end;
}

.fusion-source-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--gris-texte);
  min-width: 0;
}

.fusion-source-row .btn-remove-source {
  align-self: end;
  margin-bottom: 2px;
}

@media (max-width: 960px) {
  .fusion-source-row {
    grid-template-columns: 1fr 1fr;
  }
  .fusion-source-row .btn-remove-source {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.fusion-steps {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}

.fusion-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  color: var(--gris-texte);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.fusion-step:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fusion-step.is-active {
  border-color: var(--bleu-1, #2a5f8f);
  background: color-mix(in srgb, var(--bleu-2) 40%, var(--blanc));
  color: var(--noir, #111);
}

.fusion-step.is-done .fusion-step-num {
  background: color-mix(in srgb, var(--bleu-1, #2a5f8f) 85%, #000);
  color: #fff;
}

.fusion-step-num {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--bleu-2) 70%, #ccc);
  flex-shrink: 0;
}

.fusion-step-label {
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
}

.fusion-panel-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.fusion-step1-bar {
  margin-bottom: 10px;
}

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

.fusion-selected-count {
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--gris-texte);
}

.fusion-select-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fusion-validated-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(420px, 55vh);
  overflow: auto;
  padding: 2px;
  border: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--bleu-2) 12%, var(--blanc));
}

.fusion-validated-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--bleu-2-bordure) 70%, transparent);
  background: var(--blanc);
}

.fusion-validated-row:last-child {
  border-bottom: none;
}

.fusion-validated-row.is-checked {
  background: color-mix(in srgb, var(--bleu-2) 35%, var(--blanc));
}

.fusion-validated-check {
  padding-top: 2px;
}

.fusion-validated-check input {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
}

.fusion-validated-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fusion-validated-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fusion-validated-row .fusion-ds-id {
  font-weight: 600;
  word-break: break-all;
}

.fusion-validated-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fusion-validated-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.fusion-validated-links .fusion-wer-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fusion-validated-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--gris-texte);
  font-size: var(--fs-subtitle-xs);
}

.fusion-columns-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fusion-column-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--bleu-2) 20%, var(--blanc));
  align-items: end;
}

.fusion-column-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.fusion-column-hint {
  grid-column: 1 / -1;
  margin: 0;
}

.fusion-summary-list {
  margin: 8px 0 0;
  padding-left: 1.2rem;
}

.fusion-column-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: var(--gris-texte);
  min-width: 0;
}

.fusion-column-row .fusion-ds-id {
  font-weight: 700;
  word-break: break-all;
  margin-right: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-subtitle-xs);
  color: var(--noir);
}

.fusion-column-row select,
.fusion-column-row input {
  width: 100%;
}

.fusion-column-row select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  box-shadow: none;
  padding: 8px 28px 10px 0;
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.2s;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris-texte) 50%),
    linear-gradient(135deg, var(--gris-texte) 50%, transparent 50%);
  background-position: calc(100% - 4px) 55%, calc(100% + 1px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.fusion-column-row select:hover {
  border-bottom-color: color-mix(in srgb, var(--bleu-1) 55%, var(--bleu-2-bordure));
}

.fusion-column-row select:focus {
  outline: none;
  border-bottom-color: var(--bleu-1);
  background-image: linear-gradient(45deg, transparent 50%, var(--bleu-1) 50%),
    linear-gradient(135deg, var(--bleu-1) 50%, transparent 50%);
}

.fusion-column-row input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  box-shadow: none;
  padding: 8px 0 10px;
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.2s;
}

.fusion-column-row input:focus {
  outline: none;
  border-bottom-color: var(--bleu-1);
}

.structuration-col-checks {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.structuration-col-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}

.structuration-col-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.structuration-column-card .structuration-preview-slot {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.structuration-preview-wrap {
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
}

.structuration-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--bleu-2) 18%, var(--blanc));
}

.structuration-preview-scroll {
  overflow: auto;
  max-height: min(340px, 42vh);
}

.structuration-preview-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm, 0.85rem);
}

.structuration-preview-table th,
.structuration-preview-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gris-bordure, #ddd);
  border-right: 1px solid color-mix(in srgb, var(--gris-bordure, #ddd) 60%, transparent);
  vertical-align: top;
  text-align: left;
  max-width: 220px;
}

.structuration-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--blanc);
  font-weight: 600;
  white-space: nowrap;
}

.structuration-preview-idx-th,
.structuration-preview-idx {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 3rem;
  text-align: right;
  color: var(--gris-texte);
  font-variant-numeric: tabular-nums;
}

.structuration-preview-th-label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--noir) !important;
  min-width: 0;
}

.structuration-preview-th-label input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  flex: 0 0 auto;
}

.structuration-preview-th {
  cursor: pointer;
  user-select: none;
}

.structuration-preview-th:hover {
  background: color-mix(in srgb, var(--bleu-2) 45%, var(--blanc));
}

.structuration-preview-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.structuration-preview-th.is-dropped,
.structuration-preview-td.is-dropped {
  opacity: 0.35;
  background: color-mix(in srgb, var(--gris) 40%, var(--blanc));
}

.structuration-preview-th.is-kept {
  background: color-mix(in srgb, var(--bleu-2) 28%, var(--blanc));
}

.structuration-preview-th.is-kept .structuration-preview-th-name code {
  color: var(--noir);
}

.structuration-preview-text,
.structuration-preview-json {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.35;
}

.structuration-preview-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--gris-texte);
}

.structuration-preview-audio {
  width: 160px;
  max-width: 100%;
  height: 28px;
}

.structuration-preview-empty {
  color: var(--gris-texte);
}

.structuration-preview-error {
  color: var(--danger, #b91c1c);
  padding: 8px;
}

@media (max-width: 900px) {
  .fusion-column-row {
    grid-template-columns: 1fr 1fr;
  }
  .fusion-steps {
    flex-direction: column;
  }
}

.fusion-step-nav {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.fusion-merge-summary {
  margin-bottom: 12px;
}

.manual-options {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bleu-2) 40%, var(--blanc));
  border: 1px solid var(--bleu-2-bordure);
}

.manual-options-label {
  margin: 0 0 10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-texte);
}

.manual-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

/* ─── Activité (layout 2 colonnes) ─── */

.activity-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin: 36px 18px 24px;
  background: var(--gris);
  border: none;
  box-shadow: none;
}

.activity-layout > .panel {
  margin: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.activity-layout > .activity-jobs-panel {
  position: relative;
}

.activity-layout > .activity-jobs-panel::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  right: 0;
  width: 1px;
  background: color-mix(in srgb, var(--bleu-1) 10%, var(--bleu-2-bordure));
  transform: scaleX(0.5);
  transform-origin: center;
  pointer-events: none;
}

.activity-layout > .activity-detail-panel {
  min-height: 320px;
}

.activity-jobs-panel .jobs-list {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overscroll-behavior: auto;
  padding-right: 4px;
}

.activity-detail-content {
  overflow: auto;
  overscroll-behavior: auto;
  min-height: 200px;
  max-height: calc(100vh - 220px);
}

.activity-running {
  font-size: var(--fs-subtitle-xs);
  color: var(--bleu-1);
  font-weight: 600;
  margin: 0 0 12px;
}

.job-progress-panel {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--bleu-1) 6%, transparent);
  border-radius: 0;
  font-size: var(--fs-subtitle-xs);
  line-height: 1.3;
}

.job-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 4px 12px;
}

.job-prog-cell {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.job-prog-k {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  color: var(--texte-muted, #6b7280);
  font-weight: 700;
  line-height: 1.2;
}

.job-prog-v {
  font-size: var(--fs-subtitle-xs);
  font-weight: 650;
  color: var(--noir, #111);
  word-break: break-word;
  line-height: 1.25;
}

.job-prog-v.warn {
  color: #b45309;
}

.job-prog-v.ok {
  color: #047857;
}

.job-prog-sub {
  font-weight: 500;
  color: var(--texte-muted, #6b7280);
}

.job-prog-steps {
  margin: 6px 0 0;
  padding: 6px 0 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  border-top: 1px solid var(--bleu-2-bordure);
}

.job-prog-steps li {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  align-items: baseline;
}

.job-prog-steps li.current .job-prog-step-label {
  font-weight: 650;
  color: var(--bleu-1);
}

.job-prog-step-label {
  min-width: 0;
  word-break: break-word;
}

.job-prog-step-time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.job-prog-current {
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}

.job-prog-current code {
  font-size: 0.78rem;
  word-break: break-all;
}

.job-prog-last {
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--texte-muted, #6b7280);
  line-height: 1.25;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 960px) {
  .activity-layout {
    grid-template-columns: 1fr;
  }
}

.job-prog-dataset-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.job-elapsed {
  opacity: 0.75;
  font-weight: 500;
}

.activity-error-box {
  border: 1px solid color-mix(in srgb, var(--rouge-1) 35%, var(--bleu-2-bordure));
  background: var(--rouge-2);
  padding: 12px 14px;
  margin-bottom: 14px;
  color: var(--rouge-1);
  font-size: var(--fs-subtitle-xs);
  line-height: 1.45;
}

.activity-error-box strong {
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  font-size: 0.65rem;
}

.activity-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.activity-detail-badge {
  font-size: 0.65rem;
  padding: 4px 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid var(--bleu-2-bordure);
}

.activity-running {
  font-size: var(--fs-subtitle-xs);
  color: var(--bleu-1);
  font-weight: 600;
  margin: 0 0 12px;
}

@media (max-width: 960px) {
  .activity-layout {
    grid-template-columns: 1fr;
  }

  .activity-layout > .activity-jobs-panel::after {
    top: auto;
    bottom: 0;
    left: 20px;
    right: 20px;
    width: auto;
    height: 1px;
  }

  .activity-jobs-panel .jobs-list {
    max-height: 280px;
  }

  .manual-form-grid,
  .manual-form-grid-3 {
    grid-template-columns: 1fr;
  }

  .manual-form-span2 {
    grid-column: auto;
  }

  .manual-tab-panel {
    padding: 18px 16px 22px;
  }
}

/* ─── Charts ─── */

.chart-card {
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  padding: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
  min-width: 0;
  overflow: hidden;
}

html.dark .chart-card {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.chart-title {
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gris-texte);
  margin-bottom: 10px;
}

.chart-card-wide {
  grid-column: 1 / -1;
}

.chart-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 10px;
}

.chart-card-header .chart-title {
  margin-bottom: 0;
}

.chart-duration-filters {
  justify-content: flex-end;
}

.chart-duration-select {
  display: none;
}

.chart-subtitle {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  margin: -6px 0 10px;
  line-height: 1.4;
}

.duration-collection-kpi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--bleu-2);
}

.duration-kpi-label {
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  color: var(--gris-texte);
}

.duration-kpi-slug {
  font-size: var(--fs-subtitle-sm);
  color: var(--bleu-1);
}

.duration-kpi-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--orange-accent);
  letter-spacing: -0.3px;
}

.duration-kpi-meta {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  width: 100%;
}

.chart-wrap-duration {
  height: min(1400px, max(280px, var(--duration-chart-h, 320px)));
}

.chart-wrap-duration canvas {
  max-width: 100%;
}

.chart-wrap {
  position: relative;
  height: 220px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.chart-wrap canvas {
  display: block;
  max-width: 100%;
}

.chart-wrap-sm {
  height: 200px;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--gris-texte);
  font-size: var(--fs-subtitle-xs);
}

.chart-empty-text {
  margin: 0;
  font-weight: 600;
}

/* ─── WER review ─── */

.wer-queue-toolbar-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  align-self: stretch;
  width: auto;
  margin: 12px var(--wer-page-gutter, calc(18px + 20px)) 0;
  min-width: 0;
  box-sizing: border-box;
}

.wer-page-toolbar {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  margin-right: 20px;
  padding: 5px 8px;
  width: 150%;
  max-width: min(100%, 37.5rem);
  flex: 0 1 auto;
  min-width: 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--bleu-2) 35%, var(--blanc));
  border: 1px solid var(--bleu-2-bordure);
}

/* OCR : barre toujours sous le hero (plein largeur contenu) */
#page-ocr-eval > .wer-page-toolbar {
  margin: 12px calc(18px + 20px) 0;
  max-width: none;
  width: auto;
  padding: 12px 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}

#page-wer .page-hero,
#page-ocr .page-hero {
  margin: 0 18px;
  padding: 20px 20px 0;
  box-sizing: border-box;
}

/* Page WER : colonne flex = hauteur disponible dans .content */
#page-wer.page-view.active {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 1 1 0;
  height: 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding-bottom: 10px;
  margin: 0;
}

#page-wer.page-view.active > .page-hero,
#page-wer.page-view.active > .wer-bulk-bar,
#page-wer.page-view.active > .wer-queue-toolbar-row {
  flex: 0 0 auto;
}

#page-wer.page-view.active > .page-hero {
  padding-top: 14px;
}

#page-wer.page-view.active > .page-hero h1 {
  font-size: var(--fs-title, 1.35rem);
  margin: 4px 0 6px;
}

#page-wer.page-view.active > .page-hero p {
  margin: 0;
}

.wer-reports-count {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 24rem;
  font-size: var(--fs-caption, 0.75rem);
  color: var(--gris-texte);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wer-page-toolbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.storage-popover {
  position: relative;
  flex-shrink: 0;
}

.storage-quota-alert {
  position: fixed;
  top: calc(var(--topbar-h, 89px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  width: min(640px, calc(100vw - 24px));
  pointer-events: none;
}

.storage-quota-alert[hidden] {
  display: none !important;
}

.storage-quota-alert-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: #fff4e6;
  border: 1px solid #f0a020;
  box-shadow: 0 10px 28px rgba(180, 90, 10, 0.18);
  color: #8a4b00;
  pointer-events: auto;
  animation: storage-quota-alert-in 0.28s ease-out;
}

.storage-quota-alert.is-demo .storage-quota-alert-inner {
  background: #fff4e6;
  border-color: #f0a020;
  color: #8a4b00;
}

.storage-quota-alert-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.storage-quota-alert-text strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: #c45f00;
}

.storage-quota-alert-text span {
  font-size: 0.84rem;
  line-height: 1.35;
  opacity: 0.95;
}

.storage-quota-alert-dismiss {
  flex-shrink: 0;
  border: 1px solid #e08910;
  background: #ff9f1a;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}

.storage-quota-alert-dismiss:hover {
  background: #e8890a;
}

@keyframes storage-quota-alert-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.dark .storage-quota-alert-inner,
html.dark .storage-quota-alert.is-demo .storage-quota-alert-inner {
  background: #3d2a12;
  border-color: #e08910;
  color: #ffd9a8;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

html.dark .storage-quota-alert-text strong {
  color: #ffb347;
}

html.dark .storage-quota-alert-dismiss {
  background: #e08910;
  border-color: #f0a020;
  color: #1a1005;
}

html.dark .storage-quota-alert-dismiss:hover {
  background: #f0a020;
}

.storage-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  color: var(--gris-texte);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.storage-pill:hover,
.storage-popover.is-open .storage-pill {
  background: var(--bleu-2);
  color: var(--bleu-1);
  border-color: var(--bleu-1);
}

.storage-pill.is-warn {
  color: #c47a1a;
  border-color: color-mix(in srgb, #c47a1a 35%, var(--bleu-2-bordure));
}

.storage-pill.is-crit {
  color: #b33a3a;
  border-color: color-mix(in srgb, #b33a3a 35%, var(--bleu-2-bordure));
}

.storage-pill-track {
  display: block;
  width: 36px;
  height: 6px;
  background: color-mix(in srgb, var(--bleu-2) 70%, var(--blanc));
  border: 1px solid var(--bleu-2-bordure);
  overflow: hidden;
  flex-shrink: 0;
}

.storage-pill-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--bleu-1);
  transition: width 0.35s ease, background-color 0.25s ease;
}

.storage-pill-fill.is-warn { background: #c47a1a; }
.storage-pill-fill.is-crit { background: #b33a3a; }

.storage-pill-text {
  white-space: nowrap;
  min-width: 3.2em;
}

.storage-popover-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(320px, calc(100vw - 24px));
  padding: 14px;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--noir) 12%, transparent);
}

.storage-popover-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.storage-popover-head strong {
  font-size: var(--fs-subtitle-xs);
  color: var(--noir);
}

.storage-popover-sub {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  opacity: 0.9;
}

.storage-meter-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
}

.storage-meter-top strong {
  color: var(--bleu-1);
  font-weight: 650;
  text-align: right;
}

.storage-bar {
  height: 8px;
  border-radius: 0;
  background: color-mix(in srgb, var(--bleu-2) 55%, var(--blanc));
  border: 1px solid var(--bleu-2-bordure);
  overflow: hidden;
}

.storage-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 0;
  background: var(--bleu-1);
  transition: width 0.35s ease, background-color 0.25s ease;
}

.storage-bar-fill.is-samples {
  background: var(--bleu-1);
}

.storage-bar-fill.is-warn {
  background: #c47a1a;
}

.storage-bar-fill.is-crit {
  background: #b33a3a;
}

.storage-breakdown,
.storage-disk-footnote {
  margin: 8px 0 0;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
}

.storage-disk-footnote {
  opacity: 0.85;
}

.storage-popover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.wer-storage-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  max-width: 280px;
  flex: 1 1 180px;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
}

.samples-storage-panel .samples-storage-header {
  align-items: flex-start;
  gap: 12px;
}

.samples-storage-meters {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}

.storage-meter-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
}

.storage-meter-top strong {
  color: var(--bleu-1);
  font-weight: 650;
  text-align: right;
}

.storage-bar {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bleu-2) 55%, var(--blanc));
  border: 1px solid var(--bleu-2-bordure);
  overflow: hidden;
}

.storage-bar-compact {
  flex: 1 1 auto;
  min-width: 80px;
  height: 8px;
}

.storage-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--bleu-1);
  transition: width 0.35s ease, background-color 0.25s ease;
}

.storage-bar-fill.is-samples {
  background: color-mix(in srgb, var(--bleu-1) 70%, #2a9d8f);
}

.storage-bar-fill.is-warn {
  background: #c47a1a;
}

.storage-bar-fill.is-crit {
  background: #b33a3a;
}

.storage-breakdown {
  margin: 8px 0 0;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
}

.wer-review-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 16px 18px 24px;
}

/* ─── WER split : liste (gauche) + détail (droite) ─── */

.wer-review-split {
  display: flex;
  align-items: stretch;
  /* Aligné sur le contenu hero / page-panel (marge 18 + padding 20) */
  --wer-page-gutter: calc(18px + 20px);
  margin: 10px var(--wer-page-gutter) 0;
  gap: 0;
  --wer-split-left-width: 42%;
  --wer-list-row-h: 120px;
  --wer-list-gap: 10px;
  /* Fallback hors layout flex page */
  --wer-split-height: clamp(320px, calc(100dvh - var(--shell-top, 89px) - 220px), 900px);
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  width: auto;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

#page-wer.page-view.active > .wer-review-split {
  flex: 1 1 0;
  align-self: stretch;
  min-height: 0;
  height: 0;
  --wer-split-height: 100%;
}

.wer-review-split.is-distilled-queue {
  --wer-split-left-width: 30%;
}

.wer-review-split.is-distilled-queue .wer-review-split-left {
  min-width: 0;
  max-width: 40%;
  overflow: hidden;
}

.wer-review-split.is-distilled-queue .wer-review-split-right {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

body.wer-split-dragging {
  cursor: col-resize;
  user-select: none;
}

body.wer-split-dragging * {
  cursor: col-resize !important;
}

.wer-review-split-left {
  flex: 0 0 var(--wer-split-left-width);
  min-width: 0;
  max-width: 72%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: var(--wer-split-height);
  max-height: var(--wer-split-height);
  overflow: hidden;
  align-self: stretch;
}

.wer-review-split-handle {
  flex: 0 0 12px;
  position: relative;
  cursor: col-resize;
  touch-action: none;
  z-index: 2;
  align-self: stretch;
}

.wer-review-split-handle::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%) scaleX(0.5);
  background: color-mix(in srgb, var(--bleu-1) 10%, var(--bleu-2-bordure));
  pointer-events: none;
  transition: background 0.15s, width 0.15s;
}

.wer-review-split-handle:hover::before,
.wer-review-split-handle:focus-visible::before,
body.wer-split-dragging .wer-review-split-handle::before {
  width: 2px;
  background: color-mix(in srgb, var(--bleu-1) 28%, var(--bleu-2-bordure));
}

.wer-review-split-handle:focus-visible {
  outline: none;
}

.wer-review-split-right {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: var(--wer-split-height);
  max-height: var(--wer-split-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: stretch;
}

#page-wer.page-view.active .wer-review-split-left,
#page-wer.page-view.active .wer-review-split-right,
#page-wer.page-view.active .wer-review-split .wer-review-columns {
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

.wer-detail-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.wer-detail-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 200px;
}

.wer-detail-empty[hidden] {
  display: none;
}

.wer-detail-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: auto;
}

.wer-detail-body[hidden] {
  display: none;
}

.wer-detail-panel.is-distilled-mode .wer-detail-wer-only {
  display: none !important;
}

.wer-detail-panel.is-distilled-mode .wer-samples-toolbar {
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  flex: 0 0 auto;
}

.wer-detail-panel.is-distilled-mode .wer-samples-section-title {
  margin-right: 0;
}

.wer-detail-panel.is-distilled-mode .wer-samples-count {
  margin-left: auto;
}

.wer-detail-panel.is-distilled-mode .wer-detail-body {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.wer-detail-panel.is-distilled-mode .panel-header {
  flex: 0 0 auto;
  padding-bottom: 8px;
  margin-bottom: 0;
  min-width: 0;
  max-width: 100%;
}

.wer-detail-panel.is-distilled-mode .panel-header .panel-title {
  font-size: var(--fs-subtitle);
  line-height: 1.25;
  word-break: break-all;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.wer-detail-panel.is-distilled-mode .wer-detail-meta {
  flex: 0 0 auto;
  gap: 8px 12px;
  margin-bottom: 8px;
  max-height: 4.5em;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.wer-detail-panel.is-distilled-mode .wer-samples-section {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

.wer-detail-panel.is-distilled-mode .wer-samples-shell {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wer-detail-panel.is-distilled-mode .wer-samples-list {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  max-height: none !important;
  overflow: hidden;
}

.wer-detail-panel.is-distilled-mode #wer-samples-expand-bar {
  display: none !important;
}

.wer-review-split .wer-review-columns {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: var(--wer-split-height);
  max-height: var(--wer-split-height);
  margin: 0;
  grid-template-columns: unset;
}

.wer-review-split .wer-review-queue-panel {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.wer-review-split .wer-review-queue-panel.is-active {
  display: flex;
}

.wer-review-split .wer-review-columns > .wer-review-queue-panel[data-wer-queue="pending"],
.wer-review-split .wer-review-columns > .wer-review-queue-panel[data-wer-queue="validated"],
.wer-review-split .wer-review-columns > .wer-review-queue-panel[data-wer-queue="structured"],
.wer-review-split .wer-review-columns > .wer-review-queue-panel[data-wer-queue="distilled"],
.wer-review-split .wer-review-columns > .wer-review-queue-panel[data-wer-queue="invalidated"] {
  padding-left: 0;
  padding-right: 0;
}

.wer-review-split .wer-review-columns > .wer-review-queue-panel[data-wer-queue="pending"]::after {
  display: none;
}

.wer-review-split .wer-review-queue-panel > .panel-header > .panel-title {
  display: none;
}

.wer-review-split .wer-review-list {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  height: 100%;
}

#page-wer {
  --wer-page-gutter: calc(18px + 20px);
  overflow-x: clip;
  max-width: 100%;
}

#page-wer .wer-queue-toolbar-row > .wer-review-queue-switch,
.wer-queue-toolbar-row > .wer-review-queue-switch,
.wer-review-queue-switch {
  display: inline-flex;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  overflow: hidden;
  flex: 0 0 auto;
  flex-shrink: 0;
  box-sizing: border-box;
}

.wer-review-queue-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--gris-texte);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.badge-distilled {
  background: color-mix(in srgb, var(--bleu-1) 18%, var(--blanc));
  color: var(--bleu-1);
  border: 1px solid color-mix(in srgb, var(--bleu-1) 35%, transparent);
}

html.dark .badge-distilled {
  background: color-mix(in srgb, var(--bleu-2) 22%, var(--noir));
  color: var(--bleu-2);
}

.tag-distilled {
  color: #9a6700;
  background: #fff8e1;
  border-color: #e6c200;
}

html.dark .tag-distilled {
  color: #f5d76e;
  background: color-mix(in srgb, #9a6700 22%, var(--noir));
  border-color: color-mix(in srgb, #e6c200 45%, var(--gris-bordure));
}

.tag-structured {
  color: #0b6e4f;
  background: #e6f6ef;
  border-color: color-mix(in srgb, #0b6e4f 35%, transparent);
}

html.dark .tag-structured {
  color: #6ddea8;
  background: color-mix(in srgb, #0b6e4f 22%, var(--noir));
  border-color: color-mix(in srgb, #6ddea8 40%, var(--gris-bordure));
}

.wer-review-queue-btn + .wer-review-queue-btn {
  border-left: 1px solid var(--bleu-2-bordure);
}

.wer-review-queue-btn:hover:not(.active) {
  color: var(--bleu-1);
  background: var(--bleu-2);
}

.wer-review-queue-btn.active {
  color: var(--blanc-texte);
  background: var(--bleu-1);
}

html.dark .wer-review-queue-switch {
  border-color: var(--gris-bordure);
}

html.dark .wer-review-queue-btn.active {
  color: var(--bleu-2);
  background: var(--bleu-1);
}

#page-wer.is-wer-invalidated-view .wer-queue-toolbar-row > .wer-review-queue-switch,
#page-wer.is-wer-invalidated-view > .wer-review-queue-switch,
.wer-review-split.is-invalidated-view .wer-review-queue-switch {
  display: none;
}

.wer-review-split.is-invalidated-view .wer-review-queue-panel[data-wer-queue="pending"],
.wer-review-split.is-invalidated-view .wer-review-queue-panel[data-wer-queue="validated"] {
  display: none !important;
}

.wer-review-split.is-invalidated-view .wer-review-queue-panel[data-wer-queue="invalidated"] {
  display: flex !important;
}

.wer-review-split:not(.is-invalidated-view) .wer-review-queue-panel[data-wer-queue="invalidated"] {
  display: none !important;
}

.wer-review-split.is-invalidated-view .wer-review-queue-panel[data-wer-queue="invalidated"] > .panel-header > .panel-title {
  display: block;
}

.wer-review-columns > .wer-review-queue-panel {
  margin: 0;
}

.wer-review-columns > .wer-review-queue-panel[data-wer-queue="pending"],
.wer-review-columns > .wer-review-queue-panel[data-ocr-queue="pending"] {
  position: relative;
  padding-right: 18px;
}

.wer-review-columns > .wer-review-queue-panel[data-wer-queue="validated"],
.wer-review-columns > .wer-review-queue-panel[data-ocr-queue="validated"],
.wer-review-columns > .wer-review-queue-panel[data-wer-queue="structured"],
.wer-review-columns > .wer-review-queue-panel[data-wer-queue="distilled"],
.wer-review-columns > .wer-review-queue-panel[data-wer-queue="invalidated"] {
  padding-left: 18px;
}

.wer-review-columns > .wer-review-queue-panel[data-wer-queue="pending"]::after,
.wer-review-columns > .wer-review-queue-panel[data-ocr-queue="pending"]::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 0;
  width: 1px;
  transform: scaleX(0.5);
  transform-origin: center right;
  background: color-mix(in srgb, var(--bleu-1) 8%, var(--bleu-2-bordure));
  opacity: 0.7;
  pointer-events: none;
}

.wer-review-list-stack,
.wer-review-list-stack .wer-review-card {
  flex-shrink: 0;
}

.wer-review-mobile-switch {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.manual-tab-select {
  display: none;
}

.wer-review-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px 10px;
  width: 100%;
  min-width: 0;
}

.wer-review-toolbar .wer-filters-toggle--icon {
  margin-left: 0;
  flex-shrink: 0;
  align-self: auto;
}

.wer-review-filter--filters-toggle {
  flex: 0 0 auto;
  margin-left: auto;
}

.wer-review-filter--filters-toggle .wer-filters-toggle--icon {
  width: 100%;
  min-width: 36px;
  height: auto;
  min-height: 0;
  padding: 6px 10px;
  border-color: var(--bleu-2-bordure);
  box-sizing: border-box;
}

.wer-filters-toggle--icon {
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.wer-filters-toggle-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.wer-filters-toggle-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--bleu-1);
  color: var(--blanc-texte);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--blanc);
}

.wer-review-toolbar-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

.wer-review-filter-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.wer-lang-config-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--gris-texte);
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}

.wer-lang-config-btn:hover,
.wer-lang-config-btn:focus-visible {
  opacity: 1;
  color: var(--bleu-1);
  outline: none;
}

.wer-lang-config-btn svg {
  display: block;
}

.wer-review-filter-count {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--gris-texte);
  text-transform: none;
  white-space: nowrap;
}

.wer-review-filter-count:empty {
  display: none;
}

.wer-review-filter-label-spacer {
  display: block;
  line-height: 1;
  height: 1em;
}

.wer-filters-toggle.is-active {
  border-color: var(--bleu-1);
  background: color-mix(in srgb, var(--bleu-1) 10%, var(--blanc));
  color: var(--bleu-1);
}

html.dark .btn.wer-filters-toggle.is-active,
html.dark .wer-filters-toggle.is-active {
  border-color: #dbe8ff;
  background: color-mix(in srgb, #dbe8ff 16%, var(--blanc));
  color: #dbe8ff;
}

html.dark .wer-filters-toggle-count {
  background: #dbe8ff;
  color: #01123c;
  box-shadow: 0 0 0 2px var(--blanc);
}

.wer-filters-panel {
  width: 100%;
  padding: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-secondary) 35%, var(--blanc)) 0%,
      var(--blanc) 48px
    );
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    transform 0.22s ease,
    border-color 0.2s ease;
}

.wer-filters-panel.is-open {
  max-height: 760px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border-color: var(--bleu-2-bordure);
}

html.dark .wer-filters-panel {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #1a2338 70%, var(--blanc)) 0%,
      var(--blanc) 52px
    );
}

html.dark .wer-filters-card {
  background: color-mix(in srgb, var(--blanc) 88%, #000);
  border-color: var(--gris-bordure);
}

html.dark .wer-filters-lang-chip span {
  background: var(--blanc);
  border-color: var(--gris-bordure);
  color: var(--noir);
}

html.dark .wer-filters-lang-chip:hover span {
  border-color: color-mix(in srgb, var(--bleu-1) 45%, var(--gris-bordure));
  background: color-mix(in srgb, var(--bleu-1) 10%, var(--blanc));
}

html.dark .wer-filters-lang-chip input:checked + span {
  border-color: var(--bleu-1);
  background: color-mix(in srgb, var(--bleu-1) 16%, var(--blanc));
  color: var(--bleu-1);
}

html.dark .wer-filters-check {
  background: var(--blanc);
  border-color: var(--gris-bordure);
  color: var(--noir);
}

html.dark .wer-filters-check:hover {
  background: color-mix(in srgb, var(--bleu-1) 8%, var(--blanc));
}

html.dark .wer-filters-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--bleu-1) 50%, var(--gris-bordure));
  background: color-mix(in srgb, var(--bleu-1) 12%, var(--blanc));
}

.wer-filters-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--bleu-2-bordure);
}

.wer-filters-panel-head strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--noir);
  letter-spacing: -0.01em;
}

.wer-filters-panel-head .wer-filters-hint {
  margin: 4px 0 0;
}

.wer-filters-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 16px 16px;
}

.wer-filters-section {
  min-width: 0;
}

.wer-filters-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gris-texte);
}

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

.wer-filters-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: var(--gris);
  border: 1px solid var(--bleu-2-bordure);
}

.wer-filters-card--sort {
  justify-content: flex-start;
}

.wer-filters-card .wer-filters-section-title {
  margin-bottom: 0;
}

.wer-filters-card .wer-review-select {
  width: 100%;
  min-width: 0;
  background-color: var(--blanc);
}

.wer-filters-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 112px;
  overflow-y: auto;
  padding: 2px;
}

.wer-filters-lang-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.wer-filters-lang-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wer-filters-lang-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  color: var(--noir);
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wer-filters-lang-chip:hover span {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--bleu-2-bordure));
  background: color-mix(in srgb, var(--color-primary) 6%, var(--blanc));
}

.wer-filters-lang-chip input:checked + span {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--blanc));
  color: var(--color-primary);
}

html.dark .wer-filters-lang-chip input:checked + span {
  border-color: var(--bleu-1);
  background: color-mix(in srgb, var(--bleu-1) 14%, var(--blanc));
  color: var(--bleu-1);
}

.wer-filters-lang-chip input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  outline-offset: 1px;
}

.wer-filters-hint {
  margin: 0;
  font-size: 0.7rem;
  color: var(--gris-texte);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

.wer-filters-range {
  display: none;
}

.wer-filters-card--range {
  justify-content: flex-start;
}

.dual-range {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dual-range-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

html.dark .dual-range-title {
  color: var(--bleu-1);
}

.dual-range-values {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-subtitle-xs);
  font-weight: 500;
  color: var(--noir);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.dual-range-values-sep {
  color: var(--gris-texte);
  flex-shrink: 0;
}

.dual-range-value-input {
  width: 100%;
  min-width: 0;
  max-width: 9.5rem;
  padding: 5px 8px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--mono);
  font-size: var(--fs-subtitle-xs);
  font-weight: 500;
}

.dual-range-value-input:focus {
  outline: none;
  border-color: var(--bleu-1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

html.dark .dual-range-value-input {
  background: var(--gris);
  border-color: var(--gris-bordure);
  color: var(--noir);
}

html.dark .dual-range-value-input:focus {
  border-color: var(--bleu-1);
  box-shadow: 0 0 0 2px color-mix(in srgb, #dbe8ff 18%, transparent);
  background: var(--blanc);
}

.dual-range-control {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.dual-range-rail {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bleu-2-bordure) 70%, var(--blanc));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
}

html.dark .dual-range-rail {
  background: #2c2c2c;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dual-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

html.dark .dual-range-fill {
  background: #dbe8ff;
  box-shadow: 0 2px 8px rgba(219, 232, 255, 0.22);
}

.dual-range-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  height: 28px;
}

.dual-range-thumb::-webkit-slider-runnable-track {
  height: 10px;
  background: transparent;
  border: none;
}

.dual-range-thumb::-moz-range-track {
  height: 10px;
  background: transparent;
  border: none;
}

.dual-range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--blanc);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 30%, transparent);
  cursor: pointer;
}

.dual-range-thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--blanc);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 30%, transparent);
  cursor: pointer;
}

html.dark .dual-range-thumb::-webkit-slider-thumb,
html.dark .dual-range-thumb::-moz-range-thumb {
  background: #dbe8ff;
  border-color: #141414;
  box-shadow:
    0 0 0 1px rgba(219, 232, 255, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.45);
}

.dual-range-thumb--min {
  z-index: 2;
}

.dual-range-thumb--max {
  z-index: 3;
}

.dual-range-thumb:focus-visible::-webkit-slider-thumb {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  outline-offset: 1px;
}

.dual-range-thumb:focus-visible::-moz-range-thumb {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  outline-offset: 1px;
}

html.dark .dual-range-thumb:focus-visible::-webkit-slider-thumb,
html.dark .dual-range-thumb:focus-visible::-moz-range-thumb {
  outline-color: color-mix(in srgb, #dbe8ff 55%, transparent);
}

.wer-filters-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--mono);
  font-size: var(--fs-subtitle-xs);
}

.wer-filters-input:focus {
  outline: none;
  border-color: var(--bleu-1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.wer-filters-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wer-filters-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  font-size: var(--fs-subtitle-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--noir);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.wer-filters-check:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--blanc));
}

.wer-filters-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--bleu-2-bordure));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--blanc));
}

.wer-filters-check input {
  accent-color: var(--color-primary);
}

.datasets-speech-type-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.speech-type-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  overflow: hidden;
}

.speech-type-toggle.is-disabled {
  opacity: 0.45;
}

.speech-type-toggle-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--gris-texte);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.speech-type-toggle-btn + .speech-type-toggle-btn {
  border-left: 1px solid var(--bleu-2-bordure);
}

.speech-type-toggle-btn:hover:not(:disabled) {
  color: var(--bleu-1);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--blanc));
}

.speech-type-toggle-btn.is-active {
  color: var(--bleu-1);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--blanc));
}

.speech-type-toggle-btn:disabled {
  cursor: not-allowed;
}

html.dark .speech-type-toggle {
  background: var(--blanc);
  border-color: var(--gris-bordure);
}

html.dark .speech-type-toggle-btn.is-active {
  color: var(--bleu-1);
  background: color-mix(in srgb, var(--bleu-1) 12%, var(--blanc));
}

.wer-filters-actions {
  display: none;
}

@media (max-width: 900px) {
  .wer-filters-metrics {
    grid-template-columns: 1fr;
  }
}

.wer-review-filter--search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.wer-review-toolbar .wer-review-filter:not(.wer-review-filter--search) {
  flex: 0 1 auto;
  min-width: 0;
}

.wer-review-toolbar .wer-review-select {
  min-width: 0;
  width: 100%;
  max-width: 132px;
}

.wer-review-search {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
}

.wer-review-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.wer-review-select {
  min-width: 148px;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 6px 28px 6px 8px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris-texte) 50%),
    linear-gradient(135deg, var(--gris-texte) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.wer-review-select:focus {
  outline: none;
  border-color: var(--bleu-1);
}

@media (max-width: 900px) {
  .wer-review-columns { grid-template-columns: 1fr; }
  .wer-review-featured-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
    scrollbar-gutter: stable;
  }
  .wer-review-featured-grid .wer-review-card--featured {
    flex: 0 0 min(42vw, 168px);
    min-width: min(42vw, 168px);
  }
}

.wer-review-list-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.wer-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 80px;
  --list-row-h: 120px;
  max-height: calc(3.5 * var(--list-row-h) + 3 * 10px);
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-gutter: stable;
  padding-right: 2px;
}

.datasets-feed {
  --list-row-h: 168px;
  max-height: calc(4 * var(--list-row-h) + 3 * 10px);
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-gutter: stable;
  padding-right: 2px;
}

.datasets-feed .dataset-card,
.wer-review-list .wer-review-card {
  flex-shrink: 0;
  position: relative;
  z-index: 0;
}

.wer-review-list::-webkit-scrollbar,
.datasets-feed::-webkit-scrollbar {
  width: 8px;
}

.wer-review-list::-webkit-scrollbar-thumb,
.datasets-feed::-webkit-scrollbar-thumb {
  background: var(--bleu-2-bordure);
  border-radius: 4px;
}

.wer-review-list::-webkit-scrollbar-thumb:hover,
.datasets-feed::-webkit-scrollbar-thumb:hover {
  background: var(--gris-texte);
}

.wer-review-card {
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.wer-review-card:hover:not(.selected) {
  background: color-mix(in srgb, var(--bleu-2) 55%, var(--blanc));
  border-color: color-mix(in srgb, var(--bleu-1) 22%, var(--bleu-2-bordure));
  box-shadow: 0 4px 14px rgba(1, 18, 60, 0.06);
}

.wer-review-card.selected {
  border-color: var(--bleu-1);
  background: var(--bleu-2);
}

.wer-review-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.wer-review-card-head strong {
  font-size: var(--fs-subtitle-xs);
  color: var(--noir);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wer-review-card-meta {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  margin-top: 6px;
}

.wer-review-card-note {
  margin-top: 8px;
  font-size: var(--fs-subtitle-xs);
  color: var(--noir);
  line-height: 1.4;
}

.wer-review-panel {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--bleu-2);
}

.wer-review-panel-head {
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--noir);
}

.wer-review-panel ul.wer-review-list {
  margin: 8px 0 0 18px;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
}

.wer-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
}

.wer-detail-meta strong { color: var(--noir); }

.wer-samples-section {
  margin-top: 4px;
}

.wer-samples-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.wer-samples-toolbar-wer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.wer-samples-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.wer-samples-count {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  font-weight: 600;
  margin-left: auto;
  align-self: center;
}

.wer-samples-shell {
  position: relative;
}

.wer-samples-shell[data-collapsed="true"] .wer-samples-list {
  max-height: calc(4 * 220px + 3 * 14px);
  overflow: hidden;
}

.wer-samples-shell[data-collapsed="false"] .wer-samples-list {
  max-height: none;
  overflow: visible;
}

.wer-samples-section-title {
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  color: var(--noir);
  margin-right: auto;
}

.wer-detail-panel.is-distilled-mode .wer-samples-list {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: hidden;
}

.distilled-preview-wrap {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  contain: inline-size;
}

.distilled-preview-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.distilled-preview-toolbar {
  display: none;
}

.distilled-preview-scroll-btn {
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 30px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--bleu-2-bordure) 55%, transparent);
  background: color-mix(in srgb, var(--blanc) 72%, transparent);
  color: var(--noir);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.48;
  backdrop-filter: blur(2px);
  transition: opacity 0.15s, background 0.15s;
}

.distilled-preview-scroll-btn[data-distilled-scroll="left"] {
  left: 6px;
}

.distilled-preview-scroll-btn[data-distilled-scroll="right"] {
  right: 6px;
}

.distilled-preview-stage:hover .distilled-preview-scroll-btn:not(:disabled),
.distilled-preview-scroll-btn:focus-visible {
  opacity: 0.88;
}

.distilled-preview-scroll-btn:hover:not(:disabled) {
  opacity: 1;
  background: color-mix(in srgb, var(--blanc) 88%, transparent);
}

.distilled-preview-scroll-btn:disabled {
  opacity: 0.18;
  cursor: default;
}

.distilled-preview-wrap:not(.has-h-scroll) .distilled-preview-scroll-btn {
  visibility: hidden;
  pointer-events: none;
}

.distilled-preview-scroll {
  overflow-x: auto;
  overflow-y: auto;
  cursor: grab;
  border: 1px solid var(--gris-bordure);
  background: var(--blanc);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

.distilled-preview-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.distilled-preview-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  border: none;
  border-top: 1px solid var(--gris-bordure);
  background: color-mix(in srgb, var(--blanc) 90%, var(--gris));
  flex: 0 0 auto;
  min-height: 0;
}

.distilled-preview-more .btn {
  padding: 2px 10px;
  min-height: 0;
  line-height: 1.2;
  font-size: var(--fs-caption, 0.75rem);
}

.distilled-preview-table {
  /* largeur naturelle des colonnes ; le scroll H reste dans .distilled-preview-scroll */
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  border-radius: 0;
  background: var(--blanc);
}

.distilled-preview-table th,
.distilled-preview-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gris-bordure);
  vertical-align: top;
  text-align: left;
  background: var(--blanc);
}

.distilled-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--blanc);
  font-weight: 700;
  font-size: var(--fs-caption);
  text-transform: lowercase;
  color: var(--gris-texte);
  white-space: nowrap;
}

.distilled-preview-table tbody tr:last-child td {
  border-bottom: none;
}

.distilled-preview-row {
  cursor: pointer;
}

.distilled-preview-table tbody tr:hover td,
.distilled-preview-row:hover td {
  background: color-mix(in srgb, var(--gris) 70%, var(--blanc));
}

.distilled-preview-row.is-expanded td {
  background: color-mix(in srgb, var(--gris) 55%, var(--blanc));
}

.distilled-preview-idx {
  width: 2.5rem;
  color: var(--gris-texte);
  font-variant-numeric: tabular-nums;
}

.distilled-preview-audio-cell {
  width: 180px;
  min-width: 160px;
}

.distilled-preview-audio {
  width: 168px;
  max-width: 168px;
  min-width: 0;
  height: 32px;
}

.distilled-preview-text {
  max-width: 240px;
  min-width: 140px;
}

.distilled-preview-text-inner {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  word-break: break-word;
}

.distilled-preview-row.is-expanded .distilled-preview-text {
  max-width: none;
}

.distilled-preview-row.is-expanded .distilled-preview-text-inner {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: pre-wrap;
}

.wer-samples-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wer-samples-list-expand-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 56px;
  padding: 0 8px 10px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--gris) 0%, transparent) 0%,
    color-mix(in srgb, var(--gris) 88%, transparent) 42%,
    var(--gris) 78%
  );
  pointer-events: none;
}

.wer-samples-list-expand-bar.is-expanded {
  position: static;
  min-height: 0;
  padding: 4px 0 0;
  background: none;
  pointer-events: auto;
}

.wer-samples-list-expand-bar[hidden] {
  display: none !important;
}

.wer-samples-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bleu-2-bordure);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--bleu-1);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(1, 18, 60, 0.08);
}

.wer-samples-expand-btn:hover {
  border-color: var(--bleu-1);
  background: color-mix(in srgb, var(--bleu-2) 40%, var(--blanc));
}

.wer-samples-expand-icon {
  font-size: 0.72rem;
  line-height: 1;
}

.wer-sample-card {
  border: 1px solid var(--bleu-2-bordure);
  padding: 14px;
  background: var(--gris);
}

.wer-sample-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  color: var(--noir);
}

.wer-sample-audio {
  width: 100%;
  margin-bottom: 12px;
}

.wer-transcript-block {
  margin-bottom: 8px;
}

.wer-transcript-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gris-texte);
  margin-bottom: 4px;
}

.wer-transcript-box {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
}

.wer-transcript-box.hypothesis {
  border-left: 3px solid var(--bleu-1);
}

.wer-transcript-box.normalized {
  border-left: 3px solid var(--vert-1);
  background: color-mix(in srgb, var(--vert-2) 35%, var(--blanc));
}

.wer-transcript-box.normalized.hypothesis {
  border-left-color: var(--bleu-1);
  background: color-mix(in srgb, var(--bleu-2) 40%, var(--blanc));
}

html.dark .wer-transcript-box.normalized {
  background: color-mix(in srgb, var(--vert-1) 8%, var(--gris));
}

html.dark .wer-transcript-box.normalized.hypothesis {
  background: color-mix(in srgb, var(--bleu-1) 8%, var(--gris));
}

.wer-transcript-text {
  font-size: var(--fs-subtitle-xs);
  line-height: 1.55;
  color: var(--noir);
  padding: 10px 12px 12px;
  background: transparent;
  border: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.wer-transcript-text.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 12;
  overflow: hidden;
  max-height: 18.6em;
  padding-bottom: 36px;
}

.wer-transcript-expand-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 52px;
  padding: 0 8px 8px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--blanc) 0%, transparent) 0%,
    color-mix(in srgb, var(--blanc) 88%, transparent) 42%,
    var(--blanc) 78%
  );
  pointer-events: none;
}

.wer-transcript-expand-bar.is-expanded {
  position: static;
  min-height: 0;
  padding: 2px 8px 8px;
  background: none;
  pointer-events: auto;
}

.wer-transcript-expand-bar.is-hidden {
  display: none;
}

.wer-transcript-collapsible.is-static .wer-transcript-text {
  padding-bottom: 12px;
}

.wer-transcript-toggle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--bleu-1);
  cursor: pointer;
  transition: color 0.15s;
}

.wer-transcript-toggle:hover {
  color: var(--noir);
}

.wer-transcript-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.wer-transcript-collapsible[data-collapsed="false"] .wer-transcript-chevron {
  transform: rotate(180deg);
}

.wer-word-diff {
  background: color-mix(in srgb, var(--orange-warning) 22%, transparent);
  border-bottom: 2px solid var(--orange-warning);
  border-radius: 2px;
  cursor: help;
  padding: 0 1px;
}

html.dark .wer-word-diff {
  background: color-mix(in srgb, var(--orange-warning) 28%, transparent);
}

.wer-word-tooltip-float {
  position: fixed;
  z-index: 9999;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px 10px;
  border: 1px solid var(--bleu-2-bordure);
  border-radius: 6px;
  background: var(--blanc);
  color: var(--noir);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--noir) 18%, transparent);
  font-size: 0.75rem;
  line-height: 1.35;
  pointer-events: none;
  transform: translate(-50%, 0);
}

.wer-word-tooltip-float[hidden] {
  display: none !important;
}

.wer-word-tooltip-row {
  display: block;
}

.wer-word-tooltip-row + .wer-word-tooltip-row {
  margin-top: 4px;
}

.wer-transcript-text.hypothesis {
  border-left: none;
}

.tag-validated {
  color: var(--vert-1);
  background: var(--vert-2);
}

.tag-pending {
  color: var(--orange-warning);
  background: var(--blanc);
}

/* ─── Forms ─── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  color: var(--noir);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, filter 0.2s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--bleu-1);
  color: var(--blanc-texte);
  border-color: var(--bleu-1);
}

.btn-primary:hover {
  filter: brightness(0.95);
}

.btn-warning {
  background: #fff4e6;
  color: #c45f00;
  border-color: #f0a020;
}

.btn-warning:hover {
  background: #ffe8cc;
  color: #8a4b00;
  border-color: #e08910;
  filter: none;
}

html.dark .btn-warning {
  background: #3d2a12;
  color: #ffb347;
  border-color: #e08910;
}

html.dark .btn-warning:hover {
  background: #4a3418;
  color: #ffd9a8;
  border-color: #f0a020;
  filter: none;
}

.wer-card-invalidate-btn,
.dataset-card-invalidate-btn {
  background: #fff4e6;
  color: #c45f00;
  border-color: #f0a020;
}

.wer-card-invalidate-btn:hover,
.dataset-card-invalidate-btn:hover {
  background: #ffe8cc;
  color: #8a4b00;
  border-color: #e08910;
  filter: none;
}

html.dark .wer-card-invalidate-btn,
html.dark .dataset-card-invalidate-btn {
  background: #3d2a12;
  color: #ffb347;
  border-color: #e08910;
}

html.dark .wer-card-invalidate-btn:hover,
html.dark .dataset-card-invalidate-btn:hover {
  background: #4a3418;
  color: #ffd9a8;
  border-color: #f0a020;
  filter: none;
}

.invalidate-modal-dataset {
  margin: 0;
  display: inline-block;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--noir);
  word-break: break-all;
  box-sizing: border-box;
}

/* ─── Invalidate dataset modal ─── */

.invalidate-modal-panel {
  width: min(520px, 100%);
  padding: 0;
  overflow: hidden;
}

.invalidate-modal-header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--orange-warning, #e67e22) 12%, var(--blanc));
}

.invalidate-modal-eyebrow {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--orange-warning, #e67e22) 85%, var(--noir));
}

.invalidate-modal-panel .modal-title {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.invalidate-modal-lead {
  margin: 0 0 12px;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  line-height: 1.5;
}

.invalidate-modal-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 24px 8px;
}

.invalidate-modal-editor-label {
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  color: var(--noir);
  letter-spacing: 0.02em;
}

.invalidate-modal-optional {
  font-weight: 500;
  color: var(--gris-texte);
}

.invalidate-modal-editor-input {
  display: block;
  width: 100%;
  min-height: 128px;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  border: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--gris) 35%, var(--blanc));
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.invalidate-modal-editor-input::placeholder {
  color: color-mix(in srgb, var(--gris-texte) 75%, transparent);
}

.invalidate-modal-editor-input:hover {
  background: var(--blanc);
  border-color: color-mix(in srgb, var(--orange-warning, #e67e22) 30%, var(--bleu-2-bordure));
}

.invalidate-modal-editor-input:focus {
  background: var(--blanc);
  border-color: color-mix(in srgb, var(--orange-warning, #e67e22) 55%, var(--bleu-2-bordure));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-warning, #e67e22) 22%, transparent);
}

.invalidate-modal-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 1.2em;
}

.invalidate-modal-editor-hint,
.invalidate-modal-editor-count {
  font-size: 0.72rem;
  color: var(--gris-texte);
}

.invalidate-modal-editor-count.is-near-limit {
  color: var(--orange-warning, #e67e22);
  font-weight: 700;
}

.invalidate-modal-actions {
  margin: 0;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--gris) 40%, var(--blanc));
}

html.dark .invalidate-modal-header {
  background: color-mix(in srgb, var(--orange-warning, #e67e22) 14%, var(--noir));
}

html.dark .invalidate-modal-editor-input {
  background: color-mix(in srgb, var(--blanc) 6%, var(--noir));
}

html.dark .invalidate-modal-actions {
  background: color-mix(in srgb, var(--blanc) 4%, var(--noir));
}

/* ─── Note dataset modal ─── */

.dataset-note-modal-panel {
  width: min(520px, 100%);
  padding: 0;
  overflow: hidden;
}

.dataset-note-modal-header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, #e8a317 10%, var(--blanc));
}

.dataset-note-modal-eyebrow {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
  color: color-mix(in srgb, #b87a00 80%, var(--gris-texte));
}

.dataset-note-modal-panel .modal-title {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.dataset-note-modal-lead {
  margin: 0 0 12px;
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  line-height: 1.5;
}

.dataset-note-modal-dataset {
  margin: 0;
  display: inline-block;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--noir);
  word-break: break-all;
  box-sizing: border-box;
}

.dataset-note-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 24px 8px;
}

.dataset-note-editor-label {
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  color: var(--noir);
  letter-spacing: 0.02em;
}

.dataset-note-editor-input {
  display: block;
  width: 100%;
  min-height: 148px;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  border: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--gris) 35%, var(--blanc));
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.dataset-note-editor-input::placeholder {
  color: color-mix(in srgb, var(--gris-texte) 75%, transparent);
}

.dataset-note-editor-input:hover {
  background: var(--blanc);
  border-color: color-mix(in srgb, var(--bleu-1) 25%, var(--bleu-2-bordure));
}

.dataset-note-editor-input:focus {
  background: var(--blanc);
  border-color: color-mix(in srgb, #e8a317 55%, var(--bleu-2-bordure));
  box-shadow: 0 0 0 3px color-mix(in srgb, #e8a317 22%, transparent);
}

.dataset-note-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 1.2em;
}

.dataset-note-editor-hint,
.dataset-note-editor-count {
  font-size: 0.72rem;
  color: var(--gris-texte);
}

.dataset-note-editor-count.is-near-limit {
  color: #b87a00;
  font-weight: 700;
}

.dataset-note-modal-actions {
  margin: 0;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--gris) 40%, var(--blanc));
}

html.dark .dataset-note-modal-header {
  background: color-mix(in srgb, #e8a317 12%, var(--noir));
}

html.dark .dataset-note-editor-input {
  background: color-mix(in srgb, var(--blanc) 6%, var(--noir));
}

html.dark .dataset-note-modal-actions {
  background: color-mix(in srgb, var(--blanc) 4%, var(--noir));
}

.wer-review-columns.is-invalidated-view {
  grid-template-columns: 1fr;
}

/* legacy OCR page (still 2-column grid) */
.wer-review-columns.is-invalidated-view:not(.wer-review-queue-stack) {
  grid-template-columns: 1fr;
}

.wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="pending"],
.wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="validated"],
.wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="structured"],
.wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="distilled"] {
  display: none;
}

.wer-review-columns:not(.is-invalidated-view) > .wer-review-queue-panel[data-wer-queue="invalidated"] {
  display: none;
}

.wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="invalidated"] {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

.wer-review-card-actions .wer-card-invalidate-btn,
.wer-review-card-actions .wer-card-restore-btn {
  min-height: 30px;
  padding: 4px 12px;
  white-space: nowrap;
}

html.dark .btn-primary {
  background: var(--bleu-2);
  color: var(--blanc-texte);
  border-color: var(--bleu-2-bordure);
}

html.dark .btn-primary:hover {
  background: var(--bleu-1);
  color: var(--bleu-2);
  border-color: var(--bleu-2);
  filter: none;
}

.btn-outline,
.btn-ghost {
  background: transparent;
  color: var(--noir);
}

.btn-outline:hover,
.btn-ghost:hover {
  background: var(--bleu-2);
  color: var(--bleu-1);
}

.btn-sm { padding: 8px 12px; }

.btn-secondary {
  background: var(--blanc);
  color: var(--bleu-1);
  border: 1px solid var(--bleu-1);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bleu-2);
}

.manual-job-flash {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bleu-2);
  color: var(--noir);
  border: 1px solid var(--bleu-2-bordure);
}

.manual-job-flash.error {
  background: #fdecea;
  border-color: #f5c2c0;
  color: #8a1f17;
}

html.dark .manual-job-flash.error {
  background: #3a1f1f;
  border-color: #6b3333;
  color: #ffb4ae;
}

/* ─── Jobs ─── */

.job-item {
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.job-item:hover {
  border-color: var(--bleu-1);
  background: var(--bleu-2);
}

.job-item.selected {
  border-color: var(--bleu-1);
  background: var(--bleu-2);
  border-left: 3px solid var(--bleu-1);
}

.job-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.job-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}

.job-type {
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--noir);
}

.job-date {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gris-texte);
  white-space: nowrap;
}

.job-status {
  font-size: 0.65rem;
  padding: 4px 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid var(--bleu-2-bordure);
}

.job-status.pending { color: var(--gris-texte); background: var(--blanc); }
.job-status.running { color: var(--bleu-1); background: var(--bleu-2); }
.job-status.completed { color: var(--vert-1); background: var(--vert-2); }
.job-status.ignored { color: var(--ambre-1, #9a6700); background: var(--ambre-2, #fff8c5); }
.job-status.failed { color: var(--rouge-1); background: var(--rouge-2); }
.activity-ignored-box {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--ambre-1, #d4a72c);
  background: var(--ambre-2, #fff8c5);
  color: var(--texte, #1b1b1b);
}
.activity-ignored-box strong { display: block; margin-bottom: 0.25rem; }
.activity-ignored-box p { margin: 0; }
.job-status.cancelled { color: var(--orange-warning); background: color-mix(in srgb, var(--orange-warning) 12%, var(--blanc)); }

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.btn-danger {
  color: var(--rouge-1);
  border-color: color-mix(in srgb, var(--rouge-1) 45%, var(--bleu-2-bordure));
}

.btn-danger:hover:not(:disabled) {
  background: var(--rouge-2);
  border-color: var(--rouge-1);
}

.activity-cancel-hint {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  margin: 0 0 10px;
}

.activity-cancel-error {
  margin-bottom: 10px;
}

.job-progress {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  margin-top: 6px;
}

.job-elapsed {
  color: var(--gris-texte);
  font-weight: 600;
  opacity: 0.85;
}

/* ─── Results ─── */

.wer-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.wer-stat .value {
  font-size: var(--fs-subtitle-sm);
  font-weight: 700;
  color: var(--bleu-1);
}

.wer-stat .label {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  margin-top: 4px;
}

pre.json-view {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.75rem;
  overflow: auto;
  max-height: min(420px, 45vh);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--gris-texte);
  margin: 0;
}

.wer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-subtitle-xs);
  margin-top: 12px;
}

.wer-table th,
.wer-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--bleu-2-bordure);
}

.wer-table th {
  color: var(--bleu-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--bleu-2);
}

.wer-table td { color: var(--gris-texte); }

.summary-line { font-size: var(--fs-subtitle-xs); margin-bottom: 12px; }
.text-ok { color: var(--vert-1); }
.error-text { color: var(--rouge-1); font-size: var(--fs-subtitle-xs); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  padding: 2px 6px;
  color: var(--bleu-1);
}

.activity-detail-content .dataset-card,
.activity-detail-content .wer-review-card {
  margin-bottom: 10px;
}

/* ─── Responsive ─── */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  color: var(--noir);
  cursor: pointer;
}

.nav-toggle svg {
  width: 18px;
  height: 18px;
}

.nav-overlay {
  display: none;
}

@media (max-width: 1024px) {
  .topbar-tabs {
    position: static;
    transform: none;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  .content {
    overflow-x: hidden;
    overflow-y: visible;
    min-height: calc(100dvh - var(--shell-top, var(--topbar-h)));
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(1, 18, 60, 0.45);
    backdrop-filter: blur(2px);
  }

  body.nav-open .nav-overlay {
    display: block;
  }

  html.dark .nav-overlay {
    background: rgba(0, 0, 0, 0.62);
  }

  .topbar {
    flex-wrap: nowrap;
    align-items: center;
    height: 64px;
    min-height: 64px;
    padding: 10px 12px;
    gap: 8px;
    z-index: 30;
  }

  .topbar-left {
    flex: 0 0 auto;
    gap: 0;
    min-width: 0;
  }

  .topbar-left .logo-svg {
    display: none;
  }

  .topbar-right {
    flex: 0 0 auto;
    gap: 8px;
    margin-left: 0;
  }

  .storage-pill-text {
    display: none;
  }

  .storage-pill {
    padding: 0 8px;
  }

  .health-pill-topbar {
    display: none;
  }

  .sidebar-collapse {
    display: none !important;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px 16px 20px;
    border-bottom: 1px solid var(--bleu-2-bordure);
    margin-bottom: 8px;
  }

  .sidebar-brand .logo-svg {
    height: 34px;
    width: auto;
    max-width: calc(100% - 44px);
  }

  .sidebar.is-open .sidebar-close {
    display: inline-flex;
  }

  .sidebar-close {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--bleu-2-bordure);
    border-radius: 0;
    background: var(--blanc);
    color: var(--noir);
    cursor: pointer;
  }

  .sidebar-close svg {
    width: 16px;
    height: 16px;
  }

  .sidebar-close:hover {
    background: var(--bleu-2);
    color: var(--bleu-1);
  }

  .sidebar-footer {
    display: block;
  }

  .topbar-tabs {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 6px;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: static;
    transform: none;
  }

  .topbar-tabs::-webkit-scrollbar {
    display: none;
  }

  .top-tab {
    flex: 0 0 auto;
    padding: 8px 10px;
    white-space: nowrap;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(300px, 88vw);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    bottom: auto;
    padding-top: max(12px, env(safe-area-inset-top));
    border-right: 1px solid var(--bleu-2-bordure);
    border-bottom: none;
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    z-index: 50;
    box-shadow: none;
  }

  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(1, 18, 60, 0.22);
  }

  .content {
    margin-left: 0;
    border-left: none;
  }

  .page-hero {
    padding: 20px 12px 0;
  }

  #page-wer .page-hero,
  #page-ocr .page-hero {
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px 14px 0;
  }

  .page-hero h1 {
    font-size: clamp(1.35rem, 6vw, 1.85rem);
  }

  .page-panel,
  .wer-review-columns,
  .activity-layout,
  .token-kpi-layout,
  .card-grid,
  .stat-grid {
    margin-left: 10px;
    margin-right: 10px;
  }

  .token-kpi-layout {
    padding: 14px;
  }

  .card-grid,
  .stat-grid {
    padding: 14px;
  }

  .page-panel {
    margin-top: 18px;
    margin-bottom: 16px;
    padding: 14px;
  }

  .panel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .panel-header-title--with-search {
    max-width: none;
  }

  #page-datasets .panel-header {
    gap: 10px;
    margin-bottom: 10px;
  }

  #page-datasets .datasets-toolbar {
    flex-wrap: wrap;
  }

  #page-datasets .datasets-toolbar .datasets-search-input {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }

  #page-datasets #dataset-filters {
    display: none;
  }

  #page-datasets .datasets-toolbar .wer-filters-toggle {
    margin-left: 0;
  }

  #page-datasets .dataset-filter-select {
    display: block;
    width: auto;
    flex: 1 1 auto;
    min-width: 140px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--blanc);
    border: 1px solid var(--bleu-2-bordure);
    padding: 10px 36px 10px 12px;
    color: var(--noir);
    font-family: var(--font);
    font-size: var(--fs-subtitle-xs);
    font-weight: 600;
    background-image: linear-gradient(45deg, transparent 50%, var(--gris-texte) 50%),
      linear-gradient(135deg, var(--gris-texte) 50%, transparent 50%);
    background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  .token-recent-page-tabs {
    display: none;
  }

  .token-recent-select {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .token-recent-size-filters {
    flex: 1 1 120px;
    min-width: 0;
  }

  .token-recent-header {
    flex-wrap: wrap;
  }

  .filter-chips {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .filter-chips::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: 0 0 auto;
  }

  .wer-queue-toolbar-row {
    margin-left: calc(10px + 14px);
    margin-right: calc(10px + 14px);
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .wer-page-toolbar {
    margin: 0;
    width: 100%;
    max-width: none;
    padding: 8px 10px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .wer-reports-count {
    max-width: none;
    white-space: normal;
  }

  #page-ocr-eval > .wer-page-toolbar {
    margin-left: calc(10px + 14px);
    margin-right: calc(10px + 14px);
    padding: 12px 14px;
  }

  .wer-bulk-bar {
    margin-left: calc(10px + 14px);
    margin-right: calc(10px + 14px);
    width: auto;
    padding: 12px 14px;
    flex-direction: column;
    align-items: stretch;
  }

  .wer-bulk-bar-actions {
    width: 100%;
  }

  .wer-reports-count {
    white-space: normal;
  }

  .wer-page-toolbar-actions {
    width: 100%;
  }

  .wer-page-toolbar-actions .btn {
    flex: 1 1 auto;
  }

  .wer-review-split {
    flex-direction: column;
    min-height: 0;
    max-height: none;
    margin-top: 18px;
    margin-bottom: 16px;
    gap: 12px;
    --wer-split-height: auto;
    flex: none;
  }

  html:has(#page-wer.page-view.active),
  body:has(#page-wer.page-view.active) {
    height: auto;
    overflow: auto;
  }

  .content:has(#page-wer.page-view.active) {
    display: block;
    height: auto;
    max-height: none;
    min-height: 100vh;
    overflow: visible;
  }

  #page-wer.page-view.active {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: 16px;
    flex: none;
  }

  #page-wer.page-view.active > .page-hero {
    padding-top: 24px;
  }

  #page-wer.page-view.active > .page-hero h1 {
    font-size: inherit;
  }

  .wer-review-split .wer-review-list {
    max-height: min(52vh, 480px);
  }

  #page-wer.page-view.active .wer-review-split-left,
  #page-wer.page-view.active .wer-review-split-right,
  #page-wer.page-view.active .wer-review-split .wer-review-columns {
    height: auto;
    max-height: none;
  }

  .wer-queue-toolbar-row > .wer-review-queue-switch,
  .wer-review-queue-switch {
    align-self: stretch;
    display: flex;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .wer-review-queue-btn {
    flex: 1 1 0;
    text-align: center;
  }

  .wer-review-split-handle {
    display: none;
  }

  .wer-review-split-left,
  .wer-review-split-right {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .wer-review-split-left {
    width: 100%;
  }

  .wer-review-detail-panel,
  .wer-detail-panel {
    min-height: 280px;
  }

  .wer-review-columns {
    grid-template-columns: 1fr;
    margin-top: 18px;
    gap: 12px;
  }

  .wer-review-columns > .wer-review-queue-panel[data-wer-queue="pending"],
  .wer-review-columns > .wer-review-queue-panel[data-ocr-queue="pending"],
  .wer-review-columns > .wer-review-queue-panel[data-wer-queue="validated"],
  .wer-review-columns > .wer-review-queue-panel[data-ocr-queue="validated"],
  .wer-review-columns > .wer-review-queue-panel[data-wer-queue="structured"],
  .wer-review-columns > .wer-review-queue-panel[data-wer-queue="distilled"],
  .wer-review-columns > .wer-review-queue-panel[data-wer-queue="invalidated"] {
    padding-left: 0;
    padding-right: 0;
  }

  .wer-review-columns:not(.is-invalidated-view) > .wer-review-queue-panel[data-wer-queue="invalidated"],
  .wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="pending"],
  .wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="validated"],
  .wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="structured"],
  .wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="distilled"] {
    display: none;
  }

  .wer-review-columns.is-invalidated-view > .wer-review-queue-panel[data-wer-queue="invalidated"].is-active {
    display: block;
  }

  .wer-review-columns > .wer-review-queue-panel[data-wer-queue="pending"]::after,
  .wer-review-columns > .wer-review-queue-panel[data-ocr-queue="pending"]::after {
    display: none;
  }

  .wer-review-mobile-switch {
    display: grid;
  }

  /* OCR page only — WER uses .wer-review-queue-switch */
  #page-ocr-eval .wer-review-mobile-switch {
    display: grid;
  }

  .wer-review-split .wer-review-queue-panel.is-active {
    display: flex;
  }

  .wer-review-queue-panel {
    display: none;
    margin: 0;
  }

  .wer-review-queue-panel.is-active {
    display: flex;
    flex-direction: column;
  }

  .wer-review-queue-panel > .panel-header > .panel-title {
    display: none;
  }

  .manual-tabs {
    display: none;
  }

  .manual-tab-select {
    display: block;
    width: calc(100% - 24px);
    margin: 14px 12px 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--blanc);
    border: 1px solid var(--bleu-2-bordure);
    padding: 10px 36px 10px 12px;
    color: var(--noir);
    font-family: var(--font);
    font-size: var(--fs-subtitle-xs);
    font-weight: 600;
    background-image: linear-gradient(45deg, transparent 50%, var(--gris-texte) 50%),
      linear-gradient(135deg, var(--gris-texte) 50%, transparent 50%);
    background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  .wer-review-toolbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  .wer-review-toolbar .wer-review-filter:not(.wer-review-filter--search) {
    display: none;
  }

  .wer-review-filter,
  .wer-review-filter--search,
  .wer-review-select {
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .wer-review-filter--search {
    flex: 1 1 auto;
  }

  .wer-review-filter--filters-toggle {
    margin-left: auto;
  }

  .wer-detail-meta,
  .wer-samples-toolbar,
  .activity-detail-actions,
  .manual-form-actions,
  .job-top {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }

  .dataset-card-toolbar {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .dataset-card-toolbar .tag {
    flex: 0 1 auto;
    min-width: 0;
  }

  .dataset-card-links {
    margin-left: auto;
    flex: 0 0 auto;
    gap: 8px;
    justify-content: flex-end;
  }

  .dataset-card-links .btn-sm {
    padding: 8px 10px;
    white-space: nowrap;
  }

  .dataset-id {
    word-break: break-word;
  }

  .manual-tab-panel {
    padding: 16px 12px 20px;
  }

  .config-select,
  .config-form input:not([type="checkbox"]):not([type="submit"]):not([type="button"]),
  .config-custom-select {
    max-width: none;
  }

  .chart-wrap,
  .chart-wrap-duration,
  .chart-wrap-tokens,
  .chart-wrap-tokens-md,
  .chart-wrap-sm {
    min-height: 220px;
  }

  .activity-detail-content {
    max-height: none;
  }

  .datasets-feed,
  .wer-review-list {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
  }

  #page-overview .stat-grid.card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #page-overview .charts-grid {
    display: block;
  }

  .mobile-charts-slider,
  #page-tokens .token-kpi-layout,
  #page-tokens .token-charts-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .mobile-charts-slider::-webkit-scrollbar,
  #page-tokens .token-kpi-layout::-webkit-scrollbar,
  #page-tokens .token-charts-grid::-webkit-scrollbar {
    display: none;
  }

  .mobile-charts-slider > .chart-card,
  #page-tokens .token-charts-grid > .chart-card {
    flex: 0 0 min(88vw, 360px);
    width: min(88vw, 360px);
    scroll-snap-align: start;
  }

  #page-tokens .token-kpi-layout {
    display: flex;
    grid-template-columns: unset;
  }

  #page-tokens .token-kpi-secondary {
    display: contents;
  }

  #page-tokens .token-kpi-layout > .stat-card,
  #page-tokens .token-kpi-layout .token-kpi-secondary > .stat-card {
    flex: 0 0 min(78vw, 300px);
    width: min(78vw, 300px);
    scroll-snap-align: start;
    min-height: 148px;
  }

  #page-tokens .token-stat-hero {
    min-height: 148px;
    padding: 20px;
    justify-content: center;
  }

  #page-overview .charts-grid > .chart-card-static {
    width: 100%;
    margin-top: 4px;
  }

  .chart-duration-filters {
    display: none;
  }

  .chart-duration-select {
    display: block;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--blanc);
    border: 1px solid var(--bleu-2-bordure);
    padding: 10px 36px 10px 12px;
    color: var(--noir);
    font-family: var(--font);
    font-size: var(--fs-subtitle-xs);
    font-weight: 600;
    background-image: linear-gradient(45deg, transparent 50%, var(--gris-texte) 50%),
      linear-gradient(135deg, var(--gris-texte) 50%, transparent 50%);
    background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  .chart-card-static .chart-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  pre.json-view {
    max-height: min(360px, 55vh);
    font-size: 0.7rem;
  }

  .token-recent-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .token-recent-tokens,
  .token-recent-time {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .content {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .stat-card:hover,
  .datasets-feed .dataset-card:hover {
    transform: none;
  }

  .btn,
  .side-link,
  .chip,
  .top-tab {
    min-height: 44px;
  }

  .theme-toggle,
  .nav-toggle {
    width: 44px;
    height: 44px;
  }
}

/* ─── Configuration ─── */

.config-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-field {
  margin-bottom: 18px;
}

.config-field:last-child {
  margin-bottom: 0;
}

.config-field > label:first-child,
.config-field > .config-field-label {
  display: block;
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  color: var(--noir);
  margin-bottom: 6px;
}

.config-lang-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  max-width: 720px;
  max-height: 220px;
  overflow: auto;
  margin: 4px 0 2px;
  padding: 4px 2px;
}

#config-wer-filter-langs-section.is-config-flash {
  outline: 2px solid color-mix(in srgb, var(--bleu-1) 45%, transparent);
  outline-offset: 4px;
  background: color-mix(in srgb, var(--bleu-2) 35%, transparent);
  transition: background 0.3s, outline-color 0.3s;
}

.config-field-checkbox > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--noir);
  cursor: pointer;
}

.config-select,
.config-form input:not([type="checkbox"]):not([type="submit"]):not([type="button"]) {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 420px;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  padding: 9px 12px;
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
}

.config-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.config-custom-select {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.config-custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  padding: 9px 12px;
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}

.config-custom-select-trigger:hover,
.config-custom-select.is-open .config-custom-select-trigger {
  border-color: var(--bleu-1);
}

.config-custom-select-value {
  flex: 1;
  min-width: 0;
}

.config-custom-select-chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--bleu-1);
  border-bottom: 1.6px solid var(--bleu-1);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}

.config-custom-select.is-open .config-custom-select-chevron {
  transform: rotate(225deg) translateY(1px);
}

.config-custom-select-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(1, 18, 60, 0.1);
  max-height: 240px;
  overflow-y: auto;
}

.config-custom-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: var(--fs-subtitle-xs);
  color: var(--noir);
  cursor: pointer;
  transition: background 0.12s;
}

.config-custom-select-option:hover {
  background: var(--bleu-2);
}

.config-custom-select-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}

.config-custom-select-option.is-selected .config-custom-select-dot {
  background: var(--bleu-1);
}

.config-custom-select-option.is-selected {
  color: var(--bleu-1);
  font-weight: 600;
  background: color-mix(in srgb, var(--bleu-2) 55%, var(--blanc));
}

html.dark .config-custom-select-trigger,
html.dark .config-custom-select-list {
  background: var(--gris);
}

html.dark .config-custom-select-option.is-selected {
  background: color-mix(in srgb, var(--bleu-1) 14%, var(--gris));
}

.config-select:disabled,
.config-form input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.config-select:focus,
.config-form input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--bleu-1);
}

.config-help {
  margin: 6px 0 0;
  max-width: 720px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gris-texte);
}

.config-help code {
  font-size: 0.92em;
}

.config-secrets-intro {
  margin-bottom: 10px;
}

.config-secrets-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.config-collections-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.config-secret-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--gris);
  color: var(--gris-texte);
}

.config-secret-pill.ok {
  color: var(--vert-1);
  border-color: color-mix(in srgb, var(--vert-1) 35%, var(--bleu-2-bordure));
  background: color-mix(in srgb, var(--vert-2) 70%, var(--blanc));
}

.config-secret-pill.missing {
  color: var(--orange-warning);
}

.config-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 18px 24px;
  padding: 4px 20px 0;
}

.config-save-status {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
}

.config-unsaved-bar {
  position: fixed;
  bottom: 24px;
  left: calc(50% + var(--sidebar-w) / 2);
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(720px, calc(100vw - var(--sidebar-w) - 48px));
  padding: 14px 18px;
  background: var(--blanc);
  color: var(--noir);
  border: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.config-unsaved-bar[hidden] {
  display: none;
}

.config-unsaved-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--noir);
  line-height: 1.4;
}

.config-unsaved-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.config-unsaved-reset {
  border-radius: 0;
  color: var(--bleu-1);
}

.config-unsaved-reset:hover {
  color: var(--bleu-1);
}

.config-unsaved-save {
  border-radius: 0;
}

html.dark .config-unsaved-bar {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

#page-config.config-has-unsaved {
  padding-bottom: 88px;
}

#page-config.config-has-unsaved .config-actions {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 768px) {
  .config-unsaved-bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px max(14px, env(safe-area-inset-bottom));
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid var(--bleu-2-bordure);
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(1, 18, 60, 0.12);
  }

  .config-unsaved-text {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .config-unsaved-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    justify-content: stretch;
  }

  .config-unsaved-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
  }

  #page-config.config-has-unsaved {
    padding-bottom: max(132px, calc(116px + env(safe-area-inset-bottom)));
  }
}

/* ─── Modules OCR / Texte ─── */

.module-coming-panel {
  position: relative;
}

.module-coming-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--orange-accent);
  background: #fff0e6;
  border: 1px solid #e8c4a8;
}

.module-coming-badge-inline {
  margin-bottom: 0;
  margin-left: 8px;
  vertical-align: middle;
}

.manual-placeholder {
  margin-top: 8px;
  padding: 28px 18px 32px;
  text-align: center;
}

.manual-placeholder .btn {
  margin-top: 16px;
}

.wer-queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#wer-dataset-ids {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 6.5rem;
}

.wer-dataset-checklist {
  margin-top: 4px;
  max-height: min(380px, 50vh);
}

.wer-select-toolbar {
  margin-top: 12px;
}

.wer-bulk-bar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 8px calc(18px + 20px) 0;
  padding: 12px 16px;
  width: auto;
  max-width: none;
  border: 1px solid var(--bleu-2-bordure);
  background: color-mix(in srgb, var(--bleu-2) 35%, var(--blanc));
  box-sizing: border-box;
}

.wer-bulk-bar:not([hidden]) {
  display: flex;
}

.wer-bulk-bar[hidden] {
  display: none !important;
}

.wer-bulk-bar-main,
.wer-bulk-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.wer-bulk-count {
  font-weight: 600;
  font-size: 0.92rem;
}

.wer-bulk-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--gris-texte);
}

#wer-bulk-mode-toggle.active {
  border-color: var(--orange-accent, #c45c26);
  color: var(--orange-accent, #c45c26);
}

.wer-review-card-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.wer-bulk-check-wrap {
  flex: 0 0 auto;
  padding-top: 2px;
  align-self: flex-start;
}

.wer-review-card-main {
  min-width: 0;
  flex: 1;
}

.wer-review-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
}

.wer-review-card-actions--stack {
  flex-direction: column;
  align-items: stretch;
  align-self: center;
}

.wer-review-card-actions--stack .btn {
  width: 100%;
  justify-content: center;
}

.wer-review-card-actions .wer-card-validate-btn {
  min-height: 30px;
  padding: 4px 12px;
  white-space: nowrap;
}

.wer-card-menu {
  position: relative;
}

.wer-card-menu.is-open {
  z-index: 2;
}

.wer-card-menu-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--bleu-2-bordure);
  background: var(--blanc);
  color: var(--gris-texte);
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wer-card-menu-btn:hover,
.wer-card-menu.is-open .wer-card-menu-btn {
  background: var(--bleu-2);
  border-color: var(--bleu-1);
  color: var(--bleu-1);
}

.wer-card-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  min-width: 152px;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--noir) 14%, transparent);
}

.wer-card-menu.is-open .wer-card-menu-list {
  display: flex;
}

.wer-card-menu.is-up .wer-card-menu-list {
  top: auto;
  bottom: calc(100% + 4px);
}

.wer-card-menu-item {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--noir);
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  text-align: left;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.wer-card-menu-item + .wer-card-menu-item {
  border-top: 1px solid var(--bleu-2-bordure);
}

.wer-card-menu-item:hover {
  background: var(--bleu-2);
  color: var(--bleu-1);
}

.wer-card-menu-item.is-danger:hover {
  background: #fdecea;
  color: #8a1f17;
}

html.dark .wer-card-menu-item.is-danger:hover {
  background: #3a1f1f;
  color: #ffb4ae;
}

.wer-review-card.wer-bulk-selectable {
  cursor: pointer;
}

.wer-review-card.is-bulk-checked {
  outline: 2px solid color-mix(in srgb, var(--bleu-2-bordure) 80%, #3b82f6);
  background: color-mix(in srgb, var(--bleu-2) 28%, var(--blanc));
}

.module-stub-body {
  padding: 28px 18px 32px;
  text-align: center;
}

.module-stub-body .empty-state {
  margin-top: 12px;
}

.module-stub-panel .manual-tab:disabled,
.module-stub-panel .chip:disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

html.dark .module-coming-badge {
  background: #3d2a1f;
  border-color: #8b4f32;
  color: var(--orange-warning);
}

.module-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.module-collection-card {
  padding: 14px 16px;
  background: var(--gris);
  border: 1px solid var(--bleu-2-bordure);
}

.module-collection-label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gris-texte);
}

.module-collection-slug {
  margin: 0;
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--noir);
  word-break: break-all;
}

.module-collection-missing {
  color: var(--orange-warning);
  font-weight: 600;
}

.page-view.module-page {
  display: none;
}

.page-view.module-page.active {
  display: block;
}

/* ─── OCR viewer ─── */

.ocr-viewer {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ocr-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bleu-2-bordure);
}

.ocr-viewer-nav,
.ocr-viewer-zoom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ocr-sample-counter,
.ocr-zoom-label {
  min-width: 4.5rem;
  text-align: center;
  font-size: var(--fs-subtitle-xs);
  font-weight: 700;
  color: var(--noir);
  font-variant-numeric: tabular-nums;
}

.ocr-viewer-body {
  display: grid;
  grid-template-columns: max-content minmax(400px, 1fr);
  gap: 16px;
  align-items: start;
}

.ocr-viewer-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.ocr-viewer-canvas-wrap {
  position: relative;
  overflow: auto;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  max-height: min(68vh, 720px);
  border: 1px solid var(--bleu-2-bordure);
  background: var(--gris);
}

.ocr-viewer-canvas {
  transform-origin: top left;
  transition: transform 0.15s ease;
  padding: 0;
  margin: 0;
  display: block;
  width: max-content;
  max-width: 100%;
  line-height: 0;
}

.ocr-page-preview {
  width: 500px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--blanc);
  border: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  color: var(--noir);
}

.ocr-page-preview.has-image {
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
  border: none;
  width: 500px;
  max-width: 100%;
}

.ocr-page-media {
  position: relative;
  display: block;
  width: 100%;
}

.ocr-page-preview svg,
.ocr-page-img {
  width: 100%;
  height: auto;
  display: block;
}

.ocr-page-preview.has-image .ocr-page-img {
  border: none;
  box-shadow: none;
  background: var(--blanc);
}

.ocr-bbox {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #b83400;
  background: color-mix(in srgb, #b83400 12%, transparent);
  pointer-events: none;
}

.ocr-bbox-table { border-color: #b83400; background: color-mix(in srgb, #b83400 12%, transparent); }
.ocr-bbox-figure { border-color: #0f766e; background: color-mix(in srgb, #0f766e 12%, transparent); }
.ocr-bbox-graph { border-color: #01123c; background: color-mix(in srgb, #01123c 12%, transparent); }

html.dark .ocr-bbox-graph { border-color: #5b8def; background: color-mix(in srgb, #5b8def 16%, transparent); }

.ocr-bbox-tag {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  background: #b83400;
  white-space: nowrap;
}

.ocr-bbox-figure .ocr-bbox-tag { background: #0f766e; }
.ocr-bbox-graph .ocr-bbox-tag { background: #01123c; }
html.dark .ocr-bbox-graph .ocr-bbox-tag { background: #5b8def; color: #01123c; }

.ocr-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.ocr-page-preview-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--blanc) 88%, transparent);
  border: 1px solid var(--bleu-2-bordure);
  color: var(--gris-texte);
}

.ocr-regions-panel {
  padding: 10px 12px;
  background: var(--gris);
  border: 1px solid var(--bleu-2-bordure);
}

.ocr-regions-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gris-texte);
  margin-bottom: 8px;
}

.ocr-regions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ocr-regions li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ocr-region-label {
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--bleu-1);
}

.ocr-region-table { background: #b83400; }
.ocr-region-figure { background: #0f766e; }
.ocr-region-graph { background: #01123c; }

html.dark .ocr-region-graph { background: #5b8def; color: #01123c; }

.ocr-region-conf {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gris-texte);
  font-variant-numeric: tabular-nums;
}

.ocr-meta-classes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ocr-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  width: 500px;
  max-width: 100%;
  box-sizing: border-box;
}

.ocr-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 84px;
  padding: 0;
  border: 2px solid var(--bleu-2-bordure);
  background: var(--blanc);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.ocr-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.ocr-thumb.active {
  border-color: var(--bleu-1);
}

.ocr-thumb:hover {
  border-color: color-mix(in srgb, var(--bleu-1) 55%, var(--bleu-2-bordure));
}

.ocr-thumb-index {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 4px;
  background: color-mix(in srgb, var(--blanc) 90%, transparent);
  color: var(--noir);
}

.ocr-viewer-texts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ocr-cer-pill {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: var(--fs-subtitle-xs);
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--bleu-1);
  background: var(--bleu-2);
  border: 1px solid var(--bleu-2-bordure);
}

.ocr-viewer-texts .wer-transcript-text {
  max-height: 220px;
  overflow: auto;
}

.ocr-diff-del {
  background: color-mix(in srgb, var(--rouge-1) 22%, transparent);
  text-decoration: line-through;
}

.ocr-diff-ins {
  background: color-mix(in srgb, #16a34a 22%, transparent);
}

@media (max-width: 960px) {
  .ocr-viewer-body {
    grid-template-columns: 1fr;
  }

  .ocr-viewer-stage {
    width: 100%;
    align-items: center;
  }

  .ocr-viewer-canvas-wrap {
    width: max-content;
    max-width: 100%;
    max-height: 52vh;
  }

  .ocr-page-preview,
  .ocr-page-preview.has-image,
  .ocr-thumbs {
    width: min(500px, 100%);
  }
}

/* ─── Consommation LLM ─── */

.token-charts-grid .chart-wrap-tokens {
  height: 260px;
}

.token-charts-grid .chart-wrap-tokens-md {
  height: min(480px, max(240px, var(--token-datasets-h, 280px)));
}

.token-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--vert);
  background: #e8f5ec;
  border: 1px solid #b8dfc4;
}

html.dark .token-live-badge {
  color: #7dcea0;
  background: #1a2e22;
  border-color: #2d5a3d;
}

.token-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.token-recent-panel .token-recent-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.token-recent-panel .token-recent-toggle {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}

.token-recent-panel .token-recent-chevron-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.token-recent-size-filters {
  margin-left: auto;
  flex: 0 0 auto;
}

.token-recent-panel[data-expanded="false"] .token-recent-size-filters {
  display: none;
}

.token-recent-page-tabs {
  gap: 0;
  flex-wrap: nowrap;
}

.token-recent-page-tabs .chip {
  position: relative;
  border-radius: 0;
  z-index: 0;
  min-width: 44px;
  text-align: center;
}

.token-recent-page-tabs .chip + .chip {
  margin-left: -1px;
}

.token-recent-page-tabs .chip:hover {
  z-index: 1;
}

.token-recent-page-tabs .chip.active {
  z-index: 2;
}

.token-recent-select {
  display: none;
  min-width: 132px;
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  color: var(--noir);
  padding: 8px 32px 8px 10px;
  font-family: var(--font);
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris-texte) 50%),
    linear-gradient(135deg, var(--gris-texte) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.token-recent-panel .panel-collapse-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.token-recent-panel .panel-collapse-title .panel-title {
  margin-bottom: 0;
}

.token-recent-summary {
  font-size: var(--fs-subtitle-xs);
  font-weight: 600;
  color: var(--gris-texte);
}

.token-recent-panel .panel-collapse-chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--bleu-1);
  border-bottom: 1.6px solid var(--bleu-1);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}

.token-recent-panel[data-expanded="true"] .panel-collapse-chevron {
  transform: rotate(225deg) translateY(1px);
}

.token-recent-body {
  margin-top: 12px;
}

.token-recent-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.token-recent-page-info {
  font-size: var(--fs-subtitle-xs);
  color: var(--gris-texte);
  font-weight: 600;
}

.token-recent-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--gris);
  border: 1px solid var(--bleu-2-bordure);
  font-size: var(--fs-subtitle-xs);
}

.token-recent-row strong {
  font-weight: 700;
  color: var(--noir);
}

.token-recent-meta {
  color: var(--gris-texte);
  word-break: break-word;
}

.token-recent-tokens {
  font-weight: 800;
  color: var(--noir);
  white-space: nowrap;
  text-align: right;
}

.token-recent-time {
  font-size: 0.72rem;
  color: var(--gris-texte);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 720px) {
  .token-recent-row {
    grid-template-columns: 1fr 1fr;
  }

  .token-recent-tokens,
  .token-recent-time {
    text-align: left;
  }
}

/* ─── Documentation ─── */

.docs-layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 18px;
  padding: 20px 18px 40px;
  align-items: start;
}

.docs-toc {
  position: sticky;
  top: calc(var(--shell-top, var(--topbar-h)) + 12px);
  z-index: 5;
  margin: 0;
  padding: 18px 16px !important;
  max-height: calc(100vh - var(--shell-top, var(--topbar-h)) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  align-self: start;
}

.docs-toc .panel-title {
  margin-bottom: 12px;
}

.docs-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docs-toc-list a {
  color: var(--gris-texte);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.35;
  display: block;
  padding: 4px 0;
  border-left: 2px solid transparent;
  padding-left: 10px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.docs-toc-list a:hover {
  color: var(--bleu-1);
  border-left-color: var(--bleu-1);
}

.docs-toc-list a.is-active {
  color: var(--bleu-1);
  font-weight: 700;
  border-left-color: var(--bleu-1);
  background: color-mix(in srgb, var(--bleu-2) 55%, transparent);
}

.docs-body-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.docs-section {
  margin: 0;
  scroll-margin-top: 80px;
}

.docs-section > p,
.docs-section .docs-list {
  color: var(--gris-texte);
  font-size: 0.95rem;
  line-height: 1.65;
}

.docs-section > p + p,
.docs-section > p + .docs-list,
.docs-section > .docs-list + p {
  margin-top: 10px;
}

.docs-subtitle {
  margin: 18px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--noir);
}

.docs-list {
  margin: 8px 0 0;
  padding-left: 1.2rem;
}

.docs-list li + li {
  margin-top: 6px;
}

.docs-section code,
.docs-code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}

.docs-section code {
  background: color-mix(in srgb, var(--bleu-1) 8%, transparent);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.docs-code-block {
  margin-top: 12px;
  background: color-mix(in srgb, var(--noir) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--noir) 10%, transparent);
  border-radius: 8px;
  overflow-x: auto;
}

.docs-code-block pre {
  margin: 0;
  padding: 14px 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--noir);
}

.docs-section kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  border: 1px solid color-mix(in srgb, var(--noir) 18%, transparent);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 0.82em;
  font-family: inherit;
  background: color-mix(in srgb, var(--noir) 3%, transparent);
}

.docs-goto {
  margin-top: 4px;
}

html.dark .docs-section code {
  background: color-mix(in srgb, var(--bleu-1) 18%, transparent);
}

html.dark .docs-code-block {
  background: color-mix(in srgb, #fff 4%, transparent);
  border-color: color-mix(in srgb, #fff 12%, transparent);
}

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
    padding: 16px 12px 32px;
  }

  .docs-toc {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .docs-toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
  }
}

@media (max-width: 520px) {
  .docs-toc-list {
    grid-template-columns: 1fr;
  }
}


/* ─── Login ─── */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, color-mix(in srgb, var(--color-secondary) 70%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 50%),
    var(--gris);
}

html.dark .login-body {
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, color-mix(in srgb, #1a2338 80%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, color-mix(in srgb, #dbe8ff 6%, transparent), transparent 50%),
    var(--gris);
}

.login-shell {
  width: 100%;
  max-width: 420px;
}

.login-card {
  background: var(--blanc);
  border: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  padding: 36px 32px 32px;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.login-logo {
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: 20px;
  filter: invert(var(--icon-invert));
}

.login-card h1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--noir);
  margin-bottom: 8px;
}

.login-lead {
  color: var(--gris-texte);
  margin-bottom: 8px;
  line-height: 1.5;
}

.login-hint {
  color: var(--gris-texte);
  margin-bottom: 24px;
  line-height: 1.45;
  font-size: 0.8125rem;
  opacity: 0.9;
}

.login-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--noir);
}

.login-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bleu-2-bordure);
  border-radius: 0;
  background: var(--gris);
  color: var(--noir);
  font-family: var(--mono);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-form input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
  background: var(--blanc);
}

html.dark .login-form input:focus {
  border-color: var(--bleu-1);
}

.login-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 0;
  background: var(--rouge-2);
  color: var(--rouge-1);
  font-size: 0.8125rem;
}

.login-submit {
  width: 100%;
  margin-top: 18px;
  justify-content: center;
}

.logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 1px solid var(--bleu-2-bordure);
  background: transparent;
  color: var(--noir);
  cursor: pointer;
  flex-shrink: 0;
}

.logout-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--blanc));
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--bleu-2-bordure));
}

.logout-btn svg {
  width: 18px;
  height: 18px;
}