:root {
  --ink: #102330;
  --muted: #5d6c75;
  --line: #d9e2e6;
  --paper: #fff;
  --wash: #f1f6f7;
  --teal: #087f78;
  --navy: #123e58;
  --amber: #e99b22;
  --red: #c44343;
}
.sante-app { max-width: 1440px; margin: auto; padding: clamp(1rem, 3vw, 2.5rem); color: var(--ink); font: 400 1rem/1.5 system-ui, sans-serif; }
.heading, .section-title, .controls, .workspace, .score-row, .timeline-head { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.heading h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; margin: .15rem 0; }
.heading p { margin: .25rem 0; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .11em; color: var(--teal); margin: 0; }
.run-card { display: grid; gap: .25rem; background: var(--navy); color: #fff; border-radius: 1rem; padding: 1rem 1.25rem; min-width: 18rem; }
.run-card span { font-size: .85rem; opacity: .8; }
.notice { background: #e8f5f2; border-left: 4px solid var(--teal); padding: .75rem 1rem; }
.notice.warning { background: #fff2df; border-color: var(--amber); }
.view-tabs { display: flex; gap: .45rem; margin: 1rem 0 .65rem; border-bottom: 1px solid var(--line); }
.view-tab { appearance: none; border: 0; border-bottom: 4px solid transparent; background: transparent; color: var(--ink); font: 750 1rem/1.2 system-ui, sans-serif; padding: .8rem 1rem .7rem; cursor: pointer; }
.view-tab:hover, .view-tab:focus-visible { background: var(--wash); outline: none; }
.view-tab.population[aria-selected="true"] { border-color: var(--teal); color: var(--teal); }
.view-tab.senior[aria-selected="true"] { border-color: #7837a5; color: #7837a5; }
.view-tab.hospital[aria-selected="true"] { border-color: #17629b; color: #17629b; }
.controls { justify-content: flex-start; background: var(--wash); border: 1px solid var(--line); padding: .75rem 1rem; border-radius: 1rem; margin: 1rem 0; }
.controls label, .side label { display: grid; gap: .25rem; font-weight: 700; }
.controls select, .side select, .side input { font: inherit; min-height: 2.7rem; border: 1px solid #aebcc4; border-radius: .55rem; background: #fff; padding: .5rem .7rem; }
.legend { display: flex; gap: .35rem; align-items: center; margin-left: auto; }
.legend i { width: 1.9rem; height: .75rem; border-radius: .25rem; }
.legend-band { display: grid; justify-items: center; font-size: .72rem; }
.marker-key { display: inline-flex; gap: .45rem; align-items: center; font-weight: 750; }
.marker-key::before { content: ''; width: .9rem; height: .9rem; border-radius: 999px; background: #7837a5; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #7837a5; }
.marker-key.hospital::before { background: #17629b; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #17629b; }
.workspace { align-items: stretch; }
.map-card, .side, .detail, .method { background: var(--paper); border: 1px solid var(--line); border-radius: 1.1rem; padding: 1rem; box-shadow: 0 10px 30px #15384a0c; }
.map-card { flex: 1; min-width: 0; }
.side { width: min(24rem, 32vw); display: grid; align-content: start; gap: 1rem; }
.france-map { height: 540px; }
.france-map svg { width: 100%; height: 100%; display: block; }
.france-map path { stroke: #fff; stroke-width: .8; transition: opacity .15s; }
.france-map g:focus path, .france-map g:hover path { stroke: var(--ink); stroke-width: 1.8; }
.cell-map-wrap { height: 560px; position: relative; background: #edf3f5; border-radius: .8rem; overflow: hidden; }
.base-map, .cell-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.base-map { z-index: 1; background: #e8eff1; overflow: hidden; }
.base-map img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.cell-map { z-index: 2; display: block; touch-action: none; cursor: crosshair; }
.zoom-tools { position: absolute; z-index: 4; right: .75rem; top: .75rem; display: flex; gap: .3rem; }
.zoom-tools button, #back { border: 1px solid #9eb0ba; background: #fff; border-radius: .45rem; padding: .45rem .65rem; font-weight: 700; }
.map-attribution { position: absolute; z-index: 4; right: 0; bottom: 0; background: #ffffffe6; color: #344b59; padding: .12rem .35rem; font-size: .65rem; text-decoration: none; }
.territory { border-top: 1px solid var(--line); padding-top: 1rem; }
.territory h3 { margin: .3rem 0; }
.territory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.territory-grid span { background: var(--wash); border-radius: .65rem; padding: .65rem; font-size: .82rem; }
.territory-grid strong { display: block; font-size: 1.15rem; }
.combo { position: relative; }
.results { position: absolute; z-index: 6; background: #fff; border: 1px solid var(--line); width: 100%; max-height: 18rem; overflow: auto; box-shadow: 0 12px 30px #0002; }
.results button { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: .65rem; }
.results button:hover, .results button:focus { background: var(--wash); }
.detail { margin-top: 1rem; }
.facility-detail { border-top: 5px solid #7837a5; scroll-margin-top: 1rem; }
.facility-detail[data-kind="hospital"] { border-top-color: #17629b; }
.facility-address { font-weight: 650; color: var(--muted); }
.secondary-button { border: 1px solid #9eb0ba; background: #fff; color: var(--ink); border-radius: .55rem; padding: .65rem .85rem; font: 700 .95rem system-ui, sans-serif; cursor: pointer; }
.secondary-button:hover, .secondary-button:focus-visible { background: var(--wash); }
.secondary-button:disabled { opacity: .55; cursor: default; }
.tag { background: var(--wash); padding: .35rem .65rem; border-radius: 999px; }
.score-row { justify-content: flex-start; }
.score { display: grid; border: 1px solid var(--line); border-radius: .8rem; padding: .8rem; min-width: 12rem; }
.score strong { font-size: 1.8rem; }
.score small { color: var(--muted); }
.score.priority { background: var(--navy); color: #fff; }
.facts { display: grid; grid-template-columns: repeat(5, minmax(8rem, 1fr)); gap: .6rem; margin: 1rem 0; }
.facts article { background: var(--wash); padding: .7rem; border-radius: .65rem; }
.facts strong { display: block; font-size: 1.2rem; }
.chart { min-height: 260px; overflow-x: auto; }
.chart svg { width: 100%; min-width: 620px; height: 260px; }
.hourly { display: flex; overflow-x: auto; gap: .35rem; padding: .5rem 0; }
.hourly article { min-width: 5.6rem; text-align: center; border: 1px solid var(--line); border-radius: .55rem; padding: .45rem; }
.hourly strong, .hourly span { display: block; }
.method { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.credits { text-align: center; color: var(--muted); font-size: .8rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 20; background: #fff; padding: .5rem; }
.empty { fill: #d8e1e5; }
.colour-0 { fill: #dce8eb; }
.colour-1 { fill: #a8d7ce; }
.colour-2 { fill: #f4d17a; }
.colour-3 { fill: #ee914d; }
.colour-4 { fill: #c84646; }
@media (max-width: 850px) {
  .heading, .workspace, .method { display: grid; }
  .run-card, .side { width: auto; min-width: 0; }
  .controls { display: grid; grid-template-columns: 1fr 1fr; }
  .legend { grid-column: 1/-1; margin: 0; }
  .france-map, .cell-map-wrap { height: 430px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .score-row { display: grid; grid-template-columns: 1fr 1fr; }
  .score.priority { grid-column: 1/-1; }
}
@media (max-width: 480px) {
  .sante-app { padding: .7rem; }
  .view-tabs { overflow-x: auto; }
  .view-tab { flex: 0 0 auto; padding-inline: .75rem; }
  .controls { grid-template-columns: 1fr; }
  .legend { grid-column: auto; }
  .france-map, .cell-map-wrap { height: 360px; }
  .facts, .score-row, .territory-grid { grid-template-columns: 1fr; }
  .score.priority { grid-column: auto; }
}