/* ================================================================
   FIXEO — Artisan Profile V2-A
   Trust Rebuild & Humanization Styles

   Sections:
   V2A-A  Hero breathing animation
   V2A-B  badge_label chip
   V2A-C  Real bio section
   V2A-D  Hero trust strip (price + paiement)
   V2A-E  WhatsApp secondary CTA (hero + sticky)
   V2A-F  ppui cleanup: CTA reassurance text
   V2A-G  Honest trust indicators (ppui-trust-grid--v2a)
   V2A-H  Mobile-first adjustments
   V2A-I  Reduced-motion guard
   ================================================================ */

/* ── V2A-A: Hero breathing — calm, stable, no scale ────────── */
/*
   Profile hero is the "secure consultation" space — even calmer than auth.
   No scale transform: content stays perfectly still.
   Only ambient glow modulation — 9s (slowest in the ecosystem).
   Pauses on focus-within (user interacting with CTA).
   hierarchy: hero 5.5s / auth 6.5s / dashboard 8.0s / profile 9.0s
*/
@keyframes fpv2a-hero-breathe {
  0%, 100% {
    box-shadow:
      0 24px 64px rgba(0,0,0,0.35),
      0 0 0 1px rgba(255,255,255,0.04),
      0 0 60px rgba(225,48,108,0.06);
  }
  45% {
    box-shadow:
      0 24px 64px rgba(0,0,0,0.35),
      0 0 0 1px rgba(255,255,255,0.07),
      0 0 80px rgba(225,48,108,0.11);
  }
}

.public-profile-hero {
  animation: fpv2a-hero-breathe 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: box-shadow;
}

.public-profile-hero:focus-within {
  animation-play-state: paused;
}

/* ── V2A-B: badge_label chip ────────────────────────────────── */
/*
   The artisan's real editorial label from the DB.
   Placed at the TOP of the trust card — first data after name.
   Premium, distinct, never generic.
*/
.fpv2a-badge-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, rgba(225,48,108,0.14), rgba(131,58,180,0.14));
  border: 1px solid rgba(225,48,108,0.28);
  color: rgba(225,48,108,0.95);
  margin-bottom: 10px;
  width: fit-content;
  text-transform: none;
}

/* ── V2A-C: Real bio section ─────────────────────────────────── */
/*
   Only rendered when artisan.description is populated (non-empty).
   Short, professional, specific — not generic.
   Subtle fade-in on appearance.
*/
.fpv2a-bio-section {
  /* inherits .ppui-section styles */
}

.fpv2a-bio-text {
  font-size: 0.93rem;
  color: rgba(255,255,255,0.80);
  line-height: 1.75;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* Override ppui-section-title for bio: no heavy icon needed */
.fpv2a-bio-section .ppui-section-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #fff;
  margin: 0 0 12px !important;
}

/* ── V2A-D: Hero trust strip (price + paiement) ─────────────── */
/*
   Grounding reassurance just below the CTA.
   Two signals: market price anchor + paiement promise.
   Subtle, not aggressive.
*/
.fpv2a-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}

.fpv2a-price-anchor {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
}

.fpv2a-strip-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.12);
  vertical-align: middle;
}

.fpv2a-paiement {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(74, 222, 128, 0.80);
  letter-spacing: 0.01em;
}

/* ── V2A-E: WhatsApp secondary CTA ──────────────────────────── */
/*
   Below-the-fold entry for first contact.
   Less prominent than reservation CTA — a gentle invitation.
   WhatsApp green: authentic, controlled opacity.
*/
#fpv2a-wa-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(37, 211, 102, 0.07);
  border: 1px solid rgba(37, 211, 102, 0.20);
  color: rgba(37, 211, 102, 0.82);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

#fpv2a-wa-cta:hover {
  background: rgba(37, 211, 102, 0.12);
  color: rgba(37, 211, 102, 1);
  text-decoration: none;
  transform: translateY(-1px);
}

#fpv2a-wa-cta:active {
  transform: scale(0.98);
}

.fpv2a-wa-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}

.fpv2a-wa-text {
  line-height: 1.2;
}

/* ── Sticky dual CTA bar (mobile) ────────────────────────────── */
.ppui-sticky-cta--v2a {
  display: none;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.ppui-sticky-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(37, 211, 102, 0.10);
  border: 1px solid rgba(37, 211, 102, 0.25);
  color: rgba(37, 211, 102, 0.90);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.ppui-sticky-wa-btn:hover {
  background: rgba(37, 211, 102, 0.16);
  text-decoration: none;
  color: rgba(37, 211, 102, 1);
}

/* ── V2A-F: CTA reassurance text (ppui upgrade) ─────────────── */
/*
   "✔️ Paiement après intervention · Réponse rapide"
   injected by premium-ui.js _upgradeCTA().
   Calm, small, below the reservation button.
*/
.ppui-cta-reassurance {
  margin: 6px 0 0 !important;
  font-size: 0.73rem !important;
  color: rgba(255,255,255,0.45) !important;
  text-align: center;
  line-height: 1.4;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

/* ── V2A-G: Honest trust indicators (ppui-trust-grid--v2a) ───── */
/*
   Overrides the 4-column grid to 3-column max (only 3 items now).
   Matches the reduced honest item set.
*/
.ppui-trust-grid--v2a {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}

/* ── V2A-H: Mobile-first adjustments ───────────────────────── */
@media (max-width: 767px) {
  /* Sticky dual CTA */
  .ppui-sticky-cta--v2a {
    display: grid !important;
  }

  .ppui-sticky-cta--v2a .ppui-sticky-cta-btn {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem !important;
  }

  .ppui-sticky-wa-btn {
    font-size: 0.72rem !important;
    padding: 12px 12px !important;
  }

  /* WA CTA: full-width on mobile */
  #fpv2a-wa-cta {
    font-size: 0.80rem;
  }

  /* Trust strip: stack on very narrow */
  .fpv2a-trust-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .fpv2a-strip-sep {
    display: none;
  }

  /* Bio section: slightly tighter on mobile */
  .fpv2a-bio-text {
    font-size: 0.88rem;
  }

  /* badge_label chip: slightly smaller */
  .fpv2a-badge-label {
    font-size: 0.70rem;
    padding: 4px 12px;
  }

  /* Trust grid: 2-col max on mobile */
  .ppui-trust-grid--v2a {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 360px */
@media (max-width: 360px) {
  #fpv2a-wa-cta {
    font-size: 0.74rem;
    padding: 9px 12px;
  }
  .ppui-sticky-cta--v2a .ppui-sticky-cta-btn {
    font-size: 0.82rem !important;
  }
  .ppui-sticky-wa-btn {
    font-size: 0.68rem !important;
    padding: 10px 10px !important;
  }
  .ppui-trust-grid--v2a {
    grid-template-columns: 1fr !important;
  }
}

/* 320px */
@media (max-width: 320px) {
  .fpv2a-badge-label {
    font-size: 0.65rem;
    padding: 4px 10px;
  }
  #fpv2a-wa-cta {
    font-size: 0.70rem !important;
    padding: 8px 10px !important;
  }
  .fpv2a-bio-text {
    font-size: 0.82rem;
  }
}

/* ── V2A-I: Reduced-motion guard ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .public-profile-hero {
    animation: none !important;
    will-change: auto !important;
  }
  #fpv2a-wa-cta,
  .ppui-sticky-wa-btn {
    transition: none !important;
    transform: none !important;
  }
}

/* ================================================================
   V2-B — PROFESSIONAL DEPTH
   Sections:
   V2B-1  Local zone strip
   V2B-2  Intervention tier qualifier
   V2B-3  Rating context signal
   V2B-4  Specialty chips in bio
   V2B-5  Realizations elegant empty-state
   V2B-6  WhatsApp sub-line
   V2B-7  Mobile-first V2-B adjustments
   V2B-8  Reduced-motion guard (V2-B additions)
   ================================================================ */

/* ── V2B-1: Local zone strip ──────────────────────────────────── */
/*
   "📍 Intervient à Fès et alentours"
   Below the .public-hero-meta line. Reads as operational, local, reliable.
   Gentle typography — not a badge, not a chip. A natural statement.
*/
.fpv2b-zone-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.80rem;
  font-weight: 600;
  color: rgba(255,255,255,0.52);
  margin: -2px 0 0;
  letter-spacing: 0.005em;
  line-height: 1.3;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

.fpv2b-zone-strip strong {
  color: rgba(255,255,255,0.78);
  font-weight: 800;
}

.fpv2b-zone-icon {
  font-size: 0.75rem;
  flex-shrink: 0;
  opacity: 0.70;
}

/* ── V2B-2: Intervention tier qualifier ──────────────────────── */
/*
   Injected AFTER .public-trust-sub (the "N interventions" line).
   Quiet, italicised context — "Profil bien établi".
   Typography hierarchy: count (primary) → tier (secondary) → space
*/
.fpv2b-trust-tier {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(165,180,252,0.70);
  letter-spacing: 0.02em;
  margin-top: 3px;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

/* ── V2B-3: Rating context signal ───────────────────────────── */
/*
   "Parmi les meilleurs artisans Fixeo" — only shown when rating >= 4.7.
   Placed immediately after the rating line (.public-trust-rating).
   No star, no badge, no number — pure credibility statement.
*/
.fpv2b-rating-context {
  display: block;
  font-size: 0.70rem;
  font-weight: 700;
  color: rgba(255,215,0,0.55);
  letter-spacing: 0.02em;
  margin-top: 2px;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

/* ── V2B-4: Specialty chips in bio ──────────────────────────── */
/*
   3 chips, keyword-reordered from CAT_SKILLS_V2B.
   Placed inside #fpv2a-bio after the description text.
   Subdued — not category labels, specialist skill descriptors.
*/
.fpv2b-specialty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.fpv2b-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(165,180,252,0.08);
  border: 1px solid rgba(165,180,252,0.18);
  color: rgba(165,180,252,0.80);
  font-family: 'Cairo', 'Tajawal', sans-serif;
  white-space: nowrap;
}

/* ── V2B-5: Realizations elegant empty-state ─────────────────── */
/*
   Premium intentional absence. Not a placeholder — a promise.
   Glass card, centered, no emoji overload (single 📷 icon only).
   Curated, not incomplete.
*/
.fpv2b-realizations-section {
  /* inherits .ppui-section */
}

.fpv2b-realizations-empty {
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fpv2b-realizations-icon {
  font-size: 1.8rem;
  opacity: 0.35;
  line-height: 1;
}

.fpv2b-realizations-msg {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin: 0;
  max-width: 380px;
  font-weight: 500;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

.fpv2b-realizations-hint {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.30);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

/* ── V2B-6: WhatsApp sub-line ────────────────────────────────── */
/*
   "Réponse Fixeo sous 30 min en moyenne"
   Injected immediately after the #fpv2a-wa-cta button.
   Operational promise — grounded, honest (Fixeo platform SLA, not artisan).
*/
.fpv2b-wa-sub {
  margin: 4px 0 0;
  font-size: 0.70rem;
  color: rgba(37,211,102,0.45);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-family: 'Cairo', 'Tajawal', sans-serif;
}

/* ── V2B-7: Mobile-first V2-B adjustments ───────────────────── */
@media (max-width: 767px) {
  .fpv2b-zone-strip {
    font-size: 0.76rem;
    margin-top: 0;
  }
  .fpv2b-specialty-chips {
    gap: 6px;
    margin-top: 12px;
  }
  .fpv2b-chip {
    font-size: 0.69rem;
    padding: 5px 11px;
  }
  .fpv2b-realizations-empty {
    padding: 22px 18px;
    gap: 8px;
  }
  .fpv2b-realizations-msg {
    font-size: 0.83rem;
  }
  .fpv2b-trust-tier {
    font-size: 0.69rem;
  }
  .fpv2b-rating-context {
    font-size: 0.67rem;
  }
  /* Hero vertical rhythm tightening on mobile */
  .public-trust-card {
    padding: 14px 16px !important;
  }
  .fpv2b-wa-sub {
    font-size: 0.67rem;
  }
}

@media (max-width: 360px) {
  .fpv2b-chip {
    font-size: 0.65rem;
    padding: 4px 9px;
  }
  .fpv2b-zone-strip {
    font-size: 0.71rem;
  }
  .fpv2b-realizations-msg {
    font-size: 0.78rem;
  }
}

@media (max-width: 320px) {
  .fpv2b-specialty-chips {
    gap: 5px;
  }
  .fpv2b-chip {
    font-size: 0.60rem;
    padding: 4px 8px;
  }
  .fpv2b-realizations-empty {
    padding: 18px 14px;
  }
  .fpv2b-realizations-icon {
    font-size: 1.4rem;
  }
}

/* ── V2B-8: Reduced-motion guard (V2-B) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fpv2b-chip,
  .fpv2b-trust-tier,
  .fpv2b-rating-context,
  .fpv2b-zone-strip {
    transition: none !important;
  }
}

/* ================================================================
   V2-C — UNIFIED PREMIUM AVATAR SYSTEM
   Sections:
   V2C-A  Silhouette host base
   V2C-B  Silhouette pseudo-element system (head + shoulders)
   V2C-C  Category-specific gradients (T3 mirror for profile)
   V2C-D  Category-specific glow (profile-exclusive)
   V2C-E  Category badge (bottom-right corner)
   V2C-F  Wrap positioning context (fpv2c-active)
   V2C-G  Mobile adjustments
   V2C-H  Reduced-motion guard
   ================================================================ */

/* ── V2C-A: Silhouette host base ─────────────────────────────── */
/*
   Transforms .public-avatar-fallback from "initials div"
   to "premium category-gradient silhouette canvas".
   font-size:0 kills any remaining text node (initials text).
   overflow:hidden clips the silhouette cleanly within border-radius.
*/
.fpv2c-silhouette-host {
  /* Override the flat pink gradient — category gradients win via data-category */
  background: linear-gradient(135deg, #1a1a2e, #2d2d44) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  font-size: 0 !important;        /* kills any residual initials text node */
  color: transparent !important;  /* belt + suspenders */
  position: relative !important;
}

/* ── V2C-B: Silhouette span (::before = head, ::after = shoulders) ── */
/*
   Mirrors the homepage pvc-avatar-silhouette system exactly.
   White shapes on gradient background = clean professional identity.
   Not an emoji. Not initials. Not a face. A form — human presence.
*/
.fpv2c-silhouette {
  display: block !important;
  position: relative !important;
  width: 62% !important;
  height: 62% !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

/* Head circle */
.fpv2c-silhouette::before {
  content: "" !important;
  position: absolute !important;
  top: 8% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 38% !important;
  height: 38% !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.20) !important;
}

/* Shoulders arc */
.fpv2c-silhouette::after {
  content: "" !important;
  position: absolute !important;
  bottom: 4% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 74% !important;
  height: 42% !important;
  border-radius: 999px 999px 22px 22px !important;
  background: rgba(255,255,255,0.76) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
}

/* ── V2C-C: Category gradients (T3 mirror — profile context) ─── */
/*
   Exact match with homepage T3 gradients.
   The user sees the same color language on the card AND on the profile.
   Seamless transition: marketplace → profile page.
*/
.fpv2c-silhouette-host[data-category="plomberie"] {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
}
.fpv2c-silhouette-host[data-category="electricite"] {
  background: linear-gradient(135deg, #facc15, #f97316) !important;
}
.fpv2c-silhouette-host[data-category="climatisation"] {
  background: linear-gradient(135deg, #22d3ee, #06b6d4) !important;
}
.fpv2c-silhouette-host[data-category="peinture"] {
  background: linear-gradient(135deg, #f472b6, #ec4899) !important;
}
.fpv2c-silhouette-host[data-category="nettoyage"] {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
}
.fpv2c-silhouette-host[data-category="menuiserie"] {
  background: linear-gradient(135deg, #a16207, #78350f) !important;
}
.fpv2c-silhouette-host[data-category="serrurerie"] {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
.fpv2c-silhouette-host[data-category="maconnerie"] {
  background: linear-gradient(135deg, #6b7280, #374151) !important;
}
.fpv2c-silhouette-host[data-category="jardinage"] {
  background: linear-gradient(135deg, #84cc16, #16a34a) !important;
}
.fpv2c-silhouette-host[data-category="bricolage"] {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
}
.fpv2c-silhouette-host[data-category="demenagement"] {
  background: linear-gradient(135deg, #c084fc, #7c3aed) !important;
}
.fpv2c-silhouette-host[data-category="carrelage"] {
  background: linear-gradient(135deg, #94a3b8, #475569) !important;
}
.fpv2c-silhouette-host[data-category="toiture"] {
  background: linear-gradient(135deg, #ef4444, #991b1b) !important;
}
.fpv2c-silhouette-host[data-category="vitrerie"] {
  background: linear-gradient(135deg, #38bdf8, #0369a1) !important;
}
.fpv2c-silhouette-host[data-category="etancheite"] {
  background: linear-gradient(135deg, #64748b, #1e3a5f) !important;
}
.fpv2c-silhouette-host[data-category="soudure"] {
  background: linear-gradient(135deg, #fb923c, #dc2626) !important;
}
.fpv2c-silhouette-host[data-category="informatique"] {
  background: linear-gradient(135deg, #818cf8, #4f46e5) !important;
}

/* ── V2C-D: Category-specific glow (profile-exclusive) ────────── */
/*
   Profile avatars are 120px (vs 60px on cards) — the glow scale must be
   proportionally larger to feel correct at this size.
   Each category gets a subtle colored glow matching its gradient.
   This is the key V2-C innovation: the avatar *feels alive* in its category.
*/
.fpv2c-silhouette-host[data-category="plomberie"] {
  box-shadow: 0 12px 36px rgba(14,165,233,0.35) !important;
}
.fpv2c-silhouette-host[data-category="electricite"] {
  box-shadow: 0 12px 36px rgba(250,204,21,0.30) !important;
}
.fpv2c-silhouette-host[data-category="climatisation"] {
  box-shadow: 0 12px 36px rgba(34,211,238,0.35) !important;
}
.fpv2c-silhouette-host[data-category="peinture"] {
  box-shadow: 0 12px 36px rgba(244,114,182,0.35) !important;
}
.fpv2c-silhouette-host[data-category="nettoyage"] {
  box-shadow: 0 12px 36px rgba(52,211,153,0.30) !important;
}
.fpv2c-silhouette-host[data-category="menuiserie"] {
  box-shadow: 0 12px 36px rgba(161,98,7,0.45) !important;
}
.fpv2c-silhouette-host[data-category="serrurerie"] {
  box-shadow: 0 12px 36px rgba(245,158,11,0.35) !important;
}
.fpv2c-silhouette-host[data-category="maconnerie"] {
  box-shadow: 0 12px 36px rgba(107,114,128,0.45) !important;
}
.fpv2c-silhouette-host[data-category="jardinage"] {
  box-shadow: 0 12px 36px rgba(132,204,22,0.35) !important;
}
.fpv2c-silhouette-host[data-category="bricolage"] {
  box-shadow: 0 12px 36px rgba(249,115,22,0.35) !important;
}
.fpv2c-silhouette-host[data-category="demenagement"] {
  box-shadow: 0 12px 36px rgba(192,132,252,0.35) !important;
}
.fpv2c-silhouette-host[data-category="carrelage"] {
  box-shadow: 0 12px 36px rgba(148,163,184,0.30) !important;
}
.fpv2c-silhouette-host[data-category="toiture"] {
  box-shadow: 0 12px 36px rgba(239,68,68,0.35) !important;
}
.fpv2c-silhouette-host[data-category="vitrerie"] {
  box-shadow: 0 12px 36px rgba(56,189,248,0.35) !important;
}
.fpv2c-silhouette-host[data-category="informatique"] {
  box-shadow: 0 12px 36px rgba(129,140,248,0.35) !important;
}

/* ── V2C-E: Category badge (bottom-right) ────────────────────── */
/*
   Mirrors homepage .pvc-avatar-badge.
   Scaled up for the larger 120px profile avatar.
   Dark glass pill with category emoji — same system, larger.
*/
.fpv2c-active {
  position: relative !important;
}

.fpv2c-badge {
  position: absolute !important;
  bottom: -5px !important;
  right: -5px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  background: rgba(8,8,24,0.85) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  backdrop-filter: blur(6px) !important;
}

/* ── V2C-F: Wrap (fpv2c-active positioning context) ─────────── */
/*
   .public-avatar-wrap already has position:relative in artisan-profile-premium.css
   Redundant but explicit — ensures the badge is positioned correctly.
*/
.public-avatar-wrap.fpv2c-active {
  position: relative !important;
  display: inline-block !important;
  /* V2-C5A: premium ring + elevation — glassmorphism, not neon */
  border-radius: 28px !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.07),
    0 8px 28px rgba(0, 0, 0, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.20) !important;
}

/* ── V2C-G: Mobile adjustments ──────────────────────────────── */
@media (max-width: 767px) {
  .fpv2c-badge {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
    bottom: -4px !important;
    right: -4px !important;
  }
  /* Tighten glow on mobile — smaller viewport, less ambient bleed */
  .fpv2c-silhouette-host[data-category] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
  }
}

@media (max-width: 360px) {
  .fpv2c-badge {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 320px) {
  .fpv2c-badge {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    bottom: -3px !important;
    right: -3px !important;
  }
}

/* ── V2C-H: Reduced-motion guard ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fpv2c-silhouette-host {
    transition: none !important;
  }
}

/* ================================================================
   V2-P1 — Phase P-1 Patch Fixes
   Appended 2026-05-10 (profile-p1)

   P1-A  Pre-hide initials flash (font-size:0 immediately on load)
   P1-B  Hide "Nouveau" trust badge (superceded by fpv2a-badge-label)
   P1-C  Hide 0%-stats panel (body.fpv2b-loaded gate — safe)
   P1-D  Hide "Aucun avis" empty-copy (when V2 data overrides it)
   ================================================================ */

/* ── P1-A: Pre-hide initials text on fallback avatar ──────────── */
/*
   artisan-profile-premium.css sets font-size:2.4rem on .public-avatar-fallback
   This makes "HA" initials fully visible for 400-800ms before V2-C fires.
   Setting font-size:0 + color:transparent immediately hides the text node
   while keeping the gradient rectangle as a visual placeholder.
   V2-C JS then upgrades the block to the silhouette when Supabase resolves.
   Real <img> avatars are unaffected (they use .public-avatar, not .public-avatar-fallback).
*/
.public-artisan-page .public-avatar-fallback {
  font-size: 0 !important;
  color: transparent !important;
}

/* ── P1-B: Hide old "Nouveau" / trust_level badge ─────────────── */
/*
   getTrustLevel(0) = 'Nouveau' for all Supabase artisans (trust_score absent).
   This badge is replaced by .fpv2a-badge-label (injected by V2-A from real
   artisan.badge_label). Hiding the V1 badge removes the misleading "Nouveau"
   chip without affecting any V2 signal.
*/
.public-artisan-page .public-trust-badge {
  display: none !important;
}

/* ── P1-C: Hide old V1 stats panel after V2 enhancement completes ── */
/*
   .public-section-grid contains "Indicateurs de confiance":
     - Taux de confirmation: 0%  (always 0 — no mission data in localStorage)
     - Taux de paiement: 0%      (always 0)
     - Ancienneté: Nouveau artisan (always — no timestamps)
     - Aucun avis pour le moment (always — reviews from missions only)
   V2-B injects replacements (zone strip, tier, rating context, specialty chips,
   realizations shell). Once V2-B completes, JS adds .fpv2b-loaded to body.
   This rule hides the V1 panel ONLY after V2-B has successfully run.
   Failure-safe: if Supabase fails → enhance() returns early → body never gets
   .fpv2b-loaded → V1 panel stays visible (degraded but not broken).
*/
/* V2-B2C P1: Chained selector — .public-artisan-page IS on body, not a child of it.
 * Descendant combinator (space) never matched. Fixed to compound/chained selector. */
body.fpv2b-loaded.public-artisan-page .public-section-grid {
  display: none !important;
}

/* ── P1-D: Hide "Aucun avis pour le moment" (empty-copy paragraph) ── */
/*
   renderProfile() in fixeo-public-artisan-profile.js always shows this
   because reviews come from local missions (always empty for Supabase artisans).
   Hidden via the same fpv2b-loaded gate — only disappears after V2 confirms
   real data from Supabase, leaving nothing visible without a replacement.
   If Supabase fails → stays visible (honest "no data yet" message).
*/
/* V2-B2C P1: Same chained selector fix as above. */
body.fpv2b-loaded.public-artisan-page .public-empty-copy {
  display: none !important;
}

/* ── P1 Mobile guard: ensure no overflow on 320px ─────────────── */
@media (max-width: 360px) {
  .public-artisan-page .public-avatar-fallback {
    font-size: 0 !important;
    color: transparent !important;
  }
}

/* ================================================================
   V2-P2 — Phase P-2 Performance & Render Unification
   Appended 2026-05-10 (profile-p2)

   P2-A  Avatar upgrade transition — silhouette fades in (compositor)
   P2-B  Avatar will-change during transition window
   P2-C  V2 injected sections — fade-in on appearance
   P2-D  Claim button fade-in (masks setTimeout(800) pop-in)
   P2-E  content-visibility on below-fold sections (mobile paint budget)
   P2-F  Reduced-motion guard for all P2 transitions
   P2-G  P3 slot: .fpv2b-prestations-section placeholder (room reserved)
   ================================================================ */

/* ── P2-A: Silhouette fade-in — smooth compositor transition ── */
/*
   V2-C JS adds class + child element; making the transition GPU-composited
   prevents a paint on the main thread during the Supabase callback burst.
   The fallback block transitions from "solid gradient" (P1-A) to "gradient
   + silhouette SVG" over 200ms — so short it feels instantaneous on fast
   devices, long enough to eliminate the jarring pop on slow devices.
*/
.public-artisan-page .fpv2c-silhouette-host {
  transition: opacity 0.2s ease-out !important;
}
.public-artisan-page .fpv2c-silhouette {
  opacity: 0;
  transition: opacity 0.22s ease-out;
  /* Compositor hint — keeps silhouette upgrade off main thread */
  will-change: opacity;
}
.public-artisan-page .fpv2c-silhouette-host .fpv2c-silhouette {
  opacity: 1;
}

/* ── P2-B: Avatar block — compositor layer promotion during transition ── */
/*
   Applied to the fallback block itself (not the img path).
   Once the transition ends (200ms), will-change is cleared by the browser.
   Avoids persistent layer creation that wastes GPU memory.
*/
.public-artisan-page .public-avatar-fallback {
  will-change: contents;
}

/* ── P2-C: V2 injected sections — graceful fade-in ── */
/*
   Each V2-A/B section is hidden at opacity:0 on creation (see JS P2).
   The single rAF flush after all 14 DOM writes complete triggers the class
   .fpv2-sections-ready on #public-artisan-root → CSS transition fires.
   Benefit: the profile doesn't jank through 14 individual repaints.
   Instead the whole V2 layer appears in one smooth fade.
*/
.public-artisan-page .fpv2a-hero-trust-strip,
.public-artisan-page .fpv2a-wa-cta,
.public-artisan-page .fpv2b-zone-strip,
.public-artisan-page .fpv2b-wa-sub,
.public-artisan-page #fpv2a-bio,
.public-artisan-page #fpv2b-tier,
.public-artisan-page #fpv2b-rating-ctx,
.public-artisan-page #fpv2b-realizations,
.public-artisan-page .fpv2b-specialty-chips {
  opacity: 0;
  transition: opacity 0.18s ease-out;
  will-change: opacity;
}
#public-artisan-root.fpv2-sections-ready .fpv2a-hero-trust-strip,
#public-artisan-root.fpv2-sections-ready .fpv2a-wa-cta,
#public-artisan-root.fpv2-sections-ready .fpv2b-zone-strip,
#public-artisan-root.fpv2-sections-ready .fpv2b-wa-sub,
#public-artisan-root.fpv2-sections-ready #fpv2a-bio,
#public-artisan-root.fpv2-sections-ready #fpv2b-tier,
#public-artisan-root.fpv2-sections-ready #fpv2b-rating-ctx,
#public-artisan-root.fpv2-sections-ready #fpv2b-realizations,
#public-artisan-root.fpv2-sections-ready .fpv2b-specialty-chips {
  opacity: 1;
}

/* ── P2-D: Claim button — fade-in masks setTimeout(800) pop-in ── */
/*
   fixeo-claim-system.js fires injectClaimButton at T+1000-1200ms.
   Without transition, the button pops in abruptly during scroll.
   This opacity transition makes it feel like a calm late reveal.
*/
.public-artisan-page .fixeo-claim-wrapper {
  opacity: 0;
  animation: fpv2p2-claimFadeIn 0.3s ease-out 0.05s forwards;
}
@keyframes fpv2p2-claimFadeIn {
  to { opacity: 1; }
}

/* ── P2-E: content-visibility on below-fold panels (mobile) ── */
/*
   On mid-range Android, painting below-fold content at DCL wastes
   the first ~200ms paint budget on invisible content.
   content-visibility:auto defers paint until the element is near viewport.
   contain-intrinsic-size prevents layout shift when it's measured.
   Applied only to sections that are reliably below-fold on mobile (< 768px).
   NOT applied to hero / trust-card / first panel (above fold).
*/
@media (max-width: 767px) {
  .public-artisan-page #ppui-services,
  .public-artisan-page #ppui-trust-section,
  .public-artisan-page #fpv2b-realizations,
  .public-artisan-page .fixeo-claim-wrapper {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
  }
}

/* ── P2-F: Reduced-motion — collapse all P2 transitions ── */
@media (prefers-reduced-motion: reduce) {
  .public-artisan-page .fpv2c-silhouette,
  .public-artisan-page .fpv2a-hero-trust-strip,
  .public-artisan-page .fpv2a-wa-cta,
  .public-artisan-page .fpv2b-zone-strip,
  .public-artisan-page .fpv2b-wa-sub,
  .public-artisan-page #fpv2a-bio,
  .public-artisan-page #fpv2b-tier,
  .public-artisan-page #fpv2b-rating-ctx,
  .public-artisan-page #fpv2b-realizations,
  .public-artisan-page .fpv2b-specialty-chips {
    transition: none !important;
    opacity: 1 !important;
    will-change: auto !important;
    animation: none !important;
  }
  .public-artisan-page .fixeo-claim-wrapper {
    animation: none !important;
    opacity: 1 !important;
  }
  .public-artisan-page .fpv2c-silhouette-host {
    transition: none !important;
  }
}

/* ── P2-G: P3 slot — Prestations & Prix section (reserved) ── */
/*
   injectPrestationsSection() will inject #fpv2b-prestations between
   .fpv2b-zone-strip and .fpv2b-specialty-chips.
   This rule pre-wires the fade-in for when P3 lands.
   DO NOT IMPLEMENT CONTENT HERE — P3 only.
*/
.public-artisan-page #fpv2b-prestations {
  opacity: 0;
  transition: opacity 0.18s ease-out;
  will-change: opacity;
}
#public-artisan-root.fpv2-sections-ready #fpv2b-prestations {
  opacity: 1;
}

/* ================================================================
   V2-P3 — Prestations & Prix Section
   Appended 2026-05-10 (profile-p3)

   Namespace: .fpv2p3-*
   Scope:     .public-artisan-page #fpv2b-prestations
   ================================================================ */

/* ── P3: Section wrapper — glass card, consistent with V2-B depth ── */
.public-artisan-page .fpv2p3-section {
  /* ppui-section already provides padding/background from premium-ui.css;
     we only add the bottom-border detail and header emphasis  */
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ── P3: Section kicker (inherits ppui-section-kicker) — override color ── */
.public-artisan-page .fpv2p3-section .ppui-section-kicker {
  color: #34d399; /* emerald — signals "operational / pricing" register */
}

/* ── P3: Section title — tight, scannable ── */
.public-artisan-page .fpv2p3-section .ppui-section-title {
  margin-top: 2px;
  margin-bottom: 12px;
  font-size: 1.05rem;
}

/* ── P3: Pricing grid — vertical stack, thumb-width rows ── */
.public-artisan-page .fpv2p3-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(13,18,40,.45);
  margin-bottom: 14px;
}

/* ── P3: Row — label left / range right — single scan line ── */
.public-artisan-page .fpv2p3-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  /* Hover: subtle lift for desktop */
  transition: background 0.12s ease;
}
.public-artisan-page .fpv2p3-row:last-child {
  border-bottom: none;
}
@media (hover: hover) {
  .public-artisan-page .fpv2p3-row:hover {
    background: rgba(255,255,255,.04);
  }
}

/* ── P3: Service label — left, readable, secondary weight ── */
.public-artisan-page .fpv2p3-svc {
  font-size: .88rem;
  color: rgba(255,255,255,.82);
  font-weight: 500;
  line-height: 1.35;
  /* Allow wrap on very narrow screens — never clip */
  min-width: 0;
  flex: 1 1 auto;
}

/* ── P3: Price range — right, emerald, strong — draws the eye ── */
.public-artisan-page .fpv2p3-range {
  font-size: .88rem;
  font-weight: 800;
  color: #34d399;
  white-space: nowrap;
  flex: 0 0 auto;
  letter-spacing: -.01em;
}

/* ── P3: Footer disclaimer — critical trust + legal safety ── */
.public-artisan-page .fpv2p3-footer {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .78rem;
  color: rgba(255,255,255,.48);
  line-height: 1.55;
  margin: 0;
  padding: 10px 4px 0;
}
.public-artisan-page .fpv2p3-footer-icon {
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── P3: Mobile — 360px narrow ── */
@media (max-width: 390px) {
  .public-artisan-page .fpv2p3-row {
    padding: 10px 12px;
    gap: 8px;
  }
  .public-artisan-page .fpv2p3-svc {
    font-size: .84rem;
  }
  .public-artisan-page .fpv2p3-range {
    font-size: .84rem;
  }
}
@media (max-width: 360px) {
  .public-artisan-page .fpv2p3-row {
    padding: 9px 10px;
    gap: 6px;
  }
  .public-artisan-page .fpv2p3-svc {
    font-size: .82rem;
  }
  .public-artisan-page .fpv2p3-range {
    font-size: .82rem;
  }
}
@media (max-width: 320px) {
  /* Stack label + price vertically on 320px — price below label */
  .public-artisan-page .fpv2p3-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 10px;
  }
  .public-artisan-page .fpv2p3-range {
    font-size: .86rem;
    padding-left: 0;
  }
}

/* ── P3: Desktop — wider row breathing room ── */
@media (min-width: 768px) {
  .public-artisan-page .fpv2p3-row {
    padding: 12px 18px;
  }
  .public-artisan-page .fpv2p3-svc {
    font-size: .92rem;
  }
  .public-artisan-page .fpv2p3-range {
    font-size: .92rem;
  }
  .public-artisan-page .fpv2p3-footer {
    font-size: .8rem;
  }
}

/* ── P3: Reduced-motion (no hover transition) ── */
@media (prefers-reduced-motion: reduce) {
  .public-artisan-page .fpv2p3-row {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   V1-H — Operational Identity & Marketplace Memory
   Append-only. No overrides.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Phase 6: Rating block — no static stars for new artisans ────── */
.pvc-rating-state--new {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.42);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ── Phase 2+3: Operational memory in trust card sub-line ──────────
   Replaces "Disponible pour ses premières interventions" with real data.
   Calm, dim, factual. Never louder than the rating line above it.
   ─────────────────────────────────────────────────────────────────── */
.fpv1h-count {
  color: rgba(32,201,151,0.85);
  font-weight: 600;
  font-size: 0.84rem;
}
.fpv1h-sep {
  margin: 0 5px;
  color: rgba(255,255,255,0.20);
}
.fpv1h-recency {
  color: rgba(255,255,255,0.38);
  font-size: 0.78rem;
  font-style: italic;
}
.fpv1h-city {
  color: rgba(255,255,255,0.38);
  font-size: 0.78rem;
}

/* ── Phase 3: Longevity signal ──────────────────────────────────────
   "Membre Fixeo depuis N mois" — below tier label.
   Very dim. Supporting context only. Not a headline.
   ─────────────────────────────────────────────────────────────────── */
.fpv1h-longevity {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.28);
  font-style: italic;
  margin: 3px 0 0;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ── Phase 3+5: Availability consistency — inline in zone strip ─────
   "disponible régulièrement" appended after city name.
   Soft emerald. Non-competitive. One sentence.
   ─────────────────────────────────────────────────────────────────── */
.fpv1h-avail-consistent {
  font-size: 0.80rem;
  color: rgba(32,201,151,0.55);
  font-weight: 400;
}

/* ── Phase 4: Bio section visual weight upgrade ─────────────────────
   When description is ≥60 chars, the section gets richer styling.
   Slightly larger text, more breathing room. Still calm, not loud.
   ─────────────────────────────────────────────────────────────────── */
.fpv2a-bio-section--rich .fpv2a-bio-text {
  font-size: 0.925rem;
  line-height: 1.70;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.005em;
}

/* ── Phase 1: Public portfolio photo grid ───────────────────────────
   Replaces placeholder when artisan has real photos in fixeo_portfolio.
   2 columns on mobile (390px). Max 3 columns on wider screens.
   ─────────────────────────────────────────────────────────────────── */
.fpv1h-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 640px) {
  .fpv1h-photo-grid { grid-template-columns: repeat(3, 1fr); }
}

.fpv1h-photo-item {
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

.fpv1h-photo-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}
@media (max-width: 390px) {
  .fpv1h-photo-img { height: 110px; }
}

.fpv1h-photo-placeholder {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  opacity: 0.3;
}

.fpv1h-photo-meta {
  padding: 7px 9px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fpv1h-photo-service {
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}
.fpv1h-photo-desc {
  font-size: 0.70rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.35;
}
.fpv1h-photo-date {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.25);
  font-style: italic;
}

/* Mobile 360px */
@media (max-width: 360px) {
  .fpv1h-photo-grid  { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .fpv1h-photo-meta  { padding: 5px 7px 7px; }
  .fpv1h-count       { font-size: 0.80rem; }
  .fpv1h-longevity   { font-size: 0.70rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   V1-TC — Trust Cleanup (Trust Correction Pass)
   Append-only. No overrides.
   ═══════════════════════════════════════════════════════════════════

   These rules make absence feel intentional, not broken.
   When a trust signal is withheld (no verified count, no verified rating),
   the remaining elements must hold the space gracefully.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Trust sub-line when showing operational availability (no count) ──
   "Disponible pour de nouvelles interventions" should feel like a
   professional statement, not a placeholder. Calm, positive, dim.
   ─────────────────────────────────────────────────────────────────── */
.public-trust-sub:empty,
.public-trust-sub {
  /* existing styles preserved — this only applies a fine-tuned color
     to the operational availability message so it reads as intentional */
  transition: none;
}

/* Artisan with no count/rating shows the trust card in a clean idle state */
.public-trust-card:not(.has-rating) .public-trust-rating[style*="display: none"] + .public-trust-sub,
.public-trust-card:not(.has-rating) .public-trust-rating[style*="display:none"] + .public-trust-sub {
  font-style: italic;
  color: rgba(255,255,255,0.45);
  font-size: 0.80rem;
}

/* ── sig2 context signal: city-only variant (no rating) ──────────── */
/* When city is the only sig2 (V1-TC replaced "Très bien noté"), the
   context signal should not compete with the live activity indicator.
   Slightly dimmer for city-only fallbacks. */
.pvc-live-signal--context:not(.has-rating-signal) {
  /* city pill — subtle, informational */
  opacity: 0.82;
}

/* ═══════════════════════════════════════════════════════════════════
   V1-J — Real Operational Proof & Client Confidence
   Append-only. No overrides.
   Namespace: .fpv1j-*
   ═══════════════════════════════════════════════════════════════════

   Design language:
   - Calm and professional. No badges, no stars, no urgency.
   - Text-forward: information over decoration.
   - Consistent dim/opacity treatment matching the V1-H layer.
   - Mobile-first: 390px base, 360px / 320px guards.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Phase 1: Portfolio operational context ─────────────────────────
   "Travaux de Plomberie — Casablanca" title above service name.
   "Travail confirmé" badge at bottom of card meta.
   Both are secondary — never louder than the photo.
   ─────────────────────────────────────────────────────────────────── */

.fpv1j-card-op-title {
  display: block;
  font-size: 0.73rem;
  color: rgba(255,255,255,0.38);
  font-style: italic;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fpv1j-completion-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(32,201,151,0.75);
  background: rgba(32,201,151,0.07);
  border: 1px solid rgba(32,201,151,0.14);
}
.fpv1j-completion-badge::before {
  content: '✓';
  font-weight: 700;
}

/* ── Phase 2+4: Recent activity strip ──────────────────────────────
   "Dernière intervention confirmée il y a 2 semaines · Actif à Casablanca"
   Dim. Secondary. Below zone strip. Single line (wraps on mobile).
   ─────────────────────────────────────────────────────────────────── */

.fpv1j-activity-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.40);
  line-height: 1.45;
}
.fpv1j-activity-item {
  white-space: nowrap;
}
.fpv1j-activity-sep {
  color: rgba(255,255,255,0.18);
  font-size: 0.80rem;
}

/* ── Phase 3: Confirmation signal ──────────────────────────────────
   "✓ N interventions validées par des clients"
   Below .public-trust-card. Calm emerald. Not a banner.
   ─────────────────────────────────────────────────────────────────── */

.fpv1j-confirm-signal {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: 0.79rem;
  color: rgba(32,201,151,0.68);
  line-height: 1.40;
}
.fpv1j-confirm-icon {
  font-size: 0.85rem;
  opacity: 0.75;
  flex-shrink: 0;
}

/* ── Phase 4: Local presence note ──────────────────────────────────
   "Présence locale confirmée à Casablanca (7 interventions)"
   Below activity strip or zone strip. Dim, small, supporting.
   ─────────────────────────────────────────────────────────────────── */

.fpv1j-local-note {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.30);
  margin: 5px 0 0;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.45;
}

/* ── Phase 5: Booking confidence block ─────────────────────────────
   Below action button / WA CTA.
   Three calm reassurance lines. No urgency. No pressure.
   Slightly separated from button to avoid visual crowding.
   ─────────────────────────────────────────────────────────────────── */

.fpv1j-booking-confidence {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
.fpv1j-confidence-item {
  font-size: 0.77rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* ── Mobile guards ──────────────────────────────────────────────── */

@media (max-width: 480px) {
  .fpv1j-activity-strip     { font-size: 0.74rem; gap: 4px; }
  .fpv1j-confirm-signal     { font-size: 0.76rem; }
  .fpv1j-booking-confidence { padding: 9px 11px; margin-top: 10px; }
  .fpv1j-confidence-item    { font-size: 0.74rem; }
  .fpv1j-card-op-title      { font-size: 0.70rem; }
  .fpv1j-local-note         { font-size: 0.70rem; }
}
@media (max-width: 360px) {
  .fpv1j-activity-strip  { flex-direction: column; align-items: flex-start; gap: 2px; }
  .fpv1j-activity-sep    { display: none; }
  .fpv1j-booking-confidence { padding: 8px 10px; }
}
@media (max-width: 320px) {
  .fpv1j-booking-confidence { margin-top: 8px; }
  .fpv1j-confidence-item    { font-size: 0.72rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   V2-C6B — Hero Density Reduction
   Scope: body.fpv2b-loaded.public-artisan-page (V2 fully rendered)
   Goal:  Remove duplicate / non-client-facing elements from hero,
          hide generic fallback avatar, tighten vertical rhythm.
   Rules: append-only, no !important on layout-defining properties
          that would fight existing cascade; only new selectors.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Claim button — not client-facing, pollutes hero CTA area ── */
body.fpv2b-loaded.public-artisan-page .fixeo-claim-wrapper {
  display: none !important;
}

/* ── 2. Duplicate availability badge-row ────────────────────────── */
/*    "⚡ Disponible maintenant" ppui-badge-row duplicates the
     .public-availability pill already above the artisan name.
     Hide the badge-row; the pill is the canonical signal.         */
body.fpv2b-loaded.public-artisan-page .ppui-badge-row {
  display: none !important;
}

/* ── 3. Booking confidence block ────────────────────────────────── */
/*    All three items are already covered by V2 elements:
     "📍 Présent à X"              → fpv2b-zone-strip
     "✔ Paiement après intervention" → fpv2a-trust-strip
     "💬 Coordination WhatsApp"    → fpv2a-wa-cta
     Hiding the entire block removes ~88px and 3 duplicate lines.  */
body.fpv2b-loaded.public-artisan-page .fpv1j-booking-confidence {
  display: none !important;
}

/* ── 4. "Fixeo vous répond rapidement" wa-sub ───────────────────── */
/*    Redundant with the WA CTA text already present above it.      */
body.fpv2b-loaded.public-artisan-page .fpv2b-wa-sub {
  display: none !important;
}

/* ── 5. Orange fallback avatar — desktop ────────────────────────── */
/*    The generic fallback (initials/person icon) adds visual noise
     on desktop when no real photo exists. Switch hero to single-column
     so the content area gets full width.
     When a real .public-avatar-img is present (photo loaded by
     upgradeProfileAvatar()), the avatar-wrap is restored via the
     .has-real-avatar class added by V2 JS below.                   */
@media (min-width: 768px) {
  body.fpv2b-loaded.public-artisan-page .public-profile-hero:not(.has-real-avatar) {
    grid-template-columns: 1fr !important;
  }
  body.fpv2b-loaded.public-artisan-page .public-profile-hero:not(.has-real-avatar) .public-avatar-wrap {
    display: none !important;
  }
}

/* ── 6. Mobile avatar — hide fallback, allow real photo ─────────── */
/*    On mobile the avatar sits above the name (single-col stacking).
     A generic orange circle adds nothing. Hide it.
     Real photos show via .has-real-avatar (same class as desktop).  */
@media (max-width: 767px) {
  body.fpv2b-loaded.public-artisan-page .public-profile-hero:not(.has-real-avatar) .public-avatar-wrap {
    display: none !important;
  }
}

/* ── 7. Trust strip: remove separator bar on narrow mobile ──────── */
@media (max-width: 360px) {
  body.fpv2b-loaded.public-artisan-page .fpv2a-strip-sep {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   V2-C6C — True V2 Hero Template (CSS-only reshape)
   Scope: body.fpv2b-loaded.public-artisan-page
   Goal:  Flatten the nested "card-within-card" V1 pattern.
          The .public-trust-card retains its DOM for JS hooks but loses
          its visual card treatment — becoming a flat identity block.
          No class names removed. No renderProfile() HTML changed.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Flatten trust card — remove nested card appearance ─────── */
/*    artisan-profile-premium.css sets bg, border, border-radius,
     padding, and a gradient ::before stripe on .public-trust-card.
     All of those are what make the hero look V1.
     We override them to transparent/none here.                     */
body.fpv2b-loaded.public-artisan-page .public-trust-card {
  background:    transparent !important;
  border:        none !important;
  border-radius: 0 !important;
  padding:       0 !important;
  gap:           6px !important;
  position:      static !important;
  overflow:      visible !important;
}
body.fpv2b-loaded.public-artisan-page .public-trust-card::before {
  display: none !important;   /* removes the gradient top stripe */
}

/* ── 2. Trust top: stack vertically, remove spacer layout ──────── */
body.fpv2b-loaded.public-artisan-page .public-trust-top {
  flex-direction: column !important;
  align-items:    flex-start !important;
  gap:            4px !important;
}

/* ── 3. Rating line: clean gold, prominent ─────────────────────── */
body.fpv2b-loaded.public-artisan-page .public-trust-rating {
  font-size:   1.15rem !important;
  font-weight: 900 !important;
  color:       #FFD700 !important;
  line-height: 1.2 !important;
}

/* ── 4. Review sub-line: readable, not muted ───────────────────── */
body.fpv2b-loaded.public-artisan-page .public-trust-sub {
  font-size:   0.88rem !important;
  color:       rgba(255,255,255,0.78) !important;
  font-weight: 500 !important;
  margin-top:  0 !important;
}

/* ── 5. Trust badge: hide — fpv2a-badge-label replaces it ──────── */
/*    .public-trust-badge is the V1 "Nouveau / Confirmé" pill.
     V2 replaced it with .fpv2a-badge-label ("Top Artisan" etc.)
     which is injected INSIDE the trust card by injectBadgeLabel().  */
body.fpv2b-loaded.public-artisan-page .public-trust-badge {
  display: none !important;
}

/* ── 6. Trust score: already hidden by suppressTrustScore() ─────  */
/*    Belt-and-suspenders: ensure it never shows                    */
body.fpv2b-loaded.public-artisan-page .public-trust-score {
  display: none !important;
}

/* ── 7. hero-main: flex column, tighter rhythm ─────────────────── */
/*    Inline critical CSS sets display:grid, gap:12px on hero-main.
     Switch to flex column for finer control.                       */
body.fpv2b-loaded.public-artisan-page .public-hero-main {
  display:        flex !important;
  flex-direction: column !important;
  gap:            6px !important;
}

/* ── 8. hero-main h1: larger, more dominant ────────────────────── */
body.fpv2b-loaded.public-artisan-page .public-hero-main h1 {
  font-size:   clamp(1.45rem, 5vw, 1.9rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin:      0 0 2px !important;
}

/* ── 9. hero-meta: slightly more visible ───────────────────────── */
body.fpv2b-loaded.public-artisan-page .public-hero-meta {
  font-size:  0.93rem !important;
  color:      rgba(255,255,255,0.72) !important;
  margin:     0 0 4px !important;
}

/* ── 10. Availability pill: tighten top margin ─────────────────── */
body.fpv2b-loaded.public-artisan-page .public-profile-hero .public-availability {
  margin-bottom: 2px !important;
}

/* ── 11. CTA button: bolder, full-width on mobile ──────────────── */
body.fpv2b-loaded.public-artisan-page .public-action-btn {
  margin-top:    8px !important;
  padding:       15px 28px !important;
  font-size:     1.02rem !important;
  border-radius: 14px !important;
  width:         100% !important;
  letter-spacing: 0.01em !important;
}
@media (min-width: 768px) {
  body.fpv2b-loaded.public-artisan-page .public-action-btn {
    width: auto !important;
  }
}

/* ── 12. ppui-cta-reassurance: style as compact chip row ────────── */
body.fpv2b-loaded.public-artisan-page .ppui-cta-reassurance {
  font-size:  0.78rem !important;
  color:      rgba(255,255,255,0.55) !important;
  margin-top: 4px !important;
}

/* ── 13. fpv2a-badge-label: elevated, sits above rating ────────── */
/*    Already styled in prior rules. Ensure proper margin here.    */
body.fpv2b-loaded.public-artisan-page .fpv2a-badge-label {
  margin-bottom: 4px !important;
}

/* ── 14. fpv2b-zone-strip: tighter top margin ──────────────────── */
body.fpv2b-loaded.public-artisan-page .fpv2b-zone-strip {
  margin-top: 2px !important;
}

/* ── 15. fpv2a-trust-strip: separate from button ───────────────── */
body.fpv2b-loaded.public-artisan-page .fpv2a-trust-strip {
  margin-top: 6px !important;
}

/* ── 16. Desktop hero: single unified column ───────────────────── */
/*    V2-C6B already collapses the grid to 1fr when no real avatar.
     When has-real-avatar: keep 2-col but reduce avatar column size */
@media (min-width: 768px) {
  body.fpv2b-loaded.public-artisan-page .public-profile-hero.has-real-avatar {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items:           flex-start !important;
    gap:                   20px !important;
  }
  body.fpv2b-loaded.public-artisan-page .public-profile-hero.has-real-avatar .public-avatar-wrap {
    display:        block !important;
    width:          96px !important;
    padding-top:    6px !important;
  }
  body.fpv2b-loaded.public-artisan-page .public-profile-hero.has-real-avatar .public-avatar {
    width:         96px !important;
    height:        96px !important;
    border-radius: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   V2-C6D — Platform Trust + Hero Estimation + Polish
   ═══════════════════════════════════════════════════════════════════ */

/* ── Platform trust chip row (.fpv2h-platform-trust) ──────────── */
.fpv2h-platform-trust {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin-top: 10px;
}
.fpv2h-ptrust-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding:       5px 10px;
  font-size:     0.74rem;
  font-weight:   600;
  color:         rgba(255,255,255,0.78);
  line-height:   1;
  white-space:   nowrap;
  letter-spacing: 0.01em;
}
.fpv2h-ptrust-icon {
  font-size: 0.80rem;
  line-height: 1;
}

/* ── Hero estimation block (.fpv2h-estimation) ─────────────────── */
#fpv2h-estimation {
  margin-top:    12px;
  padding:       14px 16px;
  background:    rgba(255,255,255,0.04);
  border:        1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  position:      relative;
  overflow:      hidden;
}
/* Subtle accent top line — estimation is a feature, not a card-within-card */
#fpv2h-estimation::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0;
  height:           2px;
  background:       linear-gradient(90deg, rgba(99,102,241,0.6), rgba(139,92,246,0.6));
  border-radius:    2px 2px 0 0;
}
.fpv2h-est-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 10px;
}
.fpv2h-est-icon {
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          28px;
  height:         28px;
  background:     rgba(99,102,241,0.15);
  border:         1px solid rgba(99,102,241,0.25);
  border-radius:  8px;
  font-size:      0.9rem;
  flex-shrink:    0;
}
.fpv2h-est-title {
  font-size:   0.85rem;
  font-weight: 800;
  color:       rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
.fpv2h-est-hint {
  font-size:  0.72rem;
  color:      rgba(255,255,255,0.40);
  margin-left: auto;
  font-style: italic;
}

/* ── Estimation chips ───────────────────────────────────────────── */
.fpv2h-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
.fpv2h-chip {
  display:       inline-flex;
  align-items:   center;
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding:       7px 12px;
  font-size:     0.78rem;
  font-weight:   600;
  color:         rgba(255,255,255,0.80);
  cursor:        pointer;
  transition:    background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space:   nowrap;
  -webkit-tap-highlight-color: transparent;
  line-height:   1.2;
}
.fpv2h-chip:hover {
  background:    rgba(99,102,241,0.15);
  border-color:  rgba(99,102,241,0.35);
  color:         #fff;
}
.fpv2h-chip--active {
  background:    rgba(99,102,241,0.22) !important;
  border-color:  rgba(99,102,241,0.55) !important;
  color:         #fff !important;
  box-shadow:    0 0 0 3px rgba(99,102,241,0.12);
}

/* ── Price reveal row ───────────────────────────────────────────── */
.fpv2h-price-row {
  display:     none;
  align-items: baseline;
  gap:         6px;
  margin-top:  10px;
  padding-top: 10px;
  border-top:  1px solid rgba(255,255,255,0.07);
}
.fpv2h-price-row--visible {
  display: flex !important;
  animation: fpv2h-priceIn 0.20s ease-out;
}
@keyframes fpv2h-priceIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fpv2h-price-range {
  font-size:   1.05rem;
  font-weight: 900;
  color:       #a5b4fc;
  letter-spacing: -0.01em;
}
.fpv2h-price-note {
  font-size:  0.74rem;
  color:      rgba(255,255,255,0.45);
  font-style: italic;
}

/* ── Mobile adjustments ─────────────────────────────────────────── */
@media (max-width: 480px) {
  #fpv2h-estimation { padding: 12px 14px; }
  .fpv2h-chip       { font-size: 0.74rem; padding: 6px 10px; }
  .fpv2h-ptrust-chip { font-size: 0.70rem; padding: 4px 9px; }
}
@media (max-width: 360px) {
  .fpv2h-ptrust-chip { font-size: 0.68rem; padding: 4px 8px; }
  .fpv2h-chips { gap: 4px; }
  .fpv2h-chip { font-size: 0.72rem; padding: 5px 9px; }
}

/* ── Skeleton pulse speed improvement ──────────────────────────── */
/*    V2-C6D: 1.6s → 1.1s — less jarring, faster perceived load     */
@keyframes fxsk-pulse {
  0%,100% { opacity: 0.45; }
  50%     { opacity: 0.95; }
}
.fxsk-hero .fxsk-avatar,
.fxsk-hero .fxsk-line,
.fxsk-hero .fxsk-cta {
  animation-duration: 1.1s !important;
}

/* ── Premium section breathing pass ─────────────────────────────── */
/*    Increase vertical gap between sections for a premium feel.
     Also tighten ppui-section-kicker → title spacing.               */
body.fpv2b-loaded.public-artisan-page .public-artisan-shell {
  gap: 24px !important;
}
body.fpv2b-loaded.public-artisan-page .ppui-section {
  padding: 22px 22px !important;
}
body.fpv2b-loaded.public-artisan-page .ppui-section-kicker {
  font-size:      0.70rem !important;
  letter-spacing: 0.10em !important;
  margin-bottom:  4px !important;
}
body.fpv2b-loaded.public-artisan-page .ppui-section-title {
  font-size:   1.1rem !important;
  font-weight: 800 !important;
  margin:      0 0 14px !important;
  line-height: 1.2 !important;
}

/* ── Trust strip: horizontal wrap on narrow mobile ─────────────── */
@media (max-width: 420px) {
  body.fpv2b-loaded.public-artisan-page .fpv2a-trust-strip {
    flex-wrap: wrap !important;
    gap:       6px !important;
  }
  body.fpv2b-loaded.public-artisan-page .fpv2a-strip-sep {
    display: none !important;
  }
}

/* ── Fpv2b specialty chips: unified style with hero estimation ──── */
/*    V2-C6D: align fpv2b-chip border-radius and sizing with
     fpv2h-chip for product coherence                               */
body.fpv2b-loaded.public-artisan-page .fpv2b-chip {
  border-radius: 10px !important;
  font-size:     0.78rem !important;
  padding:       7px 12px !important;
  transition:    background 0.15s ease, border-color 0.15s ease !important;
}
body.fpv2b-loaded.public-artisan-page .fpv2b-chip:hover {
  background:   rgba(99,102,241,0.15) !important;
  border-color: rgba(99,102,241,0.35) !important;
  color:        #fff !important;
}

/* ── Fade-in on profile root replace (skeleton → profile) ────────── */
/*    When renderProfile() replaces root.innerHTML, the sections
     that V2 then injects get the fpv2-sections-ready fade.
     But the HERO itself appears snap. Add a very short hero entry.  */
body.public-artisan-page .public-profile-hero {
  animation: fpv2h-heroIn 0.22s ease-out both;
}
@keyframes fpv2h-heroIn {
  from { opacity: 0.7; transform: translateY(4px); }
  to   { opacity: 1;   transform: translateY(0); }
}

/* ── Profile hero: tighter padding on narrow mobile ─────────────── */
@media (max-width: 390px) {
  body.fpv2b-loaded.public-artisan-page .public-profile-hero {
    padding: 16px 14px !important;
    border-radius: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   V2-C6E — Modal-style service cards (hero estimation + prestations)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Override V2-C6D simple chips → hide old chip grid ─────────────
   The .fpv2h-chips + .fpv2h-chip classes are superseded by .fpv2h-svc-grid
   + .fpv2h-svc-card. Old elements won't be in DOM (function rewritten),
   but keep CSS guard in case of stale cached JS serving old HTML.        */
.fpv2h-chips   { display: none !important; }
.fpv2h-chip    { display: none !important; }

/* ── Hero estimation: header row ────────────────────────────────── */
/* Inherited from V2-C6D: #fpv2h-estimation container, ::before accent */
/* Reuse: .fpv2h-est-header stays, .fpv2h-est-title stays             */
.fpv2h-est-header {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 10px;
}
.fpv2h-est-title {
  font-size:      0.85rem;
  font-weight:    800;
  color:          rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
.fpv2h-est-hint {
  font-size:   0.72rem;
  color:       rgba(255,255,255,0.38);
  margin-left: auto;
  font-style:  italic;
  transition:  color 0.2s ease;
}

/* ── Service card grid — 2-col, matching modal grid ─────────────── */
.fpv2h-svc-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}

/* ── Service card — mirrors .fixeo-res-slot (reservation.css) ───── */
.fpv2h-svc-card {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            4px;
  background:     linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:         1.5px solid rgba(255,255,255,0.10);
  border-radius:  10px;
  padding:        11px 12px;
  cursor:         pointer;
  transition:     background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  text-align:     left;
  -webkit-tap-highlight-color: transparent;
  user-select:    none;
  line-height:    1.3;
  /* Ensure card is a button but not styled as one */
  font-family:    inherit;
  outline:        none;
}
.fpv2h-svc-card:hover {
  background:   rgba(225,48,108,0.10);
  border-color: rgba(225,48,108,0.30);
}
.fpv2h-svc-card:focus-visible {
  outline:      2px solid rgba(225,48,108,0.60);
  outline-offset: 2px;
}

/* ── Active card — mirrors .fixeo-res-slot.active ──────────────── */
.fpv2h-svc-card--active {
  background:   linear-gradient(135deg, rgba(225,48,108,0.25), rgba(131,58,180,0.20)) !important;
  border-color: #E1306C !important;
  box-shadow:   0 0 14px rgba(225,48,108,0.22) !important;
}

/* ── Card text elements ─────────────────────────────────────────── */
.fpv2h-card-name {
  font-size:   0.80rem;
  font-weight: 700;
  color:       rgba(255,255,255,0.90);
  line-height: 1.3;
}
.fpv2h-card-price {
  font-size:      0.73rem;
  font-weight:    800;
  color:          #34d399;      /* emerald — same as .fpv2p3-range */
  letter-spacing: -0.01em;
  white-space:    nowrap;
}
/* Active state: price becomes white (pink bg, green too low-contrast) */
.fpv2h-svc-card--active .fpv2h-card-price {
  color: rgba(255,255,255,0.90);
}

/* ── Badge — mirrors reservation.js idx===0 badge ──────────────── */
.fpv2h-card-badge {
  display:       inline-block;
  font-size:     0.60rem;
  font-weight:   600;
  letter-spacing: 0.03em;
  padding:       2px 7px;
  border-radius: 6px;
  background:    rgba(255,80,120,0.12);
  color:         rgba(255,160,140,0.95);
  border:        1px solid rgba(255,80,120,0.35);
  margin-top:    1px;
}

/* ── Estimation result block — hidden until selection ───────────── */
.fpv2h-est-result {
  display:       none;
  flex-direction: column;
  gap:           4px;
  margin-top:    12px;
  padding-top:   12px;
  border-top:    1px solid rgba(255,255,255,0.07);
}
.fpv2h-est-result--visible {
  display:   flex !important;
  animation: fpv2h-priceIn 0.20s ease-out;
}
/* Reuse existing @keyframes fpv2h-priceIn (defined in V2-C6D) */
.fpv2h-est-amount {
  display:     flex;
  align-items: baseline;
  gap:         6px;
  flex-wrap:   wrap;
}
.fpv2h-est-label {
  font-size:  0.75rem;
  color:      rgba(255,255,255,0.52);
}
.fpv2h-est-range {
  font-size:      1.10rem;
  font-weight:    900;
  color:          #a5b4fc;      /* indigo — estimation primary */
  letter-spacing: -0.01em;
}
.fpv2h-est-unit {
  font-size:  0.72rem;
  color:      rgba(255,255,255,0.40);
  font-style: italic;
}
.fpv2h-est-sub {
  font-size:   0.72rem;
  color:       rgba(255,255,255,0.38);
  line-height: 1.5;
  margin:      0;
}
.fpv2h-est-pay {
  color:       rgba(255,255,255,0.52) !important;
  font-weight: 600;
}

/* ── Mobile adjustments ─────────────────────────────────────────── */
@media (max-width: 480px) {
  #fpv2h-estimation   { padding: 12px 14px; }
  .fpv2h-svc-grid     { gap: 7px; }
  .fpv2h-svc-card     { padding: 10px 11px; }
  .fpv2h-card-name    { font-size: 0.76rem; }
  .fpv2h-card-price   { font-size: 0.70rem; }
}
@media (max-width: 360px) {
  /* Stack to 1-col on narrow phones */
  .fpv2h-svc-grid {
    grid-template-columns: 1fr;
  }
  .fpv2h-card-name  { font-size: 0.75rem; }
  .fpv2h-card-price { font-size: 0.72rem; }
  .fpv2h-svc-card   { padding: 9px 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   V2-C6E — Prestations section: card-grid layout (replaces row list)
   Mirrors hero service cards for visual consistency.
   Non-interactive (click → open reservation modal, no in-place selection).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Prestations card grid — 2×2 on wide, 1×N on narrow ─────────── */
.public-artisan-page .fpv2p3-card-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
  margin-bottom:         14px;
}

/* ── Prestations service card — non-interactive display variant ─── */
.public-artisan-page .fpv2p3-card {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            4px;
  background:     linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:         1.5px solid rgba(255,255,255,0.09);
  border-radius:  10px;
  padding:        11px 12px;
  transition:     background 0.15s ease, border-color 0.15s ease;
  line-height:    1.3;
  cursor:         default;
}
@media (hover: hover) {
  .public-artisan-page .fpv2p3-card:hover {
    background:   rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
  }
}

/* ── Prestations card text ─────────────────────────────────────── */
.public-artisan-page .fpv2p3-card-name {
  font-size:   0.80rem;
  font-weight: 700;
  color:       rgba(255,255,255,0.88);
  line-height: 1.3;
}
.public-artisan-page .fpv2p3-card-price {
  font-size:      0.78rem;
  font-weight:    800;
  color:          #34d399;      /* emerald — market pricing register */
  letter-spacing: -0.01em;
  white-space:    nowrap;
}
.public-artisan-page .fpv2p3-card-badge {
  display:       inline-block;
  font-size:     0.60rem;
  font-weight:   600;
  letter-spacing: 0.03em;
  padding:       2px 7px;
  border-radius: 6px;
  background:    rgba(255,80,120,0.12);
  color:         rgba(255,160,140,0.95);
  border:        1px solid rgba(255,80,120,0.35);
  margin-top:    1px;
}

/* ── Prestations mobile adjustments ────────────────────────────── */
@media (max-width: 390px) {
  .public-artisan-page .fpv2p3-card-grid { gap: 7px; }
  .public-artisan-page .fpv2p3-card      { padding: 10px 11px; }
  .public-artisan-page .fpv2p3-card-name { font-size: 0.76rem; }
  .public-artisan-page .fpv2p3-card-price { font-size: 0.73rem; }
}
@media (max-width: 360px) {
  /* 1-col at narrow — matches hero estimation grid */
  .public-artisan-page .fpv2p3-card-grid {
    grid-template-columns: 1fr;
  }
  .public-artisan-page .fpv2p3-card-name  { font-size: 0.75rem; }
  .public-artisan-page .fpv2p3-card-price { font-size: 0.73rem; }
}
@media (max-width: 320px) {
  .public-artisan-page .fpv2p3-card { padding: 9px 10px; }
}

/* ── Suppress old V2-C6D row-list elements (backward compat guard) */
.public-artisan-page .fpv2p3-row   { display: none !important; }
.public-artisan-page .fpv2p3-grid  { display: none !important; }

/* ── Desktop: wider cards with more breathing room ─────────────── */
@media (min-width: 768px) {
  .public-artisan-page .fpv2p3-card-grid { gap: 10px; }
  .public-artisan-page .fpv2p3-card { padding: 13px 14px; }
  .public-artisan-page .fpv2p3-card-name  { font-size: 0.84rem; }
  .public-artisan-page .fpv2p3-card-price { font-size: 0.82rem; }
  .fpv2h-svc-grid  { gap: 10px; }
  .fpv2h-svc-card  { padding: 12px 14px; }
  .fpv2h-card-name { font-size: 0.84rem; }
  .fpv2h-card-price { font-size: 0.76rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   V2-C6F — Performance indicators + modal estimation alignment
   ═══════════════════════════════════════════════════════════════════ */

/* ── Performance indicators block ──────────────────────────────── */
#fpv2pi-block {
  margin-top:    14px;
  padding:       14px 16px;
  background:    rgba(255,255,255,0.03);
  border:        1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
}
.fpv2pi-header {
  margin-bottom: 10px;
}
.fpv2pi-title {
  font-size:      0.72rem;
  font-weight:    700;
  color:          rgba(255,255,255,0.40);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── 2×3 grid of indicator cards ───────────────────────────────── */
.fpv2pi-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   7px;
}
.fpv2pi-card {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            2px;
  background:     rgba(255,255,255,0.03);
  border:         1px solid rgba(255,255,255,0.06);
  border-radius:  10px;
  padding:        10px 11px;
  line-height:    1.3;
}
/* Active indicator (earned / platform guarantee) — slight teal accent */
.fpv2pi-card--active {
  border-color: rgba(52,211,153,0.18);
  background:   rgba(52,211,153,0.04);
}
.fpv2pi-icon {
  font-size:   0.80rem;
  line-height: 1;
  margin-bottom: 2px;
}
.fpv2pi-value {
  font-size:      0.92rem;
  font-weight:    900;
  color:          rgba(255,255,255,0.88);
  letter-spacing: -0.01em;
}
.fpv2pi-card--active .fpv2pi-value {
  color: #34d399;  /* emerald for earned/guaranteed values */
}
.fpv2pi-label {
  font-size:   0.68rem;
  font-weight: 600;
  color:       rgba(255,255,255,0.55);
  line-height: 1.2;
}
.fpv2pi-sub {
  font-size:   0.62rem;
  color:       rgba(255,255,255,0.30);
  line-height: 1.3;
  font-style:  italic;
}
.fpv2pi-card--active .fpv2pi-sub {
  color: rgba(52,211,153,0.55);
  font-style: normal;
}

/* ── Footer disclaimer ──────────────────────────────────────────── */
.fpv2pi-footer {
  font-size:   0.67rem;
  color:       rgba(255,255,255,0.25);
  line-height: 1.5;
  margin:      8px 0 0;
  font-style:  italic;
}

/* ── Mobile adjustments ─────────────────────────────────────────── */
@media (max-width: 480px) {
  #fpv2pi-block { padding: 12px 13px; }
  .fpv2pi-grid  { gap: 6px; }
  .fpv2pi-card  { padding: 9px 10px; }
}
@media (max-width: 360px) {
  /* 1-col on very narrow — fits everything */
  .fpv2pi-grid { grid-template-columns: 1fr; }
  .fpv2pi-card { padding: 8px 10px; }
  .fpv2pi-value { font-size: 0.88rem; }
}

/* ── Modal estimation subs: match profile sub-text style ─────────
   New .fxrv2-est-subs block + .fxrv2-est-sub text lines.
   Must NOT conflict with existing .fxrv2-est-pay, .fxrv2-est-market. */
.fxrv2-est-subs {
  margin-top:     8px;
  padding-top:    8px;
  border-top:     1px solid rgba(255,255,255,0.06);
  display:        flex;
  flex-direction: column;
  gap:            3px;
}
.fxrv2-est-sub {
  font-size:   0.71rem;
  color:       rgba(255,255,255,0.38);
  line-height: 1.5;
  margin:      0;
}
/* Third line: "Aucun paiement" — slightly brighter */
.fxrv2-est-pay {
  color:       rgba(255,255,255,0.52) !important;
  font-weight: 600 !important;
}

/* V2-C6F hotfix: prevent 320px overflow from platform trust chips + indicator block */
@media (max-width: 320px) {
  .fpv2h-ptrust-chip {
    white-space: normal !important;  /* allow chip text to wrap */
    max-width:   140px;
  }
  #fpv2pi-block {
    overflow: hidden;
  }
  .fpv2pi-grid {
    grid-template-columns: 1fr !important;  /* force 1-col below 360px already, but reinforce */
    width: 100%;
  }
  .fpv2pi-value {
    font-size: 0.84rem;
  }
}