/* ── Map page top bar + filter / alert sheets (2026-10-08) ──
   <header id="topbar"> in index.html: "ZENOA", the filters button
   (js/topbar.js), "Créer une alerte" (js/push.js) and the city select.
   Separate file (not styles.css) so a new deploy never pairs the new markup
   with a stale cached stylesheet. Loaded after tabbar.css, whose map-page
   rules it adjusts for the bar's height. */
:root {
  /* viewport-fit=cover: in the installed iPhone app the page runs under the
     status bar, so the bar starts below it. */
  --topbar-safe: env(safe-area-inset-top, 0px);
  --topbar-h: calc(102px + var(--topbar-safe));
  --zen-ink: #2e3235;
  --zen-accent: var(--z-primary);
  --zen-muted: #4a4f52;
  --zen-line: #eae7e0;
  --zen-chip: #f0f5f2;
}

#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 950;                 /* above the map, its controls and the list sheet (800/900) */
  height: var(--topbar-h);
  padding: var(--topbar-safe) 16px 0;
  background: #f7f5f0;
  border-bottom: 1px solid var(--zen-line);
}
.topbar-title {
  margin: 8px 0 8px;
  text-align: center;
  font-size: 26px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--zen-ink);
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-icon-btn,
.topbar-pill,
.topbar-city {
  height: 44px;
  border: 1px solid #e7e5dd;
  background: var(--zen-chip);
  color: #2e3235;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topbar-icon-btn {
  position: relative;
  flex: none;
  width: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-pill {
  flex: none;
  margin-left: auto;   /* right-hand side of the bar */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 11px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
#topbar svg,
.topbar-corner svg,
.zsheet svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-icon-btn.active,
.topbar-pill.active {
  background: #e5eeea;
  border-color: #bcd3c8;
  color: var(--zen-accent);
}
.topbar-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--zen-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.topbar-city[hidden] { display: none; }
.topbar-city {
  margin-left: auto;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 220px;
  padding: 0 28px 0 12px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  background: var(--zen-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d6a4f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 15px;
}

/* ── The map page under the bar ── */
#sidebar h1 { display: none; }
#app,
.has-tabbar #app {
  margin-top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
}
.has-tabbar #app {
  height: calc(100vh - var(--topbar-h) - var(--tabbar-h));
  height: calc(100dvh - var(--topbar-h) - var(--tabbar-h));
}
#map { height: auto; }
@media (max-width: 768px) {
  #app,
  .has-tabbar #app { margin-top: 0; height: auto; }
  #map,
  .has-tabbar #map { top: var(--topbar-h); }
  .has-tabbar #sidebar {
    max-height: min(calc(82vh - var(--tabbar-h)), calc(100vh - var(--topbar-h) - var(--tabbar-h) - 8px));
    max-height: min(calc(82dvh - var(--tabbar-h)), calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 8px));
  }
  /* List button: on the map, right under the bar. */
  #sidebar-toggle,
  html.standalone.has-tabbar #sidebar-toggle { top: calc(var(--topbar-h) + 12px); }
}
/* The map no longer runs under the status bar: controls at the map's top. */
html.standalone.has-tabbar .mapboxgl-ctrl-top-left,
html.standalone.has-tabbar .mapboxgl-ctrl-top-right { top: 0; }

/* ── Sheets (filters, alert): slide up on phones, centred card on desktop ── */
.zsheet {
  position: fixed;
  inset: 0;
  z-index: 2600;                /* above the tab bar (2500), under the install banner (3000) */
}
.zsheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 27, 22, 0.38);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.zsheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(var(--topbar-safe) + 28px);
  display: flex;
  flex-direction: column;
  background: #f7f5f0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.zsheet.in .zsheet-backdrop { opacity: 1; }
.zsheet.in .zsheet-panel { transform: none; }
@media (min-width: 769px) {
  .zsheet-panel {
    left: 50%;
    right: auto;
    top: 6vh;
    bottom: 6vh;
    width: 480px;
    border-radius: 22px;
    transform: translate(-50%, 24px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .zsheet.in .zsheet-panel { transform: translate(-50%, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .zsheet-panel, .zsheet-backdrop { transition: none; }
}

.zsheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--zen-line);
}
.zsheet-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 800;
  color: #2e3235;
  white-space: nowrap;
}
.zsheet-head h2 svg { color: var(--zen-accent); }
.zsheet-close {
  justify-self: start;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  border: none;
  background: none;
  color: #2e3235;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.zsheet-close svg { width: 26px; height: 26px; }
.zsheet-panel:focus { outline: none; }
.zsheet-close:focus-visible { outline: 2px solid var(--z-green, #3f5e4f); outline-offset: 0; border-radius: 50%; }
.zsheet-link {
  justify-self: end;
  border: none;
  background: none;
  color: var(--zen-accent);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.zsheet-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 20px 8px;
}
.zsheet-intro {
  margin-top: 16px;
  color: var(--zen-muted);
  font-size: 15px;
  line-height: 1.45;
}
.zsheet-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--zen-line);
}
.zsheet-section:last-child { border-bottom: none; }
.zsheet-section h3 {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
  color: #2e3235;
}
.zsheet-optional { font-weight: 400; color: var(--zen-muted); }
.zchips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.zchips-group {
  width: 100%;
  margin: 6px 0 -1px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zen-muted);
}
.zchips-group:first-child { margin-top: 0; }
.zchip {
  padding: 9px 16px;
  border: 1px solid #e8e6df;
  border-radius: 999px;
  background: var(--zen-chip);
  color: #2e3235;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zchip[aria-pressed="true"] {
  background: var(--zen-accent);
  border-color: var(--zen-accent);
  color: #fff;
}
.zchips-days { gap: 7px; }
.zchip-round {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
}
.zsheet-hint {
  margin-top: 10px;
  color: var(--zen-muted);
  font-size: 13px;
}
.zsheet-hint:empty { display: none; }
.zsheet-hint.warn { color: #b3261e; }
.zsheet-select {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid #e7e5dd;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15px;
}
.zsheet-foot {
  display: flex;
  gap: 12px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--zen-line);
}
.zsheet-primary,
.zsheet-secondary {
  flex: 1;
  height: 52px;
  border: none;
  border-radius: 14px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.zsheet-primary { background: var(--zen-accent); color: #fff; }
.zsheet-secondary { background: #f2f1ed; color: #2e3235; }

/* ── Map buttons, top left (2026-10-09): place search + locate me, small,
   in place of the +/− zoom (owner asked; pinch and double-tap still zoom). ── */
.map-fab-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0 10px !important;
  pointer-events: auto;
}
.map-fab {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #eae7e0;
  background: #fff;
  color: var(--zen-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map-fab svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-fab.busy svg { animation: map-fab-pulse 0.9s ease-in-out infinite; }
@keyframes map-fab-pulse { 50% { opacity: 0.35; } }

/* ── Place search sheet ── */
.search-field {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 6px;
  padding: 0 14px;
  height: 48px;
  border: 1px solid #e7e5dd;
  border-radius: 14px;
  background: #fff;
  color: var(--zen-muted);
}
.search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 16px;   /* 16 px: iOS doesn't zoom into the field */
  color: #2e3235;
}
.search-results { list-style: none; margin: 0; padding: 0; }
.search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid var(--zen-line);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-result-name { font-size: 16px; font-weight: 600; color: #2e3235; }
.search-result-detail { font-size: 13px; color: var(--zen-muted); }
.search-section { padding: 14px 4px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9c4419; }

/* ── Filters sheet, 2026-10-09 redesign: headings in the /totem style (gold
   diamond, spaced green capitals, fine gold rule), airy sections, tidy grids
   and switch rows for the offers. Scoped to the filters sheet. ── */
#filters-sheet .zf-section { padding: 22px 0 6px; border-bottom: none; }
#filters-sheet .zf-section:first-child { padding-top: 18px; }
#filters-sheet .zf-h {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--z-primary);
}
#filters-sheet .zf-h::before { content: ''; flex: none; width: 7px; height: 7px; background: #b8975a; transform: rotate(45deg); }
#filters-sheet .zf-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #b8975a66, transparent); }
#filters-sheet .zf-h label { cursor: inherit; }
#filters-sheet .zchips-group {
  margin: 10px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: #4a4f52;
}
#filters-sheet .zchips-group:first-child { margin-top: 0; }
#filters-sheet .zchip {
  padding: 8px 14px; font-size: 14px; background: #fff; border-color: #e6e3db;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#filters-sheet .zchip[aria-pressed="true"] { background: var(--zen-accent); border-color: var(--zen-accent); color: #fff; }
/* Even grids: every option the same width. */
#filters-sheet .zf-grid { display: grid; gap: 8px; }
#filters-sheet .zf-grid-3 { grid-template-columns: repeat(3, 1fr); }
#filters-sheet .zf-grid-4 { grid-template-columns: repeat(4, 1fr); }
#filters-sheet .zf-grid-5 { grid-template-columns: repeat(5, 1fr); }
#filters-sheet .zf-grid .zchip { padding: 10px 4px; text-align: center; white-space: nowrap; }
/* Two-line cards: title + small hours. */
#filters-sheet .zf-card { display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 14px; }
#filters-sheet .zf-card-t { font-weight: 600; font-size: 15px; }
#filters-sheet .zf-card-s { font-size: 12px; color: #4a4f52; }
#filters-sheet .zf-card[aria-pressed="true"] .zf-card-s { color: #dbe7e1; }
/* Offers: full-width rows with a switch on the right. */
#filters-sheet .zf-list { display: flex; flex-direction: column; gap: 8px; }
#filters-sheet .zf-switch {
  position: relative; width: 100%; align-items: flex-start; text-align: left;
  padding: 12px 70px 12px 16px; border-radius: 14px;
}
#filters-sheet .zf-switch::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 42px; height: 24px; margin-top: -12px;
  border-radius: 12px; background: #e6e3db; transition: background 0.15s;
  box-shadow: inset 0 0 0 1px #dcd8cc;
}
#filters-sheet .zf-switch::before {
  content: ''; position: absolute; right: 36px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); z-index: 1; transition: right 0.15s;
}
#filters-sheet .zf-switch[aria-pressed="true"] { background: #ecf2ef; border-color: #9db3a7; color: #2e3235; }
#filters-sheet .zf-switch[aria-pressed="true"] .zf-card-s { color: var(--z-primary); }
#filters-sheet .zf-switch[aria-pressed="true"]::after { background: var(--zen-accent); box-shadow: none; }
#filters-sheet .zf-switch[aria-pressed="true"]::before { right: 18px; }
#filters-sheet .zsheet-select { border-color: #e6e3db; border-radius: 14px; }
#filters-sheet .zsheet-body { padding-bottom: 20px; }

/* Map credits "i" (Mapbox / OpenStreetMap). The credit is required by the
   map licence, so it stays, but discreet until tapped (owner, 2026-10-09). */
#map .mapboxgl-ctrl-attrib.mapboxgl-compact:not(.mapboxgl-compact-show) {
  opacity: 0.4; transform: scale(0.8); transform-origin: bottom right;
}
/* Treatments: two even columns per family, family names in an italic serif. */
#filters-sheet .zf-grid-2 { grid-template-columns: repeat(2, 1fr); }
#filters-sheet .zf-grid-2 .zchips-group {
  grid-column: 1 / -1; margin: 14px 0 2px;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 17px; font-weight: 400; color: #2e3235;
}
#filters-sheet .zf-grid-2 .zchips-group:first-child { margin-top: 0; }
#filters-sheet .zf-grid-2 .zchip { padding: 10px 8px; overflow: hidden; text-overflow: ellipsis; }
/* Mapbox wordmark: required by Mapbox's terms, kept but toned down. */
#map .mapboxgl-ctrl-logo { opacity: 0.45; transform: scale(0.85); transform-origin: bottom left; }

/* ── Quick chips under the bar (2026-10-09): one tap filters the map. ── */
#quick-row {
  position: fixed; left: 0; right: 0; top: var(--topbar-h); z-index: 950;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px 16px; background: linear-gradient(#f7f5f0f2, #f7f5f000);
  -webkit-overflow-scrolling: touch;
}
#quick-row::-webkit-scrollbar { display: none; }
#quick-row .quick-chip {
  flex: none; padding: 8px 15px; font-size: 14px; font-weight: 500; color: #2e3235;
  background: #fff; border-color: #e6e3db; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
#quick-row .quick-chip[aria-pressed="true"] { background: var(--zen-accent); border-color: var(--zen-accent); color: #fff; }
/* Map controls and the list button start under the chips. */
.mapboxgl-ctrl-top-left, .mapboxgl-ctrl-top-right { margin-top: 52px; }
@media (max-width: 768px) {
  #sidebar-toggle,
  html.standalone.has-tabbar #sidebar-toggle { top: calc(var(--topbar-h) + 62px); }
}

/* ── Bottom strip of slot cards (phones only). Sits above the tab bar and
   leaves the Mapbox wordmark visible underneath. ── */
#slot-strip { display: none; }
@media (max-width: 768px) {
  #slot-strip {
    position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h, 0px) + 30px); z-index: 950;
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 6px 16px 10px; scroll-padding: 0 16px;
  }
  #slot-strip.hidden { display: none; }
  #slot-strip::-webkit-scrollbar { display: none; }
  /* The Mapbox credits move up above the cards. */
  .mapboxgl-ctrl-bottom-right { bottom: 150px; }
}
.strip-card {
  flex: none; width: min(78vw, 300px); scroll-snap-align: start;
  background: #fff; border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14); border: 1px solid transparent; cursor: pointer;
}
.strip-card.is-active { border-color: #9db3a7; }
.strip-when {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--z-primary);
}
.strip-when::before { content: ''; width: 6px; height: 6px; background: #b8975a; transform: rotate(45deg); }
.strip-name { margin-top: 5px; font-size: 16px; font-weight: 600; color: #2e3235; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-meta { margin-top: 1px; font-size: 13px; color: #4a4f52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.strip-price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.strip-price s { color: #5f6467; font-size: 13px; }
.strip-price b { font-size: 17px; color: #2e3235; }
.strip-followers { align-self: center; padding: 2px 7px; border-radius: 999px; background: #e3ecdf; color: #3f5e4f; font-size: 12px; font-weight: 600; }
.strip-pct { align-self: center; padding: 2px 7px; border-radius: 999px; background: #f0e7d6; color: #7a6236; font-size: 12px; font-weight: 700; }
/* « Profil » + « Réserver » on every slot card, example ones included
   (owner, 2026-10-13): a row of two equal buttons under the price. */
.strip-actions { display: flex; gap: 8px; margin-top: 9px; }
.strip-actions > * {
  flex: 1 1 0; min-width: 0; padding: 8px 10px; border-radius: 999px; text-align: center; white-space: nowrap;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer; text-decoration: none; box-sizing: border-box;
}
.strip-card .book-btn, .strip-demo-book { border: 1.5px solid var(--zen-accent); background: var(--zen-accent); color: #fff; }
.strip-profile { border: 1.5px solid var(--z-primary); background: #fff; color: var(--z-primary); }
/* « Choisir mon soin » card, 3rd in the strip (owner, 2026-10-27; pick B2 2026-10-29):
   narrow cream card with a green border, green round icon and the label, opens Filtres
   (green like « Quel soin ? », owner 2026-10-29). */
.strip-invite {
  flex: none; width: 130px; scroll-snap-align: start; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border: 1.5px solid var(--z-green, #3f5e4f); border-radius: 18px;
  background: var(--z-cream, #f7f5f0); color: var(--z-ink, #2e3235); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
  font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.strip-invite-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--z-green, #3f5e4f); display: grid; place-items: center; }
.strip-invite-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.strip-invite-label { font-size: 14px; font-weight: 700; line-height: 1.25; }
/* Signed-out first visit (owner pick C, 2026-10-30): white card that glows green and
   stops the strip, then the next offers veiled as « + N offres »; both open Filtres. */
#slot-strip:has(.strip-gate) { padding-top: 16px; padding-bottom: 20px; bottom: calc(var(--tabbar-h, 0px) + 20px); }
.strip-gate {
  flex: none; width: min(66vw, 256px); scroll-snap-align: start; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; border: 0; border-radius: 18px; background: #fff; color: var(--z-ink, #2e3235);
  font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--z-green, #3f5e4f), 0 0 26px 8px rgba(63, 94, 79, 0.45);
  animation: z-gate-glow 1.6s ease-in-out infinite;
}
.strip-gate .strip-invite-icon { width: 42px; height: 42px; background: var(--z-green, #3f5e4f); }
.strip-gate .strip-invite-icon svg { stroke: #fff; }
.strip-gate-title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.strip-gate-btn { padding: 9px 22px; border-radius: 999px; background: var(--z-green, #3f5e4f); color: #fff; font-size: 15px; font-weight: 700; }
@keyframes z-gate-glow {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--z-green, #3f5e4f), 0 0 18px 4px rgba(63, 94, 79, 0.35); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--z-green, #3f5e4f), 0 0 32px 12px rgba(63, 94, 79, 0.6); }
}
@media (prefers-reduced-motion: reduce) { .strip-gate { animation: none; } }
.strip-gate-veil {
  flex: none; width: min(78vw, 300px); scroll-snap-align: start; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 16px; border: 0; border-radius: 18px;
  background: rgba(247, 245, 240, 0.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--z-green, #3f5e4f); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* ── "Bonjour" card when the map opens. ── */
#hello-card {
  position: fixed; left: 16px; right: 16px; top: calc(var(--topbar-h) + 58px); z-index: 960;
  max-width: 440px; margin: 0 auto; padding: 12px 16px; border-radius: 16px; background: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14); cursor: pointer;
  opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease;
}
#hello-card.in { opacity: 1; transform: none; }
.hello-t { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 19px; color: #2e3235; }
.hello-s { margin-top: 2px; font-size: 14px; color: #4a4f52; }
.hello-s b { color: var(--z-primary); }
@media (prefers-reduced-motion: reduce) { #hello-card { transition: none; } }
/* Desktop: the chips sit over the map, right of the deals list. */
@media (min-width: 769px) {
  #quick-row { left: 320px; background: none; }
  #hello-card { left: calc(320px + 16px); margin: 0; }
}

/* List view on phones (2026-10-10): the deals list alone, no quick chips,
   slot strip or greeting over it. */
@media (max-width: 768px) {
  body.list-open #quick-row,
  body.list-open #slot-strip,
  body.list-open #hello-card,
  body.list-open .mapboxgl-ctrl-top-left { display: none; }
}

/* Filters sheet: the language flag next to the close button (2026-10-10). */
.zf-head-left { display: flex; align-items: center; gap: 6px; justify-self: start; }
.zf-lang {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e3e7e5; background: #fff;
  font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Search sheet opens without the slide so iOS doesn't scroll the page to
   reach the input while it is still off screen (blank screen bug). */
.zsheet.no-anim .zsheet-panel, .zsheet.no-anim .zsheet-backdrop { transition: none; }

/* ── Practitioner card when a price is tapped (2026-10-10). Same look as the
   strip cards. Phones: a fixed panel above the tab bar that replaces the
   strip; desktop: inside the Mapbox popup. ── */
.zpop { color: #2e3235; font-size: 14px; line-height: 1.4; }
.zpop .popup-name { font-size: 17px; font-weight: 600; margin: 0 28px 2px 0; }
.zpop .demo-badge { display: table; margin: 4px 0 0; }
.zpop .popup-phone { margin: 4px 0 0; font-size: 13px; }
.zpop .popup-slot { border-top: 1px solid #efede7; padding-top: 10px; margin-top: 10px; gap: 12px; }
.zpop-when { font-size: 13px; color: #4a4f52; }
.zpop .strip-price { margin-top: 2px; }
.zpop .book-btn {
  flex: none; padding: 8px 14px; border: none; border-radius: 999px;
  background: var(--zen-accent, var(--z-primary)); color: #fff; font: inherit; font-size: 13px; font-weight: 600;
}
.zpop .demo-cta { margin-top: 12px; padding: 12px; border: none; border-radius: 14px; background: #f3f5f2; }
.zpop .demo-cta-text { font-size: 13px; color: #4a4f52; margin-bottom: 10px; }
.zpop .demo-push-btn { width: 100%; padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.zpop .popup-profile { margin-top: 12px; font-size: 14px; }
.zpop-close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: none; border-radius: 50%;
  background: #f3f5f2; color: #4a4f52; font-size: 20px; line-height: 1; cursor: pointer;
}
#map-pop {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h, 0px) + 12px); z-index: 970;
  max-width: 440px; margin: 0 auto; max-height: 55vh; max-height: 55dvh; overflow-y: auto;
  background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
#map-pop.hidden { display: none; }
body.pop-open #slot-strip { display: none; }
.zpop-map .mapboxgl-popup-content { border-radius: 18px; padding: 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); min-width: 260px; }
.zpop-map .mapboxgl-popup-close-button { top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: #f3f5f2; font-size: 18px; color: #4a4f52; }
.zpop-map .popup-name { margin-right: 30px; }
/* Practitioner sheet « épurée, plusieurs horaires » (owner pick 2026-10-18, js/map.js buildPopup). */
.zpop-head { display: flex; align-items: center; gap: 12px; margin-right: 30px; }
.zpop-face { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #eef3f0; color: var(--z-primary); font-weight: 700; font-size: 20px; box-shadow: 0 0 0 2px #d4c19e; }
.zpop-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zpop-id { min-width: 0; }
.zpop .zpop-id .popup-name { margin: 0; font-size: 18px; font-weight: 700; }
.zpop-meta { font-size: 13px; color: #6b6f72; }
.zpop-badge { margin-top: 4px; }
.zpop-badge .demo-badge, .zpop-badge .verified-badge { margin: 0; }
.zpop-box { margin-top: 14px; padding: 14px; border-radius: 14px; background: #f7f5f0; }
.zpop-dayhead { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #9a7b45; }
.zpop-times { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.zpop-times::-webkit-scrollbar { display: none; }
.zpop-time { flex: none; min-width: 64px; padding: 7px 10px; border: 1px solid #dcd6c9; border-radius: 12px; background: #fff; color: #2e3235; font: inherit; line-height: 1.2; text-align: center; cursor: pointer; }
.zpop-time b { display: block; font-size: 15px; }
.zpop-time span { font-size: 11px; font-weight: 800; color: #7a6236; }
.zpop-time.is-on { background: var(--z-primary); border-color: var(--z-primary); color: #fff; }
.zpop-time.is-on span { color: #f0e7d6; }
.zpop-what { margin-top: 12px; font-size: 15px; font-weight: 700; }
.zpop-box .strip-price { margin-top: 4px; }
.zpop-action { margin-top: 12px; }
.zpop .zpop-action .book-btn { display: block; width: 100%; padding: 13px 16px; border-radius: 14px; font-size: 16px; font-weight: 700; }
.zpop .zpop-action .demo-cta { margin-top: 0; }
.zpop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.zpop .zpop-foot .popup-profile { margin: 0; font-weight: 700; }
.zpop-day { padding: 0; border: 0; background: none; color: #6b6f72; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; margin-left: 12px; }
/* Top bar language flag, next to the filters button (2026-10-10). */
.topbar-lang { font-size: 22px; line-height: 1; padding: 0; }
/* Gift in the top bar → the spirit animal page (2026-10-10). */
.topbar-gift { text-decoration: none; }

/* ── Top bar from the owner's reference "Classes" screenshot (2026-10-12) ──
   Line 1: small flag on the left, ZENOA centred, gift + notifications bell
   on the right. Line 2: filters, the alert pill (Activer / Activée), and the
   Offres | Carte switch on the right. Zenoa colours, not the reference's. */
#topbar .topbar-lang {
  position: absolute; top: calc(var(--topbar-safe) + 8px); left: 14px;
  width: auto; height: 32px; padding: 0 6px; border: 0; border-radius: 0; background: none;
  font-size: 17px;
}
.topbar-corner {
  position: absolute; top: calc(var(--topbar-safe) + 2px); right: 8px;
  display: flex; align-items: center;
}
/* Gift and bell: same plain ink drawing (owner, 2026-10-12). */
.topbar-corner .topbar-icon-btn,
#topbar .topbar-corner .topbar-gift {
  width: 40px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--zen-ink);
}
.topbar-corner svg { width: 22px; height: 22px; }   /* = the map bar's icons (#topbar svg) */
/* Same gift + bell at the top right of Accueil and Profil (2026-10-12). */
/* Accueil / Profil: the same fixed bar as the map (owner, 2026-10-13): page name
   (ACCUEIL, PROFIL) at the spot and size of ZENOA, gift + bell on the right
   (.topbar-corner keeps the map's position), still there when the page scrolls. */
.page-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 950;
  padding: var(--topbar-safe) 16px 0;
  background: #f7f5f0;
  border-bottom: 1px solid var(--zen-line);
}
#home-page, #profile-page { padding-top: 62px; }   /* bar (48 px) + the page gap */
.standalone #home-page, .standalone #profile-page { padding-top: 62px; }   /* body already pads the safe area */
.page-bar .page-title { margin: 8px 0; font-size: 26px; line-height: 32px; color: var(--zen-ink); text-transform: uppercase; }
@media (max-width: 420px) {
  .page-bar .page-title { margin: 6px 0 4px; font-size: 22px; }   /* = #topbar .topbar-title on a phone */
  #home-page, #profile-page, .standalone #home-page, .standalone #profile-page { padding-top: 56px; }   /* bar (42 px) + gap */
}
/* Unread notifications: small gold count on the bell. */
#inbox-count { top: 5px; right: 2px; background: #b8975a; }

/* Alert pill: outlined when off, green when on. */
#topbar #alert-btn {
  margin-left: 0; height: 42px; padding: 0 15px 0 12px; gap: 7px;
  background: #fff; border-color: #e3e0d8; border-radius: 21px; color: var(--zen-ink);
}
#topbar #alert-btn svg { width: 20px; height: 20px; }
#topbar #alert-btn.active { background: #e5eeea; border-color: #bcd3c8; color: var(--zen-accent); }
#topbar #filters-btn { width: 42px; height: 42px; background: #fff; border-color: #e3e0d8; }

/* Offres | Carte: grey track, the chosen side filled green. */
.topbar-switch {
  margin-left: auto; flex: none;
  display: inline-flex; padding: 3px; gap: 2px;
  background: #ecebe5; border-radius: 14px;
}
.topbar-switch button {
  height: 36px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px;
  border: 0; border-radius: 11px; background: none; color: var(--zen-muted);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#topbar .topbar-switch svg { width: 18px; height: 18px; }
.topbar-switch button[aria-pressed="true"] { background: var(--zen-accent); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
/* The switch replaces the floating "Offres" button on phones; on a computer
   the list is always beside the map, so no switch. */
#sidebar-toggle, html.standalone.has-tabbar #sidebar-toggle { display: none; }
@media (min-width: 769px) { .topbar-switch { display: none; } }
/* Phone list open: a floating « Carte » pill above the bottom bar brings the
   map back (owner, 2026-10-22: the list had no visible way out). */
@media (max-width: 768px) {
  body.list-open #sidebar-toggle,
  html.standalone.has-tabbar body.list-open #sidebar-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    position: fixed; top: auto; right: auto; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--tabbar-h, 0px) + 16px); z-index: 850;
    padding: 12px 20px; border-radius: 999px; font-size: 15px; font-weight: 600;
    background: var(--zen-accent); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  }
  body.list-open #sidebar-toggle::before {
    content: ''; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5l5.5-2.5 6 2.5 5.5-2.5v13.5l-5.5 2.5-6-2.5-5.5 2.5z'/%3E%3Cpath d='M9 4v13.5M15 6.5V20'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5l5.5-2.5 6 2.5 5.5-2.5v13.5l-5.5 2.5-6-2.5-5.5 2.5z'/%3E%3Cpath d='M9 4v13.5M15 6.5V20'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body.list-open #sidebar,
  html.standalone.has-tabbar body.list-open #sidebar { padding-bottom: 84px; }   /* the last card clears the pill */
}
/* Narrow phones (iPhone SE / mini): drop the switch icons so the row fits. */
@media (max-width: 374px) {
  .topbar-row { gap: 8px; }
  #topbar .topbar-switch svg { display: none; }
}

/* ── Notifications sheet (js/inbox.js) ── */
.inbox-list { list-style: none; margin: 0 0 8px; padding: 0; }
.inbox-item {
  position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 22px; margin-bottom: 8px;
  background: #fff; border: 1px solid #eceae3; border-radius: 14px; color: var(--zen-ink); text-decoration: none;
}
.inbox-item.unread::before {
  content: ''; position: absolute; left: 9px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: #b8975a;
}
.inbox-item-title { font-weight: 600; font-size: 15px; }
/* Cross on each notification + « Tout effacer » above the list (2026-10-27). */
.inbox-row { position: relative; }
.inbox-row .inbox-item { padding-right: 50px; }
.inbox-item-x {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: none; border-radius: 50%; background: transparent; color: #8a8f92; cursor: pointer;
}
.inbox-item-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.inbox-item-x:active { background: #f2f1ed; }
.inbox-list-head { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.inbox-clear {
  padding: 8px 4px; border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--z-primary, var(--zen-accent)); cursor: pointer;
}
.inbox-item-body { font-size: 14px; color: var(--zen-muted); line-height: 1.4; }
.inbox-item-when { font-size: 12px; color: #5f6467; margin-top: 2px; }
.inbox-empty { margin: 4px 0 18px; padding: 18px 16px; background: #fff; border-radius: 14px; color: var(--zen-muted); font-size: 14px; line-height: 1.5; text-align: center; }
.inbox-setting {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: #fff; border: 1px solid #eceae3; border-radius: 14px; color: var(--zen-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.inbox-setting-static { cursor: default; }
.zsheet .inbox-setting svg { flex: none; width: 22px; height: 22px; color: var(--zen-accent); }
.inbox-setting > span:first-of-type { flex: 1; display: grid; gap: 2px; }
.inbox-setting b { font-weight: 600; font-size: 15px; }
.inbox-setting small { font-size: 13px; color: #5f6467; }
.inbox-state { flex: none; padding: 6px 12px; border-radius: 999px; background: #f2f1ed; font-size: 13px; font-weight: 600; color: var(--zen-ink); }
.inbox-state.on { background: #e5eeea; color: var(--zen-accent); }
/* Practitioner mode (2026-10-13): two tabs, « Mes alertes praticien ». */
.inbox-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 14px; background: #ece9e2; border-radius: 999px; }
.inbox-tab { flex: 1; padding: 9px 0; border: none; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: #5f6467; cursor: pointer; }
.inbox-tab.on { background: #fff; color: var(--z-primary, var(--zen-accent)); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.inbox-tab-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 1px 6px; border-radius: 9px; background: #b8975a; color: #fff; font-size: 11px; line-height: 16px; }
.inbox-item-kind { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--z-primary, var(--zen-accent)); }
.inbox-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #f4ecdc; color: #6e5428; font-size: 13px; line-height: 1.4; }
#pro-alerts-sheet .inbox-setting-static { cursor: default; }
#pro-alerts-sheet .pl-toggle[aria-checked="true"] { background: var(--z-primary, #b4521f); }
#pro-alerts-sheet h3 { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #5f6467; }
.pa-trainings.is-off { opacity: .45; pointer-events: none; }
/* A long first name in « Bonjour … » wraps before the gift and bell. */

/* ── UX pass 2 (2026-10-13): one tools row, everything else in the sheet ── */
.topbar-hidden { display: none !important; }
/* Quick chips: hidden by UX pass 2, back floating on the map (owner, 2026-10-13). */
#near-me-btn { display: none; }
#topbar .topbar-row { justify-content: space-between; }
#topbar .topbar-mode { position: static; }
#topbar #filters-btn.topbar-filters { width: auto; padding: 0 16px 0 12px; border-radius: 21px; gap: 8px; }
#topbar #filters-btn .topbar-btn-text { font-size: 15px; font-weight: 600; }
#topbar #filters-btn .topbar-badge { position: static; margin-left: 2px; }
/* « Quel soin ? » in Zenoa green so it stands out on the map (gold from 2026-10-27, green
   owner pick A 2026-10-29): white text and icon, white count badge with green figure. */
#topbar #filters-btn.topbar-filters { background: var(--z-green, #3F5E4F); border-color: var(--z-green, #3F5E4F); color: #fff; box-shadow: 0 2px 8px rgba(63, 94, 79, 0.35); }
#topbar #filters-btn.topbar-filters svg { stroke: #fff; }
/* « Quel soin ? » catches the eye (owner pick A « Halo », 2026-10-29): a ring (green
   since 2026-10-29) leaves the button; still for « réduire les animations ». Stronger
   double ring every 2 s since 2026-11-02 (owner: the faint one was not seen, pick A). */
#topbar #filters-btn.topbar-filters { position: relative; overflow: visible; }
#topbar #filters-btn.topbar-filters::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: z-filters-halo 2s ease-out infinite; }
@keyframes z-filters-halo {
  0% { box-shadow: 0 0 0 0 rgba(63, 94, 79, 0.9), 0 0 0 0 rgba(63, 94, 79, 0.5); }
  60% { box-shadow: 0 0 0 9px rgba(63, 94, 79, 0.35), 0 0 0 18px rgba(63, 94, 79, 0); }
  100% { box-shadow: 0 0 0 14px rgba(63, 94, 79, 0), 0 0 0 22px rgba(63, 94, 79, 0); }
}
@media (prefers-reduced-motion: reduce) { #topbar #filters-btn.topbar-filters::after { animation: none; } }
#topbar #filters-btn .topbar-badge { background: #fff; color: var(--z-green, #3F5E4F); }
/* Search in the tools row (owner, 2026-10-13), left of « Filtres », takes the free width. */
#topbar .topbar-search {
  flex: 1; min-width: 0; height: 42px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; border: 1px solid #e3e0d8; border-radius: 21px; background: #fff;
  color: #5f6467; font: inherit; font-size: 14px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#topbar .topbar-search svg { flex: none; width: 20px; height: 20px; color: #2e3235; }
#topbar .topbar-search-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { #topbar .topbar-title { margin: 6px 0 4px; } }
/* Hello line under the bar: thin, closable, once a day. */
#hello-line {
  position: fixed; left: 0; right: 0; top: var(--topbar-h); z-index: 955;
  display: flex; align-items: center; gap: 8px; padding: 6px 16px;
  background: #fffdf8; border-bottom: 1px solid var(--zen-line); font-size: 13px; color: #4a4f52;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease;
}
#hello-line.in { opacity: 1; transform: none; }
#hello-line .hello-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hello-line .hello-text b { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 15px; color: #2e3235; }
#hello-line .hello-close { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f0efe9; font-size: 18px; line-height: 1; cursor: pointer; color: #4a4f52; }
@media (max-width: 768px) { body.list-open #hello-line { display: none; } }
@media (prefers-reduced-motion: reduce) { #hello-line { transition: none; } }
/* Sheet: list / map only matters on phones. */
@media (min-width: 769px) { #filters-sheet .zf-phone, #filters-sheet [data-view] { display: none; } }

body.has-hello .mapboxgl-ctrl-top-left, body.has-hello .mapboxgl-ctrl-top-right { margin-top: 92px; }
/* The floating quick chips sit under the hello line while it shows. */
body.has-hello #quick-row { top: calc(var(--topbar-h) + 40px); }

/* Practitioner photo (or initial) on the slot cards (owner, 2026-10-13). */
.strip-head { display: flex; align-items: center; gap: 10px; }
.strip-id { flex: 1; min-width: 0; }
.strip-face {
  flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #ecf2ef; color: #2e3235; font-size: 18px; font-weight: 700;
  box-shadow: 0 0 0 2px #d4c19e;
}
.strip-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Same photo (or initial) on the cards of the offers list + the treatments
   they offer under the name (owner, 2026-10-22, mockup A). */
.deal-row { display: flex; align-items: flex-start; gap: 12px; }
.deal-body { flex: 1; min-width: 0; }
.deal-face {
  flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #ecf2ef; color: #2e3235; font-size: 20px; font-weight: 700;
  box-shadow: 0 0 0 2px #d4c19e;
}
.deal-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deal-card .deal-what { color: var(--zen-accent); font-weight: 600; font-size: 14px; margin: -2px 0 3px; }
/* Practitioner bell + alerts: primary button in the practitioner colour. */
body[data-mode="practitioner"] #inbox-sheet .zsheet-primary,
body[data-mode="practitioner"] #pro-alerts-sheet .zsheet-primary { background: var(--z-primary, #b4521f); }
#pro-alerts-sheet .zchip[aria-pressed="true"] { background: var(--z-primary, #b4521f); border-color: var(--z-primary, #b4521f); color: #fff; }

/* « Paris · 8 offres en réduction » after the opening zoom (js/map.js showCityPill). */
#city-pill {
  position: fixed; left: 50%; top: calc(var(--topbar-h) + 62px); z-index: 945;
  padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--z-ink, #2e3235);
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  opacity: 0; transform: translate(-50%, -6px); transition: opacity 0.25s ease, transform 0.25s ease;
}
#city-pill.in { opacity: 1; transform: translate(-50%, 0); }
#city-pill b { color: var(--z-gold, #b8975a); font-weight: 700; }
body.has-hello #city-pill { top: calc(var(--topbar-h) + 98px); }
@media (max-width: 768px) { body.list-open #city-pill { display: none; } }
@media (min-width: 769px) { #city-pill { left: calc(50% + 160px); } }
@media (prefers-reduced-motion: reduce) { #city-pill { transition: none; } }

/* Centres (docs/specs/centres.md): one pin per centre (map.js mapPins), its
   sheet lists the practitioners with their next times, « chez [centre] » on
   the list cards. */
.price-bubble-centre { max-width: 190px; background: #fff; }
.price-bubble-centre > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.zc-body { display: flex; flex-direction: column; gap: 12px; }
.zc-head { margin-right: 30px; }
.zc-head .zpop-meta { overflow-wrap: anywhere; }
.zc-row { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid #ece8df; }
.zc-who { display: flex; align-items: center; gap: 10px; }
.zc-face { width: 40px; height: 40px; font-size: 16px; }
.zc-row .zpop-times { margin-top: 6px; }
.zc-body .zpop-foot { margin-top: 0; }
.deal-card .deal-centre { font-size: 13px; color: #5f6467; margin: -2px 0 3px; }

/* « Une date » in Filtres « Commence dans » and the alert days (owner pick A, 2026-10-27): the native date
   input lies invisible over the chip, so one tap opens the phone's calendar. */
.zchip-date { position: relative; overflow: hidden; cursor: pointer; }
.zchip-date input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; border: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.zchip-date[aria-pressed="true"] { font-weight: 600; }
#alert-sheet .zchip-date { display: inline-flex; align-items: center; height: 44px; box-sizing: border-box; }

/* ── « Créer une alerte » in the Filtres style (owner pick A, 2026-10-30):
   gold-diamond capitals for the sections, white chips, treatments on two even
   columns with the family names in an italic serif, quiet « Annuler ». ── */
#alert-sheet .zsheet-section { padding: 22px 0 6px; border-bottom: none; }
#alert-sheet .zsheet-section h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--z-green, #3f5e4f);
}
#alert-sheet .zsheet-section h3::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--z-gold, #b8975a); transform: rotate(45deg); }
#alert-sheet .zsheet-section h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #b8975a66, transparent); }
#alert-sheet .zsheet-optional { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: #8a8a82; }
#alert-sheet [data-multi="types"] .zchips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
#alert-sheet .zchips-group {
  grid-column: 1 / -1; margin: 14px 0 2px;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--z-ink, #2e3235);
}
#alert-sheet .zchips-group:first-child { margin-top: 0; }
#alert-sheet .zchip { background: #fff; border-color: #e6e3db; font-size: 14px; transition: background 0.15s, border-color 0.15s, color 0.15s; }
#alert-sheet [data-multi="types"] .zchip { padding: 10px 8px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
#alert-sheet .zchip[aria-pressed="true"] { background: var(--zen-accent); border-color: var(--zen-accent); color: #fff; }
#alert-sheet .zsheet-select { height: 48px; border-color: #e6e3db; border-radius: 14px; font-size: 16px; }
#alert-sheet .zsheet-secondary { flex: 0 0 auto; padding: 0 14px; background: transparent; color: var(--z-green, #3f5e4f); }

/* ── « Notifications » like « Créer une alerte » (owner pick A + the round
   badge of C, 2026-10-30): gold-diamond capitals « Récentes » / « Vos
   notifications », a round green badge in front of each notification, gold
   dates, gold round icons on the settings rows. ── */
#inbox-sheet .inbox-list-head { justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 10px; }
#inbox-sheet .inbox-list-h,
#inbox-sheet .zsheet-section h3 {
  display: flex; align-items: center; gap: 10px; flex: 1;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--z-green, #3f5e4f);
}
#inbox-sheet .inbox-list-h::before,
#inbox-sheet .zsheet-section h3::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--z-gold, #b8975a); transform: rotate(45deg); }
#inbox-sheet .inbox-list-h::after,
#inbox-sheet .zsheet-section h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #b8975a66, transparent); }
#inbox-sheet .inbox-clear { font-size: 13px; }
#inbox-sheet .zsheet-section { padding: 18px 0 6px; border-bottom: none; }
#inbox-sheet .zsheet-section h3 { margin: 0 0 14px; }
#inbox-sheet .inbox-item { min-height: 72px; padding: 14px 50px 14px 70px; border-color: #e6e3db; border-radius: 16px; }
#inbox-sheet .inbox-item-ico {
  position: absolute; left: 14px; top: 14px; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: var(--z-green, #3f5e4f); color: #fff;
}
#inbox-sheet .inbox-item-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#inbox-sheet .inbox-item.unread::before { left: 48px; top: 12px; width: 10px; height: 10px; border: 2px solid #fff; z-index: 1; }
#inbox-sheet .inbox-item-title { color: var(--z-green, #3f5e4f); }
#inbox-sheet .inbox-item-when { color: #8a6a35; font-weight: 600; }
#inbox-sheet .inbox-setting { border-color: #e6e3db; border-radius: 16px; }
#inbox-sheet .inbox-setting svg { box-sizing: content-box; width: 18px; height: 18px; padding: 9px; border-radius: 50%; background: #f3ead8; color: #8a6a35; }
#inbox-sheet .inbox-state.on { background: var(--z-green, #3f5e4f); color: #fff; }
body[data-mode="practitioner"] #inbox-sheet .inbox-item-ico { background: var(--z-primary, #b4521f); }