/* Jetons de thème repris du tableau de bord Claude, clair et sombre */
:root {
  color-scheme: light dark;
  --font-anthropic-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --color-fg: #1f1e1d; --color-fg-muted: #6b6862; --color-bg: #faf9f5; --color-panel: #ffffff;
  --color-border-line: #e3e0d8; --color-ok: #2f7d4f; --color-warn: #b5651d; --color-bad: #b3261e;
  --cds-radius: 10px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 20px;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-lg: 24px; --cds-gap-xl: 32px;
  --cds-font-size-title: 2rem; --cds-font-size-heading: 1.25rem; --cds-font-size-body: 0.95rem; --cds-font-size-caption: 0.8rem;
  --cds-font-weight-medium: 550; --cds-dur-slow: 300ms;
  --cds-surface-popover: var(--color-panel); --cds-border: var(--color-border-line);
  --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.12); --cds-text-secondary: var(--color-fg-muted);
  --cds-chart-grid: #ebe8e1; --cds-chart-axis: #b9b5ac; --cds-chart-muted: #c9c5bc; --cds-chart-reference: #8a867e;
  --cds-chart-status-critical: var(--color-bad);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-fg: #ecebe7; --color-fg-muted: #a39f97; --color-bg: #1b1a18; --color-panel: #252422;
    --color-border-line: #3a3834; --color-ok: #5cbd85; --color-warn: #e59a4f; --color-bad: #ef6b5f;
    --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.5);
    --cds-chart-grid: #33312d; --cds-chart-axis: #5a5751; --cds-chart-muted: #4a4843; --cds-chart-reference: #8f8b83;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); }
#dash-root { padding: 24px 16px 48px; }
.dash-select { font: inherit; font-size: var(--cds-font-size-body); color: var(--color-fg); background: var(--color-panel);
  border: 1px solid var(--color-border-line); border-radius: 8px; padding: var(--cds-pad-xs) var(--cds-pad-sm); }
input, button, select { font: inherit; }

/* Écran de mot de passe */
.verrou { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.verrou form { width: min(100%, 24rem); background: var(--color-panel); border: 1px solid var(--color-border-line);
  border-radius: var(--cds-radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.verrou h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 1.6rem; margin: 0; }
.verrou p { margin: 0; color: var(--color-fg-muted); font-size: 0.9rem; line-height: 1.5; }
.verrou label { font-size: 0.85rem; font-weight: var(--cds-font-weight-medium); }
.verrou input { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--color-border-line); background: var(--color-bg); color: var(--color-fg); }
.verrou button { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--color-fg); background: var(--color-fg); color: var(--color-bg); cursor: pointer; }
.verrou button:disabled { opacity: 0.6; cursor: progress; }
.verrou input:focus-visible, .verrou button:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.verrou .msg { min-height: 1.4em; color: var(--color-bad); }
.verrou .msg.info { color: var(--color-fg-muted); }

/* --- page du tableau de bord --- */

.ri { display: flex; flex-direction: column; gap: var(--cds-gap-xl); font-family: var(--font-anthropic-sans); color: var(--color-fg); max-width: 1280px; margin-inline: auto; }
.ri h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0; text-wrap: balance; }
.ri h2 { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0; text-wrap: balance; }
.ri h3 { font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); margin: 0; }
.ri p { margin: 0; line-height: 1.5; }
.ri .muted { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.ri .num { font-variant-numeric: tabular-nums; }
.ri-head { display: flex; flex-direction: column; gap: var(--cds-gap-sm); }
.ri-lede { max-width: 70ch; }
.ri-lede b, .ri .ri-strong { font-weight: var(--cds-font-weight-medium); }
.ri-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-md); min-width: 0; }
.ri-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--cds-gap-md); }
.ri-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--cds-gap-md); }
.ri-fig { display: flex; flex-direction: column; gap: var(--cds-gap-xs); min-width: 0; }
.ri-fig .v { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ri-fig .v small { font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.ri-best { border-top: 1px solid var(--color-border-line); padding-top: var(--cds-pad-sm); }
.ri-tabs { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: center; }
.ri-tab { font: inherit; font-size: var(--cds-font-size-body); padding: var(--cds-pad-xs) var(--cds-pad-md); border-radius: 999px; border: 1px solid var(--color-border-line); background: var(--color-panel); color: var(--color-fg); cursor: pointer; }
.ri-tab[aria-pressed="true"] { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.ri-tab:focus-visible, .ri-sort:focus-visible, .ri-nav button:focus-visible, .ri-tbl tbody tr:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.ri-tools { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: center; }
.ri-tools input { font: inherit; padding: var(--cds-pad-xs) var(--cds-pad-sm); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-bg); color: var(--color-fg); min-width: 0; flex: 1 1 14rem; }
.ri-legend { display: flex; gap: var(--cds-gap-md); flex-wrap: wrap; }
.ri-legend span { display: inline-flex; align-items: center; gap: var(--cds-gap-xs); }
.ri-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ri-chart { position: relative; min-height: 340px; }
.ri-chart svg text { fill: var(--color-fg-muted); font-size: var(--cds-font-size-caption); font-family: var(--font-anthropic-sans); }
.ri-tip { position: absolute; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); max-width: 16rem; z-index: 2; }
.ri-tip .t { color: var(--cds-text-secondary); }
.ri-tblbox { max-height: 34rem; overflow: auto; border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); }
.ri-tbl { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; }
.ri-tbl th { position: sticky; top: 0; background: var(--color-panel); text-align: left; padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); white-space: nowrap; z-index: 1; }
.ri-tbl td { padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); vertical-align: middle; }
.ri-tbl td.r, .ri-tbl th.r { text-align: right; }
.ri-tbl tbody tr { cursor: pointer; }
.ri-tbl tbody tr:hover { background: var(--color-bg); }
.ri-tbl tbody tr.sel { background: var(--color-bg); box-shadow: inset 3px 0 0 var(--color-fg); }
.ri-sort { font: inherit; font-weight: var(--cds-font-weight-medium); background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.ri-sort::after { content: " ↕"; color: var(--color-fg-muted); }
th[aria-sort="descending"] .ri-sort::after { content: " ↓"; color: var(--color-fg); }
th[aria-sort="ascending"] .ri-sort::after { content: " ↑"; color: var(--color-fg); }
.ri-name { min-width: 14rem; }
.ri-bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--color-fg); vertical-align: middle; margin-left: var(--cds-gap-xs); opacity: .75; }
.good { color: var(--color-ok); } .warn { color: var(--color-warn); } .bad { color: var(--color-bad); }
.ri.one-city .c-ville { display: none; }
.ri-map { position: relative; min-height: 300px; }
.ri-map svg { display: block; cursor: grab; border-radius: var(--cds-radius); background: var(--color-bg); }
.ri-map svg text { font-family: var(--font-anthropic-sans); }
.ri-mapbox { display: flex; flex-direction: column; gap: var(--cds-gap-sm); min-width: 0; }
.ri.one-city .ri-maps { grid-template-columns: 1fr; }
.ri-legend i.sw-ok { background: var(--color-ok); } .ri-legend i.sw-mid { background: var(--color-fg-muted); } .ri-legend i.sw-warn { background: var(--color-warn); }
.ri-legend i.sw-gare { background: var(--color-fg); border-radius: 2px; }
@container (max-width: 760px) { .c-quartier, .c-type, .c-loyer { display: none; } }
.ri-tblwrap { container-type: inline-size; }
/* Fiche */
.ri-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--cds-gap-lg); }
@media (max-width: 860px) { .ri-fiche { grid-template-columns: 1fr; } }
.ri-fcol { display: flex; flex-direction: column; gap: var(--cds-gap-md); min-width: 0; }
.ri-photo { aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--cds-radius); overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border-line); }
.ri-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ri-ftitle { display: flex; justify-content: space-between; gap: var(--cds-gap-md); align-items: flex-start; flex-wrap: wrap; }
.ri-ftitle h2 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); }
.ri-score { text-align: right; }
.ri-score .big { font-family: var(--font-anthropic-serif); font-size: calc(var(--cds-font-size-title) * 1.5); line-height: 1; font-variant-numeric: tabular-nums; }
.ri-meta { display: flex; flex-wrap: wrap; gap: var(--cds-gap-xs) var(--cds-gap-md); }
.ri-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--cds-gap-sm) var(--cds-gap-md); margin: 0; }
.ri-kv div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ri-kv dt { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.ri-kv dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--cds-font-weight-medium); }
.ri-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--cds-gap-md); }
.ri-lists ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: var(--cds-gap-xs); line-height: 1.45; }
.ri-reco { border-left: 2px solid var(--color-fg); padding-left: var(--cds-pad-md); }
.ri-nav { display: flex; gap: var(--cds-gap-sm); flex-wrap: wrap; }
.ri-nav button { font: inherit; font-size: var(--cds-font-size-caption); padding: var(--cds-pad-xs) var(--cds-pad-md); border-radius: var(--cds-radius); border: 1px solid var(--color-border-line); background: var(--color-bg); color: var(--color-fg); cursor: pointer; }
.ri-link a { color: inherit; }
.ri-mini { min-height: 120px; }
.ri-crit { min-height: 400px; }
.ri details summary { cursor: pointer; font-weight: var(--cds-font-weight-medium); }
.ri details[open] summary { margin-bottom: var(--cds-gap-md); }
.ri-method { display: flex; flex-direction: column; gap: var(--cds-gap-md); max-width: 80ch; }
.ri-method ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: var(--cds-gap-xs); line-height: 1.45; }
[data-dash-source-state=empty] { color: transparent; }
[data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }