:root { --bg:#fafaf9; --card:#fff; --ink:#1c1917; --mute:#78716c; --line:#e7e5e4; --accent:#e11d48; --good:#15803d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#1c1917; --card:#292524; --ink:#f5f5f4; --mute:#a8a29e; --line:#44403c; --accent:#fb7185; --good:#4ade80; }
}
:root[data-theme="dark"] { --bg:#1c1917; --card:#292524; --ink:#f5f5f4; --mute:#a8a29e; --line:#44403c; --accent:#fb7185; --good:#4ade80; }

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 system-ui, -apple-system, sans-serif; }
main { max-width: 780px; margin: 0 auto; padding: 20px 16px 40px; }
h1 { font-size: 22px; margin: 0 0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; }
input, select, button { font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-width:0; }
button { cursor:pointer; }
.alt { color:var(--mute); font-size:12px; }

/* Personnes */
.person {
  display:grid; gap:6px 8px; align-items:center; margin-bottom:10px;
  grid-template-columns: 26px 100px minmax(0, 1fr) auto auto auto;
  grid-template-areas: "tag name addr mode opt rm" ". res res res res res" ". sum sum sum sum sum" ". opts opts opts opts opts";
}
.person .tag { grid-area:tag; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; }
.person .name { grid-area:name; }
.person .addr-wrap { grid-area:addr; position:relative; display:flex; }
.person .mode { grid-area:mode; }
.person .rm { grid-area:rm; padding:8px 11px; }
.person .opt { grid-area:opt; padding:8px 10px; }
.person .opt.on { border-color:var(--accent); color:var(--accent); }
.person .opts { grid-area:opts; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:13px; color:var(--mute);
  padding:8px 10px; border:1px dashed var(--line); border-radius:8px; }
.person .opts[hidden] { display:none; }
.person .opts label { display:flex; gap:6px; align-items:center; }
.person .opts .max { width:64px; padding:5px 8px; }
.person .opts .backat { padding:5px 8px; }
.after-line { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; flex:1; min-width:260px; }
.after-wrap { flex:1; min-width:180px; }
.after-wrap .after { flex:1; padding:5px 34px 5px 8px; }
.after-wrap .home { position:absolute; right:3px; top:50%; transform:translateY(-50%); border:0; background:transparent; padding:2px 8px; }
.back { color:var(--mute); }
.back.warn, .why .warn { color:var(--accent); }
#route .back-step { margin:2px 0 0 18px; color:var(--mute); }
.person .resolved { grid-area:res; font-size:12px; color:var(--mute); margin-top:-4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person .resolved:empty { display:none; }
.person .optsum { grid-area:sum; justify-self:start; font-size:12px; padding:3px 9px; border-radius:999px; border-color:var(--accent); color:var(--accent); background:transparent; text-align:left; }
.person .optsum[hidden] { display:none; }
.wheel-hint { position:absolute; inset:0; z-index:1000; display:grid; place-items:center; background:#0006; color:#fff; font-size:15px; font-weight:600; pointer-events:none; opacity:0; transition:opacity .2s; }
.wheel-hint.on { opacity:1; }
.addr-wrap .addr { flex:1; padding-right:38px; }
.addr-wrap .loc { position:absolute; right:3px; top:50%; transform:translateY(-50%); border:0; background:transparent; padding:4px 8px; }
.sugg { position:absolute; top:100%; left:0; right:0; z-index:1000; margin:4px 0 0; padding:4px; list-style:none; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px #0003; }
.sugg li { padding:7px 8px; border-radius:6px; cursor:pointer; font-size:14px; }
.sugg li.on, .sugg li:hover { background:var(--bg); }

.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.row label { color:var(--mute); font-size:13px; }
#go { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; padding:9px 18px; margin-left:auto; }
#go:disabled { opacity:.6; cursor:wait; }
#status { color:var(--mute); font-size:13px; min-height:20px; margin: 4px 2px 10px; }
#status.err { color:var(--accent); }
#refining { margin:-6px 2px 10px; }
#refining[hidden] { display:none; }
#recent { max-width:14em; }
#recent[hidden] { display:none; }
#weather { font-size:13px; margin:-4px 2px 10px; }
#weather[hidden] { display:none; }
#weather .warn { color:var(--accent); }

/* Filtres */
#filters { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:0 0 12px; font-size:13px; }
#filters[hidden] { display:none; }
#filters label { display:flex; gap:5px; align-items:center; cursor:pointer; }
#filters label[hidden] { display:none; }
#chips { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
#chips:empty { display:none; }
.chip { font-size:13px; padding:4px 11px; border-radius:999px; }
.chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip.on .alt { color:#fff; opacity:.85; }

/* Carte */
#map { height: 380px; border-radius:12px 12px 0 0; border:1px solid var(--line); display:none; }
#route { display:none; border-top:0; border-radius:0 0 12px 12px; font-size:13px; }
#route .head { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:6px; }
#route .head button { font-size:12px; padding:4px 10px; }
#route .head .acts { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
#route .step { margin:5px 0; }
#route a, .links a { color:var(--accent); }
.pin { border-radius:50%; color:#fff; font:700 12px system-ui; text-align:center; border:2px solid #fff; box-shadow:0 1px 3px #0006; }
.legend { background:var(--card); color:var(--ink); padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.35; box-shadow:0 1px 4px #0003; min-width:150px; }
.legend label { display:flex; gap:5px; align-items:center; cursor:pointer; }
.legend .grad { height:8px; border-radius:4px; margin:6px 0 2px; background:linear-gradient(90deg, hsl(130 70% 42%), hsl(65 70% 42%), hsl(0 70% 42%)); }
.legend .grad-labels { display:flex; justify-content:space-between; }

/* Fiches */
.res { cursor:pointer; transition:border-color .15s; }
.res:hover { border-color:var(--mute); }
.res.sel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.res:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.res h3 { margin:0 0 4px; font-size:16px; }
.res .meta { color:var(--mute); font-size:13px; margin-bottom:6px; }
.badges { display:flex; flex-wrap:wrap; gap:4px 6px; margin-bottom:8px; }
.badge { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--bg); border:1px solid var(--line); }
.times { display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:6px; }
.times b { font-variant-numeric: tabular-nums; }
.why { font-size:12px; color:var(--mute); margin-bottom:8px; }
.links { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:13px; }
.best { color:var(--good); font-weight:600; font-size:13px; }
footer { color:var(--mute); font-size:12px; text-align:center; margin-top:24px; }

@media (max-width: 560px) {
  .person { grid-template-columns: 26px minmax(70px, 1fr) minmax(0, 170px) auto auto; grid-template-areas: "tag name mode opt rm" "addr addr addr addr addr" "res res res res res" "sum sum sum sum sum" "opts opts opts opts opts"; }
  .person .mode { width:100%; }
  .person .opt, .person .rm { padding:8px 9px; }
  .person .opts { flex-direction:column; align-items:stretch; }
  .after-line { min-width:0; }
  .after-wrap { min-width:0; flex-basis:100%; }
  #map { height: 300px; }
  .legend { min-width: 0; padding: 5px 7px; font-size: 11px; }
  .legend .grad { width: 110px; }
  .legend > .alt { display: none; }
}
.share-url { display:block; width:100%; margin-top:6px; font-size:12px; }
textarea.share-url { font-family:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 8px; resize:vertical; }