/* ==========================================================================
   municipality.css — design system for /municipalite/:slug
   --------------------------------------------------------------------------
   One stylesheet, every municipality. The only thing that changes between
   Hemmingford and Laval is --m-brand / --m-brand-2, injected from Firestore by
   schema.js#applyTheme. Every brand-derived shade is computed with color-mix(),
   so a municipality stores two hex values and gets a coherent palette.

   LAYOUT PRINCIPLE — the map is the product.
   The first screen is exactly one flex column: top bar, a compact hero band,
   and then the map taking every remaining pixel. There is no sidebar. Controls
   float on the map. Browsing and municipal information live below the fold,
   in calm, generously spaced sections.

   Hierarchy: 1 event · 2 map · 3 sale cards · 4 municipal information.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Injected per municipality; these are only the boot defaults. */
  --m-brand: #0A1838;
  --m-brand-2: #C9A961;

  --m-brand-ink:   color-mix(in srgb, var(--m-brand) 82%, #000);
  --m-brand-600:   color-mix(in srgb, var(--m-brand) 92%, #000);
  --m-brand-100:   color-mix(in srgb, var(--m-brand) 14%, #fff);
  --m-brand-050:   color-mix(in srgb, var(--m-brand) 7%,  #fff);
  --m-brand-ring:  color-mix(in srgb, var(--m-brand) 26%, transparent);
  --m-brand-on:    #fff;

  --m-bg:          #FFFFFF;
  --m-surface:     #FFFFFF;
  --m-surface-2:   #F6F7F9;
  --m-line:        #E7E9EE;
  --m-line-soft:   #F1F3F6;
  --m-ink:         #0B1220;
  --m-ink-2:       #47516B;
  --m-ink-3:       #8A94AC;

  --m-warn:        #B45309;
  --m-warn-bg:     #FFFBEB;
  --m-danger:      #B91C1C;
  --m-danger-bg:   #FEF2F2;
  --m-ok:          #15803D;
  --m-ok-bg:       #F0FDF4;

  /*
   * These three must match BRAND in modules/schema.js: the pins are painted
   * from the JS values, the legend that explains them from these. When only the
   * JS side was changed, the legend went on showing the event as orange while
   * its pin had already turned magenta — a legend that contradicts the map is
   * worse than none.
   */
  --m-sale:        #C4793A;
  --m-flea:        #7C3AED;
  --m-event:       #DB2777;

  --m-r-sm: 10px;
  --m-r:    14px;
  --m-r-lg: 20px;
  --m-r-xl: 28px;

  /* Floating elements sit on a moving map, so they carry a real elevation. */
  --m-shadow-sm:    0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.04);
  --m-shadow:       0 2px 4px rgba(11,18,32,.05), 0 8px 24px -8px rgba(11,18,32,.12);
  --m-shadow-lg:    0 4px 8px rgba(11,18,32,.06), 0 24px 48px -16px rgba(11,18,32,.20);
  --m-shadow-float: 0 1px 2px rgba(11,18,32,.10), 0 4px 12px rgba(11,18,32,.10), 0 16px 32px -12px rgba(11,18,32,.18);

  --m-topbar-h: 60px;
  --m-actionbar-h: 76px;   /* phones only; see the responsive block */
  --m-ease: cubic-bezier(.32,.72,0,1);
  --m-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Stacking order -------------------------------------------------
     Leaflet assigns its own z-indexes: 400 on .leaflet-map-pane, 600 on
     markers, 700 on popups, 800 on .leaflet-control-container. Those numbers
     are only safe because `.m-stage` isolates them into their own stacking
     context (see §5). Without that isolation they compete at the root level
     and the map paints over the modal and the detail sheet.

     Never give an element here a z-index without adding it to this scale. */
  --m-z-topbar:  60;
  --m-z-overlay: 500;  /* inside .m-stage only — above the map, below nothing */
  --m-z-sheet:   700;
  --m-z-modal:   800;
  --m-z-toast:   900;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-bg:        #0B0E14;
    --m-surface:   #141821;
    --m-surface-2: #1A1F29;
    --m-line:      #262C38;
    --m-line-soft: #1E2431;
    --m-ink:       #F2F4F8;
    --m-ink-2:     #A8B1C4;
    --m-ink-3:     #707B92;
    --m-brand-100: color-mix(in srgb, var(--m-brand) 26%, #141821);
    --m-brand-050: color-mix(in srgb, var(--m-brand) 15%, #141821);
    --m-warn-bg:   #2A2113;
    --m-danger-bg: #2A1616;
    --m-ok-bg:     #12251A;
    --m-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --m-shadow:    0 2px 4px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.6);
    --m-shadow-lg: 0 4px 8px rgba(0,0,0,.35), 0 24px 48px -16px rgba(0,0,0,.7);
    --m-shadow-float: 0 2px 6px rgba(0,0,0,.5), 0 16px 32px -12px rgba(0,0,0,.7);
  }
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/*
  The UA sheet implements `[hidden]` as `display: none`, which any component
  rule setting an explicit `display` silently defeats — a `.m-omnibox__badge`
  styled `display: grid` stays visible no matter what `el.hidden = true` says.
  Components toggle `.hidden` in JS throughout this module, so the attribute
  has to win.
*/
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--m-font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--m-ink);
  background: var(--m-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: it stops stray horizontal overflow without turning
     body into a scroll container, which would break the sticky top bar. */
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.022em; font-weight: 650; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 2px; border-radius: 4px; }

/*
  Icons are inline <svg>, not a webfont (see utils/dom.js#icon). Sizing stays on
  `font-size` because dozens of rules below already set it that way — `1em` makes
  the SVG follow along, so replacing the font needed no other CSS change.
*/
.material-symbols-outlined {
  width: 1em; height: 1em;
  font-size: 20px; line-height: 1; flex-shrink: 0; user-select: none;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.145em;
}

.m-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 999;
  background: var(--m-brand); color: var(--m-brand-on);
  padding: 10px 16px; border-radius: var(--m-r); font-weight: 600;
}
.m-skip:focus { left: 8px; }
.m-hide-sm { display: inline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
   3. Buttons, chips, tags
   ------------------------------------------------------------------------- */

.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 17px;
  border: 1px solid var(--m-line); border-radius: var(--m-r);
  background: var(--m-surface); color: var(--m-ink);
  font-size: 14px; font-weight: 580; letter-spacing: -.005em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--m-shadow-sm);
  transition: background .18s var(--m-ease), border-color .18s var(--m-ease),
              transform .18s var(--m-ease), box-shadow .18s var(--m-ease);
}
.m-btn:hover  { background: var(--m-surface-2); border-color: color-mix(in srgb, var(--m-line) 55%, var(--m-ink-3)); }
.m-btn:active { transform: translateY(1px); }
.m-btn[disabled] { opacity: .55; cursor: not-allowed; }
.m-btn .material-symbols-outlined { font-size: 18px; }

.m-btn--primary {
  background: var(--m-brand); color: var(--m-brand-on); border-color: transparent;
  box-shadow: 0 1px 2px rgba(11,18,32,.14), 0 6px 16px -6px var(--m-brand-ring);
}
.m-btn--primary:hover { background: var(--m-brand-600); border-color: transparent; }

.m-btn--lg   { padding: 13px 22px; font-size: 15px; border-radius: 15px; }
.m-btn--sm   { padding: 7px 13px; font-size: 13px; border-radius: 11px; }
.m-btn--icon { padding: 10px; width: 44px; }
.m-btn--lg.m-btn--icon { width: 50px; padding: 13px; }
.m-btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--m-ink-2); }
.m-btn--quiet:hover { background: var(--m-surface-2); }

.m-iconbtn {
  width: 32px; height: 32px; border-radius: 999px; border: none; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--m-ink-3);
}
.m-iconbtn:hover { background: var(--m-surface-2); color: var(--m-ink); }

.is-spinning { animation: m-spin 1s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }

.m-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 680; letter-spacing: .02em; text-transform: uppercase;
  background: color-mix(in srgb, var(--chip, var(--m-brand)) 12%, var(--m-surface));
  color: var(--chip, var(--m-brand));
}

.m-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 8px;
  background: var(--m-surface-2); color: var(--m-ink-2);
  font-size: 11.5px; font-weight: 550; border: 1px solid var(--m-line-soft);
}
.m-tag .material-symbols-outlined { font-size: 14px; }
.m-tag--more { color: var(--m-ink-3); }

.m-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.m-badge--official {
  background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px);
}
.m-badge--official .material-symbols-outlined { font-size: 14px; }

.m-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--m-brand); font-weight: 580; font-size: 13.5px; text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 0;
}
.m-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.m-link .material-symbols-outlined { font-size: 16px; }

/* -------------------------------------------------------------------------
   4. Top bar
   ------------------------------------------------------------------------- */

.m-topbar {
  position: sticky; top: 0; z-index: var(--m-z-topbar);
  height: var(--m-topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(14px, 3vw, 28px);
  background: color-mix(in srgb, var(--m-surface) 84%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--m-line);
}
.m-topbar__identity { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.m-topbar__identity img { border-radius: 8px; object-fit: contain; }
.m-topbar__crest {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--m-brand-100); color: var(--m-brand);
}
.m-topbar__identity > span { display: flex; flex-direction: column; min-width: 0; }
.m-topbar__identity strong {
  font-size: 14.5px; font-weight: 640; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-topbar__identity em { font-style: normal; font-size: 11.5px; color: var(--m-ink-3); }
.m-topbar__actions { display: flex; align-items: center; gap: 10px; }

.m-langtoggle { display: flex; background: var(--m-surface-2); border-radius: 10px; padding: 2px; }
.m-langtoggle button {
  padding: 5px 11px; border: none; background: none; cursor: pointer;
  font-size: 12px; font-weight: 640; color: var(--m-ink-3); border-radius: 8px;
  transition: .18s var(--m-ease);
}
.m-langtoggle button.is-active { background: var(--m-surface); color: var(--m-ink); box-shadow: var(--m-shadow-sm); }

/* -------------------------------------------------------------------------
   5. First screen — hero band + map stage, one flex column
   ------------------------------------------------------------------------- */

.m-firstscreen {
  display: flex;
  flex-direction: column;
  /* svh, not vh: mobile browser chrome must not push the map off-screen. */
  min-height: calc(100svh - var(--m-topbar-h));
}

.m-alerts { display: flex; flex-direction: column; flex: 0 0 auto; }
.m-alert {
  display: flex; align-items: center; gap: 11px;
  padding: 10px clamp(16px, 4vw, 32px);
  font-size: 13.5px;
  background: var(--m-brand-050); color: var(--m-ink);
  border-bottom: 1px solid var(--m-line);
}
.m-alert strong { font-weight: 650; margin-right: 6px; }
.m-alert > div { flex: 1; min-width: 0; }
.m-alert code { font-size: 12px; background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; }
.m-alert a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--m-brand); text-decoration: none; }

/*
 * A row of destinations on one card — the municipality's own sites, say —
 * rather than one call to action. Chips wrap, so four links cost one line on a
 * desktop and two on a phone instead of four stacked cards.
 */
.m-linkrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.m-linkchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--m-surface); border: 1px solid var(--m-line);
  font-size: 12.5px; font-weight: 580; color: var(--m-ink-2);
  text-decoration: none; white-space: nowrap;
  transition: background .16s var(--m-ease), color .16s var(--m-ease), border-color .16s var(--m-ease);
}
.m-linkchip:hover { background: var(--m-brand-050); border-color: var(--m-brand-100); color: var(--m-brand-600); }
.m-linkchip svg { width: 14px; height: 14px; flex: none; }
/* The alert bar paints every descendant <a> brand-coloured; chips opt out. */
.m-alert .m-linkchip { color: var(--m-ink-2); font-weight: 580; }
.m-alert .m-linkchip:hover { color: var(--m-brand-600); }
.m-alert--warning  { background: var(--m-warn-bg);   color: var(--m-warn); }
.m-alert--critical { background: var(--m-danger-bg); color: var(--m-danger); }
.m-alert--critical .material-symbols-outlined { }

/* --- Hero: a band, not a landing page --- */

.m-hero {
  position: relative; flex: 0 0 auto;
  padding: clamp(18px, 2.6vw, 28px) clamp(16px, 4vw, 32px);
  background: linear-gradient(135deg, var(--m-brand) 0%, var(--m-brand-ink) 100%);
  color: #fff; overflow: hidden; isolation: isolate;
}
.m-hero.has-image::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-image); background-size: cover; background-position: center;
  transform: scale(1.04);
}
.m-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--m-brand) 90%, transparent) 0%,
    color-mix(in srgb, var(--m-brand-ink) 95%, transparent) 100%);
}
.m-hero:not(.has-image) .m-hero__scrim { display: none; }

.m-hero__inner {
  max-width: 1360px; margin: 0 auto;
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 22px);
}
.m-hero__mark { flex: 0 0 auto; }
.m-hero__logo { width: 52px; height: 52px; border-radius: 13px; background: rgba(255,255,255,.94); padding: 5px; object-fit: contain; }
.m-hero__crest {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px);
}
.m-hero__crest .material-symbols-outlined { font-size: 26px; }

.m-hero__copy { flex: 1; min-width: 0; }
.m-hero__eyebrow {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 560; opacity: .8; letter-spacing: .01em;
}
.m-hero__title {
  font-size: clamp(1.35rem, 2.9vw, 2.1rem);
  font-weight: 700; letter-spacing: -.03em; margin-top: 2px;
}
.m-hero__facts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 7px; font-size: 13.5px; opacity: .92;
}
.m-hero__facts span { display: inline-flex; align-items: center; gap: 6px; }
.m-hero__facts strong { font-weight: 680; }
.m-hero__facts .material-symbols-outlined { font-size: 16px; opacity: .72; }
.m-hero__sep { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .35; }
.m-hero__count strong { font-weight: 700; }
.m-hero__live {
  padding: 2px 10px; border-radius: 999px; font-weight: 640;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.26);
}
.m-hero__live .material-symbols-outlined { animation: m-pulse 2s ease-in-out infinite; }
@keyframes m-pulse { 50% { opacity: .45; } }

.m-hero__actions { flex: 0 0 auto; display: flex; gap: 9px; }
.m-hero__actions .m-btn:not(.m-btn--primary) {
  background: rgba(255,255,255,.14); color: #fff;
  border-color: rgba(255,255,255,.24); backdrop-filter: blur(10px); box-shadow: none;
}
.m-hero__actions .m-btn:not(.m-btn--primary):hover { background: rgba(255,255,255,.24); }
.m-hero__actions .m-btn--primary { background: #fff; color: var(--m-brand-ink); }
.m-hero__actions .m-btn--primary:hover { background: rgba(255,255,255,.9); }

.m-hero__progress { margin-top: 10px; max-width: 380px; }
.m-progress__bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.m-progress__bar span { display: block; height: 100%; border-radius: 99px; background: #fff; transition: width .8s var(--m-ease); }
.m-progress__label { font-size: 12px; opacity: .78; margin-top: 5px; font-weight: 550; }
.m-progress--thin .m-progress__bar { height: 4px; background: var(--m-line); }
.m-progress--thin .m-progress__bar span { background: var(--m-brand); }

/* --- Stage: the map takes every remaining pixel --- */

/*
  `isolation: isolate` is load-bearing, not decoration.

  Leaflet stamps z-index 400–800 on its own panes and control container. A
  positioned ancestor with `z-index: auto` does NOT create a stacking context,
  so without this line those values escape into the root stacking context and
  outrank the modal (800) and the detail sheet (700) — the map renders on top
  of both and the registration form is invisible.

  Isolating here confines every Leaflet z-index to this subtree, so the stage
  participates in the page as a single flat layer.
*/
.m-stage {
  position: relative; flex: 1 1 auto;
  isolation: isolate;
  z-index: 0;
  /* The rail bleeds past the overlay padding by design so cards can scroll to
     the edge. Clipping here keeps that bleed from widening the document and
     giving the whole page a horizontal scrollbar. */
  overflow: hidden;
  min-height: min(420px, 52svh);
  background: var(--m-surface-2);
}
.m-map { position: absolute; inset: 0; }

/* -------------------------------------------------------------------------
   6. Map overlay — floating controls, no sidebar
   ------------------------------------------------------------------------- */

.m-ov {
  position: absolute; inset: 0; z-index: var(--m-z-overlay);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  padding: clamp(12px, 1.6vw, 18px);
  gap: 12px;
  pointer-events: none;
}
.m-ov > * { pointer-events: auto; }

.m-ov__tr { grid-column: 2; grid-row: 1; justify-self: end; display: flex; flex-direction: column; gap: 9px; }
.m-ov__br { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; }

/* Omnibox */
.m-omnibox {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 50px; padding: 0 16px;
  border-radius: 999px;
  background: var(--m-surface);
  box-shadow: var(--m-shadow-float);
  transition: box-shadow .2s var(--m-ease);
}
.m-omnibox:focus-within { box-shadow: var(--m-shadow-float), 0 0 0 3px var(--m-brand-ring); }
.m-omnibox__icon { color: var(--m-ink-3); display: flex; }
.m-omnibox input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 14.5px; }
.m-omnibox input::-webkit-search-cancel-button { display: none; }
.m-omnibox__clear { border: none; background: none; cursor: pointer; color: var(--m-ink-3); display: grid; place-items: center; }
.m-omnibox__divider { width: 1px; height: 22px; background: var(--m-line); flex-shrink: 0; }
.m-omnibox__filters {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--m-ink-2); font-size: 13.5px; font-weight: 590;
  transition: background .16s var(--m-ease);
}
.m-omnibox__filters:hover { background: var(--m-surface-2); }
.m-omnibox__badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--m-brand); color: var(--m-brand-on);
  font-size: 11px; font-weight: 700;
}

/* Quick filters */
.m-quick {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  max-width: min(560px, 100%);
}
.m-quick::-webkit-scrollbar { display: none; }
.m-quick__pill {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 36px; padding: 0 15px; border-radius: 999px; cursor: pointer;
  border: none; background: var(--m-surface); color: var(--m-ink-2);
  font-size: 13px; font-weight: 570; box-shadow: var(--m-shadow-float);
  transition: .18s var(--m-ease);
}
.m-quick__pill:hover { color: var(--m-ink); }
.m-quick__pill.is-active { background: var(--m-brand); color: var(--m-brand-on); }
.m-quick__pill .material-symbols-outlined { font-size: 16px; }

/* Filter popover */
.m-filterpanel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 10;
  width: min(400px, calc(100vw - 32px));
  max-height: min(60svh, 520px); overflow-y: auto;
  padding: 16px; border-radius: var(--m-r-lg);
  background: var(--m-surface); box-shadow: var(--m-shadow-lg);
  border: 1px solid var(--m-line);
  display: flex; flex-direction: column; gap: 14px;
  animation: m-pop .2s var(--m-ease);
}
@keyframes m-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.m-filterpanel[hidden] { display: none; }
.m-filterpanel__head { display: flex; align-items: center; justify-content: space-between; }
.m-filterpanel__head h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--m-ink-3); }
.m-filterpanel__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--m-line-soft); }

/* Map control stacks */
.m-ctlgroup {
  display: flex; flex-direction: column;
  border-radius: var(--m-r); overflow: hidden;
  background: var(--m-surface); box-shadow: var(--m-shadow-float);
}
.m-ctlgroup button {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: none; background: none; cursor: pointer; color: var(--m-ink-2);
  transition: .16s var(--m-ease);
}
.m-ctlgroup button + button { border-top: 1px solid var(--m-line-soft); }
.m-ctlgroup button:hover { background: var(--m-surface-2); color: var(--m-ink); }
.m-ctlgroup button.is-active { background: var(--m-brand-100); color: var(--m-brand); }

/* Legend — one button until asked for */
.m-legend { position: relative; }
.m-legend > summary {
  width: 42px; height: 42px; border-radius: var(--m-r); cursor: pointer; list-style: none;
  display: grid; place-items: center; color: var(--m-ink-2);
  background: var(--m-surface); box-shadow: var(--m-shadow-float);
}
.m-legend > summary::-webkit-details-marker { display: none; }
.m-legend[open] > summary { background: var(--m-brand-100); color: var(--m-brand); }
.m-legend__body {
  position: absolute; right: 0; bottom: 50px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 15px; border-radius: var(--m-r);
  background: var(--m-surface); box-shadow: var(--m-shadow-lg);
  border: 1px solid var(--m-line);
  font-size: 12px; color: var(--m-ink-2); white-space: nowrap;
  animation: m-pop .2s var(--m-ease);
}
.m-legend__body span { display: flex; align-items: center; gap: 8px; }
.m-legend__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--c); flex-shrink: 0; }
.m-legend__line { width: 14px; height: 0; border-top: 2px dashed var(--m-ink-3); flex-shrink: 0; }

/* Results rail — the list, unrolled along the bottom */
.m-rail {
  grid-column: 1 / -1; grid-row: 3;
  margin: 0 calc(-1 * clamp(12px, 1.6vw, 18px)) calc(-1 * clamp(12px, 1.6vw, 18px));
  padding: 8px clamp(12px, 1.6vw, 18px) clamp(12px, 1.6vw, 18px);
  pointer-events: none;
}
.m-rail[hidden] { display: none; }
.m-rail__track {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; pointer-events: auto;
}
.m-rail__track::-webkit-scrollbar { display: none; }


/* -------------------------------------------------------------------------
   Bar, view tabs, numbered rows, selected card
   The bar is a sibling of the map: absolutely positioned over it on desktop,
   a solid row above it on phones (see the responsive block).
   ------------------------------------------------------------------------- */

.m-bar {
  position: absolute; top: clamp(12px, 1.6vw, 18px); left: clamp(12px, 1.6vw, 18px);
  z-index: var(--m-z-overlay); width: min(460px, calc(100% - 2 * clamp(12px, 1.6vw, 18px)));
  display: flex; flex-direction: column; gap: 10px;
}
.m-barrow { display: flex; gap: 9px; align-items: stretch; }
.m-barrow .m-omnibox { flex: 1; padding-right: 8px; }

.m-filterbtn {
  position: relative; flex: 0 0 auto;
  width: 50px; border-radius: 999px; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: var(--m-surface); color: var(--m-ink-2);
  box-shadow: var(--m-shadow-float);
  transition: .16s var(--m-ease);
}
.m-filterbtn:hover { color: var(--m-ink); }
.m-filterbtn .m-omnibox__badge { position: absolute; top: 6px; right: 6px; }

/* Carte | Liste — phones only */
.m-viewtabs { display: none; gap: 4px; padding: 4px; border-radius: 999px; background: var(--m-surface-2); }
.m-viewtabs button {
  flex: 1; min-height: 44px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--m-ink-2); font-size: 14.5px; font-weight: 600;
  transition: .18s var(--m-ease);
}
.m-viewtabs button.is-active { background: var(--m-surface); color: var(--m-ink); box-shadow: var(--m-shadow-sm); }

/* The list tab */
.m-mlist { display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
           background: var(--m-bg); padding: 12px 16px 16px; }
.m-stage.is-list-view .m-mlist { display: block; }
.m-stage.is-list-view .m-map,
.m-stage.is-list-view .m-ov { display: none; }

.m-row {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px; margin-bottom: 10px; cursor: pointer;
  border: 1px solid var(--m-line-soft); border-radius: var(--m-r-lg);
  background: var(--m-surface);
  transition: border-color .16s var(--m-ease), box-shadow .16s var(--m-ease);
}
.m-row:hover, .m-row:focus-visible { border-color: var(--m-line); box-shadow: var(--m-shadow-sm); }
.m-row.is-selected { border-color: var(--m-brand); box-shadow: 0 0 0 3px var(--m-brand-ring); }
.m-row__num {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--kind) 13%, var(--m-surface));
  color: var(--kind); font-size: 16px; font-weight: 700;
}
/* It holds a glyph now, not a digit. */
.m-row__num svg { width: 22px; height: 22px; }
.m-row__body { flex: 1; min-width: 0; }
.m-row__body h3 { font-size: 15px; font-weight: 640; letter-spacing: -.012em; }
.m-row__addr { font-size: 13.5px; color: var(--m-ink-2); margin-top: 2px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-row__when { font-size: 12.5px; color: var(--m-ink-3); margin-top: 3px; }
.m-row__dist { flex: 0 0 auto; font-size: 13.5px; font-weight: 620; color: var(--m-brand); }

/* Numbered map pin — a disc, because a number is what ties it to the list */
.m-numpin {
  position: relative; width: 100%; height: 100%; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--m-surface); color: var(--pin);
  border: 2px solid var(--pin);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 5px rgba(11,18,32,.26);
  transition: transform .18s var(--m-ease);
}
.m-numpin.is-selected { background: var(--pin); color: #fff; font-size: 17px; border-color: #fff; }
.m-numpin .m-pin-star { top: -6px; right: -6px; }

/* Selected sale, at the foot of the map.
   Compact by design: it sits ON the map, so its height is map the visitor
   cannot see. One identity row, one detail line, two actions. */
.m-selected {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 clamp(12px, 1.6vw, 18px) clamp(12px, 1.6vw, 18px);
  pointer-events: none;
}
.m-selcard {
  position: relative; pointer-events: auto; max-width: 420px;
  padding: 12px 14px 13px; border-radius: 18px;
  background: color-mix(in srgb, var(--m-surface) 97%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--m-line-soft);
  box-shadow: 0 1px 2px rgba(11,18,32,.08), 0 10px 28px -10px rgba(11,18,32,.30);
  animation: m-selcard-in .26s var(--m-ease);
}
@keyframes m-selcard-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
}
/* Fades before the selection clears, so the pin and card leave together. */
.m-selcard.is-leaving {
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s var(--m-ease), transform .18s var(--m-ease);
}

.m-selcard__head { display: flex; align-items: center; gap: 11px; padding-right: 26px; }
.m-selcard__num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--m-sale) 14%, var(--m-surface));
  color: var(--m-sale); font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.m-selcard__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.m-selcard__text strong {
  font-size: 14.5px; font-weight: 640; letter-spacing: -.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-selcard__text span {
  font-size: 12.5px; color: var(--m-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.m-selcard__close {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 999px; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: transparent; color: var(--m-ink-3);
}
.m-selcard__close:hover { background: var(--m-surface-2); color: var(--m-ink); }
.m-selcard__close .material-symbols-outlined { font-size: 17px; }

.m-selcard__actions { display: flex; gap: 8px; margin-top: 11px; }
.m-selcard__actions .m-btn { flex: 1; min-height: 40px; border-radius: 11px; font-size: 13.5px; }
.m-selcard__actions .m-btn .material-symbols-outlined { font-size: 16px; }

/* Single primary action, phones only */
.m-actionbar { display: none; }

/* -------------------------------------------------------------------------
   7. Cards
   ------------------------------------------------------------------------- */

.m-card {
  position: relative; background: var(--m-surface); cursor: pointer;
  border: 1px solid var(--m-line-soft); border-radius: var(--m-r);
  transition: border-color .18s var(--m-ease), box-shadow .18s var(--m-ease), transform .18s var(--m-ease);
}
.m-card:hover { border-color: var(--m-line); box-shadow: var(--m-shadow); transform: translateY(-2px); }
.m-card.is-selected { border-color: var(--m-brand); box-shadow: 0 0 0 3px var(--m-brand-ring); }

.m-card__media { position: relative; overflow: hidden; background: var(--m-surface-2); flex-shrink: 0; }
.m-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--m-ease); }
.m-card:hover .m-card__media img { transform: scale(1.05); }
.m-card__placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--kind) 9%, var(--m-surface-2)); color: var(--kind);
}
.m-card__placeholder .material-symbols-outlined { font-size: 28px; }
.m-card__kind {
  position: absolute; left: 7px; bottom: 7px;
  padding: 2px 8px; border-radius: 6px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; background: var(--chip); color: #fff;
}
.m-card__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m-card__title { font-size: 14.5px; font-weight: 630; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-card__address { font-size: 12.5px; color: var(--m-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-card__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; }
.m-card__meta span { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--m-ink-3); font-weight: 540; }
.m-card__meta .material-symbols-outlined { font-size: 14px; }
.m-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.m-card__fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; border: none;
  background: color-mix(in srgb, var(--m-surface) 82%, transparent);
  backdrop-filter: blur(8px); color: var(--m-ink-3);
  transition: .18s var(--m-ease);
}
.m-card__fav:hover { color: var(--m-danger); transform: scale(1.1); }
.m-card__fav.is-on { color: var(--m-danger); }
.m-card__fav.is-on .material-symbols-outlined { }

/* Rail variant — floats on the map */
.m-card--rail {
  display: flex; gap: 11px; padding: 9px;
  width: 296px; flex-shrink: 0; scroll-snap-align: center;
  box-shadow: var(--m-shadow-float); border-color: transparent;
}
.m-card--rail .m-card__media { width: 74px; height: 74px; border-radius: 10px; }
.m-card--rail .m-card__body { padding-right: 26px; }
.m-card--rail .m-card__fav { top: 6px; right: 6px; width: 26px; height: 26px; background: none; backdrop-filter: none; }
.m-card--rail .m-card__fav .material-symbols-outlined { font-size: 17px; }

/* Grid variant — the browsing section */
.m-card--grid { display: flex; flex-direction: column; overflow: hidden; }
.m-card--grid .m-card__media { aspect-ratio: 4 / 3; width: 100%; border-radius: 0; }
.m-card--grid .m-card__body { padding: 14px 15px 16px; }
.m-card--grid .m-card__title { white-space: normal; }

/* Compact variant */
.m-card--compact { display: flex; gap: 12px; padding: 9px; }
.m-card--compact .m-card__media { width: 88px; height: 88px; border-radius: 10px; }
.m-card--compact .m-card__body { padding-right: 30px; }

.m-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 64px 20px; text-align: center; color: var(--m-ink-3);
}
.m-empty .material-symbols-outlined { font-size: 38px; opacity: .5; }
.m-empty p { font-size: 15px; font-weight: 580; color: var(--m-ink-2); }
.m-empty span { font-size: 13px; }

/* -------------------------------------------------------------------------
   8. Sections below the map
   ------------------------------------------------------------------------- */

.m-section {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(52px, 7vw, 92px) clamp(20px, 4vw, 32px);
}
.m-section + .m-section { padding-top: 0; }
.m-section__head { margin-bottom: clamp(24px, 3vw, 36px); }
.m-section__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 690; letter-spacing: -.028em; }
.m-section__sub { font-size: 14.5px; color: var(--m-ink-3); margin-top: 5px; }
.m-section__more { display: flex; justify-content: center; margin-top: 32px; }
.m-section__sponsors { margin-top: clamp(32px, 4vw, 52px); }

.m-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* Featured sale — one promoted listing, not a carousel */
.m-featured {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px); align-items: center;
  margin-bottom: clamp(28px, 3.5vw, 48px);
  padding: clamp(16px, 2vw, 24px);
  border-radius: var(--m-r-xl);
  background: var(--m-brand-050);
  border: 1px solid color-mix(in srgb, var(--m-brand) 12%, transparent);
  cursor: pointer;
  transition: box-shadow .22s var(--m-ease), transform .22s var(--m-ease);
}
.m-featured:hover { box-shadow: var(--m-shadow-lg); transform: translateY(-2px); }
.m-featured__media { aspect-ratio: 16 / 10; border-radius: var(--m-r-lg); overflow: hidden; background: var(--m-surface-2); }
.m-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.m-featured__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--m-brand); background: var(--m-brand-100); }
.m-featured__placeholder .material-symbols-outlined { font-size: 44px; }
.m-featured__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--m-brand); margin-bottom: 9px;
}
.m-featured__eyebrow .material-symbols-outlined { font-size: 15px; }
.m-featured__body h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.025em; }
.m-featured__body p { font-size: 14.5px; color: var(--m-ink-2); line-height: 1.6; margin-top: 9px; }
.m-featured__meta { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.m-featured__meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--m-ink-2); }
.m-featured__meta .material-symbols-outlined { font-size: 17px; color: var(--m-brand); }

/* Municipal information — column flow, panels never split */
.m-columns { columns: 3 280px; column-gap: clamp(16px, 2vw, 24px); }
.m-columns > * { break-inside: avoid; margin-bottom: clamp(16px, 2vw, 24px); }

/* -------------------------------------------------------------------------
   9. Panels
   ------------------------------------------------------------------------- */

.m-panel {
  display: inline-block; width: 100%;
  padding: 18px; border-radius: var(--m-r-lg);
  background: var(--m-surface); border: 1px solid var(--m-line);
}
.m-panel__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--m-ink-3); margin-bottom: 14px;
}
.m-panel__title .material-symbols-outlined { font-size: 17px; }
.m-panel__title--quiet { opacity: .7; }
.m-panel__lead { font-size: 13.5px; color: var(--m-ink-2); margin-bottom: 12px; }

/* Weather */
.m-panel--weather {
  background: linear-gradient(140deg, var(--m-brand), var(--m-brand-ink));
  color: #fff; border-color: transparent;
}
.m-panel--weather .m-panel__title { color: rgba(255,255,255,.6); }
.m-weather__now { display: flex; align-items: center; gap: 14px; }
.m-weather__glyph .material-symbols-outlined { font-size: 46px; opacity: .95; }
.m-weather__temp { font-size: 2.3rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.m-weather__desc { font-size: 13.5px; font-weight: 580; margin-top: 3px; }
.m-weather__sub { font-size: 11.5px; opacity: .64; }
.m-weather__forecast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 16px; }
.m-weather__day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 4px; border-radius: 12px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10);
}
.m-weather__day.is-weekend { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.24); }
.m-weather__dow { font-size: 10.5px; opacity: .68; font-weight: 620; text-transform: uppercase; letter-spacing: .04em; }
.m-weather__day .material-symbols-outlined { font-size: 19px; }
.m-weather__max { font-size: 14.5px; font-weight: 680; }
.m-weather__pop { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; opacity: .68; }
.m-weather__pop .material-symbols-outlined { font-size: 11px; }
.m-weather__warning {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 13px;
  padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2);
}

/* Weekends */
.m-weekends { display: flex; flex-direction: column; gap: 8px; }
.m-weekend {
  position: relative; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--m-r);
  border: 1px solid var(--m-line); background: var(--m-surface);
}
.m-weekend.is-next { border-color: var(--m-brand); background: var(--m-brand-050); }
.m-weekend__badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--m-brand); width: 100%; }
.m-weekend__dates { font-size: 13.5px; font-weight: 650; }
.m-weekend__month { font-size: 11.5px; color: var(--m-ink-3); }
.m-weekend__ok { position: absolute; top: 10px; right: 12px; color: var(--m-ok); }
.m-weekend__ok .material-symbols-outlined { font-size: 15px; }

/* Accordions / rules */
.m-accordions { display: flex; flex-direction: column; gap: 7px; }
.m-accordion { border: 1px solid var(--m-line); border-radius: var(--m-r); overflow: hidden; }
.m-accordion > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600;
}
.m-accordion > summary::-webkit-details-marker { display: none; }
.m-accordion[open] .m-accordion__chevron { transform: rotate(180deg); }
.m-accordion__chevron { transition: transform .22s var(--m-ease); color: var(--m-ink-3); }
.m-rules { list-style: none; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.m-rules li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--m-ink-2); line-height: 1.5; }
.m-rules .material-symbols-outlined { font-size: 17px; color: var(--m-brand); margin-top: 1px; }

/* Info cards */
.m-infocards { display: flex; flex-direction: column; gap: 11px; }
.m-infocard { border: 1px solid var(--m-line); border-radius: var(--m-r); overflow: hidden; background: var(--m-surface); }
.m-infocard__img { width: 100%; height: 120px; object-fit: cover; }
.m-infocard__body { padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.m-infocard h3 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; }
.m-infocard h3 .material-symbols-outlined { font-size: 18px; color: var(--m-brand); }
.m-infocard p { font-size: 13px; color: var(--m-ink-2); line-height: 1.55; }
.m-infocard--warning  { border-color: color-mix(in srgb, var(--m-warn) 34%, transparent);   background: var(--m-warn-bg); }
.m-infocard--critical { border-color: color-mix(in srgb, var(--m-danger) 34%, transparent); background: var(--m-danger-bg); }
.m-infocard.is-mayor { background: var(--m-brand-050); border-color: color-mix(in srgb, var(--m-brand) 22%, transparent); }

/* Services */
.m-service + .m-service { margin-top: 16px; }
.m-service__title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 640; color: var(--m-ink-2); margin-bottom: 8px; }
.m-service__title .material-symbols-outlined { font-size: 16px; color: var(--m-brand); }
.m-service__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.m-service__item {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; border-radius: var(--m-r-sm);
  border: 1px solid var(--m-line-soft); background: var(--m-surface-2);
  transition: .16s var(--m-ease);
}
.m-service__item:hover:not([disabled]) { border-color: var(--m-brand); background: var(--m-brand-050); }
.m-service__item[disabled] { cursor: default; opacity: .75; }
.m-service__name { font-size: 13px; font-weight: 590; }
.m-service__addr { font-size: 11.5px; color: var(--m-ink-3); }
.m-service__a11y { position: absolute; top: 10px; right: 11px; font-size: 15px; color: var(--m-ok); }

/* Route planner */
.m-route__summary { font-size: 13px; font-weight: 600; color: var(--m-brand); margin-bottom: 10px; }
.m-route__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.m-route__list li { display: flex; align-items: flex-start; gap: 9px; }
.m-route__num {
  width: 21px; height: 21px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--m-brand); color: var(--m-brand-on);
}
.m-route__label { display: flex; flex-direction: column; min-width: 0; }
.m-route__label strong { font-size: 13px; font-weight: 590; }
.m-route__label span { font-size: 11.5px; color: var(--m-ink-3); }
.m-route__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Sponsors — quiet by design */
.m-panel--sponsors { border: none; background: none; padding: 0; }
.m-sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.m-sponsor {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 20px 14px; border-radius: var(--m-r); text-decoration: none; min-height: 92px;
  border: 1px solid var(--m-line-soft); background: var(--m-surface-2);
  transition: .18s var(--m-ease);
}
.m-sponsor:hover { border-color: var(--m-line); background: var(--m-surface); box-shadow: var(--m-shadow-sm); }
.m-sponsor img { max-height: 38px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: .22s var(--m-ease); }
.m-sponsor:hover img { filter: none; opacity: 1; }
.m-sponsor__name { font-size: 13px; font-weight: 620; text-align: center; }
.m-sponsor__desc { font-size: 11px; color: var(--m-ink-3); text-align: center; line-height: 1.35; }

/* Shared form atoms */
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chipbtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--m-line); background: var(--m-surface);
  font-size: 12.5px; font-weight: 550; color: var(--m-ink-2);
  transition: .16s var(--m-ease);
}
.m-chipbtn:hover { border-color: var(--m-ink-3); }
.m-chipbtn.is-active { background: var(--m-brand-100); border-color: var(--m-brand); color: var(--m-brand); font-weight: 620; }
.m-chipbtn .material-symbols-outlined { font-size: 15px; }

.m-field { display: flex; flex-direction: column; gap: 6px; border: none; padding: 0; min-width: 0; }
.m-field__label { font-size: 12.5px; font-weight: 620; color: var(--m-ink-2); }
.m-field__label em { font-style: normal; font-weight: 500; color: var(--m-ink-3); }
.m-field input, .m-field select, .m-field textarea {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  border: 1.5px solid var(--m-line); background: var(--m-surface);
  font-size: 14px; outline: none; transition: .16s var(--m-ease);
}
.m-field input:focus, .m-field select:focus, .m-field textarea:focus {
  border-color: var(--m-brand); box-shadow: 0 0 0 4px var(--m-brand-ring);
}
.m-field textarea { resize: vertical; }
.m-field--half { max-width: 220px; }

.m-toggles { display: flex; flex-direction: column; gap: 9px; }
.m-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--m-ink-2); }
.m-toggle input { width: 17px; height: 17px; accent-color: var(--m-brand); cursor: pointer; }
.m-toggle span { display: inline-flex; align-items: center; gap: 6px; }
.m-toggle--consent { align-items: flex-start; padding: 13px; background: var(--m-surface-2); border-radius: var(--m-r); }
.m-toggle--consent input { margin-top: 2px; }

/*
 * Fixed event dates — shown in place of the date pickers when the by-law
 * settles the weekend. Deliberately styled as a statement, not as a disabled
 * field: greyed-out inputs read as "broken", while this reads as "decided".
 */
.m-fixeddates {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border-radius: var(--m-r);
  background: var(--m-brand-050); border: 1px solid var(--m-brand-100);
}
.m-fixeddates__icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--m-brand); color: var(--m-brand-on);
}
.m-fixeddates__icon svg { width: 20px; height: 20px; }
.m-fixeddates__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-fixeddates__label {
  font-size: 11.5px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--m-brand-600);
}
.m-fixeddates__body strong { font-size: 16px; font-weight: 700; color: var(--m-ink); line-height: 1.3; }
.m-fixeddates__hours,
.m-fixeddates__body em {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--m-ink-3); font-style: normal; line-height: 1.45;
}
.m-fixeddates__hours { font-weight: 550; color: var(--m-ink-2); }
/* The by-law note wraps to two lines on a phone; keep its icon on the first. */
.m-fixeddates__body em { align-items: flex-start; }
.m-fixeddates__body em svg { margin-top: 2px; }
.m-fixeddates svg { flex: none; }
.m-fixeddates__hours svg,
.m-fixeddates__body em svg { width: 15px; height: 15px; }

.m-error { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--m-danger); font-weight: 550; }
.m-error .material-symbols-outlined { font-size: 15px; }
.m-hint { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--m-ink-3); line-height: 1.5; }
.m-hint--ok { color: var(--m-ok); }
.m-hint .material-symbols-outlined { font-size: 16px; }

.m-advanced { border: 1px solid var(--m-line); border-radius: var(--m-r); overflow: hidden; }
.m-advanced > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--m-ink-2); background: var(--m-surface);
}
.m-advanced > summary::-webkit-details-marker { display: none; }
.m-advanced > summary span:first-of-type { flex: 1; }
.m-advanced[open] > summary { border-bottom: 1px solid var(--m-line-soft); }
.m-advanced[open] .m-accordion__chevron { transform: rotate(180deg); }
.m-advanced > *:not(summary) { padding: 13px 14px; }

/* -------------------------------------------------------------------------
   10. Detail sheet
   ------------------------------------------------------------------------- */

.m-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--m-z-sheet);
  width: min(440px, 100vw);
  background: var(--m-surface); border-left: 1px solid var(--m-line);
  box-shadow: var(--m-shadow-lg);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  transition: transform .34s var(--m-ease);
}
.m-sheet.is-open { transform: none; visibility: visible; }

.m-sheet__hero { position: relative; }
.m-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4/3; }
.m-gallery::-webkit-scrollbar { display: none; }
.m-gallery img { min-width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.m-sheet__placeholder {
  aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: color-mix(in srgb, var(--kind) 9%, var(--m-surface-2)); color: var(--kind);
  font-size: 13px; font-weight: 560;
}
.m-sheet__placeholder .material-symbols-outlined { font-size: 40px; }
.m-sheet__close, .m-modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 999px; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--m-surface) 88%, transparent);
  backdrop-filter: blur(10px); box-shadow: var(--m-shadow-sm);
}
.m-sheet__count {
  position: absolute; bottom: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px);
}
.m-sheet__count .material-symbols-outlined { font-size: 14px; }

.m-sheet__content { padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.m-sheet__title { font-size: 1.4rem; font-weight: 690; letter-spacing: -.025em; }
.m-sheet__facts { display: flex; flex-direction: column; gap: 9px; }
.m-sheet__facts p { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--m-ink-2); }
.m-sheet__facts .material-symbols-outlined { font-size: 18px; color: var(--m-brand); }
.m-sheet__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.m-sheet__actions .m-btn { flex: 1; min-width: 120px; }
.m-sheet__actions .m-btn--icon { flex: 0 0 auto; min-width: 0; }
.m-sheet__section { padding-top: 15px; border-top: 1px solid var(--m-line-soft); display: flex; flex-direction: column; gap: 10px; }
.m-sheet__section h4 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--m-ink-3); }
.m-sheet__desc { font-size: 14px; color: var(--m-ink-2); line-height: 1.65; white-space: pre-line; }
.m-amenities, .m-contact { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.m-amenities li, .m-contact li a { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--m-ink-2); text-decoration: none; }
.m-amenities .material-symbols-outlined, .m-contact .material-symbols-outlined { font-size: 18px; color: var(--m-brand); }
.m-contact li a:hover { color: var(--m-brand); }
.m-sheet__footer { padding-top: 15px; border-top: 1px solid var(--m-line-soft); }
.m-sheet__report { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--m-ink-3); text-decoration: none; }
.m-sheet__report:hover { color: var(--m-danger); }

/* -------------------------------------------------------------------------
   11. Modal (registration)
   ------------------------------------------------------------------------- */

.m-modal { position: fixed; inset: 0; z-index: var(--m-z-modal); display: none; }
.m-modal.is-open { display: grid; place-items: center; padding: 16px; }
.m-modal__backdrop { position: absolute; inset: 0; background: rgba(8,12,22,.55); backdrop-filter: blur(4px); animation: m-fade .24s var(--m-ease); }
@keyframes m-fade { from { opacity: 0; } }

.m-modal__dialog {
  position: relative; z-index: 1;
  width: min(620px, 100%); max-height: min(88svh, 860px);
  display: flex; flex-direction: column;
  background: var(--m-surface); border-radius: var(--m-r-xl);
  box-shadow: var(--m-shadow-lg); overflow: hidden;
  animation: m-rise .3s var(--m-ease);
}
@keyframes m-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.m-modal__head { position: relative; padding: 24px 24px 16px; border-bottom: 1px solid var(--m-line-soft); }
.m-modal__step { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--m-brand); }
.m-modal__head h2 { font-size: 1.3rem; margin-top: 4px; }
.m-modal__intro { font-size: 13px; color: var(--m-ink-3); margin-top: 3px; }
.m-modal__rail { display: flex; gap: 4px; padding: 0 24px; }
.m-modal__rail span { flex: 1; height: 3px; border-radius: 99px; background: var(--m-line); transition: background .3s var(--m-ease); }
.m-modal__rail span.is-done { background: var(--m-brand); }
.m-modal__body { flex: 1; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 17px; }
.m-modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 24px; border-top: 1px solid var(--m-line-soft); background: var(--m-surface-2);
}

/* Hybrid entry: two doors */
.m-choose { display: flex; flex-direction: column; gap: 11px; }
.m-choose__card {
  display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
  padding: 18px; border-radius: var(--m-r-lg); cursor: pointer;
  border: 1.5px solid var(--m-line); background: var(--m-surface);
  transition: .18s var(--m-ease);
}
.m-choose__card:hover {
  border-color: var(--m-brand); background: var(--m-brand-050);
  transform: translateY(-1px); box-shadow: var(--m-shadow);
}
.m-choose__icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--m-brand-100); color: var(--m-brand);
}
.m-choose__icon .material-symbols-outlined { font-size: 23px; }
.m-choose__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-choose__text strong { font-size: 15px; font-weight: 640; }
.m-choose__text span { font-size: 13px; color: var(--m-ink-2); line-height: 1.45; }
.m-choose__go { color: var(--m-ink-3); flex-shrink: 0; }
.m-choose__card:hover .m-choose__go { color: var(--m-brand); }

/* Vertical stack inside the express form's disclosure */
.m-stack { display: flex; flex-direction: column; gap: 15px; }

.m-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.m-inline { display: flex; gap: 8px; align-items: stretch; }
.m-inline input { flex: 1; }
/* Address autocomplete */
.m-autocomplete { position: relative; }
.m-autocomplete__control {
  display: flex; align-items: center; gap: 9px;
  padding: 0 13px; border-radius: 11px;
  border: 1.5px solid var(--m-line); background: var(--m-surface);
  transition: .16s var(--m-ease);
}
.m-autocomplete__control:focus-within {
  border-color: var(--m-brand); box-shadow: 0 0 0 4px var(--m-brand-ring);
}
.m-autocomplete__control input {
  flex: 1; min-width: 0; padding: 12px 0;
  border: none; background: none; outline: none; font-size: 14.5px;
}
.m-autocomplete__icon { color: var(--m-ink-3); }
.m-autocomplete__spinner { color: var(--m-brand); display: flex; }
.m-autocomplete__ok { color: var(--m-ok); display: flex; }
.m-autocomplete__ok .material-symbols-outlined { }

.m-autocomplete__list {
  position: absolute; left: 0; right: 0; top: calc(100% - 20px); z-index: 5;
  margin: 6px 0 0; padding: 6px; list-style: none;
  max-height: 268px; overflow-y: auto;
  background: var(--m-surface); border: 1px solid var(--m-line);
  border-radius: var(--m-r); box-shadow: var(--m-shadow-lg);
  animation: m-pop .16s var(--m-ease);
}
.m-autocomplete__list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 11px; border-radius: 9px; cursor: pointer;
}
.m-autocomplete__list li:hover,
.m-autocomplete__list li.is-active { background: var(--m-brand-050); }
.m-autocomplete__list .material-symbols-outlined { font-size: 18px; color: var(--m-brand); margin-top: 1px; }
.m-autocomplete__text { display: flex; flex-direction: column; min-width: 0; }
.m-autocomplete__text strong {
  font-size: 14px; font-weight: 590;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-autocomplete__text span { font-size: 12px; color: var(--m-ink-3); }

.m-minimap-wrap { display: flex; flex-direction: column; gap: 8px; }
.m-minimap { height: 230px; border-radius: var(--m-r); overflow: hidden; border: 1px solid var(--m-line); background: var(--m-surface-2); }

.m-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 9px; }
.m-photo { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--m-surface-2); }
.m-photo img { width: 100%; height: 100%; object-fit: cover; }
.m-photo button {
  position: absolute; top: 5px; right: 5px; width: 23px; height: 23px;
  border-radius: 999px; border: none; cursor: pointer;
  display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff;
}
.m-photo button .material-symbols-outlined { font-size: 14px; }
.m-photo--add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; color: var(--m-ink-3);
  border: 1.5px dashed var(--m-line); background: var(--m-surface); transition: .18s var(--m-ease);
}
.m-photo--add span { font-size: 11px; font-weight: 570; }

/* Preview of the municipality's stand-in artwork, shown only while the
   citizen has added no photo of their own. */
.m-defaultimg { margin-top: 10px; }
.m-defaultimg img {
  width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  border-radius: var(--m-r); border: 1px solid var(--m-line-soft);
}
.m-defaultimg p {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 12.5px; color: var(--m-ink-3);
}
.m-defaultimg .material-symbols-outlined { font-size: 16px; }
.m-photo--add .material-symbols-outlined { font-size: 22px; }
.m-photo--add:hover { border-color: var(--m-brand); color: var(--m-brand); background: var(--m-brand-050); }

.m-success { padding: 48px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.m-success__icon .material-symbols-outlined { font-size: 56px; color: var(--m-ok); }
.m-success h2 { font-size: 1.2rem; max-width: 34ch; }
.m-success p { font-size: 13px; color: var(--m-ink-3); }

/* -------------------------------------------------------------------------
   12. Leaflet
   ------------------------------------------------------------------------- */

.m-pin-wrap, .m-poi-wrap, .m-stop-wrap, .m-user-wrap, .m-cluster-wrap { background: none !important; border: none !important; }

.m-pin { position: relative; width: 34px; height: 41px; transition: transform .22s var(--m-ease); transform-origin: 50% 100%; filter: drop-shadow(0 3px 5px rgba(11,18,32,.3)); }
.m-pin:hover { transform: scale(1.09); }
.m-pin.is-selected { transform: scale(1.22); z-index: 10; animation: m-drop .45s var(--m-ease); }
@keyframes m-drop { 0% { transform: scale(1.22) translateY(-10px); } 60% { transform: scale(1.3) translateY(2px); } 100% { transform: scale(1.22); } }
.m-pin-glyph { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 13px !important; }
/* Kept in step with PIN_SIZE.flea_market in modules/components/map.js — the box
   is sized here, the anchor that puts its tip on the coordinates is set there. */
.m-pin--flea_market { width: 28px; height: 34px; }
.m-pin--flea_market .m-pin-glyph { top: 5px; font-size: 11px !important; }
.m-pin-star {
  position: absolute; top: -3px; right: -3px; font-size: 15px !important;
  color: #E11D48; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* 24px, not 30: fifteen service points sit within a few hundred metres of the
   village centre and at the old size they overlapped into a single blob. */
.m-poi { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--poi); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(11,18,32,.3); }
.m-poi .material-symbols-outlined { font-size: 12px; color: #fff; }

.m-cluster {
  width: 100%; height: 100%; border-radius: 999px; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: #fff; font-variant-numeric: tabular-nums;
  background: var(--m-brand); border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 12px rgba(11,18,32,.28);
}
.m-cluster--2 { font-size: 14px; } .m-cluster--3 { font-size: 15px; } .m-cluster--4 { font-size: 16px; }

.m-stop { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--stop); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(11,18,32,.3); }
.m-user { position: relative; width: 22px; height: 22px; }
.m-user__dot { position: absolute; inset: 5px; border-radius: 999px; background: #1D74F5; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.m-user__pulse { position: absolute; inset: 0; border-radius: 999px; background: rgba(29,116,245,.28); animation: m-ping 2s var(--m-ease) infinite; }
@keyframes m-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

.m-route-line { animation: m-dash 24s linear infinite; }
@keyframes m-dash { to { stroke-dashoffset: -300; } }

/*
 * `color` matters as much as `background` here: leaflet.css:524 hard-codes
 * `color: #333` on this wrapper, so any popup text without a colour of its own
 * inherited near-black. In dark mode that left the <h3> title darker than the
 * address underneath it — the least readable line was the most important one.
 */
.m-popup-wrap .leaflet-popup-content-wrapper { border-radius: 18px; padding: 0; overflow: hidden; box-shadow: var(--m-shadow-lg); background: var(--m-surface); color: var(--m-ink); }
.m-popup-wrap .leaflet-popup-content { margin: 0; width: auto !important; }
.m-popup-wrap .leaflet-popup-tip { background: var(--m-surface); }
.m-popup-wrap a.leaflet-popup-close-button { color: var(--m-ink-3); padding: 8px 8px 0 0; }
.m-popup__media { height: 134px; overflow: hidden; }
.m-popup__media img { width: 100%; height: 100%; object-fit: cover; }
.m-popup__body, .m-popup--poi { padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.m-popup__body h3 { font-size: 14.5px; font-weight: 650; }
.m-popup__meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--m-ink-2); }
.m-popup__meta .material-symbols-outlined { font-size: 15px; color: var(--m-ink-3); }
.m-popup__actions { display: flex; gap: 6px; margin-top: 4px; }
.m-popup__actions .m-btn { flex: 1; }
/*
 * Leaflet's own stylesheet paints every <a> inside the map link-blue
 * (`.leaflet-container a { color: #0078A8 }`, leaflet.css:264). At specificity
 * 0,1,1 that outranks `.m-btn--primary` at 0,1,0, so "Itinéraire" — an <a>,
 * because it opens Google Maps in a new tab — rendered as blue text on the
 * green fill, while "Voir tout" next to it was fine for the sole reason that
 * it is a <button>. These selectors are 0,2,1 and win back the pair.
 */
.leaflet-container a.m-btn { color: var(--m-ink); }
.leaflet-container a.m-btn--primary { color: var(--m-brand-on); }
.m-popup__poi-head { display: flex; align-items: center; gap: 8px; }
.m-popup__poi-icon { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; }
.m-popup__poi-icon .material-symbols-outlined { font-size: 14px; color: #fff; }
/*
 * Leaflet sizes a popup to its content. These strings are short, so the box
 * collapsed to ~155px and wrapped "Stationnement de la mairie" across two
 * lines, with every amenity under it wrapping too. Leaflet's `minWidth` option
 * cannot fix it — `.leaflet-popup-content` above is `width: auto !important`,
 * which overrides the inline width Leaflet writes for it — so the floor is set
 * here instead.
 */
.m-popup--poi { min-width: min(232px, 60vw); }
.m-popup--poi p { font-size: 12.5px; color: var(--m-ink-2); }
/*
 * A sale popup wraps its text in `.m-popup__body`, so its photo sits outside
 * the padding and bleeds to the edges. A place popup has no such wrapper — the
 * padding is on `.m-popup--poi` itself — so the photo has to climb back out of
 * it, or it floats inset with a border of background on three sides.
 */
.m-popup--poi .m-popup__media { margin: -14px -14px 0; }
/* The other amenities available at the same spot — toilets, picnic tables. */
.m-popup__amenities { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.m-popup__amenities li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--m-ink-2); }
.m-popup__amenities svg { width: 15px; height: 15px; flex: none; color: var(--m-ink-3); }

.leaflet-container { font-family: var(--m-font); background: var(--m-surface-2); }
/* Leaflet's own zoom control is redundant with the floating stack. */
.leaflet-control-zoom { display: none; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.72) !important; border-radius: 6px 0 0 0 !important; }
.m-map.is-dark .leaflet-control-attribution { background: rgba(20,24,33,.75) !important; color: #94a3b8; }
.m-boundary-mask { pointer-events: none; }

/* -------------------------------------------------------------------------
   13. Footer, toast, fatal
   ------------------------------------------------------------------------- */

.m-footer { padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 32px); background: var(--m-surface-2); border-top: 1px solid var(--m-line); }
.m-footer__inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.m-footer__brand { display: flex; align-items: center; gap: 13px; }
.m-footer__brand img { border-radius: 10px; object-fit: contain; }
.m-footer__crest { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--m-brand-100); color: var(--m-brand); }
.m-footer__brand div { display: flex; flex-direction: column; }
.m-footer__brand strong { font-size: 15px; font-weight: 640; }
.m-footer__brand span { font-size: 12.5px; color: var(--m-ink-3); }
.m-footer__links { display: flex; flex-wrap: wrap; gap: 8px; }
.m-footer__links a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 11px; text-decoration: none;
  font-size: 13px; font-weight: 560; color: var(--m-ink-2);
  border: 1px solid var(--m-line); background: var(--m-surface); transition: .18s var(--m-ease);
}
.m-footer__links a:hover { border-color: var(--m-brand); color: var(--m-brand); background: var(--m-brand-050); }
.m-footer__links .material-symbols-outlined { font-size: 16px; }
.m-footer__powered { font-size: 12.5px; color: var(--m-ink-3); padding-top: 18px; border-top: 1px solid var(--m-line); }
.m-footer__powered a { color: var(--m-ink-2); text-decoration: none; }

.m-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: var(--m-z-toast);
  transform: translate(-50%, 18px);
  padding: 12px 22px; border-radius: 999px;
  background: var(--m-ink); color: var(--m-bg);
  font-size: 13.5px; font-weight: 570; box-shadow: var(--m-shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .24s var(--m-ease), transform .28s var(--m-ease);
}
.m-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.m-toast.is-error { background: var(--m-danger); color: #fff; }
.m-toast.is-success { background: var(--m-ok); color: #fff; }

.m-fatal { min-height: 70svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 40px 20px; text-align: center; }
.m-fatal__icon .material-symbols-outlined { font-size: 52px; color: var(--m-ink-3); }
.m-fatal h1 { font-size: 1.5rem; }
.m-fatal p { font-size: 14.5px; color: var(--m-ink-2); max-width: 46ch; }


/* Panel-only groups (basemap, legend) — desktop keeps the floating versions. */
.m-panelgroup { display: none; padding-top: 13px; border-top: 1px solid var(--m-line-soft); }
.m-panelgroup h3 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--m-ink-3); margin-bottom: 9px;
}
.m-legendrows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12.5px; color: var(--m-ink-2); }
.m-legendrows span { display: flex; align-items: center; gap: 8px; }
.m-segment { display: flex; gap: 6px; }
.m-segment button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 6px; border-radius: 11px; cursor: pointer;
  border: 1.5px solid var(--m-line); background: var(--m-surface);
  font-size: 11.5px; font-weight: 570; color: var(--m-ink-2);
}
.m-segment button.is-active { border-color: var(--m-brand); background: var(--m-brand-050); color: var(--m-brand); }

/* Scroll affordance: fade the right edge so a clipped pill reads as scrollable. */
.m-quick { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }

/* -------------------------------------------------------------------------
   14. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .m-columns { columns: 2 260px; }
  .m-featured { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* ================================================================
     PHONES — 80% of visitors, and a different layout, not a squeezed one.

     One white header. Map and list as tabs, each owning the whole screen.
     Filters behind a single button. One primary action pinned at thumb height.
     Pins numbered to match the list rows.
     ================================================================ */
  .m-hide-sm { display: none; }

  /*
   * Alerts cost the map its height, one row at a time. On a phone the two
   * Hemmingford carries — the parking notice and the municipal links — filled
   * a third of the screen before the map got any, so the whole band is tighter
   * here and the link chips are laid out to stay on ONE line.
   */
  .m-alert { padding: 8px 14px; gap: 8px; font-size: 12.5px; align-items: flex-start; }
  .m-alert > .material-symbols-outlined { margin-top: 1px; }
  .m-linkrow {
    /* No wrapping: three chips share the width instead of stacking. They can
       shrink and ellipsize, and the row scrolls if a municipality adds more. */
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    gap: 5px; margin-top: 5px;
  }
  .m-linkrow::-webkit-scrollbar { display: none; }
  .m-linkchip {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 6px 8px; font-size: 12px;
  }
  .m-linkchip span { overflow: hidden; text-overflow: ellipsis; }

  /* --- Header: one white band, no green hero --- */
  .m-topbar { height: auto; min-height: 60px; padding: 9px 14px; }
  .m-topbar__identity em { display: flex; align-items: center; gap: 4px; font-size: 11.5px; }
  .m-topbar__check { font-size: 13px !important; color: var(--m-brand); }
  .m-topbar .m-btn--sm { display: none; }      /* the action bar owns this now */

  .m-hero {
    background: var(--m-surface); color: var(--m-ink);
    padding: 12px 16px 4px; border-bottom: none;
  }
  .m-hero.has-image::before, .m-hero__scrim { display: none; }
  .m-hero__mark { display: none; }             /* the crest is already in the header */
  .m-hero__inner { display: block; }
  .m-hero__title { font-size: 1.32rem; font-weight: 700; letter-spacing: -.028em; }
  .m-hero__eyebrow { display: none; }
  .m-hero__desc { display: none; }
  .m-hero__facts { font-size: 14px; color: var(--m-ink-2); opacity: 1; margin-top: 3px; gap: 6px; }
  .m-hero__facts .material-symbols-outlined { display: none; }
  /* Phones show date + total; countdown and split counts are desktop only.
     Scoped through .m-hero__facts because `.m-hero__facts span` is (0,1,1) and
     would otherwise outrank a bare class selector however late it appears. */
  .m-hero__facts .m-hero__countdown,
  .m-hero__facts .m-hero__detailcount,
  .m-hero__facts .m-hero__sep { display: none; }
  /* With the separators gone, the remaining pair gets its own middot. */
  .m-hero__facts .m-hero__totalcount::before { content: '·'; color: var(--m-ink-3); margin-right: 6px; }
  .m-hero__totalcount strong { font-weight: 700; color: var(--m-ink); }
  .m-hero__actions { display: none; }
  .m-hero__progress { display: none; }

  /* --- Stage: bar on top, map or list below --- */
  /* First screen = viewport − header − action bar. The hero and bar take what
     they need and the map gets the remainder, so nothing runs under the
     always-visible CTA. */
  .m-firstscreen { min-height: calc(100svh - var(--m-topbar-h) - var(--m-actionbar-h)); }
  .m-stage {
    display: grid; grid-template-rows: auto 1fr;
    min-height: 0; overflow: visible; isolation: auto;
  }
  .m-bar {
    position: static; width: auto; z-index: auto;
    padding: 8px 16px 12px; background: var(--m-surface);
    border-bottom: 1px solid var(--m-line);
  }
  .m-map { position: relative; inset: auto; min-height: 0; }
  .m-mlist { min-height: 0; }
  .m-ov { position: absolute; top: auto; }

  .m-omnibox { height: 48px; box-shadow: none; border: 1.5px solid var(--m-line); background: var(--m-surface-2); }
  .m-omnibox:focus-within { background: var(--m-surface); }
  /* 16px stops iOS zooming on focus; stretch makes the whole 48px pill the
     tap target rather than just the 27px text box inside it. */
  .m-omnibox input { font-size: 16px; align-self: stretch; }
  .m-filterbtn {
    width: 52px; border-radius: var(--m-r); box-shadow: none;
    border: 1.5px solid var(--m-line); background: var(--m-surface);
  }
  .m-viewtabs { display: flex; }
  .m-quick { display: none; }             /* dates live in the filter sheet */

  /* Only locate + fit float; basemap and legend move into the sheet. */
  .m-ctlgroup--basemap, .m-ov__br { display: none; }
  .m-panelgroup--mobile { display: block; }
  .m-ctlgroup button { width: 46px; height: 46px; }
  .m-rail { display: none; }              /* replaced by the selected card */
  .leaflet-control-scale { display: none; }

  .m-selected { padding: 0 10px 10px; }
  .m-selcard { max-width: none; }
  .m-selcard__close { width: 40px; height: 40px; top: 5px; right: 5px; }
  .m-selcard__head { padding-right: 34px; }
  .m-selcard__actions .m-btn { min-height: 44px; }

  /* --- Filter sheet --- */
  .m-filterpanel {
    position: fixed; inset: auto 0 0 0; top: auto;
    width: 100%; max-height: 84svh; margin: 0;
    border-radius: var(--m-r-xl) var(--m-r-xl) 0 0;
    border: none; border-top: 1px solid var(--m-line);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    animation: m-sheet-up .26s var(--m-ease);
  }
  .m-filterpanel__foot { position: sticky; bottom: 0; background: var(--m-surface); padding-bottom: 2px; }

  /* --- One primary action, always reachable --- */
  .m-actionbar {
    display: block; position: sticky; bottom: 0; z-index: 55;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--m-surface) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--m-line);
  }
  .m-actionbar .m-btn { width: 100%; min-height: 52px; border-radius: 14px; font-size: 15.5px; }

  /* --- Sheets and modals --- */
  .m-sheet {
    top: auto; left: 0; right: 0; width: 100%;
    max-height: 88svh; border-radius: var(--m-r-xl) var(--m-r-xl) 0 0;
    border-left: none; border-top: 1px solid var(--m-line);
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-sheet__actions .m-btn { min-width: 0; }
  .m-grid-2 { grid-template-columns: 1fr; }
  .m-modal.is-open { padding: 0; align-items: flex-end; }
  .m-modal__dialog { max-height: 92svh; border-radius: var(--m-r-xl) var(--m-r-xl) 0 0; }
  .m-modal__body { padding: 18px 16px; }
  .m-modal__head { padding: 18px 16px 14px; }
  .m-modal__foot { padding: 13px 16px calc(13px + env(safe-area-inset-bottom)); }
  .m-field input, .m-field select, .m-field textarea,
  .m-autocomplete__control input { font-size: 16px; }

  /* --- Sections below --- */
  .m-columns { columns: 1; }
  .m-section { padding: clamp(34px, 8vw, 52px) 16px; }
  .m-grid { grid-template-columns: 1fr; gap: 14px; }
  .m-featured { grid-template-columns: 1fr; }

  /* --- Touch targets: 44px minimum ---
     Specificity note: `.m-card--rail .m-card__fav` (0,2,0) outranks a bare
     `.m-card__fav`, so the rail variant has to be named again. */
  .m-card__fav,
  .m-card--rail .m-card__fav { width: 44px; height: 44px; }
  .m-langtoggle button { min-height: 44px; min-width: 46px; padding: 0 13px; }
  .m-topbar__identity { min-height: 44px; }
  .m-footer__powered a { display: inline-block; padding: 6px 0; }
  .m-choose__card { padding: 16px; }
}

@keyframes m-sheet-up { from { transform: translateY(100%); } }

@media (max-width: 460px) {
  /* Small phones: the topbar shows the town, not the full legal designation. */
  .m-topbar { padding: 0 12px; }
  .m-topbar__identity em { display: none; }
  .m-topbar__identity strong { font-size: 14px; }
  .m-topbar__designation { display: none; }
  .m-topbar__actions { gap: 7px; }

  .m-hero__title { font-size: 1.05rem; }
  .m-hero__facts { gap: 7px; }
  .m-ov__tr { gap: 8px; }
  .m-legendrows { grid-template-columns: 1fr; }
  .m-weather__forecast { gap: 5px; }
  .m-section__title { font-size: 1.25rem; }
}

/* -------------------------------------------------------------------------
   15. Print
   ------------------------------------------------------------------------- */

@media print {
  .m-topbar, .m-ov, .m-modal, .m-toast, .m-sheet,
  .m-hero__actions, .m-section__more { display: none !important; }
  .m-firstscreen { min-height: 0; }
  .m-stage { height: 380px; }
  .m-hero { background: none; color: var(--m-ink); padding: 0 0 16px; }
  .m-hero__scrim, .m-hero.has-image::before { display: none; }
  .m-card, .m-panel, .m-featured { break-inside: avoid; }
  .m-columns { columns: 2; }
}

/* =========================================================================
   9. DESKTOP — the layout the municipality approved (Aug 2026)

   A different arrangement from the phone, not a widened one. Wide screens get
   a persistent sales column beside the map, section navigation in the header,
   and the four practical facts as a strip under the map.

   Everything here is additive and gated at 1024px. Below that the phone
   layout is untouched: it is the one 80% of residents see, and it was
   measured and approved separately.
   ========================================================================= */

/* Phone-only pieces, hidden everywhere until their breakpoint claims them. */
.m-layersbtn,
.m-topbar__sub { display: none; }

/* Desktop-only halves of the two-breakpoint pieces. */
.m-hero__kind,
.m-hero__side .m-hero__links,
.m-hero__btnlabel,
.m-topnav { display: none; }

@media (min-width: 1024px) {

  /* ---- Header: identity · sections · language + action ---- */
  .m-topbar { gap: 26px; }
  .m-topnav { display: flex; align-items: center; gap: 22px; margin-right: auto; }
  .m-topnav a {
    position: relative; padding: 4px 0;
    font-size: 14px; font-weight: 560; color: var(--m-ink-2); text-decoration: none;
    transition: color .16s var(--m-ease);
  }
  .m-topnav a:hover { color: var(--m-ink); }
  /* The underline is drawn on a pseudo-element rather than with border-bottom
     so hovering never shifts the text by a pixel. */
  .m-topnav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--m-brand); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .18s var(--m-ease);
  }
  .m-topnav a:hover::after, .m-topnav a:focus-visible::after { transform: scaleX(1); }

  /* ---- Alerts: one compact line ---- */
  .m-alert { padding: 9px clamp(16px, 4vw, 32px); font-size: 13px; }
  /*
   * The municipal links move into the hero on desktop, so their announcement
   * is suppressed here. Matching on :has() rather than an id keeps it working
   * for any municipality that publishes a links card, without asking them to
   * label it in a particular way.
   */
  .m-alerts .m-alert:has(.m-linkrow) { display: none; }

  /* ---- Hero: a band, with actions and municipal links on the right ---- */
  .m-hero__inner { align-items: center; gap: 22px; padding-block: 16px; }
  .m-hero__who { display: none; }
  .m-hero__kind {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 11.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
    opacity: .82;
  }
  .m-hero__slash { font-style: normal; opacity: .5; }
  .m-hero__title { font-size: clamp(26px, 2.3vw, 34px); }
  .m-hero__facts { font-size: 13.5px; opacity: .92; }

  .m-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
  .m-hero__actions { display: flex; align-items: center; gap: 9px; }
  /* Icon-only buttons become labelled: there is room, and "Partager" is
     understood by more residents than a share glyph. */
  .m-hero__side .m-btn--icon { width: auto; padding: 11px 17px; gap: 8px; }
  .m-hero__btnlabel { display: inline; font-size: 14px; font-weight: 580; }
  .m-hero__side .m-btn:not(.m-btn--primary) {
    background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.3);
  }
  .m-hero__side .m-btn:not(.m-btn--primary):hover { background: rgba(255,255,255,.22); }

  .m-hero__side .m-hero__links { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
  .m-hero__linkslabel {
    font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
    opacity: .7; margin-right: 2px;
  }
  .m-hero__chip {
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.34); color: #fff; text-decoration: none;
    font-size: 12.5px; font-weight: 560; white-space: nowrap;
    transition: background .16s var(--m-ease), border-color .16s var(--m-ease);
  }
  .m-hero__chip:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); }

  /* ---- The stage: sales column beside the map ----

     The four children already exist and keep their jobs; only their placement
     changes. `.m-bar` and `.m-mlist` stack in the left column, `.m-map` and
     `.m-ov` share the right cell so the controls still float over the map
     without being absolutely positioned against the whole stage. */
  .m-firstscreen { min-height: 0; }
  .m-stage {
    display: grid;
    grid-template-columns: minmax(320px, 30%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    height: clamp(560px, 66vh, 760px);
    padding: 18px clamp(16px, 3vw, 32px);
    background: #F4F5F3;
    overflow: visible;
  }

  .m-stage .m-bar {
    position: static; width: auto; z-index: auto;
    grid-column: 1; grid-row: 1;
    padding: 14px 14px 12px;
    background: var(--m-surface); border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg) var(--m-r-lg) 0 0; border-bottom: none;
  }
  .m-stage .m-viewtabs { display: none; }
  .m-stage .m-quick { display: flex; flex-wrap: wrap; gap: 7px; }
  .m-stage .m-filterpanel { left: 0; right: 0; }

  .m-stage .m-mlist {
    display: block; grid-column: 1; grid-row: 2;
    overflow-y: auto; padding: 4px 10px 12px;
    background: var(--m-surface); border: 1px solid var(--m-line);
    border-radius: 0 0 var(--m-r-lg) var(--m-r-lg); border-top: none;
  }
  /* The phone's map/list tab switch must not blank the column here. */
  .m-stage.is-list-view .m-map,
  .m-stage.is-list-view .m-ov { display: block; }

  /* `.m-map` is `position: absolute; inset: 0` by default, which on this grid
     anchors it to the stage's padding box instead of its own cell — it
     overflowed the right column by the stage's padding. Back to flow. */
  .m-stage .m-map {
    position: relative; inset: auto;
    grid-column: 2; grid-row: 1 / -1;
    border-radius: var(--m-r-lg); border: 1px solid var(--m-line); overflow: hidden;
  }
  .m-stage .m-ov {
    position: relative; inset: auto;
    grid-column: 2; grid-row: 1 / -1;
    padding: 14px;
  }
  /* The horizontal card rail duplicated the sales column, so it goes. */
  .m-stage .m-rail { display: none !important; }
  /* Legend sits bottom-left, opposite the zoom controls, and starts open —
     there is room for it, and a legend nobody opens explains nothing. */
  .m-ov__br { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; }
  .m-ov__br .m-legend > summary { display: none; }
  /* The body is an absolutely-positioned popover by default, hanging above a
     42px summary button. With the button gone it has nothing to hang from and
     collapsed its parent to 0x0, so it goes back into flow here. */
  .m-ov__br .m-legend__body {
    position: static;
    display: flex; flex-direction: column; gap: 7px;
    padding: 12px 14px; border-radius: var(--m-r);
    background: var(--m-surface); border: 1px solid var(--m-line); box-shadow: var(--m-shadow-sm);
    font-size: 12.5px;
  }

  /* ---- Sales rows in the column ---- */
  .m-mlist .m-row { border-radius: var(--m-r); padding: 11px 12px; }
  .m-mlist .m-row + .m-row { margin-top: 2px; }
  .m-mlist .m-row:hover { background: var(--m-surface-2); }

  /* ---- Practical facts strip ---- */
  .m-facts { padding: 26px clamp(16px, 3vw, 32px) 34px; background: #F4F5F3; }
  .m-facts__grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    max-width: 1600px; margin: 0 auto;
  }
  .m-fact {
    padding: 18px 20px; border-radius: var(--m-r-lg);
    background: var(--m-surface); border: 1px solid var(--m-line);
  }
  .m-fact__label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
    color: var(--m-brand-600);
  }
  .m-fact__label svg { width: 14px; height: 14px; }
  .m-fact__value { margin-top: 7px; font-size: 21px; font-weight: 700; color: var(--m-ink); line-height: 1.2; }
  .m-fact__body { margin-top: 6px; font-size: 13px; color: var(--m-ink-2); line-height: 1.55; }
}

/* The facts strip is useful on a phone too, just stacked and quieter. */
@media (max-width: 1023px) {
  .m-facts { padding: 18px 16px 24px; }
  .m-facts__grid { display: grid; gap: 10px; }
  .m-fact { padding: 14px 16px; border-radius: var(--m-r); background: var(--m-surface); border: 1px solid var(--m-line); }
  .m-fact__label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--m-brand-600); }
  .m-fact__label svg { width: 13px; height: 13px; }
  .m-fact__value { margin-top: 5px; font-size: 17px; font-weight: 700; color: var(--m-ink); }
  .m-fact__body { margin-top: 4px; font-size: 12.5px; color: var(--m-ink-2); line-height: 1.5; }
}

/* Sales column: count line, category tags, and the registration prompt. */
.m-mlist__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 4px 8px;
}
.m-mlist__count { font-size: 13px; font-weight: 650; color: var(--m-ink); }
.m-mlist__sort { font-size: 12px; color: var(--m-ink-3); }
.m-row__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.m-tag {
  padding: 2px 9px; border-radius: 999px;
  background: var(--m-surface-2); border: 1px solid var(--m-line-soft);
  font-size: 11.5px; font-weight: 560; color: var(--m-ink-2); white-space: nowrap;
}
.m-listcta {
  margin: 12px 4px 4px; padding: 15px 16px;
  border: 1px dashed var(--m-line); border-radius: var(--m-r);
  background: var(--m-brand-050);
}
.m-listcta strong { display: block; font-size: 14px; font-weight: 650; color: var(--m-ink); }
.m-listcta p { margin-top: 5px; font-size: 12.5px; color: var(--m-ink-2); line-height: 1.5; }
.m-listcta .m-btn { margin-top: 11px; }

/* =========================================================================
   10. PHONES — the map-first layout the municipality approved (Aug 2026)

   The map is the page. Everything else floats over it or slides up from the
   bottom, so the visitor never trades one view for another the way the old
   Carte/Liste tabs made them.

   This block comes last on purpose: it overrides section 8's phone rules
   rather than replacing them, so anything not restated here still applies.
   ========================================================================= */
@media (max-width: 760px) {

  /* Matches PEEK_MIN / SNAPS.peek in mapOverlay.js, so the first paint is
     already at rest instead of settling after the first gesture. */
  :root { --m-sheet-h: max(108px, 13vh); }

  /* --- Header: identity + what and when, in two lines ---
     Scoped through .m-topbar__identity: the rule above it that hides <em> is
     (0,1,1), so a bare .m-topbar__sub would lose and the line would never
     appear. Same specificity trap as .m-hero__facts and .m-card--rail. */
  .m-topbar__identity em { display: none; }          /* replaced by the event line */
  .m-topbar__identity em.m-topbar__sub {
    display: block; font-size: 11.5px; color: var(--m-ink-3);
    margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* --- Alerts collapse to one line --- */
  .m-alert { align-items: center; padding: 8px 14px; cursor: pointer; }
  .m-alert > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .m-alert:not(.is-open) > div { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-alert:not(.is-open) span { display: none; }     /* the body; the strong stays */
  .m-alert:not(.is-open) .m-linkrow { display: none; }
  .m-alert__caret { flex: none; margin-left: auto; font-size: 10px; color: var(--m-warn); }
  .m-alert.is-open .m-alert__caret { transform: rotate(180deg); }

  /* --- The map owns the first screen --- */
  .m-firstscreen { min-height: 0; }
  .m-hero { display: none; }                         /* its facts moved into the header */
  .m-stage {
    display: block; position: relative;
    height: calc(100svh - var(--m-topbar-h) - var(--m-actionbar-h));
    padding: 0; background: none;
  }
  .m-stage .m-map { position: absolute; inset: 0; border: none; border-radius: 0; }

  /* Search + layers float over it. */
  .m-stage .m-bar {
    position: absolute; top: 10px; left: 12px; right: 12px; z-index: var(--m-z-overlay);
    width: auto; padding: 0; background: none; border: none; border-radius: 0;
    display: flex; flex-direction: column; gap: 9px;
  }
  .m-viewtabs { display: none !important; }          /* the sheet replaced them */
  .m-layersbtn {
    flex: none; width: 44px; height: 44px; border-radius: 22px; cursor: pointer;
    border: 1px solid var(--m-line); background: var(--m-surface);
    box-shadow: var(--m-shadow-float); color: var(--m-ink);
    display: grid; place-items: center;
  }
  .m-layersbtn svg { width: 20px; height: 20px; }

  /* Date pills scroll sideways instead of wrapping onto a second row. */
  .m-stage .m-quick {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 7px;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .m-stage .m-quick::-webkit-scrollbar { display: none; }
  .m-stage .m-quick__pill {
    flex: none; height: 34px; box-shadow: var(--m-shadow-float);
    background: var(--m-surface); border: 1px solid var(--m-line);
  }
  /* Restated because the rule above resets `background` for the whole row and
     would otherwise leave the selected pill's white label on white. */
  .m-stage .m-quick__pill.is-active {
    background: var(--m-brand); color: var(--m-brand-on); border-color: var(--m-brand);
  }

  /* --- Layers panel --- */
  .m-layers {
    position: absolute; top: 106px; left: 12px; right: 12px; z-index: var(--m-z-modal);
    background: var(--m-surface); border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg); box-shadow: var(--m-shadow-lg); overflow: hidden;
  }
  .m-layers__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: var(--m-surface-2); border-bottom: 1px solid var(--m-line-soft);
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-3);
  }
  .m-layers__head button {
    border: 0; background: none; font: inherit; text-transform: none; letter-spacing: 0;
    font-size: 13px; font-weight: 650; color: var(--m-brand); cursor: pointer;
  }
  .m-layers__body { padding: 6px; }
  .m-layer {
    display: flex; width: 100%; align-items: center; gap: 11px; cursor: pointer;
    border: 0; background: none; padding: 12px 10px; border-radius: 9px;
    font: inherit; text-align: left;
  }
  .m-layer:active { background: var(--m-surface-2); }
  .m-layer__box {
    flex: none; width: 20px; height: 20px; border-radius: 5px;
    border: 1.5px solid var(--m-line); display: grid; place-items: center; color: #fff;
  }
  .m-layer__box svg { width: 13px; height: 13px; }
  .m-layer.is-on .m-layer__box { background: var(--m-brand); border-color: var(--m-brand); }
  .m-layer__dot { flex: none; width: 11px; height: 11px; border-radius: 999px; background: var(--c); }
  .m-layer__label { flex: 1; font-size: 14px; font-weight: 550; }
  .m-layer__count { font-size: 12.5px; color: var(--m-ink-3); }

  /* --- Map controls ride above the sheet --- */
  .m-ov { position: absolute; inset: 0; padding: 0; }
  .m-ov__tr {
    position: absolute; right: 12px; bottom: calc(var(--m-sheet-h) + 14px);
    top: auto; flex-direction: column; gap: 0;
    transition: bottom .28s cubic-bezier(.32,.72,0,1);
    background: var(--m-surface); border: 1px solid var(--m-line);
    border-radius: var(--m-r); overflow: hidden; box-shadow: var(--m-shadow-float);
  }
  .m-ov__tr .m-ctlgroup { background: none; box-shadow: none; border-radius: 0; }
  .m-ov__br { display: none; }                       /* the legend lives in the filter sheet */

  /* --- The sheet --- */
  .m-stage .m-mlist {
    display: flex; flex-direction: column;
    position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--m-z-sheet);
    height: var(--m-sheet-h); min-height: 0; padding: 0;
    background: var(--m-surface); border: none;
    border-radius: var(--m-r-xl) var(--m-r-xl) 0 0;
    box-shadow: 0 -6px 28px rgba(11,18,32,.22);
    transition: height .28s cubic-bezier(.32,.72,0,1);
    overflow: hidden;
  }
  /* The tab switch must not hide the sheet or the map any more. */
  .m-stage.is-list-view .m-map,
  .m-stage.is-list-view .m-ov { display: block; }

  .m-sheet__grip { flex: none; padding: 10px 0 6px; cursor: grab; touch-action: none; }
  .m-sheet__grip i { display: block; width: 42px; height: 5px; border-radius: 999px; background: var(--m-line); margin: 0 auto; }
  .m-mlist__head { flex: none; align-items: center; padding: 0 16px 11px; }
  .m-mlist__count { display: block; font-size: 15px; font-weight: 700; }
  .m-mlist__sort { display: block; font-size: 12px; color: var(--m-ink-3); margin-top: 2px; }
  /* Bold and in full ink: this is the control that reveals the whole list, and
     at 650 in the muted grey it read as a caption rather than a button. */
  .m-sheet__toggle {
    flex: none; border: 1px solid var(--m-line); border-radius: 17px; background: var(--m-surface-2);
    height: 34px; padding: 0 15px; font: inherit; font-size: 13px; font-weight: 750;
    color: var(--m-ink); cursor: pointer;
  }
  .m-sheet__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 14px; }
  .m-sheet__block { margin-top: 14px; }
  .m-sheet__block h3 {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--m-ink-3); margin-bottom: 8px;
  }
  .m-sheet__block .m-facts { padding: 0; background: none; }
  .m-sheet__block .m-facts__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .m-sheet__links { display: flex; flex-wrap: wrap; gap: 7px; }
  .m-sheet__links a {
    border: 1px solid var(--m-line); border-radius: 17px; padding: 8px 14px;
    font-size: 13px; font-weight: 650; color: var(--m-ink-2); text-decoration: none;
  }
  /* Only the sheet scrolls, so the page-level copies would be unreachable —
     and the links now ride inside it, so their alert band would be a duplicate
     costing a row of the map. */
  #practical-section, #sales-section, .m-panel--info { display: none; }
  .m-alerts .m-alert:has(.m-linkrow) { display: none; }

  /* At full height the sheet covers the map, so controls for a map nobody can
     see would just be three buttons floating on white. */
  .m-mlist.is-full ~ .m-ov .m-ov__tr,
  .m-stage:has(.m-mlist.is-full) .m-ov__tr { opacity: 0; pointer-events: none; }

  /* --- One primary action, pinned --- */
  .m-actionbar { z-index: var(--m-z-toast); }
}

/* =========================================================================
   11. PHONES — touch-target corrections (Aug 2026)

   Reported: tapping near "3 ventes affichées" opened a sale full-screen.
   Measured on a 390x844 phone: the count line ended at y713 and the first row
   began at y713, so a thumb aiming at the header hit the row. And the sheet
   ran to y806 while the register bar began at y771 — 35px of it was already
   underneath the button.
   ========================================================================= */
@media (max-width: 760px) {

  /*
   * The stage fills what is left rather than computing it.
   *
   * `100svh - topbar - actionbar` forgot the alerts band, so the sheet
   * finished 35px below the register button and the bottom of every list was
   * unreachable. A flex column cannot get this wrong, and it stays correct
   * when the alert expands on tap — which changes that band's height.
   */
  .m-firstscreen {
    display: flex; flex-direction: column;
    height: calc(100svh - var(--m-topbar-h) - var(--m-actionbar-h));
    min-height: 0;
  }
  .m-stage { height: auto; flex: 1 1 auto; min-height: 0; }

  /* The whole header expands the list, not just the 32px button. */
  .m-mlist__head {
    align-items: center; gap: 10px;
    padding: 0 16px 12px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-mlist__head > div { flex: 1; min-width: 0; }

  /* Rows: a comfortable target, and clear of each other. */
  .m-sheet__scroll .m-row {
    min-height: 60px; padding: 12px; gap: 12px; align-items: center;
    border: 1px solid var(--m-line-soft); border-radius: var(--m-r); margin-bottom: 9px;
  }
  .m-sheet__scroll .m-row.is-selected { border-color: var(--m-brand); background: var(--m-brand-050); }
  .m-row__more {
    flex: none; width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--m-line); background: var(--m-surface);
    display: grid; place-items: center; color: var(--m-ink-3); cursor: pointer;
  }
  .m-row__more svg { width: 20px; height: 20px; }
  .m-row__more:active { background: var(--m-surface-2); }

  /*
   * The selected-sale card rides above the sheet.
   *
   * It is the phone's answer to a pin tap, and it lives in the overlay, whose
   * bottom edge the sheet now covers — without this it would appear behind
   * the very panel the visitor just tapped through.
   */
  .m-selected {
    position: absolute; left: 0; right: 0;
    bottom: calc(var(--m-sheet-h) + 12px); z-index: var(--m-z-overlay);
    transition: bottom .28s cubic-bezier(.32,.72,0,1);
  }
}

/* The chevron is a phone affordance: desktop opens the detail from the row. */
@media (min-width: 761px) { .m-row__more { display: none; } }