/* ── Practitioner profile page (/t/<slug>, /therapist), redesigned 2026-10-12 ──
   Same look as Accueil / Profil / totem: green hero card, gold-diamond
   headings, white cards on cream, no emojis. Markup: therapist.html +
   js/therapist.js. */

#profile { gap: 18px; }
/* The page highlights the Offres tab (data-tabbar="search"), which tabbar.css
   leaves without bottom padding (the map is full screen): add it here so the
   end of the page (Itinéraire, reviews, contact) scrolls above the bar. */
body.profile-page { padding-bottom: calc(var(--tabbar-h) + 16px); }
#profile-content { display: flex; flex-direction: column; gap: 22px; }

.th-back {
  align-self: flex-start; font-size: 14px; font-weight: 600;
  color: var(--tab-accent); text-decoration: none;
}
.th-back:hover { text-decoration: underline; }
/* Bar holding the back link, fixed at the top while scrolling (owner
   2026-10-27, « retour impossible en bas »). It covers the page's top padding
   so the page keeps its layout; in the installed app (iPhone) body already
   pads the safe area (.standalone body), so the bar starts over that padding
   and counts it once, then keeps covering the clock area while it sticks. */
.th-bar {
  position: sticky; top: 0; z-index: 30;
  margin: -28px -18px -8px; padding: 22px 18px 8px;
  display: flex; background: var(--z-cream, #f7f5f0);
}
.standalone .th-bar {
  margin-top: calc(-16px - env(safe-area-inset-top, 0px));
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
/* Round back pastille (style A, owner 2026-10-27), in the bar's flow. */
.th-bar .tp-back { position: static; flex: none; margin-left: -6px; }

/* 1. Hero */
.th-hero {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: 20px;
  background: linear-gradient(160deg, var(--z-primary) 0%, #4a6b5c 100%);
  color: #f7f5f0; box-shadow: 0 6px 20px rgb(63 94 79 / 0.25);
}
.th-hero-top { display: flex; align-items: center; gap: 14px; }
/* 2026-10-22 (mockup B, all green): name and city beside the photo, the bell
   at the end of that row, then one line « vérifié · avis », then the soins. */
#profile-follow { flex: none; align-self: flex-start; }
#profile .th-hero-top { gap: 12px; }
#profile .th-initial { width: 58px; height: 58px; font-size: 24px; }
/* Long names (over 22 characters) one step smaller, set by js/therapist.js. */
#profile .th-hero h1.is-long { font-size: 18px; }
.th-initial {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(255 255 255 / 0.14); box-shadow: 0 0 0 3px #d4c19e;
  font-size: 26px; font-weight: 700; color: #fff;
}
.th-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#profile .th-hero h1 { margin: 0; font-size: 20px; line-height: 1.2; color: #fff; overflow-wrap: break-word; }
#profile-meta { margin: 0; font-size: 14px; color: #d1e1d9; }
.th-hero .verified-badge {
  margin: 0; align-self: flex-start; background: rgb(255 255 255 / 0.92); color: #1f5c3f; font-size: 12px; vertical-align: 0;
}
.th-hero .demo-badge {
  margin: 0; align-self: flex-start; border: 1px dashed rgb(255 255 255 / 0.5);
  background: rgb(255 255 255 / 0.1); color: #f0e7d6; font-size: 12px; vertical-align: 0;
}

/* In the facts line, « Praticien vérifié » reads as a quiet label, not a pill. */
.th-facts .verified-badge { padding: 0; background: none; color: #fff; font-size: 13px; font-weight: 700; }
.th-facts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.16);
}
.th-rating { display: flex; align-items: center; }
.th-rating:empty { display: none; }
.th-stars { color: #d4c19e; font-size: 15px; letter-spacing: 1px; }
.th-rating-txt { font-size: 14px; color: #d1e1d9; }
.th-rating-txt strong { color: #fff; }
/* With reviews: the whole line is the button to the reviews. */
.th-rating-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; cursor: pointer;
  background: none; color: inherit; font: inherit; text-align: left;
}
.th-rating-btn .th-rating-txt::after { content: ' ›'; color: #fff; font-weight: 700; }
#profile-reviews { scroll-margin-top: 16px; }

#profile-specialties { display: flex; flex-wrap: wrap; gap: 6px; }
#profile-specialties:empty, #profile-follow:empty { display: none; }
.spec-tag {
  padding: 4px 12px; border-radius: 999px;
  background: #f7f5f0; color: var(--z-primary); font-size: 13px; font-weight: 700;
}
/* The bell (js/follow.js): end of the hero's top row. */

/* 2. Section headings: gold diamond, spaced capitals, fine rule (as /home) */
.th-section { display: flex; flex-direction: column; }
.tab-page h2.th-kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--z-primary);
}
.th-kicker::before { content: ''; flex: none; width: 7px; height: 7px; background: #b8975a; transform: rotate(45deg); }
.th-kicker::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #b8975a66, transparent); }

#profile-bio { margin: 0; line-height: 1.55; color: #2e3235; }

/* 3. Slots: one white card, compact rows (date tile, time + treatment, price) */
.th-slots { display: flex; flex-direction: column; background: #fff; border: 1px solid #ebe9e3; border-radius: 16px; overflow: hidden; }
.profile-slot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.profile-slot + .profile-slot { border-top: 1px solid #f2f1ed; }
.th-date {
  flex: none; width: 48px; padding: 5px 0; border-radius: 10px; background: #ecf2ef;
  display: flex; flex-direction: column; align-items: center;
  font-size: 11px; font-weight: 600; color: var(--z-primary); text-transform: uppercase; line-height: 1.25;
}
.th-date b { font-size: 16px; color: #2e3235; }
.profile-slot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-slot-info strong { font-size: 15px; color: #2e3235; }
.profile-slot-info span { font-size: 13px; color: #5f6467; }
.th-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.th-price .book-btn { margin-top: 6px; }
.th-price strong { font-size: 16px; color: #2e3235; }
.th-price s { font-size: 12px; color: #8a8f92; }
.slot-followers { align-self: flex-start; margin-top: 3px; font-style: normal; padding: 1px 7px; border-radius: 6px; background: #e3ecdf; color: #3f5e4f; font-size: 12px; font-weight: 600; }
.slot-off { align-self: flex-start; margin-top: 3px; font-style: normal; padding: 1px 7px; border-radius: 6px; background: #f0e7d6; color: #7a6236; font-size: 12px; font-weight: 700; white-space: nowrap; }
#profile .book-btn { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.th-slots-hint { margin: 0; padding: 16px; border: 1px dashed #d0e0d8; border-radius: 16px; text-align: center; }

#profile .demo-cta {
  margin-top: 10px; padding: 16px; border: 1px dashed #c9b88f; border-radius: 16px;
  background: #fbf8f1; display: flex; flex-direction: column; gap: 10px;
}
#profile .demo-cta-text { margin: 0; font-size: 14px; color: #2e3235; }
#profile .demo-push-btn { align-self: stretch; padding: 11px 14px; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 700; }

/* 4. Where */
.th-map-card { background: #fff; border: 1px solid #ebe9e3; border-radius: 16px; overflow: hidden; }
#profile-map { height: 200px; background: #d6d9d1; }
.th-map-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
#profile-city { font-size: 15px; font-weight: 600; color: #2e3235; }
.th-dir {
  flex: none; padding: 7px 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--z-primary); color: var(--z-primary); font-size: 13px; font-weight: 700; text-decoration: none;
}
.th-dir:hover { background: #eff4f2; }
.th-pin {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--z-primary); border: 3px solid #fff; box-shadow: 0 0 0 4px rgb(63 94 79 / 0.25), 0 2px 6px rgb(0 0 0 / 0.25);
}
/* Faded Mapbox logo + compact credits, as on the main map */
#profile-map .mapboxgl-ctrl-logo { opacity: 0.45; }

/* 5. Reviews */
#reviews-summary { margin-bottom: 4px; font-size: 15px; color: #2e3235; }

/* Practitioner photo instead of the initial (2026-10-13). */
.th-initial.has-photo { overflow: hidden; background: #fff; }
.th-initial.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }