/* ============================================================================
   Page vitrine du créateur — cadre (refonte du 23 oct 2026, gabarit
   « ZIC Profil Nouvelle version »).

   Page qui défile NORMALEMENT : en-tête collant (landing-public-profile-
   header.css), vitrine (bannière, avatar, note, actions, puces réseaux),
   onglets collants + panneau des faces (landing-public-feed.css), pied.

   ⚠️ Interdits sur .zh-pp-page, main, .zh-ppf--page, .zh-ppf-body--page et
   leurs ancêtres : overflow ≠ visible (sauf overflow-x: clip, qui ne crée
   pas de zone de défilement), transform, filter, backdrop-filter, contain,
   container-type, isolation, z-index. Sinon l'en-tête / les onglets
   décrochent et les modales des faces (Fan Zone privée, airdrop…) sont
   piégées sous l'en-tête.

   Jetons neutres : public-profile-theme.css (--pp-page, --pp-ink, --pp-mut,
   --pp-line…). Jetons d'accent DÉRIVÉS ici, selon data-pp-accent :
   --pp-accent-solid (fond plein), --pp-accent-on (texte dessus),
   --pp-accent-text (texte d'accent). Clair : nuances 700 sous texte blanc
   (≥ 4,5:1) ; l'accent studio #FAFAFB n'est JAMAIS un fond en clair.
   ========================================================================== */

/* ─── Variables de mise en page (posées sur <html>) ─────────────────────
   Hauteurs de repli de l'en-tête et de la barre d'onglets ; le JS
   (public-profile.js, ResizeObserver) les remplace par les vraies valeurs
   (zoom 200 %, en-tête sur deux lignes…). Téléphone en paysage : l'en-tête
   ne colle plus, seuls les onglets collent (hauteur d'en-tête utile = 0). */
html.zh-public-profile-page {
  --pp-header-h: 64px;
  --pp-tabs-h: 52px;
  --pp-sticky-h: calc(var(--pp-header-h) + var(--pp-tabs-h));
  /* Ancres, scrollIntoView et focus clavier jamais cachés sous les collants. */
  scroll-padding-top: calc(var(--pp-sticky-h) + 8px);
}

@media (max-width: 768px) {
  html.zh-public-profile-page {
    --pp-header-h: 56px;
    --pp-tabs-h: 48px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  html.zh-public-profile-page {
    --pp-header-h: 0px;
  }
}

/* Fond de page (couvre aussi le rebond iOS) : écrase le `transparent`
   historique et le fond de landing-home.css (BUMP8, jamais modifié). */
html.zh-public-profile-page,
body.zh-public-profile-page {
  background: var(--pp-page, #0b0419);
}

body.zh-public-profile-page {
  color: var(--pp-ink, #fafafb);
}

/* ─── Racine de page : gouttières + jetons d'accent ─────────────────── */
.zh-pp-page {
  --pp-gutter: 20px;
  /* Défaut = violet, thème sombre. */
  --pp-accent-solid: #7B3FF2;
  --pp-accent-on: #FFFFFF;
  --pp-accent-text: #A78BFA;
  position: relative;
  min-height: 100vh;
  /* Débordement horizontal coupé SANS zone de défilement (le collant reste
     rattaché à la fenêtre). */
  overflow-x: clip;
  color: var(--pp-ink, #fafafb);
}

@media (max-width: 768px) {
  .zh-pp-page { --pp-gutter: 16px; }
}

@media (max-width: 480px) {
  .zh-pp-page { --pp-gutter: 12px; }
}

/* Accents — thème sombre (valeurs par défaut). */
.zh-pp-page[data-pp-accent="violet"] {
  --pp-accent-solid: #7B3FF2;
  --pp-accent-on: #FFFFFF;
  --pp-accent-text: #A78BFA;
}
.zh-pp-page[data-pp-accent="sunset"] {
  --pp-accent-solid: #F97316;
  --pp-accent-on: #0B0419;
  --pp-accent-text: #F97316;
}
.zh-pp-page[data-pp-accent="neon"] {
  --pp-accent-solid: #22C55E;
  --pp-accent-on: #0B0419;
  --pp-accent-text: #22C55E;
}
.zh-pp-page[data-pp-accent="fire"] {
  --pp-accent-solid: #EF4444;
  --pp-accent-on: #0B0419;
  --pp-accent-text: #EF4444;
}
.zh-pp-page[data-pp-accent="lavender"] {
  --pp-accent-solid: #A78BFA;
  --pp-accent-on: #0B0419;
  --pp-accent-text: #A78BFA;
}
.zh-pp-page[data-pp-accent="studio"] {
  --pp-accent-solid: #FAFAFB;
  --pp-accent-on: #0B0419;
  --pp-accent-text: #FAFAFB;
}

/* Accents — thème clair (choix explicite). Nuances 700 sous texte blanc. */
:root[data-pp-theme="light"] .zh-pp-page {
  --pp-accent-solid: #7B3FF2;
  --pp-accent-on: #FFFFFF;
  --pp-accent-text: #7B3FF2;
}
:root[data-pp-theme="light"] .zh-pp-page[data-pp-accent="violet"] {
  --pp-accent-solid: #7B3FF2;
  --pp-accent-on: #FFFFFF;
  --pp-accent-text: #7B3FF2;
}
:root[data-pp-theme="light"] .zh-pp-page[data-pp-accent="sunset"] {
  --pp-accent-solid: #C2410C;
  --pp-accent-on: #FFFFFF;
  --pp-accent-text: #C2410C;
}
:root[data-pp-theme="light"] .zh-pp-page[data-pp-accent="neon"] {
  --pp-accent-solid: #15803D;
  --pp-accent-on: #FFFFFF;
  --pp-accent-text: #15803D;
}
:root[data-pp-theme="light"] .zh-pp-page[data-pp-accent="fire"] {
  --pp-accent-solid: #B91C1C;
  --pp-accent-on: #FFFFFF;
  --pp-accent-text: #B91C1C;
}
:root[data-pp-theme="light"] .zh-pp-page[data-pp-accent="lavender"] {
  --pp-accent-solid: #6D28D9;
  --pp-accent-on: #FFFFFF;
  --pp-accent-text: #6D28D9;
}
:root[data-pp-theme="light"] .zh-pp-page[data-pp-accent="studio"] {
  --pp-accent-solid: #52525B;
  --pp-accent-on: #FFFFFF;
  --pp-accent-text: #52525B;
}

/* Accents — thème clair sans JS (même table, système clair). */
@media (prefers-color-scheme: light) {
  :root:not([data-pp-theme]) .zh-pp-page {
    --pp-accent-solid: #7B3FF2;
    --pp-accent-on: #FFFFFF;
    --pp-accent-text: #7B3FF2;
  }
  :root:not([data-pp-theme]) .zh-pp-page[data-pp-accent="violet"] {
    --pp-accent-solid: #7B3FF2;
    --pp-accent-on: #FFFFFF;
    --pp-accent-text: #7B3FF2;
  }
  :root:not([data-pp-theme]) .zh-pp-page[data-pp-accent="sunset"] {
    --pp-accent-solid: #C2410C;
    --pp-accent-on: #FFFFFF;
    --pp-accent-text: #C2410C;
  }
  :root:not([data-pp-theme]) .zh-pp-page[data-pp-accent="neon"] {
    --pp-accent-solid: #15803D;
    --pp-accent-on: #FFFFFF;
    --pp-accent-text: #15803D;
  }
  :root:not([data-pp-theme]) .zh-pp-page[data-pp-accent="fire"] {
    --pp-accent-solid: #B91C1C;
    --pp-accent-on: #FFFFFF;
    --pp-accent-text: #B91C1C;
  }
  :root:not([data-pp-theme]) .zh-pp-page[data-pp-accent="lavender"] {
    --pp-accent-solid: #6D28D9;
    --pp-accent-on: #FFFFFF;
    --pp-accent-text: #6D28D9;
  }
  :root:not([data-pp-theme]) .zh-pp-page[data-pp-accent="studio"] {
    --pp-accent-solid: #52525B;
    --pp-accent-on: #FFFFFF;
    --pp-accent-text: #52525B;
  }
}

/* Couches montées sur <body> hors de .zh-pp-page (fiche produit, panier,
   modale d'avis, succès) : même table d'accents, l'attribut data-pp-accent
   étant aussi posé sur <body>. Défaut = thème sombre. */
body[data-pp-accent="violet"] { --pp-accent-solid: #7B3FF2; --pp-accent-on: #FFFFFF; --pp-accent-text: #A78BFA; }
body[data-pp-accent="sunset"] { --pp-accent-solid: #F97316; --pp-accent-on: #0B0419; --pp-accent-text: #F97316; }
body[data-pp-accent="neon"] { --pp-accent-solid: #22C55E; --pp-accent-on: #0B0419; --pp-accent-text: #22C55E; }
body[data-pp-accent="fire"] { --pp-accent-solid: #EF4444; --pp-accent-on: #0B0419; --pp-accent-text: #EF4444; }
body[data-pp-accent="lavender"] { --pp-accent-solid: #A78BFA; --pp-accent-on: #0B0419; --pp-accent-text: #A78BFA; }
body[data-pp-accent="studio"] { --pp-accent-solid: #FAFAFB; --pp-accent-on: #0B0419; --pp-accent-text: #FAFAFB; }
:root[data-pp-theme="light"] body[data-pp-accent="violet"] { --pp-accent-solid: #7B3FF2; --pp-accent-on: #FFFFFF; --pp-accent-text: #7B3FF2; }
:root[data-pp-theme="light"] body[data-pp-accent="sunset"] { --pp-accent-solid: #C2410C; --pp-accent-on: #FFFFFF; --pp-accent-text: #C2410C; }
:root[data-pp-theme="light"] body[data-pp-accent="neon"] { --pp-accent-solid: #15803D; --pp-accent-on: #FFFFFF; --pp-accent-text: #15803D; }
:root[data-pp-theme="light"] body[data-pp-accent="fire"] { --pp-accent-solid: #B91C1C; --pp-accent-on: #FFFFFF; --pp-accent-text: #B91C1C; }
:root[data-pp-theme="light"] body[data-pp-accent="lavender"] { --pp-accent-solid: #6D28D9; --pp-accent-on: #FFFFFF; --pp-accent-text: #6D28D9; }
:root[data-pp-theme="light"] body[data-pp-accent="studio"] { --pp-accent-solid: #52525B; --pp-accent-on: #FFFFFF; --pp-accent-text: #52525B; }
@media (prefers-color-scheme: light) {
  :root:not([data-pp-theme]) body[data-pp-accent="violet"] { --pp-accent-solid: #7B3FF2; --pp-accent-on: #FFFFFF; --pp-accent-text: #7B3FF2; }
  :root:not([data-pp-theme]) body[data-pp-accent="sunset"] { --pp-accent-solid: #C2410C; --pp-accent-on: #FFFFFF; --pp-accent-text: #C2410C; }
  :root:not([data-pp-theme]) body[data-pp-accent="neon"] { --pp-accent-solid: #15803D; --pp-accent-on: #FFFFFF; --pp-accent-text: #15803D; }
  :root:not([data-pp-theme]) body[data-pp-accent="fire"] { --pp-accent-solid: #B91C1C; --pp-accent-on: #FFFFFF; --pp-accent-text: #B91C1C; }
  :root:not([data-pp-theme]) body[data-pp-accent="lavender"] { --pp-accent-solid: #6D28D9; --pp-accent-on: #FFFFFF; --pp-accent-text: #6D28D9; }
  :root:not([data-pp-theme]) body[data-pp-accent="studio"] { --pp-accent-solid: #52525B; --pp-accent-on: #FFFFFF; --pp-accent-text: #52525B; }
}

/* ─── Utilitaires ─────────────────────────────────────────────────── */
.zh-pp-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement : hors champ, visible au focus clavier. */
.zh-pp-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 90;
  padding: 10px 16px;
  border-radius: var(--pp-r-pill, 999px);
  background: var(--pp-cta-bg, #fafafb);
  color: var(--pp-cta-ink, #0b0419);
  font: 800 13.5px/1.2 "DM Sans", sans-serif;
  text-decoration: none;
  transform: translateY(-160%);
}
.zh-pp-skip:focus,
.zh-pp-skip:focus-visible {
  transform: none;
  outline: 2px solid var(--pp-accent-text, #a78bfa);
  outline-offset: 2px;
}

#zh-pp-main {
  display: block;
}
#zh-pp-main:focus {
  outline: none;
}

/* ─── Boutons (vitrine, en-tête de face, cartes) ────────────────────── */
.zh-pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 17px;
  border-radius: var(--pp-r-pill, 999px);
  border: 1px solid var(--pp-line, rgba(168, 85, 247, 0.18));
  background: var(--pp-card, #1a0e2e);
  color: var(--pp-ink, #fafafb);
  font: 800 13.5px/1.2 "DM Sans", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.zh-pp-btn[hidden] {
  display: none !important;
}
.zh-pp-btn:focus-visible {
  outline: 2px solid var(--pp-accent-text, #a78bfa);
  outline-offset: 2px;
}
.zh-pp-btn svg {
  flex-shrink: 0;
}
.zh-pp-btn--primary {
  background: var(--pp-accent-solid, #7b3ff2);
  border-color: var(--pp-accent-solid, #7b3ff2);
  color: var(--pp-accent-on, #fff);
}
.zh-pp-btn--ghost {
  background: var(--pp-card, #1a0e2e);
  color: var(--pp-ink, #fafafb);
}
@media (hover: hover) {
  .zh-pp-btn--ghost:hover,
  .zh-pp-btn:not(.zh-pp-btn--primary):hover {
    border-color: var(--pp-line-strong, rgba(168, 85, 247, 0.32));
  }
  .zh-pp-btn--primary:hover {
    background: color-mix(in srgb, var(--pp-accent-solid, #7b3ff2) 88%, #000);
    border-color: color-mix(in srgb, var(--pp-accent-solid, #7b3ff2) 88%, #000);
  }
}

/* Suivre / ✓ Suivi : l'état « suivi » passe en contour ; la coche n'est
   montrée qu'en état suivi (le « + » du JS reste masqué). */
.zh-pph-follow .zh-pph-follow-icon {
  display: none;
  font-weight: 800;
  line-height: 1;
}
.zh-pph-follow.is-following {
  background: var(--pp-card, #1a0e2e);
  border-color: var(--pp-line, rgba(168, 85, 247, 0.18));
  color: var(--pp-ink, #fafafb);
}
.zh-pph-follow.is-following .zh-pph-follow-icon {
  display: inline;
}
@media (hover: hover) {
  .zh-pph-follow.is-following:hover {
    background: var(--pp-card, #1a0e2e);
    border-color: var(--pp-line-strong, rgba(168, 85, 247, 0.32));
  }
}
.zh-pph-follow.is-busy {
  opacity: 0.72;
  pointer-events: none;
}

/* ─── Vitrine ─────────────────────────────────────────────────────── */
.zh-ppv {
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px var(--pp-gutter, 20px) 0;
  box-sizing: border-box;
}

/* Bannière : image PRO (mode custom), sinon dégradé ou uni d'accent. */
.zh-ppv-cover {
  position: relative;
  height: 200px;
  border-radius: var(--pp-r-xxl, 22px);
  overflow: hidden;
  background: linear-gradient(135deg, var(--pp-accent-1, #7b3ff2) 0%, var(--pp-accent-2, #a855f7) 55%, var(--pp-accent-3, #ec4899) 100%);
}
.zh-ppv-cover[data-pp-hero="solid"] {
  background: var(--pp-accent-tint, #7b3ff2);
}
.zh-ppv-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.zh-ppv-cover-img[hidden] {
  display: none !important;
}
/* Voile bas (lisibilité de l'avatar sur une photo claire). */
.zh-ppv-cover[data-pp-hero="custom"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20, 10, 51, 0.55));
  pointer-events: none;
}

/* Rangée avatar / nom / actions : positionnée SANS z-index (peinte
   au-dessus de la bannière qu'elle chevauche, sans contexte d'empilement). */
.zh-ppv-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: -46px;
  padding: 0 22px 4px;
}

.zh-ppv-avatar {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 5px solid var(--pp-page, #0b0419);
  background: var(--pp-card, #1a0e2e);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.zh-ppv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zh-ppv-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-accent-solid, #7b3ff2);
  color: var(--pp-accent-on, #fff);
  font-family: var(--pp-font-head, "Space Grotesk", sans-serif);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.5px;
}

.zh-ppv-id {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  top: 14px;
}

.zh-ppv-titlerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.zh-ppv-name {
  margin: 0;
  min-width: 0;
  font-family: var(--pp-font-head, "Space Grotesk", sans-serif);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.6px;
  line-height: 1.15;
  color: var(--pp-ink, #fafafb);
  overflow-wrap: anywhere;
}
.zh-ppv-name .zic-seal--inline {
  margin-inline-start: 8px;
}

/* « ● En direct » : mène à l'onglet ZIC Live. Fond plein #DC2626 / blanc
   (4,8:1) identique dans les deux thèmes. */
.zh-ppv-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--pp-r-pill, 999px);
  background: #DC2626;
  color: #FFFFFF;
  font: 800 11.5px/1.2 "DM Sans", sans-serif;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.zh-ppv-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  animation: zh-ppv-live-pulse 1.6s ease-in-out infinite;
}
.zh-ppv-live:focus-visible {
  outline: 2px solid var(--pp-ink, #fafafb);
  outline-offset: 2px;
}
@keyframes zh-ppv-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .zh-ppv-live-dot { animation: none; }
}

/* Ligne méta : catégorie · ville · note. Séparateurs posés en CSS (robustes
   aux bascules [hidden] de l'aperçu Customize et de la note à 0 avis). */
.zh-ppv-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pp-mut, rgba(250, 250, 251, 0.66));
}
.zh-ppv-meta:empty {
  display: none;
}
.zh-ppv-meta > [hidden] {
  display: none !important;
}
.zh-ppv-meta > :not([hidden]) ~ :not([hidden])::before {
  content: "·";
  display: inline-block;
  margin: 0 7px;
  color: var(--pp-mut, rgba(250, 250, 251, 0.66));
  text-decoration: none;
}
.zh-ppv-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pp-mut, rgba(250, 250, 251, 0.66));
  text-decoration: none;
  border-radius: 6px;
}
.zh-ppv-rating-star {
  color: var(--pp-star, #f59e0b);
}
.zh-ppv-rating [data-zh-reviews-avg] {
  color: var(--pp-ink, #fafafb);
  font-weight: 700;
}
.zh-ppv-rating:focus-visible {
  outline: 2px solid var(--pp-accent-text, #a78bfa);
  outline-offset: 2px;
}
@media (hover: hover) {
  .zh-ppv-rating:hover [data-zh-reviews-countlabel] {
    text-decoration: underline;
  }
}

/* Actions : Suivre (ou Modifier ma page) · Donner un avis · Partager. */
.zh-ppv-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.zh-ppv-share.is-copied {
  border-color: var(--pp-success, #4ade80);
  color: var(--pp-success-ink, #4ade80);
}
.zh-ppv-share-ic--done {
  display: none;
}
.zh-ppv-share.is-copied .zh-ppv-share-ic--done {
  display: inline;
}
.zh-ppv-share.is-copied .zh-ppv-share-ic--share {
  display: none;
}

/* Champ de repli du partage (ni Web Share, ni presse-papiers). */
.zh-ppv-share-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
  margin: 14px 22px 0;
  font-size: 12.5px;
  color: var(--pp-mut, rgba(250, 250, 251, 0.66));
}
.zh-ppv-share-field[hidden] {
  display: none !important;
}
.zh-ppv-share-input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: var(--pp-r-sm, 10px);
  border: 1px solid var(--pp-line-strong, rgba(168, 85, 247, 0.32));
  background: var(--pp-card, #1a0e2e);
  color: var(--pp-ink, #fafafb);
  font: 500 13.5px/1.3 "DM Sans", sans-serif;
  box-sizing: border-box;
}
.zh-ppv-share-input:focus-visible {
  outline: 2px solid var(--pp-accent-text, #a78bfa);
  outline-offset: 1px;
}

/* Bio courte : 2 lignes puis « Voir plus ». */
.zh-ppv-bio {
  max-width: 760px;
  padding: 16px 22px 0;
}
.zh-ppv-bio-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--pp-mut, rgba(250, 250, 251, 0.66));
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.zh-ppv-bio.is-expanded .zh-ppv-bio-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}
.zh-ppv-bio-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--pp-accent-text, #a78bfa);
  font: 700 13.5px/1.3 "DM Sans", sans-serif;
  cursor: pointer;
}
.zh-ppv-bio-toggle[hidden] {
  display: none !important;
}
.zh-ppv-bio-toggle:focus-visible {
  outline: 2px solid var(--pp-accent-text, #a78bfa);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (hover: hover) {
  .zh-ppv-bio-toggle:hover {
    text-decoration: underline;
  }
}

/* Puces réseaux (mènent à l'onglet du réseau). */
.zh-ppv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px 0;
}
.zh-ppv-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--pp-r-pill, 999px);
  border: 1px solid var(--pp-line, rgba(168, 85, 247, 0.18));
  background: var(--pp-card, #1a0e2e);
  color: var(--pp-ink, #fafafb);
  font: 600 12.5px/1.3 "DM Sans", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.zh-ppv-chip-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--zh-ppv-chip-color, #a855f7);
}
.zh-ppv-chip-count {
  color: var(--pp-mut, rgba(250, 250, 251, 0.66));
  font-weight: 500;
}
.zh-ppv-chip-count:empty {
  display: none;
}
.zh-ppv-chip:focus-visible {
  outline: 2px solid var(--pp-accent-text, #a78bfa);
  outline-offset: 2px;
}
@media (hover: hover) {
  .zh-ppv-chip:hover {
    border-color: var(--pp-line-strong, rgba(168, 85, 247, 0.32));
  }
}

/* ─── Pied de page ─────────────────────────────────────────────────── */
.zh-ppfoot {
  margin-top: 48px;
}
.zh-ppfoot-inner {
  max-width: 1160px;
  margin: 0 auto;
  /* Réserve basse : la bulle de chat (fixe, 58 px à 26 px du bas). */
  padding: 26px var(--pp-gutter, 20px) calc(96px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pp-line, rgba(168, 85, 247, 0.18));
  color: var(--pp-mut, rgba(250, 250, 251, 0.66));
  font-size: 12.5px;
  box-sizing: border-box;
}
.zh-ppfoot-main,
.zh-ppfoot-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.zh-ppfoot-sub {
  margin-top: 16px;
  gap: 10px 22px;
  font-size: 12px;
}
.zh-ppfoot-spacer {
  flex: 1 1 auto;
}
.zh-ppfoot-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.zh-ppfoot-logo img {
  height: 18px;
  width: auto;
  display: block;
}
.zh-ppfoot-cta {
  color: var(--pp-brand, #a78bfa);
  font-weight: 700;
  text-decoration: none;
}
.zh-ppfoot-cta:focus-visible,
.zh-ppfoot-legal a:focus-visible,
.zh-ppfoot-logo:focus-visible {
  outline: 2px solid var(--pp-accent-text, #a78bfa);
  outline-offset: 2px;
  border-radius: 4px;
}
.zh-ppfoot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.zh-ppfoot-legal a {
  color: var(--pp-mut, rgba(250, 250, 251, 0.66));
  text-decoration: none;
}
@media (hover: hover) {
  .zh-ppfoot-cta:hover,
  .zh-ppfoot-legal a:hover {
    text-decoration: underline;
  }
  .zh-ppfoot-legal a:hover {
    color: var(--pp-ink, #fafafb);
  }
}

/* Logo ZIC thème-aware (blanc en sombre, noir en clair) : même bascule que
   l'en-tête (.zh-pph-logo-img). */
.zh-pp-logo--light { display: none; }
:root[data-pp-theme="light"] .zh-pp-logo--dark { display: none; }
:root[data-pp-theme="light"] .zh-pp-logo--light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-pp-theme]) .zh-pp-logo--dark { display: none; }
  :root:not([data-pp-theme]) .zh-pp-logo--light { display: block; }
}

/* ─── Contrôles partagés : thème (3 états) et langue ───────────────────
   Utilisés dans le popover compte, le tiroir mobile et le pied. */
.zh-pp-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--pp-r-pill, 999px);
  border: 1px solid var(--pp-line, rgba(168, 85, 247, 0.18));
  background: var(--pp-card, #1a0e2e);
}
.zh-pp-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--pp-r-pill, 999px);
  background: transparent;
  color: var(--pp-mut, rgba(250, 250, 251, 0.66));
  font: 700 12px/1 "DM Sans", sans-serif;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.zh-pp-seg-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.zh-pp-seg-btn[aria-pressed="true"],
.zh-pp-seg-btn[aria-current="true"] {
  background: var(--pp-cta-bg, #fafafb);
  color: var(--pp-cta-ink, #0b0419);
}
.zh-pp-seg-btn:focus-visible {
  outline: 2px solid var(--pp-accent-text, #a78bfa);
  outline-offset: 1px;
}
@media (hover: hover) {
  .zh-pp-seg-btn:not([aria-pressed="true"]):not([aria-current="true"]):hover {
    color: var(--pp-ink, #fafafb);
  }
}

/* ─── Points de rupture ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .zh-ppv-cover {
    height: 180px;
    border-radius: var(--pp-r-xl, 20px);
  }
  .zh-ppv-avatar {
    width: 96px;
    height: 96px;
  }
  .zh-ppv-name {
    font-size: 24px;
  }
  /* Actions sous le nom, alignées à gauche. */
  .zh-ppv-actions {
    flex: 1 1 100%;
    margin: 18px 0 0;
  }
}

@media (max-width: 768px) {
  .zh-ppv {
    padding-top: 12px;
  }
  .zh-ppv-cover {
    height: 132px;
    border-radius: var(--pp-r-lg, 16px);
  }
  .zh-ppv-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: -36px;
    padding: 0 4px;
  }
  .zh-ppv-avatar {
    width: 84px;
    height: 84px;
    border-width: 4px;
  }
  .zh-ppv-initials {
    font-size: 26px;
  }
  .zh-ppv-id {
    top: 0;
    width: 100%;
  }
  .zh-ppv-name {
    font-size: 22px;
  }
  .zh-ppv-meta {
    font-size: 13.5px;
  }
  .zh-ppv-actions {
    width: 100%;
    margin: 2px 0 0;
  }
  .zh-ppv-actions .zh-pp-btn {
    min-height: 44px;
  }
  .zh-ppv-bio {
    padding: 12px 4px 0;
  }
  .zh-ppv-share-field {
    margin: 12px 4px 0;
  }
  /* Puces : une ligne défilante, bords à fond perdu. */
  .zh-ppv-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--pp-gutter, 16px));
    padding: 14px var(--pp-gutter, 16px) 2px;
    scroll-padding-inline: var(--pp-gutter, 16px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .zh-ppv-chips::-webkit-scrollbar {
    display: none;
  }
  .zh-ppfoot {
    margin-top: 36px;
  }
  /* landing-home.css (BUMP8, jamais modifié) pose « .zh-page > footer {
     padding: 24px 16px !important } » sous 768 px : ce pied, enfant direct
     de .zh-page, était décalé de la vitrine et des faces. Neutralisé (la
     gouttière est sur .zh-ppfoot-inner, que « .zh-page > footer > div »
     laisse en bloc). */
  .zh-pp-page > footer.zh-ppfoot {
    padding: 0 !important;
  }
  .zh-ppfoot-inner {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }
  .zh-ppfoot-main,
  .zh-ppfoot-sub {
    justify-content: center;
  }
  /* CTA sur sa propre ligne, centré. */
  .zh-ppfoot-spacer {
    flex: 1 1 100%;
    height: 0;
  }
  .zh-ppfoot-legal {
    justify-content: center;
  }
}

/* Téléphone : Suivre (ou Modifier ma page) prend la ligne, Partager passe
   en icône seule 44 × 44. */
@media (max-width: 599px) {
  .zh-ppv-actions {
    flex-wrap: nowrap;
  }
  .zh-ppv-actions > .zh-pph-follow,
  .zh-ppv-actions > .zh-ppv-edit {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Partager : icône seule 44 × 44 (le libellé reste lu). */
  .zh-ppv-share {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
  }
  .zh-ppv-share .zh-ppv-share-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Cibles tactiles ≥ 44 px. */
@media (pointer: coarse) {
  .zh-pp-btn,
  .zh-ppv-chip {
    min-height: 44px;
  }
  .zh-ppv-chip {
    padding: 0 14px;
  }
  .zh-ppv-bio-toggle,
  .zh-ppfoot-cta,
  .zh-ppfoot-legal a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .zh-ppv-rating {
    min-height: 44px;
  }
  .zh-pp-seg-btn {
    min-width: 44px;
    height: 44px;
  }
  /* Logo du pied (image de 18 px de haut). */
  .zh-ppfoot-logo {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  /* « ● En direct » : zone de toucher de 44 px de haut SANS grossir la
     pastille (pseudo-élément) — la ligne du nom ne bouge pas. */
  .zh-ppv-live {
    position: relative;
  }
  .zh-ppv-live::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 44px;
    margin-top: -22px;
  }
}