/* ── Bottom tab bar + Home / Profile tabs (2026-10-08) ──
   js/tabbar.js injects <nav id="tabbar"> on pages with
   <body data-tabbar="…"> and adds .has-tabbar on <html>. Separate file (not
   styles.css) so a new deploy never pairs the new markup with a stale cached
   stylesheet. */
:root {
  /* iPhone home indicator ("the little black bar"): the tabs sit ABOVE it.
     env() needs viewport-fit=cover (set on every page with the bar). */
  --tab-safe: min(env(safe-area-inset-bottom, 0px), 34px);
  /* capped at the iPhone home-indicator height (34 px): Safari can report a
     bigger inset under its own toolbar on some pages, which made the bar
     taller on Praticiens / Accueil than on Profil. */
  --tabbar-h: calc(50px + var(--tab-safe));   /* iOS-style 49 pt bar, like the reference app */
  --tab-ink: #2e3235;
  --tab-accent: var(--z-primary);
  --tab-muted: #5f6467;
}

#tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2500;                /* always on top: map sheet (800/900), modals (1000), dropdowns (1200); install banner 3000 sits above it */
  height: var(--tabbar-h);
  padding: 0 0 var(--tab-safe);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: #f7f5f0;
  border-top: 1px solid #eae7e0;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.06);
  transform: none !important;   /* never slides away */
}
#tabbar .tab {
  flex: 1;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  gap: 2px;
  color: #6f7477;               /* inactive tabs: lighter grey so the active one stands out */
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
}
#tabbar .tab svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Profil tab once the client has a spirit animal: the animal is the icon. */
#tabbar .tab-totem {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: hsl(var(--hue) 45% 92%);
  font-size: 16px;
  line-height: 1;
}
#tabbar .tab-totem img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#tabbar .tab--totem span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
#tabbar .tab:active .tab-totem { transform: scale(0.92); }
#tabbar .tab:hover { color: var(--tab-ink); }
#tabbar .tab-ic { display: flex; }
#tabbar .tab:active svg { transform: scale(0.92); }
/* Active tab (owner 2026-10-27, mockup C « bulle qui dépasse »): its icon
   (or the animal / photo) rises in a round bubble over the top of the bar,
   the label goes bold in the accent colour; the other tabs stay grey. The
   bar keeps its 50 px; the bubble only overlaps the page by 8 px (owner 2026-10-27: 18 px
   was « trop haut », picked 2 of 3 heights). */
#tabbar .tab.is-active {
  position: relative;
  justify-content: flex-end;
  padding-bottom: 2px;
  color: var(--tab-accent);
  font-weight: 800;
}
#tabbar .tab.is-active .tab-ic,
#tabbar .tab.is-active .tab-totem {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border-radius: 50%;
  border: 3px solid #f7f5f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
#tabbar .tab.is-active .tab-ic {
  align-items: center;
  justify-content: center;
  background: var(--tab-accent);
  color: #f7f5f0;
}
#tabbar .tab.is-active svg { width: 23px; height: 23px; stroke-width: 2; }
#tabbar .tab.is-active .tab-totem { font-size: 23px; box-shadow: 0 0 0 2px var(--tab-accent), 0 4px 12px rgba(0, 0, 0, 0.22); }
#tabbar .tab.is-active:active .tab-ic,
#tabbar .tab.is-active:active .tab-totem { transform: scale(0.94); }
#tabbar .tab.is-active:active svg { transform: none; }

/* Every page with the bar keeps its last lines clear of it. */
body[data-tabbar]:not([data-tabbar="search"]) { padding-bottom: var(--tabbar-h); }

/* Terms / privacy / legal notice / contact / FR·EN live in the Profile tab
   (always one tap away in the bar), not in footers or on the map. */
body[data-tabbar] .site-footer[data-legal],
.has-tabbar .map-legal { display: none !important; }

/* Modals (booking, cancel…) open above the bar, which stays visible under them. */
.has-tabbar .modal { bottom: var(--tabbar-h); }
.has-tabbar .modal-box { max-height: calc(100% - 24px); overflow-y: auto; }

/* Installed app on iPhone: keep a margin over the home indicator even if
   the browser reports no safe area (-webkit-touch-callout = iOS only). */
@supports (-webkit-touch-callout: none) {
  html.standalone { --tab-safe: max(min(env(safe-area-inset-bottom, 0px), 34px), 22px); }
}
/* Installed iPhone app (black-translucent status bar): when a page is not
   taller than the screen, iOS lays it out one status-bar height too short, so
   the bar (and the map) stop ~60 px above the bottom with an empty band under
   them. Pages that scroll (Profil) are fine, so keep every page with the bar
   at least that much taller than the screen. */
@supports (-webkit-touch-callout: none) {
  html.standalone.has-tabbar body { min-height: calc(100vh + env(safe-area-inset-top, 0px)); }
}

/* viewport-fit=cover also lets the map run under the status bar: keep the
   map controls and the Offres button below it. */
html.standalone.has-tabbar #sidebar-toggle { top: calc(12px + env(safe-area-inset-top, 0px)); }
html.standalone.has-tabbar .mapboxgl-ctrl-top-left,
html.standalone.has-tabbar .mapboxgl-ctrl-top-right { top: env(safe-area-inset-top, 0px); }

/* The install banner sits above the bar instead of over it. */
.has-tabbar #pwa-banner { bottom: calc(var(--tabbar-h) + 10px); padding-bottom: 12px; }

/* ── Map page (Search tab): leave room for the bar ── */
.has-tabbar #app { height: calc(100vh - var(--tabbar-h)); height: calc(100dvh - var(--tabbar-h)); }
@media (max-width: 768px) {
  .has-tabbar #app { height: auto; }
  .has-tabbar #map { bottom: var(--tabbar-h); height: auto; }
  .has-tabbar #sidebar {
    bottom: var(--tabbar-h);
    max-height: calc(82vh - var(--tabbar-h));
    max-height: calc(82dvh - var(--tabbar-h));
    transform: translateY(calc(100% + 40px));   /* closed: shadow hidden too */
  }
  .has-tabbar #sidebar.open { transform: translateY(0); }
}
/* The bar already keeps clear of the iPhone home indicator. */
html.standalone.has-tabbar #sidebar { padding-bottom: 16px; }
html.standalone.has-tabbar #sidebar .site-footer--pinned {
  bottom: -16px;
  margin-bottom: -16px;
  padding-bottom: 12px;
}

/* ── Home / Profile pages ── */
.tab-page {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.standalone .tab-page { padding-top: 16px; }
/* Back arrow + title in a bar fixed at the top while scrolling (owner
   2026-10-27 « retour partout », same idea as /totem and the practitioner
   page). The bar covers the page's top padding so the layout stays put; in the
   installed app (iPhone) body already pads the safe area (.standalone body),
   so the bar starts over that padding: the clock gap is counted once and stays
   covered while the bar sticks (bugs #207 / #345). */
.tab-page > header.tp-head {
  position: sticky; top: 0; z-index: 30;
  margin: -28px -18px 0; padding: 28px 56px 10px;
  background: #f7f5f0;
}
.standalone .tab-page > header.tp-head {
  margin-top: calc(-16px - env(safe-area-inset-top, 0px));
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
.tab-page > header.tp-head > a.tp-back { position: absolute; left: 12px; top: auto; bottom: 5px; margin: 0; transform: none; }
.tab-page > header.tp-head > h1 { margin: 0; padding: 0; text-align: center; }
.tab-page h1 { font-size: 26px; color: var(--tab-ink); margin-top: 4px; }
.tab-page h2 { font-size: 17px; color: var(--tab-ink); margin-bottom: 10px; }
.tab-page .site-footer { margin-top: 8px; }

.tab-card {
  background: #fff;
  border: 1px solid #ebe9e3;
  border-radius: 16px;
  padding: 16px 18px;
}

.home-cta,
.tab-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.home-cta {
  padding: 18px;
  border-radius: 16px;
  background: var(--z-primary);
  color: #f7f5f0;
  box-shadow: 0 4px 16px rgba(63, 94, 79, 0.25);
}
.home-cta:hover { background: #34503f; }
.home-cta-icon,
.tab-link-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.14);
}
.tab-link-icon { background: #f7f5f0; }
.home-cta-text,
.tab-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-cta-text strong { font-size: 17px; }
.home-cta-text span { font-size: 13px; color: #d1e1d9; }
.tab-link-text strong { font-size: 16px; color: var(--tab-ink); }
.tab-link-text span { font-size: 13px; color: #4a4f52; }
.home-cta-arrow { flex: none; font-size: 26px; line-height: 1; opacity: 0.7; }
.tab-link-card:hover { border-color: var(--tab-accent); }

.home-booking {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #ebe9e3;
  border-left: 5px solid #b8975a;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: #fbf9f4;
}
.home-booking.status-confirmed { border-left-color: var(--z-primary); background: var(--z-primary-soft); }
.home-booking.status-declined,
.home-booking.status-cancelled { border-left-color: #b23a3a; background: #faf0f0; opacity: 0.8; }
.home-booking:hover { border-color: var(--tab-accent); }
.home-booking-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.home-booking-badge { font-size: 13px; font-weight: 700; }
.home-booking-next {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--tab-accent);
  border-radius: 999px;
  padding: 2px 8px;
}
.home-booking strong { font-size: 15px; }
.home-booking-when,
.home-booking-what { font-size: 13px; color: #4a4f52; }
.home-sub { font-size: 14px; color: var(--tab-muted); margin: 14px 0 8px; }

.home-empty { text-align: center; padding: 8px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.home-empty svg {
  width: 40px; height: 40px; fill: none; stroke: var(--tab-muted);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.tab-text-link,
.tab-text-btn {
  color: var(--tab-accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
}
.tab-text-btn { background: none; border: 0; padding: 0; cursor: pointer; color: #b23a3a; font-family: inherit; }
.tab-text-link:hover,
.tab-text-btn:hover { text-decoration: underline; }

.me-role-sheet {
  position: fixed; inset: 0; z-index: 2700;   /* above the tab bar (2500) */
  background: rgba(0, 0, 0, 0.35);
  display: flex; align-items: flex-end; justify-content: center;
}
.me-role-sheet.hidden { display: none; }
.me-role-box {
  width: 100%; max-width: 520px;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.me-role-box h2 { margin-bottom: 0; }
.me-role-option {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border: 1px solid #ebe9e3; border-radius: 14px;
  text-decoration: none; color: inherit;
}
.me-role-option strong { font-size: 16px; color: var(--tab-ink); }
.me-role-option span { font-size: 13px; color: #4a4f52; }
.me-role-option:hover { border-color: var(--tab-accent); }
.me-role-option.is-current { border-color: var(--tab-accent); background: var(--z-primary-soft); }
.me-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #4a4f52; }
.me-field input { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #dbd7ca; border-radius: 10px; color: #2e3235; }
.me-field input:focus { outline: 2px solid var(--tab-accent); outline-offset: 0; border-color: transparent; }
.me-save { margin-top: 4px; padding: 13px; border: 0; border-radius: 12px; background: var(--tab-accent); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.si-choice { display: flex; gap: 8px; margin-top: 4px; }
.si-choice .me-save { flex: 1; margin-top: 0; padding: 12px 6px; font-size: 15px; }
.me-role-close { margin-top: 4px; padding: 12px; border: 0; border-radius: 12px; background: #f2f1ed; font: inherit; font-weight: 600; cursor: pointer; }
/* « Nouveau code dans 42 s »: the resend button waits a minute after each send (js/signup.js). */
.me-role-box .me-role-close[disabled], .me-role-box .me-save[disabled] { opacity: .55; cursor: default; }
.profile-avatar {
  flex: none;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: #f2f1ed;
}
.profile-avatar.has-totem { background: none; }
.profile-avatar svg {
  width: 40px; height: 40px; fill: none; stroke: var(--tab-muted);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.totem-visual--avatar { --size: 84px; }


/* Spirit-animal intro after a new account's code (js/signup.js, 2026-10-10). */
.si-top { display: flex; align-items: center; justify-content: center; position: relative; min-height: 28px; }
.si-dots { display: flex; gap: 6px; }
.si-dots i { width: 8px; height: 8px; border-radius: 4px; background: #e4e1d8; }
.si-dots i.on { width: 26px; background: var(--tab-accent); }
.si-skip { position: absolute; right: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: #6b6f6c; cursor: pointer; padding: 4px; }
.si-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 6px; }
.si-row figure { min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.si-row img { width: min(72px, 100%); aspect-ratio: 1; border-radius: 50%; background: #5f8a66; object-fit: cover; }
.si-row figcaption { font-size: 13px; color: #4a4f52; line-height: 1.3; display: flex; flex-direction: column; }
.si-row figcaption b { color: var(--tab-ink); font-size: 12px; }
.si-list { list-style: none; margin: 2px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.si-list li { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border: 1px solid #ebe9e3; border-radius: 12px; font-size: 15px; }
.si-list b { padding: 2px 10px; border-radius: 999px; background: #f0e7d6; color: #7a6236; font-size: 14px; }