/* Places PMR, France. Mobile first. Contrasts checked against WCAG AA.
   Light and dark themes via [data-theme] tokens; MapLibre GL for the map. */
:root {
  --bg: #eef0f7;
  --panel: rgba(255, 255, 255, .88);
  --panel-solid: #ffffff;
  --text: #171923;
  --text-mute: #464c60;        /* 7.6:1 on white */
  --accent: #4338ca;           /* 8.5:1 on white */
  --accent-ink: #3730a3;
  --accent-soft: #e0e7ff;
  --accent-softer: #eef2ff;
  --btn-bg: #4338ca;
  --btn-bg-hover: #3730a3;
  --btn-fg: #ffffff;
  --field-bg: #f1f2f8;
  --border: rgba(23, 25, 35, .12);
  --border-strong: #595f73;    /* 5.4:1, enough for UI components (3:1) */
  --focus: #0a76f6;
  --geo: #0a76f6;
  --error: #ce0500;
  --error-bg: #ffe9e9;
  --info-bg: #eef2ff;
  --shadow-1: 0 1px 2px rgba(15, 18, 35, .05), 0 8px 24px rgba(15, 18, 35, .09);
  --shadow-2: 0 2px 6px rgba(15, 18, 35, .08), 0 16px 48px rgba(15, 18, 35, .16);
  --map-pt: #4f46e5;
  --map-stroke: #ffffff;
  --map-c1: #6366f1;
  --map-c2: #4338ca;
  --map-c3: #312e81;
  --target: 2.75rem;           /* 44px */
  --header-h: 3.5rem;
  --r-s: .625rem;
  --r-m: 1rem;
  --r-l: 1.375rem;
  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%;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0d0f16;
  --panel: rgba(22, 25, 37, .88);
  --panel-solid: #161925;
  --text: #e9ebf5;
  --text-mute: #aab1c6;        /* 7.6:1 on panel */
  --accent: #a5b4fc;           /* 8.6:1 on panel */
  --accent-ink: #c7d2fe;
  --accent-soft: rgba(129, 140, 248, .2);
  --accent-softer: rgba(129, 140, 248, .1);
  --btn-bg: #4c5df0;           /* 5:1 with white text */
  --btn-bg-hover: #3b4ce0;
  --btn-fg: #ffffff;
  --field-bg: #1d2130;
  --border: rgba(233, 235, 245, .12);
  --border-strong: #8a90a5;
  --focus: #58a6ff;
  --geo: #58a6ff;
  --error: #ff7b72;
  --error-bg: #3d1513;
  --info-bg: #171d33;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .6);
  --map-pt: #8f9bff;
  --map-stroke: #0d0f16;
  --map-c1: #5b66f0;
  --map-c2: #4650e0;
  --map-c3: #3038c4;
  color-scheme: dark;
}
/* Fallback before JS sets data-theme (and for noscript) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0f16; --panel: rgba(22, 25, 37, .88); --panel-solid: #161925;
    --text: #e9ebf5; --text-mute: #aab1c6;
    --accent: #a5b4fc; --accent-ink: #c7d2fe;
    --accent-soft: rgba(129, 140, 248, .2); --accent-softer: rgba(129, 140, 248, .1);
    --btn-bg: #4c5df0; --btn-bg-hover: #3b4ce0; --btn-fg: #ffffff;
    --field-bg: #1d2130; --border: rgba(233, 235, 245, .12); --border-strong: #8a90a5;
    --focus: #58a6ff; --geo: #58a6ff;
    --error: #ff7b72; --error-bg: #3d1513; --info-bg: #171d33;
    --map-pt: #8f9bff; --map-stroke: #0d0f16;
    --map-c1: #5b66f0; --map-c2: #4650e0; --map-c3: #3038c4;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); font-size: 1rem; }
a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-ink); }
: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: 3000;
  background: var(--panel-solid); color: var(--accent); padding: .75rem 1rem;
  border: 2px solid var(--accent); border-radius: var(--r-s); font-weight: 700;
  box-shadow: var(--shadow-2);
}
.skiplinks a:focus { top: .5rem; }

/* Header: frosted bar */
.app-header {
  position: sticky; top: 0; z-index: 1500;
  min-height: var(--header-h); display: flex; align-items: center; gap: .75rem;
  padding: .375rem .875rem;
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.app-title { margin: 0; font-size: 1.0625rem; font-weight: 750; letter-spacing: -.01em; display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; flex: 1; }
.app-sub { font-weight: 450; color: var(--text-mute); font-size: .875rem; letter-spacing: 0; }
.app-logo {
  display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem;
  background: linear-gradient(145deg, #6366f1, #4338ca); color: #fff; border-radius: .75rem;
  box-shadow: 0 2px 8px rgba(67, 56, 202, .35);
}
.app-logo svg { width: 1.25rem; height: 1.25rem; }
.theme-toggle {
  display: inline-grid; place-items: center; width: var(--target); height: var(--target);
  background: transparent; border: 1px solid var(--border); border-radius: .875rem; cursor: pointer;
  color: var(--text-mute); transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover { background: var(--accent-softer); color: var(--text); }
:root:not([data-theme="dark"]) .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: none; }

/* Layout. Mobile: map hero + sheet. Desktop: full-bleed map + floating panel. */
.app { position: relative; }
.map-wrap { position: relative; height: 56svh; min-height: 19rem; }
#map { position: absolute; inset: 0; background: var(--bg); }
#map.map-failed { display: grid; place-items: center; padding: 1.5rem; text-align: center; color: var(--text-mute); }
.panel {
  position: relative; z-index: 10;
  margin-top: -1.125rem;
  background: var(--bg);
  border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: 0 -10px 30px rgba(15, 18, 35, .14);
}
.panel::before {
  content: ""; display: block; width: 2.5rem; height: .25rem; margin: .5rem auto 0;
  border-radius: .25rem; background: var(--border-strong); opacity: .45;
}
.controls { padding: .625rem 1rem .75rem; }
.list-wrap { padding: 0 1rem 1rem; }

@media (min-width: 60em) {
  body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  .app-header { flex: none; position: static; }
  .app { flex: 1; min-height: 0; }
  .map-wrap { position: absolute; inset: 0; height: auto; min-height: 0; }
  .panel {
    position: absolute; left: 1rem; top: 1rem; bottom: 1rem; width: 27.5rem; margin: 0;
    display: flex; flex-direction: column; min-height: 0;
    background: var(--panel);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid var(--border); border-radius: var(--r-l);
    box-shadow: var(--shadow-2);
    overflow: hidden;
  }
  .panel::before { display: none; }
  .controls { flex: none; padding: 1rem 1.125rem .75rem; }
  .list-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.125rem 1.125rem; overscroll-behavior: contain; }
}

/* Coverage notice */
.notice {
  margin: .25rem 0 .875rem; padding: .625rem .875rem;
  background: var(--info-bg); border: 1px solid var(--accent-soft); border-radius: var(--r-m);
  font-size: .906rem;
}
.notice p { margin: 0; }
.notice a { font-weight: 600; display: inline-block; min-height: 1.5rem; }

/* Form controls */
.label { display: block; font-weight: 650; margin-bottom: .25rem; letter-spacing: -.005em; }
.hint { margin: -.125rem 0 .375rem; font-size: .85rem; color: var(--text-mute); }
.input, .select {
  display: block; width: 100%; min-height: var(--target); padding: .5rem .875rem;
  background: var(--field-bg); border: 1.5px solid var(--border); border-radius: var(--r-s);
  font-size: 1rem; /* 16px avoids iOS zoom on focus */
  transition: border-color .15s ease, background .15s ease;
}
.input:hover, .select:hover { border-color: var(--border-strong); }
.input:focus-visible, .select:focus-visible { outline-offset: 0; border-color: transparent; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23767b90' 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");
  background-repeat: no-repeat; background-position: right .625rem center; background-size: 1.375rem;
}
.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; border-bottom-right-radius: 0; }
.combo .btn-icon { border-radius: 0 var(--r-s) var(--r-s) 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 1.125rem;
  border: 0; border-radius: var(--r-s); font-weight: 650; cursor: pointer; text-decoration: none;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn svg { flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-icon { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 2px 10px rgba(67, 56, 202, .25); }
.btn-primary:hover, .btn-icon:hover { background: var(--btn-bg-hover); box-shadow: 0 4px 14px rgba(67, 56, 202, .32); }
.btn-secondary { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn-secondary:hover { background: var(--accent-softer); }
.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: calc(100% + .375rem); left: 0; right: 0; z-index: 1100; margin: 0; padding: .375rem; list-style: none;
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  max-height: 60vh; overflow-y: auto;
  animation: rise .14s ease-out;
}
.suggestions li {
  min-height: var(--target); padding: .5rem .625rem; cursor: pointer; border-radius: .5rem;
}
.suggestions li + li { margin-top: .125rem; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--accent-soft); outline: 2px solid var(--accent); 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); border-radius: 0 var(--r-s) var(--r-s) 0;
}
.alert.is-info { border-left-color: var(--accent); 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; border-radius: .5rem; }
.alert-close:hover { background: var(--accent-softer); }

/* Results */
.results { margin-top: 1.125rem; }
.results:focus { outline: none; }
.results:focus-visible { outline: 3px solid var(--focus); }
.results-title { font-size: 1.125rem; letter-spacing: -.012em; 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 var(--border); }
.result:last-child { border-bottom: 1px solid var(--border); }
.result-main {
  flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center;
  text-align: left; background: none; border: 0; border-radius: .5rem; padding: .625rem .375rem; min-height: 3.5rem; cursor: pointer;
  transition: background .12s ease;
}
.result-main:hover { background: var(--accent-softer); }
.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;
  background: var(--accent-soft); border-radius: 1rem; color: var(--accent); font-weight: 750; font-size: .9375rem;
}
:root[data-theme="dark"] .result-rank { color: var(--accent-ink); }
.result-addr { font-weight: 630; }
.result-meta { color: var(--text-mute); font-size: .9375rem; }
.result-dist { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.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; border-radius: .5rem;
}
.result-go:hover { background: var(--accent-softer); }

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

/* Map DOM markers */
.sel-pin {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: var(--map-pt); color: #fff; border: 3px solid var(--map-stroke); border-radius: 1rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  animation: pop .18s ease-out;
  cursor: pointer;
}
:root[data-theme="dark"] .sel-pin { color: #0d0f16; }
.sel-pin svg { width: 62%; height: 62%; }

.pmr-near {
  display: grid; place-items: center; width: var(--target); height: var(--target); padding: 0;
  background: var(--panel-solid); color: var(--accent); border: 3px solid var(--accent); border-radius: 50%;
  font-weight: 750; font-size: 1.0625rem; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  animation: pop .18s ease-out;
  transition: transform .12s ease;
}
.pmr-near:hover { transform: scale(1.08); }
:root[data-theme="dark"] .pmr-near { color: var(--accent-ink); border-color: var(--map-pt); }

.ref-marker { display: block; }
.ref-dot {
  position: relative; display: block; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--geo); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--geo), 0 1px 4px rgba(0, 0, 0, .5);
}
.ref-dot::after {
  content: ""; position: absolute; inset: -.75rem; border-radius: 50%;
  border: 2px solid var(--geo); opacity: 0;
  animation: pulse 2.4s ease-out infinite;
}
.ref-pin {
  display: block; width: 1.625rem; height: 1.625rem; background: #e5484d; border: 3px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(-.25rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse {
  0% { transform: scale(.5); opacity: .8; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* MapLibre controls: 44px targets, themed */
.maplibregl-map { font: inherit; }
.maplibregl-ctrl-group {
  background: var(--panel); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: .875rem; box-shadow: var(--shadow-1); overflow: hidden;
}
.maplibregl-ctrl-group:not(:empty) { box-shadow: var(--shadow-1); }
.maplibregl-ctrl-group button { width: var(--target); height: var(--target); }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--border); }
.maplibregl-ctrl-group button:hover { background: var(--accent-softer); }
:root[data-theme="dark"] .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
.maplibregl-ctrl-attrib {
  background: var(--panel); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: .5rem 0 0 0; font-size: .6875rem; color: var(--text-mute); padding: .125rem .5rem;
}
.maplibregl-ctrl-attrib a { color: var(--text-mute); }
.maplibregl-ctrl-scale {
  background: transparent; border-color: var(--text-mute); color: var(--text-mute);
  font-size: .6875rem; border-width: 0 2px 2px;
}

/* MapLibre popup, themed card */
.maplibregl-popup { z-index: 20; }
.maplibregl-popup-content {
  background: var(--panel-solid); color: var(--text);
  border-radius: var(--r-m); box-shadow: var(--shadow-2);
  padding: 1rem 2.75rem 1rem 1.125rem; font-size: 1rem; line-height: 1.45; min-width: 13rem;
  animation: pop .16s ease-out;
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--panel-solid); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--panel-solid); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--panel-solid); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--panel-solid); }
.maplibregl-popup-close-button {
  width: var(--target); height: var(--target); font-size: 1.5rem; color: var(--text);
  top: 0; right: 0; border-radius: 0 var(--r-m) 0 var(--r-m);
}
.maplibregl-popup-close-button:hover { background: var(--accent-softer); }
.maplibregl-popup-content h3 { font-size: 1.0625rem; letter-spacing: -.01em; margin: 0 0 .25rem; }
.maplibregl-popup-content p { margin: 0 0 .5rem; }
.maplibregl-popup-content .popup-note { font-size: .875rem; color: var(--text-mute); }
.popup-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.popup-actions a.btn-primary { color: var(--btn-fg); }
.popup-actions a.btn-secondary { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .result-rank, .pmr-near, .sel-pin { border: 2px solid CanvasText; forced-color-adjust: none; }
}

/* Coverage table */
.coverage { margin-top: 1.5rem; border-top: 1px solid var(--border); 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; border-radius: .5rem;
}
.coverage > summary:hover, .coverage-missing > summary:hover { color: var(--accent); }
.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 var(--border); 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(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: .15em;
}
.linklike:hover { color: var(--accent-ink); }
.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; }