:root {
  --green: #1f4632;
  --light: #cde6ad;
  --gold: #f0c870;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #555;
  --shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --surface: #1d2420; --text: #eef2ec; --muted: #b8c2b9; }
}
:root[data-theme="dark"] { --surface: #1d2420; --text: #eef2ec; --muted: #b8c2b9; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #f4f4f1; color: var(--text);
  font: 15px/1.35 system-ui, -apple-system, "Noto Sans", sans-serif; }
#map { position: fixed; inset: 0; background: #f4f4f1; }
/* Barre d'accueil / de gestes : les contrôles du bas restent juste au-dessus, sans cumuler la marge et la zone
   réservée (env(safe-area-inset-bottom), ~34 px sur iPhone, 0 sans barre) ; Leaflet ajoute déjà 10 px sous l'échelle */
.leaflet-bottom.leaflet-left { bottom: max(0px, calc(env(safe-area-inset-bottom) - 10px)); }

.tools { position: fixed; z-index: 1000; right: 12px; bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; }
.tools button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--surface);
  color: var(--text); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
.tools button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; }
.tools #btn-locate svg circle:first-child { fill: currentColor; stroke: none; }
.tools #btn-locate.on { color: #1a73e8; }

#status { position: fixed; z-index: 1000; left: 12px; right: 72px;
  bottom: max(16px, env(safe-area-inset-bottom)); max-width: 420px; padding: 8px 12px;
  border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; }
#status p { margin: 0; color: var(--text); }
#status .bar { height: 4px; border-radius: 2px; background: #d9ded7; overflow: hidden; margin-bottom: 6px; }
#status-fill { height: 100%; width: 0; background: var(--green); transition: width .3s; }
#status.done .bar { display: none; }
#status-actions { display: flex; justify-content: flex-end; gap: 8px; }
#status-actions:not(:empty) { margin-top: 8px; }
#status-actions button { padding: 6px 12px; border: 0; border-radius: 6px; background: var(--green); color: #fff;
  font: inherit; cursor: pointer; }
#status-actions button.secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--muted); }

#legend { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 0; border-radius: 10px; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, .4); }
#legend::backdrop { background: rgba(0, 0, 0, .45); }
#legend img { display: block; width: 100%; height: auto; }
dialog form { position: sticky; top: 0; height: 0; }
dialog .close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; cursor: pointer; }
dialog .close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; }

#offline { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 14px 16px;
  border: 0; border-radius: 10px; background: var(--surface); color: var(--text);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .4); }
#offline::backdrop { background: rgba(0, 0, 0, .45); }
#offline .close { top: 0; right: -4px; }
#offline h2 { margin: 2px 44px 6px 0; font-size: 18px; color: var(--text); }
#offline .hint { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.overview { position: relative; width: min(100%, 300px); margin: 0 auto 10px; cursor: pointer; }
.overview img { display: block; width: 100%; height: auto; border-radius: 4px; }
.overview svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.overview .sec { fill: rgba(31, 70, 50, .08); stroke: #1f4632; stroke-width: 60; }
.overview .sec.saved { fill: rgba(47, 158, 68, .32); }
.overview .home { fill: rgba(240, 200, 112, .25); stroke: #b8860b; stroke-width: 90; }
.overview .home.saved { fill: rgba(47, 158, 68, .32); }
.overview .view { fill: none; stroke: #1a73e8; stroke-width: 110; }
.overview .num { fill: #1f4632; font-weight: 700; text-anchor: middle; dominant-baseline: central;
  stroke: #fff; stroke-width: 120; paint-order: stroke; font-family: system-ui, sans-serif; }
#sectors { list-style: none; margin: 0 0 8px; padding: 0; }
#sectors li { display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-top: 1px solid rgba(127, 127, 127, .25); font-size: 14px; }
#sectors .num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
#sectors .name { flex: 1; min-width: 0; }
#sectors .size, #sectors .state { flex: none; color: var(--muted); font-size: 13px; }
#sectors button { flex: none; min-width: 96px; padding: 7px 10px; border: 0; border-radius: 6px;
  background: var(--green); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
#sectors button.secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--muted); }
#sectors button:disabled { opacity: .45; cursor: default; }

#welcome { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 0; border-radius: 10px; overflow: auto; background: var(--surface); color: var(--text);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .4); }
#welcome::backdrop { background: rgba(0, 0, 0, .45); }
#welcome .logo { padding: 18px 0 14px; background: #dfe8d3; }  /* pastel de la couverture (sponsor.background) */
#welcome .logo img { display: block; width: 170px; height: auto; margin: 0 auto; }
#welcome .body { padding: 14px 18px 16px; }
#welcome h1 { margin: 0 0 8px; font-size: 19px; color: var(--text); }
#welcome p { margin: 0 0 10px; }
#welcome .hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
#welcome-go { display: block; width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 8px;
  background: var(--green); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

.brewery { border-radius: 50%; background: #d41317; border: 2px solid #fff; box-shadow: var(--shadow);
  color: #fff; font: 800 19px/26px system-ui, -apple-system, "Noto Sans", sans-serif; text-align: center; }
.brewery-popup { font-size: 14px; line-height: 1.5; }
.brewery-popup a { color: #1f4632; font-weight: 600; }
.me { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), var(--shadow); }
.leaflet-container { font: inherit; }