/* Fan Zone PRIVÉE — face publique (profil landing).

   Portage fidèle de `zic-profil-2.jsx` (composant `PrivateFace`) : avantages à
   gauche, carte tarifaire à droite, aperçu flouté sous les deux, et — une fois
   abonné — bandeau vert + grille de contenus exclusifs.

   Couleur de la face : #DB2777 (rose), portée par --fz-accent. Le CTA reprend
   le dégradé de la maquette (accent → #9333EA).

   Theme-aware : chaque valeur passe par `var(--pp-*, <valeur sombre d'origine>)`
   comme `landing-public-sondage.css`, de sorte que le fallback est exactement
   ce que rend le JSX en thème sombre.

   Mobile-first : deux colonnes seulement à partir de 900px — en deçà, la carte
   tarifaire passe SOUS les avantages (et non l'inverse : sur mobile on veut
   d'abord comprendre ce qu'on achète). */

.zh-fz-root {
  --fz-accent: #DB2777;
  --fz-accent-2: #9333EA;
  --fz-accent-soft: rgba(219, 39, 119, .09);
  --fz-ok: #22C55E;

  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 4px 6px;
  box-sizing: border-box;
}
/* ⚠️ Le sélecteur ci-dessous contient un ID : sans une spécificité au moins
   égale, `[hidden]` perdrait et la face resterait affichée sur TOUS les autres
   onglets (public-profile.js se contente de poser la propriété `hidden`). */
.zh-ppf-body > #zh-fanzone-private-root[hidden],
.zh-fz-root[hidden] { display: none; }
/* Le shell du profil ne pose pas de box-sizing global : on le scope ici. */
.zh-fz-root *,
.zh-fz-root *::before,
.zh-fz-root *::after { box-sizing: border-box; }
/* ⚠️ Même piège que ci-dessus, en pire car silencieux : `[hidden]` vient de la
   feuille UA (`display:none`) et perd contre TOUT sélecteur de classe posant un
   `display` explicite. Sans cette règle, `.zh-fz-checkout { display:flex }`
   afficherait « Confirmation de ton abonnement… » à chaque chargement, alors
   que le JS ne l'a jamais dévoilé. Le JS ne pilote que la propriété `hidden` :
   c'est donc ici que ça se joue, une fois pour toute la face. */
.zh-fz-root [hidden] { display: none !important; }

.zh-fz-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── En-tête de face ─────────────────────────────────────────────────── */
.zh-fz-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 8px;
}
.zh-fz-title {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .3px;
  color: var(--pp-text, #FAFAFB);
}
.zh-fz-sep { color: var(--pp-text-soft, rgba(250, 250, 251, .42)); }
.zh-fz-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}

/* ── Zone défilante ──────────────────────────────────────────────────── */
.zh-fz-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px 20px;
  -webkit-overflow-scrolling: touch;
}

/* Estompage pendant l'hydratation : un abonné ne doit pas voir défiler
   l'argumentaire de vente de ce qu'il a déjà payé. */
.zh-fz-root[data-fz-hydrating="1"] [data-zh-fz-offer] {
  opacity: .45;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* ── Bandeau de confirmation Stripe ──────────────────────────────────── */
.zh-fz-checkout {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-radius: 13px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--fz-accent-soft);
  border: 1px solid rgba(219, 39, 119, .38);
  color: var(--pp-text, #FAFAFB);
}
.zh-fz-checkout[data-state="ok"] {
  background: rgba(34, 197, 94, .13);
  border-color: rgba(34, 197, 94, .4);
}
.zh-fz-checkout[data-state="warn"],
.zh-fz-checkout[data-state="off"] {
  background: var(--pp-bg-soft, #140924);
  border-color: var(--pp-border, rgba(168, 85, 247, .18));
}
.zh-fz-checkout-spin {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: var(--fz-accent);
  animation: zh-fz-spin .7s linear infinite;
}
.zh-fz-checkout[data-state="ok"] .zh-fz-checkout-spin,
.zh-fz-checkout[data-state="warn"] .zh-fz-checkout-spin,
.zh-fz-checkout[data-state="off"] .zh-fz-checkout-spin { display: none; }
@keyframes zh-fz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .zh-fz-checkout-spin { animation: none; }
}

/* ── Deux colonnes : avantages | tarif ───────────────────────────────── */
.zh-fz-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (min-width: 900px) {
  .zh-fz-cols { grid-template-columns: 1.1fr 1fr; gap: 18px; }
  /* `sticky` seulement en deux colonnes : empilé, il collerait la carte
     tarifaire par-dessus les avantages pendant le défilement. */
  .zh-fz-pricing { position: sticky; top: 8px; }
}

.zh-fz-block-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--pp-text, #FAFAFB);
  margin-bottom: 12px;
}

/* ── Colonne avantages ───────────────────────────────────────────────── */
.zh-fz-perks {
  background: var(--pp-card, #1A0E2E);
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
  border-radius: 16px;
  padding: 18px 20px;
}
.zh-fz-perk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.zh-fz-perk { display: flex; gap: 12px; align-items: flex-start; }
.zh-fz-perk-ic {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fz-accent-soft);
  color: var(--fz-accent);
}
.zh-fz-perk-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zh-fz-perk-t { font-size: 13.5px; font-weight: 700; color: var(--pp-text, #FAFAFB); }
.zh-fz-perk-d { font-size: 12px; line-height: 1.45; color: var(--pp-text-muted, rgba(250, 250, 251, .62)); }
.zh-fz-perk-empty,
.zh-fz-offer-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}
.zh-fz-offer-desc {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
}

/* ── Colonne tarif ───────────────────────────────────────────────────── */
.zh-fz-pricing {
  background: var(--pp-card, #1A0E2E);
  border: 2px solid var(--fz-accent);
  border-radius: 16px;
  padding: 20px 20px 22px;
}
.zh-fz-billing {
  display: flex;
  gap: 2px;
  background: var(--pp-bg-soft, #140924);
  border-radius: 11px;
  padding: 4px;
  margin-bottom: 18px;
}
.zh-fz-bill {
  flex: 1;
  padding: 9px 6px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  background: transparent;
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
  transition: background .15s ease, color .15s ease;
  /* Cible tactile : 44px minimum, sinon la bascule est ratée au pouce. */
  min-height: 40px;
}
.zh-fz-bill.is-active { background: var(--fz-accent); color: #fff; }
.zh-fz-bill:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }
.zh-fz-save {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(34, 197, 94, .18);
  color: #16A34A;
}
.zh-fz-bill.is-active .zh-fz-save { background: rgba(255, 255, 255, .25); color: #fff; }

.zh-fz-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 2px; flex-wrap: wrap; }
.zh-fz-price {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--pp-text, #FAFAFB);
}
.zh-fz-price-unit { font-size: 14px; font-weight: 600; color: var(--pp-text-muted, rgba(250, 250, 251, .62)); }
.zh-fz-price-note { font-size: 11.5px; margin-bottom: 16px; color: var(--pp-text-muted, rgba(250, 250, 251, .62)); }

.zh-fz-cta {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--fz-accent), var(--fz-accent-2));
  box-shadow: 0 10px 24px rgba(219, 39, 119, .33);
  transition: transform .12s ease, box-shadow .12s ease;
}
.zh-fz-cta:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(219, 39, 119, .42); }
.zh-fz-cta:active { transform: translateY(0); }
.zh-fz-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zh-fz-cta[aria-busy="true"] { opacity: .72; cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .zh-fz-cta, .zh-fz-cta:hover { transform: none; transition: none; }
}
.zh-fz-unavailable {
  margin: 0;
  padding: 13px;
  border-radius: 12px;
  text-align: center;
  font-size: 12.5px;
  background: var(--pp-bg-soft, #140924);
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}
.zh-fz-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  color: var(--pp-text-soft, rgba(250, 250, 251, .42));
}
.zh-fz-secure svg { flex: 0 0 auto; }

/* ── Aperçu flouté (non-abonnés) ─────────────────────────────────────── */
.zh-fz-teaser { margin-top: 22px; }
.zh-fz-locked-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
}
.zh-fz-locked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  padding: 16px;
  /* Le flou est décoratif : le fil verrouillé ne contient AUCUN média privé
     (16 clés, jamais `media`). Ce n'est pas lui qui protège le contenu. */
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}
@media (min-width: 700px) {
  .zh-fz-locked-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.zh-fz-locked-tile {
  display: block;
  height: 130px;
  border-radius: 12px;
  background-image: linear-gradient(135deg, var(--fz-h1, #DB2777), var(--fz-h2, #9333EA));
  background-size: cover;
  background-position: center;
}
@media (min-width: 700px) { .zh-fz-locked-tile { height: 150px; } }
/* Dégradés déterministes — mêmes couples que FANZONE_PRIVATE_THEMES côté
   Python et JS, indexés par POSITION pour qu'une tuile ne change jamais de
   couleur quand le JS remplace le SSR. */
.zh-fz-locked-tile[data-theme-index="0"] { --fz-h1: #DB2777; --fz-h2: #9333EA; }
.zh-fz-locked-tile[data-theme-index="1"] { --fz-h1: #9333EA; --fz-h2: #4F46E5; }
.zh-fz-locked-tile[data-theme-index="2"] { --fz-h1: #EC4899; --fz-h2: #7B3FF2; }
.zh-fz-locked-tile[data-theme-index="3"] { --fz-h1: #7B3FF2; --fz-h2: #DB2777; }
.zh-fz-locked-tile[data-theme-index="4"] { --fz-h1: #F97316; --fz-h2: #DB2777; }
.zh-fz-locked-tile[data-theme-index="5"] { --fz-h1: #4F46E5; --fz-h2: #EC4899; }

.zh-fz-locked-over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  background: rgba(5, 2, 12, .5);
}
.zh-fz-locked-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  text-wrap: balance;
}
.zh-fz-locked-sub { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.zh-fz-teaser-empty {
  margin: 22px 0 0;
  padding: 22px 16px;
  border-radius: 16px;
  text-align: center;
  font-size: 12.5px;
  background: var(--pp-bg-soft, #140924);
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}

/* ── État abonné ─────────────────────────────────────────────────────── */
.zh-fz-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-radius: 13px;
  margin-bottom: 16px;
  background: rgba(34, 197, 94, .13);
  border: 1px solid rgba(34, 197, 94, .4);
  flex-wrap: wrap;
}
.zh-fz-banner-ic { font-size: 20px; color: var(--fz-ok); line-height: 1; }
.zh-fz-banner-txt { flex: 1 1 190px; min-width: 0; }
.zh-fz-banner-t {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--pp-text, #FAFAFB);
}
.zh-fz-banner-d { font-size: 12px; margin-top: 1px; color: var(--pp-text-muted, rgba(250, 250, 251, .62)); }
.zh-fz-manage {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  background: var(--pp-bg-soft, #140924);
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}
.zh-fz-manage:hover { color: var(--pp-text, #FAFAFB); border-color: var(--fz-accent); }
.zh-fz-manage:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }

.zh-fz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
@media (min-width: 700px) {
  .zh-fz-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}
.zh-fz-card {
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  padding: 0;
  cursor: pointer;
  background: var(--pp-bg-soft, #140924);
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
  transition: border-color .15s ease, transform .12s ease;
}
.zh-fz-card:hover { border-color: var(--fz-accent); transform: translateY(-2px); }
.zh-fz-card:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .zh-fz-card, .zh-fz-card:hover { transform: none; transition: none; }
}
/* ⚠️ `display:block` obligatoire : la carte est un <button> et ses enfants sont
   des <span> (un <div> dans un <button> est du HTML invalide). Sans ça ils
   restent `inline`, `height` est ignorée et la vignette s'effondre à 0. */
.zh-fz-card-cover,
.zh-fz-card-body { display: block; }
.zh-fz-card-cover {
  position: relative;
  height: 130px;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(135deg, var(--fz-h1, #DB2777), var(--fz-h2, #9333EA));
}
@media (min-width: 700px) { .zh-fz-card-cover { height: 150px; } }
.zh-fz-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zh-fz-card-play span {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 16px;
}
.zh-fz-card-wip {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(5, 2, 12, .72);
  color: #fff;
}
.zh-fz-card-body { padding: 12px 14px; }
.zh-fz-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pp-text, #FAFAFB);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zh-fz-card-meta {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}
.zh-fz-card-when { margin-left: auto; }

.zh-fz-more,
.zh-fz-retry {
  margin: 16px auto 0;
  display: block;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12.5px;
  background: var(--pp-bg-soft, #140924);
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
  color: var(--pp-text, #FAFAFB);
}
.zh-fz-more:hover,
.zh-fz-retry:hover { border-color: var(--fz-accent); }
.zh-fz-grid-empty,
.zh-fz-failed {
  padding: 22px 16px;
  border-radius: 14px;
  text-align: center;
  font-size: 12.5px;
  background: var(--pp-bg-soft, #140924);
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}
.zh-fz-failed .zh-fz-retry { margin-top: 12px; }

/* ── Toasts ──────────────────────────────────────────────────────────── */
.zh-fz-toasts {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(92%, 420px);
}
.zh-fz-toast {
  padding: 10px 16px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  background: rgba(5, 2, 12, .92);
  border: 1px solid var(--pp-border-strong, rgba(168, 85, 247, .4));
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.zh-fz-toast[data-kind="error"] { border-color: rgba(239, 68, 68, .55); }
.zh-fz-toast[data-kind="ok"] { border-color: rgba(34, 197, 94, .5); }

/* ── Modale de lecture ───────────────────────────────────────────────── */
.zh-fz-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 2, 12, .68);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.zh-fz-modal-wrap[hidden] { display: none; }
.zh-fz-modal {
  position: relative;
  width: 640px;
  max-width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 18px;
  background: var(--pp-card, #1A0E2E);
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.zh-fz-modal-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  background: rgba(5, 2, 12, .66);
  color: #fff;
}
.zh-fz-modal-close:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }
.zh-fz-modal-media { background: #05020C; }
.zh-fz-modal-media img,
.zh-fz-modal-media video {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: #05020C;
}
.zh-fz-modal-body { padding: 16px 18px 20px; }
.zh-fz-modal-wip {
  padding: 44px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}
.zh-fz-modal-title {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--pp-text, #FAFAFB);
}
.zh-fz-modal-desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}
.zh-fz-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
}
.zh-fz-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 40px de haut : cible tactile confortable, la principale de la modale. */
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  background: var(--pp-bg-soft, #140924);
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
  transition: color .15s ease, border-color .15s ease;
}
.zh-fz-like.is-on { color: var(--fz-accent); border-color: var(--fz-accent); }
.zh-fz-like:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }
.zh-fz-modal-views { margin-left: auto; font-size: 12px; color: var(--pp-text-soft, rgba(250, 250, 251, .42)); }

.zh-fz-comments-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--pp-text, #FAFAFB);
}
.zh-fz-comments-list { display: flex; flex-direction: column; gap: 12px; }
.zh-fz-comment { display: flex; flex-direction: column; gap: 3px; }
.zh-fz-comment-head { display: flex; align-items: baseline; gap: 8px; }
.zh-fz-comment-author { font-size: 12.5px; font-weight: 700; color: var(--pp-text, #FAFAFB); }
.zh-fz-comment-when { font-size: 11px; color: var(--pp-text-soft, rgba(250, 250, 251, .42)); }
.zh-fz-comment-text {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--pp-text-muted, rgba(250, 250, 251, .62));
}
.zh-fz-comments-empty { font-size: 12.5px; color: var(--pp-text-soft, rgba(250, 250, 251, .42)); }
.zh-fz-comment-form { display: flex; gap: 8px; margin-top: 14px; }
.zh-fz-comment-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--pp-bg-soft, #140924);
  border: 1px solid var(--pp-border, rgba(168, 85, 247, .18));
  color: var(--pp-text, #FAFAFB);
}
.zh-fz-comment-input:focus { outline: none; border-color: var(--fz-accent); }
.zh-fz-comment-send {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--fz-accent), var(--fz-accent-2));
}
.zh-fz-comment-send[aria-busy="true"] { opacity: .7; cursor: progress; }
.zh-fz-comment-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Sous 768 px, `.zh-ppf-body` passe en `overflow:visible` (landing-public-feed.css)
   et c'est la PAGE qui défile : la dernière rangée de cartes se retrouve alors
   sous les boutons flottants (FAB « + » centré + FAB chat), qui sont en
   `position:fixed`. On leur réserve la place. */
@media (max-width: 768px) {
  .zh-fz-scroll { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 560px) {
  .zh-fz-root { padding: 12px 2px 4px; }
  .zh-fz-scroll { padding: 4px 6px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .zh-fz-perks, .zh-fz-pricing { padding: 16px; }
  .zh-fz-price { font-size: 32px; }
  .zh-fz-modal-wrap { padding: 0; align-items: flex-end; }
  .zh-fz-modal { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; }
}