/* Design tokens — see Redesign API frontend moderne/design_handoff_allcars_frontend/README.md
   Dark is the default (:root); [data-theme="light"] on <html> overrides. */
:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #12151a;
  --sunk: #0e1116;
  --hover: #161a20;
  --border: #1e232b;
  --border2: #262c35;
  --border3: #3a424e;
  --text: #e7eaef;
  --text2: #c3cad4;
  --muted: #8892a0;
  --faint: #5f6b7a;
  --accent: #f2622e;
  --accent2: #ff7d4f;
  --accent-soft: rgba(242, 98, 46, .10);
  --accent-line: rgba(242, 98, 46, .35);
  --on-accent: #12151a;
  --ok: #3fbf72;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --sunk: #f2f4f7;
  --hover: #f5f7fa;
  --border: #e4e7ec;
  --border2: #d7dbe2;
  --border3: #b9c0ca;
  --text: #151a21;
  --text2: #3d4652;
  --muted: #6b7481;
  --faint: #8b93a0;
  --accent: #d9531e;
  --accent2: #b84417;
  --accent-soft: rgba(217, 83, 30, .08);
  --accent-line: rgba(217, 83, 30, .3);
  --on-accent: #ffffff;
  --ok: #1c9e5a;
}

/* IBM Plex Sans — variable font (Google serves one file across 400-700; we
   mirror that instead of guessing a "font-weight: 400 700" range syntax). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); text-decoration: underline; }
select, input, button { font-family: inherit; color: inherit; }
::placeholder { color: var(--faint); }
button { cursor: pointer; }

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* ---------- Header (shared by index.html / search.html / docs.html) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
  padding: 0 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand .logo-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 12px;
}

.brand .wordmark {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.2px;
  color: var(--text);
}

.nav-tabs, .theme-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.nav-tabs a {
  border: none;
  border-radius: 6px;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--muted);
  transition: .12s;
}

.nav-tabs a.active {
  background: var(--sunk);
  border: 1px solid var(--border2);
  color: var(--text);
  font-weight: 500;
  margin: -1px;
}

.nav-tabs a:hover { text-decoration: none; color: var(--text); }

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

.api-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
}

.api-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

.api-status.offline .dot { background: var(--accent); }

.docs-link {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
}

.theme-toggle button {
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-family: "IBM Plex Mono", monospace;
  background: transparent;
  color: var(--muted);
}

.theme-toggle button.active {
  background: var(--sunk);
  color: var(--text);
}

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

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  border: 1px solid var(--border2);
  color: var(--text2);
  border-radius: 7px;
  padding: 8px 13px;
  font-size: 12.5px;
}

.btn-secondary:hover {
  border-color: var(--border3);
  color: var(--text);
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  border: none;
  color: var(--on-accent);
  font-weight: 600;
  border-radius: 7px;
  padding: 10px;
  font-size: 13px;
}

.btn-primary:hover { background: var(--accent2); }

/* ---------- Shared: endpoint bar, skeleton, empty state, offline banner ---------- */

.endpoint-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--faint);
  background: var(--sunk);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 22px;
  overflow: auto;
  white-space: nowrap;
  cursor: pointer;
}

.endpoint-bar .verb { color: var(--ok); }
.endpoint-bar .copied { color: var(--accent); margin-left: auto; }

.skeleton {
  background: var(--sunk);
  border-radius: 6px;
  color: transparent;
}

.empty-state {
  padding: 48px;
  text-align: center;
  color: var(--muted);
}

.empty-state .btn-secondary { margin-top: 14px; }

.offline-banner {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 22px;
  color: var(--text2);
  font-size: 13.5px;
}

.offline-banner code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  background: var(--sunk);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}

.error { color: var(--accent); font-weight: 600; }

/* ================= index.html — Consultation ================= */

.page-index main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 28px 72px;
}

.stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.stat-card {
  flex: 1 1 160px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.stat-card .label {
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-card .value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 20px;
  font-weight: 600;
  margin-top: 3px;
}

.stat-card .value.accent { color: var(--accent); }
.stat-card .value.skeleton { display: inline-block; width: 4em; height: 1.2em; }

.cascade-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 32px;
}

.cascade-step {
  background: var(--panel);
  padding: 12px 14px;
}

.cascade-step label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.cascade-step.active label { color: var(--accent); }

.cascade-step select {
  width: 100%;
  appearance: none;
  background: var(--sunk);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text);
  font-size: 13.5px;
  padding: 8px 10px;
  outline: none;
}

.cascade-step select:disabled { opacity: .5; }
.cascade-step.active select { border-color: var(--accent); }

.title-band {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.breadcrumb {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 10px;
}

.breadcrumb .sep { color: var(--border3); }

.title-band h1 {
  margin: 6px 0 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.7px;
}

.version-line {
  margin-top: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  color: var(--accent);
}

.title-actions {
  display: flex;
  gap: 8px;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 36px;
}

.spec-card {
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.spec-card:hover { border-color: var(--border3); }

.spec-card .label {
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.spec-card .value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 17px;
  font-weight: 500;
  margin-top: 5px;
  letter-spacing: -.2px;
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.raw-sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

details.raw-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

details.raw-section summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 500;
}

details.raw-section summary::-webkit-details-marker { display: none; }

details.raw-section .section-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--accent);
}

details.raw-section .section-count {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--faint);
}

details.raw-section .raw-body {
  border-top: 1px solid var(--border);
  padding: 6px 15px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
}

details.raw-section .raw-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

details.raw-section .raw-row:last-child { border-bottom: none; }
details.raw-section .raw-row .k { color: var(--muted); }
details.raw-section .raw-row .v { color: var(--text); }

.hint { color: var(--muted); }

/* ================= search.html — Recherche avancée ================= */

.page-search main {
  max-width: 1720px;
  margin: 0 auto;
  padding: 28px 28px 72px;
}

.search-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.search-title h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.5px;
}

.search-title .search-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}

.search-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* A grid item's own default min-width is `auto`, which still lets its
   content's intrinsic width (here, the results table) override the
   `minmax(0, ...)` track above and blow out the whole page's width - needs
   both. Harmless at normal desktop widths where the table already fits. */
#results-section { min-width: 0; }

.filter-panel {
  position: sticky;
  top: 76px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.filter-group {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.filter-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.filter-group-header .num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--accent);
}

.filter-group-header .name {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.filter-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.filter-fields .year-range {
  display: flex;
  gap: 6px;
}

.combobox {
  position: relative;
}

.combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 7px;
  max-height: 240px;
  overflow-y: auto;
}

.combobox-list li[role="option"] {
  padding: 7px 9px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
}

.combobox-list li[role="option"].highlighted,
.combobox-list li[role="option"]:hover {
  background: var(--hover);
}

.combobox-list .combobox-empty {
  padding: 7px 9px;
  font-size: 12.5px;
  color: var(--muted);
}

.filter-fields label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
}

.filter-fields select,
.filter-fields input {
  width: 100%;
  background: var(--sunk);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 9px;
  outline: none;
}

.filter-fields select:focus,
.filter-fields input:focus { border-color: var(--accent); }

.filter-actions {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
}

.filter-actions .btn-primary { flex: 1; }

.filter-actions .btn-reset {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  border-radius: 7px;
  padding: 10px 13px;
  font-size: 13px;
}

.filter-actions .btn-reset:hover {
  color: var(--text);
  border-color: var(--border3);
}

.results-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.results-bar .count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 20px;
  font-weight: 600;
}

.results-bar .summary {
  font-size: 12.5px;
  color: var(--muted);
}

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

.chips-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  border-radius: 99px;
  padding: 4px 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
}

.chip .remove {
  opacity: .6;
  cursor: pointer;
  line-height: 1;
}

.chip .remove:hover { opacity: 1; }

.sort-hint {
  font-size: 11.5px;
  color: var(--faint);
}

.table-container {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.table-scroll {
  overflow: auto;
  max-height: 640px;
}

table.results-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

table.results-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sunk);
  padding: 10px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  color: var(--faint);
  text-align: left;
}

table.results-table thead th.num-col,
table.results-table td.row-num { text-align: right; }

table.results-table th.sortable {
  cursor: pointer;
  user-select: none;
}

table.results-table th.sortable.sorted { color: var(--text); }

table.results-table th .th-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

table.results-table th .sort-arrow {
  font-size: 8px;
  color: var(--border3);
  opacity: .8;
}

table.results-table th.sorted .sort-arrow {
  color: var(--accent);
  opacity: 1;
}

table.results-table th button.sort-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

table.results-table th button.sort-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

table.results-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

table.results-table tbody tr:hover { background: var(--hover); }

table.results-table td.row-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--faint);
}

table.results-table td.col-brand { font-weight: 500; }
table.results-table td.col-model { color: var(--text2); }
table.results-table td.col-generation_label,
table.results-table td.col-body_type { color: var(--muted); }
table.results-table td.col-seats { font-family: "IBM Plex Mono", monospace; color: var(--muted); text-align: right; }
table.results-table td.col-generation_start_year { font-family: "IBM Plex Mono", monospace; color: var(--muted); text-align: right; }
table.results-table td.col-version_label { color: var(--text2); }
table.results-table td.col-power_hp { font-family: "IBM Plex Mono", monospace; font-weight: 500; text-align: right; }
table.results-table td.col-kerb_weight_kg,
table.results-table td.col-top_speed_kmh,
table.results-table td.col-acceleration_0_100_kmh_s,
table.results-table td.col-wltp_co2_g_km_min { font-family: "IBM Plex Mono", monospace; color: var(--text2); text-align: right; }
table.results-table td.col-power_to_weight_hp_per_tonne { font-family: "IBM Plex Mono", monospace; color: var(--accent); text-align: right; }
table.results-table td.col-source_url a { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; }

.fuel-badge {
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 2px 7px;
}

@media (max-width: 1100px) {
  .search-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
}

/* ================= docs.html — Documentation API ================= */

.docs-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 28px 72px;
}

.docs-main h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.5px;
}

.docs-main code.mono {
  background: var(--sunk);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12.5px;
}

.endpoint-doc {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.endpoint-doc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 10px;
}

.endpoint-doc-head .verb { color: var(--ok); font-weight: 600; }

.endpoint-doc h3 {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 8px;
}

.endpoint-doc pre {
  background: var(--sunk);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  overflow: auto;
  white-space: pre;
}

.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 8px;
}

.param-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--border);
}

.param-table td {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* ================= compare.html — Comparaison ================= */

.page-compare main {
  max-width: 1720px;
  margin: 0 auto;
  padding: 28px 28px 72px;
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.compare-picker {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 28px;
  transition: opacity .15s;
}

.compare-picker.at-max {
  opacity: .55;
  pointer-events: none;
}

.compare-cascade {
  margin-bottom: 16px;
}

.compare-picker-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.compare-picker-actions .btn-primary {
  padding: 10px 20px;
}

.compare-picker-actions .hint {
  font-size: 11.5px;
}

.compare-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

table.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

table.compare-table th.compare-row-label {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--sunk);
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

table.compare-table thead th.compare-row-label {
  z-index: 4;
}

table.compare-table th.compare-col {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sunk);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  min-width: 170px;
}

table.compare-table thead tr th.compare-row-label {
  top: 0;
}

.compare-col-title {
  margin-top: 6px;
}

.compare-col-brand {
  font-size: 13px;
  font-weight: 600;
}

.compare-col-version {
  font-size: 11.5px;
  color: var(--accent);
  margin-top: 3px;
}

.remove-vehicle {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  border-radius: 5px;
  width: 20px;
  height: 20px;
  line-height: 1;
  font-size: 13px;
}

.remove-vehicle:hover {
  color: var(--text);
  border-color: var(--border3);
}

tr.compare-group-row th {
  text-align: left;
  padding: 8px 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

table.compare-table tbody tr:not(.compare-group-row):hover {
  background: var(--hover);
}

table.compare-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.cmp-value {
  font-size: 13px;
  color: var(--text2);
  white-space: nowrap;
}

td.cmp-winner .cmp-value {
  color: var(--accent);
  font-weight: 600;
}

.cmp-meter {
  height: 4px;
  border-radius: 2px;
  background: var(--sunk);
  margin-top: 6px;
  overflow: hidden;
}

.cmp-meter-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--border3);
}

.cmp-meter-fill.winner {
  background: var(--accent);
}

/* Marks a "—" as a deliberately-absent field (source rarely reports it),
   not a rendering bug - a tooltip explains why on hover. */
.cell-na {
  color: var(--faint);
  font-style: italic;
  cursor: help;
}

table.results-table .select-col {
  width: 28px;
  text-align: center;
}

/* ================= Mobile (≤640px) ================= */
/* Additive only - no existing rule above is touched, so desktop/tablet
   rendering (already handled up to the 1100px search-layout breakpoint)
   is unaffected. Needs the <meta name="viewport"> tag in each page's
   <head> to actually kick in on a real phone. */

@media (max-width: 640px) {
  .site-header {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
  }

  .header-right { margin-left: 0; flex-wrap: wrap; }

  .page-index main,
  .page-search main,
  .page-compare main {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cascade-grid,
  .compare-cascade {
    grid-template-columns: 1fr;
  }

  .filter-fields {
    grid-template-columns: 1fr;
  }

  table.results-table {
    font-size: 12.5px;
  }
}