/* Places PMR, Toulouse Metropole. Mobile first. Contrasts checked against WCAG AA. */
:root {
  --blue: #000091;        /* 15.3:1 on white */
  --blue-hover: #1212ff;
  --blue-soft: #e3e3fd;
  --text: #161616;
  --text-mute: #3a3a3a;   /* 11.4:1 on white */
  --border: #666;         /* 5.7:1, enough for UI components (3:1) */
  --bg: #fff;
  --bg-alt: #f6f6f6;
  --focus: #0a76f6;
  --error: #ce0500;
  --error-bg: #ffe9e9;
  --info-bg: #e8edff;
  --target: 2.75rem;      /* 44px */
  --header-h: 3.5rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); font-size: 1rem; }
a { color: var(--blue); text-underline-offset: .15em; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip links: visible on focus */
.skiplinks a {
  position: absolute; left: .5rem; top: -4rem; z-index: 2000;
  background: var(--bg); color: var(--blue); padding: .75rem 1rem;
  border: 2px solid var(--blue); font-weight: 700;
}
.skiplinks a:focus { top: .5rem; }

.app-header {
  min-height: var(--header-h); display: flex; align-items: center; gap: .75rem;
  padding: .375rem 1rem; border-bottom: 1px solid #ddd; background: var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,18,.08);
}
.app-title { margin: 0; font-size: 1.125rem; font-weight: 700; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.app-sub { font-weight: 400; color: var(--text-mute); font-size: .95rem; }
.app-logo {
  align-self: center; display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  background: var(--blue); color: #fff; border-radius: .25rem; font-weight: 800;
}

/* Layout: controls, map, list stacked on mobile; side panel from 48em */
.app { display: flex; flex-direction: column; }
.controls { padding: 1rem 1rem .75rem; }
.list-wrap { padding: 0 1rem 1rem; }
#map { height: 62vh; height: 62svh; min-height: 18rem; background: #e8e8e8; }

@media (min-width: 48em) {
  body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  .app-header { flex: none; }
  .app {
    display: grid; grid-template-columns: minmax(22rem, 26rem) 1fr; grid-template-rows: auto 1fr;
    grid-template-areas: "controls map" "list map"; flex: 1; min-height: 0;
  }
  .controls { grid-area: controls; border-right: 1px solid #ddd; }
  .list-wrap { grid-area: list; overflow-y: auto; border-right: 1px solid #ddd; }
  .map-wrap { grid-area: map; min-height: 0; }
  .map-wrap, #map { height: 100%; }
}

/* Form controls */
.label { display: block; font-weight: 600; margin-bottom: .25rem; }
.hint { margin: -.125rem 0 .375rem; font-size: .875rem; color: var(--text-mute); }
.input, .select {
  display: block; width: 100%; min-height: var(--target); padding: .5rem .75rem;
  background: #eee; border: 0; border-bottom: 2px solid var(--text-mute); border-radius: .25rem .25rem 0 0;
  font-size: 1rem; /* 16px avoids iOS zoom on focus */
}
.select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background: #eee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23161616' d='m12 13.1 5-4.9 1.4 1.4-6.4 6.3-6.4-6.4L7 8.1l5 5z'/%3E%3C/svg%3E") no-repeat right .5rem center / 1.5rem;
}
.select:disabled { color: var(--text-mute); cursor: wait; }

.search { margin-bottom: .75rem; }
.combo { position: relative; display: flex; }
.combo .input { flex: 1; border-top-right-radius: 0; }
.combo .btn-icon { border-radius: 0 .25rem 0 0; }

.row { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
.row .field { min-width: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--target); min-width: var(--target); padding: .5rem 1rem;
  border: 0; border-radius: .25rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn svg { flex: none; }
.btn-primary, .btn-icon { background: var(--blue); color: #fff; }
.btn-primary:hover, .btn-icon:hover { background: var(--blue-hover); }
.btn-secondary { background: var(--bg); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.btn-secondary:hover { background: var(--blue-soft); }
.btn-block { width: 100%; margin-top: .75rem; }
.btn[aria-busy="true"] { cursor: progress; opacity: .85; }
#locate { white-space: nowrap; }

/* Suggestions listbox */
.suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1100; margin: 0; padding: 0; list-style: none;
  background: var(--bg); border: 1px solid var(--border); border-top: 0; box-shadow: 0 6px 18px rgba(0,0,18,.18);
  max-height: 60vh; overflow-y: auto;
}
.suggestions li {
  min-height: var(--target); padding: .625rem .75rem; cursor: pointer; border-top: 1px solid #eee;
}
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--blue-soft); outline: 2px solid var(--blue); outline-offset: -2px; }
.suggestions .s-kind { display: block; font-size: .8125rem; color: var(--text-mute); }
.suggestions .s-empty { cursor: default; color: var(--text-mute); }

/* Alert */
.alert {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: .75rem; padding: .75rem .5rem .75rem 1rem;
  border-left: 4px solid var(--error); background: var(--error-bg);
}
.alert.is-info { border-left-color: var(--blue); background: var(--info-bg); }
.alert p { margin: 0; flex: 1; }
.alert-close { background: transparent; border: 0; min-width: var(--target); min-height: var(--target); cursor: pointer; margin: -.5rem 0; }

/* Results */
.results { margin-top: 1.25rem; }
.results:focus { outline: none; }
.results:focus-visible { outline: 3px solid var(--focus); }
.results-title { font-size: 1.125rem; margin: 0 0 .25rem; }
.results-intro { margin: 0 0 .5rem; color: var(--text-mute); font-size: .9375rem; }
.results-intro:empty { display: none; }
.results-list { list-style: none; margin: 0; padding: 0; }
.result { display: flex; gap: .5rem; align-items: stretch; border-top: 1px solid #ddd; }
.result:last-child { border-bottom: 1px solid #ddd; }
.result-main {
  flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center;
  text-align: left; background: none; border: 0; padding: .625rem .25rem; min-height: 3.5rem; cursor: pointer;
}
.result-main:hover { background: var(--bg-alt); }
.result-main.no-rank { grid-template-columns: 1fr; }
.result-rank {
  grid-row: span 2; display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .25rem;
  border: 2px solid var(--blue); border-radius: 1rem; color: var(--blue); font-weight: 700; font-size: .9375rem; background: #fff;
}
.result-addr { font-weight: 600; }
.result-meta { color: var(--text-mute); font-size: .9375rem; }
.result-dist { color: var(--text); font-weight: 700; }
.result-go {
  align-self: center; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); min-width: var(--target); padding: 0 .5rem; font-size: .875rem; font-weight: 600;
}

.about { margin-top: 1.5rem; padding-top: .75rem; border-top: 1px solid #ddd; font-size: .875rem; color: var(--text-mute); }
.about p { margin: 0 0 .5rem; }
.noscript { padding: 1rem; background: var(--error-bg); }

/* Map markers */
/* 44px hit area around a 34px visible pin */
.pmr-marker { background: none; border: 0; display: grid; place-items: center; border-radius: .5rem; }
.pmr-pin {
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem;
  background: var(--blue); color: #fff; border: 2px solid #fff; border-radius: .375rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.45); font-weight: 800; font-size: .8125rem; line-height: 1;
}
.pmr-pin svg { width: 70%; height: 70%; }
.pmr-near .pmr-pin { background: #fff; color: var(--blue); border: 3px solid var(--blue); border-radius: 50%; font-size: 1rem; }
.pmr-marker:focus-visible, .pmr-cluster:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

.ref-marker { background: none; border: 0; }
.ref-dot { display: block; width: 100%; height: 100%; border-radius: 50%; background: #0a76f6; border: 3px solid #fff; box-shadow: 0 0 0 2px #0a76f6, 0 1px 4px rgba(0,0,0,.5); }
.ref-pin { display: block; width: 100%; height: 100%; background: #ce0500; border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 1px 4px rgba(0,0,0,.5); }

.pmr-cluster { background: none; }
.pmr-cluster div {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 700; font-size: .9375rem;
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--blue), 0 1px 5px rgba(0,0,0,.4);
}

/* Leaflet controls: 44px targets, readable text */
.leaflet-container { font: inherit; font-size: .875rem; }
.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: var(--target); height: var(--target); line-height: var(--target); font-size: 1.375rem; color: var(--text); }
.leaflet-control-layers-toggle, .leaflet-touch .leaflet-control-layers-toggle { width: var(--target); height: var(--target); }
.leaflet-control-layers label { min-height: var(--target); display: flex; align-items: center; font-size: 1rem; }
.leaflet-control-layers-selector { width: 1.25rem; height: 1.25rem; margin-right: .5rem; }
.leaflet-control-attribution { font-size: .75rem; }
.leaflet-control-attribution a { color: var(--blue); }
.leaflet-container a.leaflet-popup-close-button { width: var(--target); height: var(--target); font-size: 1.5rem; line-height: var(--target); color: var(--text); top: 0; right: 0; }
.leaflet-popup-content { margin: 1rem 2.75rem 1rem 1rem; font-size: 1rem; line-height: 1.45; min-width: 12rem; }
.leaflet-popup-content h3 { font-size: 1.0625rem; margin: 0 0 .25rem; }
.leaflet-popup-content p { margin: 0 0 .5rem; }
.leaflet-popup-content .popup-note { font-size: .875rem; color: var(--text-mute); }
.popup-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.leaflet-container .popup-actions a.btn-primary { color: #fff; }
.leaflet-container .popup-actions a.btn-secondary { color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .pmr-pin, .pmr-cluster div, .result-main.no-rank { grid-template-columns: 1fr; }
.result-rank { border: 2px solid CanvasText; forced-color-adjust: none; }
}

/* National: coverage notice + table */
.notice { margin: 0 0 .875rem; padding: .625rem .75rem; background: var(--info-bg); border-left: 4px solid var(--blue); font-size: .9375rem; }
.notice p { margin: 0; }
.notice a { font-weight: 600; display: inline-block; min-height: 1.5rem; }
.coverage { margin-top: 1.5rem; border-top: 1px solid #ddd; padding-top: .5rem; }
.coverage > summary, .coverage-missing > summary {
  min-height: var(--target); display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 1.0625rem;
  list-style-position: inside;
}
.coverage > summary { display: list-item; padding: .625rem 0; }
.coverage-intro { font-size: .9375rem; color: var(--text-mute); }
.coverage-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.coverage-table th, .coverage-table td { text-align: left; padding: .375rem .25rem; border-bottom: 1px solid #e5e5e5; vertical-align: top; }
.coverage-table thead th { font-size: .8125rem; color: var(--text-mute); font-weight: 600; }
.coverage-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coverage-table td:last-child { white-space: nowrap; color: var(--text-mute); }
.coverage-src { display: block; font-weight: 400; font-size: .8125rem; }
.coverage-src a { color: var(--text-mute); }
.linklike {
  background: none; border: 0; padding: .25rem 0; min-height: var(--target); text-align: left; cursor: pointer;
  color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: .15em;
}
.coverage-missing { margin-top: 1rem; font-size: .875rem; }
.coverage-missing > summary { display: list-item; font-size: .9375rem; padding: .5rem 0; }
.coverage-missing ul { padding-left: 1.25rem; }
.coverage-missing li { margin-bottom: .375rem; }