/* ============================================================================
   Faces de la page vitrine — adaptation à une page qui DÉFILE (lot L5 de la
   refonte du 23 oct 2026).

   Chargée en DERNIER dans le <head> de artist_public_stub.html. Sélecteurs à
   double classe (.zh-ppf-body.zh-ppf-body--page …) : ils l'emportent sur les
   feuilles des faces sans les toucher (landing-public-feed.css,
   -sondage, -fanzone-private, -wallstreet… restent figées par leurs tests).

   - Racines des faces : hauteur NATURELLE (plus de « height:100% » ni de
     défilement interne hérités de l'ancienne carte bornée à l'écran), sauf
     le Sondage (fil « story » en scroll-snap : hauteur explicite).
   - Réseaux / Fan Zone : grille de 2, 3 puis 4 colonnes (720 / 1024 px),
     vignettes 1:1 (16:9 pour YouTube), « Voir plus » par lots de 12.
   - Actus / Label / Albums : 1, 2 puis 3 colonnes (600 / 1024 px), lots de 9.
   - En-tête de face [data-pp-face-head] : nom, compteur, « Suivre sur X »,
     « Rejoindre la Fan Zone », « ← Boutique » (public-profile.js).

   ⚠️ Jamais sur .zh-pp-page, main, .zh-ppf--page, .zh-ppf-body--page ni leurs
   ancêtres : overflow ≠ visible (sauf overflow-x: clip), transform, filter,
   backdrop-filter, contain, container-type, isolation, z-index — l'en-tête
   et les onglets décrocheraient, la modale Fan Zone privée, les modales
   airdrop et les toasts seraient piégés. Apparitions en opacité seule.
   ========================================================================== */

/* ─── Socle : racines en hauteur naturelle ──────────────────────────────
   Boutique, Airdrop, ZIC Live : landing-public-feed.css les bornait à la
   carte (height:100% + overflow-y:auto) — sur une page qui défile, ce
   serait un second ascenseur. */
.zh-ppf-body.zh-ppf-body--page > #zh-shop-root,
.zh-ppf-body.zh-ppf-body--page > #zh-airdrop-root,
.zh-ppf-body.zh-ppf-body--page > #zh-live-root {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
}

/* `[hidden]` l'emporte toujours (classes de ce fichier qui posent un
   `display`, et le compteur de l'en-tête, en inline-flex dans le fil). */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-id[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-actions[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-join-ic[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-meta[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-grid[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-more[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-card[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-card-img[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-card-quote[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-card-badge-txt[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-article[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-album[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-ppf-cover-img[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-live-skel[hidden],
.zh-ppf-body.zh-ppf-body--page .zh-live-skel-card[hidden] {
  display: none !important;
}

/* ─── En-tête de face ───────────────────────────────────────────────────
   ≥ 720 px : une ligne (pastille · nom · compteur, actions à droite).
   < 720 px : deux lignes, actions pleine largeur (≥ 44 px), nom tronqué. */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead {
  --zh-ppf-face-ink: var(--zh-ppf-tab-color, #a855f7);
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 18px;
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-id {
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-dot {
  background: var(--zh-ppf-face-ink, #a855f7);
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-name {
  flex: 0 1 auto;
  min-width: 0;
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-meta {
  flex-shrink: 0;
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

/* « Rejoindre la Fan Zone » ⇄ « ✓ Dans la Fan Zone » (contour une fois
   suivi, comme Suivre / ✓ Suivi). */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-join-ic {
  display: none;
  font-weight: 800;
  line-height: 1;
}
.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-join.is-following {
  background: var(--pp-card, #1a0e2e);
  border-color: var(--pp-line, rgba(168, 85, 247, 0.18));
  color: var(--pp-ink, #fafafb);
}
.zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-join.is-following .zh-ppf-facehead-join-ic {
  display: inline;
}

/* Pastille en thème clair : couleur d'onglet assombrie (oklab 75 % + noir,
   comme les onglets) → ≥ 3:1 sur le fond, vert WhatsApp et jaune compris.
   Sous @supports : sans color-mix, la pastille garde la couleur brute. */
@supports (color: color-mix(in oklab, red 50%, black)) {
  :root[data-pp-theme="light"] .zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead {
    --zh-ppf-face-ink: color-mix(in oklab, var(--zh-ppf-tab-color, #a855f7) 75%, #000);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-pp-theme]) .zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead {
      --zh-ppf-face-ink: color-mix(in oklab, var(--zh-ppf-tab-color, #a855f7) 75%, #000);
    }
  }
}

@media (max-width: 719px) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-actions {
    flex-wrap: nowrap;
    width: 100%;
  }
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-actions > .zh-pp-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
  }
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-actions > .zh-ppf-facehead-back {
    flex: 0 0 auto;
  }
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-facehead-actions > .zh-pp-btn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ─── Réseaux sociaux et Fan Zone : grille verticale ────────────────────
   Plus de carrousel horizontal : la molette fait défiler la PAGE. */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  height: auto;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

/* Face construite en JS (SSR visible, encore vide) : deux rangées
   réservées — pas de saut de mise en page à l'arrivée des cartes. */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-grid:empty {
  min-height: 360px;
}

@media (min-width: 720px) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1024px) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-grid:empty {
    min-height: 560px;
  }
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-card {
  flex: none;
  width: auto;
  min-width: 0;
  scroll-snap-align: none;
  transform: none;
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-card-media {
  flex: none;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-grid[data-provider="youtube"] .zh-ppf-card-media {
  aspect-ratio: 16 / 9;
}

/* Vignette : vraie <img> paresseuse (sous le voile ::after et les badges). */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Post texte (sans image) : le texte tient lieu de vignette. */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-card.is-text .zh-ppf-card-media {
  align-items: center;
  padding: 40px 14px 14px;
  background-color: var(--pp-card-light, #231340);
}
@supports (background-color: color-mix(in srgb, red 50%, blue)) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-card.is-text .zh-ppf-card-media {
    background-color: color-mix(in srgb, var(--zh-ppf-tab-color, #a855f7) 14%, var(--pp-card, #1a0e2e));
  }
}
.zh-ppf-body.zh-ppf-body--page .zh-ppf-card.is-text .zh-ppf-card-media::after {
  display: none;
}
.zh-ppf-body.zh-ppf-body--page .zh-ppf-card-quote {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pp-ink, #fafafb);
  overflow-wrap: anywhere;
}

/* Téléphone (2 colonnes, ~165 px) : pastille du réseau sans son nom — il
   heurtait la date, et l'en-tête de face le porte déjà. */
@media (max-width: 479px) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-card-badge:not(.is-text-only) {
    gap: 0;
    padding: 3px;
  }
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-card-badge:not(.is-text-only) .zh-ppf-card-badge-txt {
    display: none;
  }
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-card-foot {
    padding: 9px 11px;
  }
}

/* ─── Actus, Label, MultiAlbum+ : 1, 2 puis 3 colonnes ──────────────────
   (2 colonnes dès 600 px seulement : le pied d'une carte porte 3 boutons.) */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-grid.is-articles,
.zh-ppf-body.zh-ppf-body--page .zh-ppf-grid.is-albums {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

@media (min-width: 600px) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-grid.is-articles,
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-grid.is-albums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-grid.is-articles,
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-grid.is-albums {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-article,
.zh-ppf-body.zh-ppf-body--page .zh-ppf-album {
  flex: none;
  width: auto;
  min-width: 0;
  height: auto;
  align-self: stretch;
  scroll-snap-align: none;
  transform: none;
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-article-cover,
.zh-ppf-body.zh-ppf-body--page .zh-ppf-album-cover {
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* Couverture : vraie <img> paresseuse (sous le badge et le voile). */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Extrait limité à 4 lignes ; pied qui passe à la ligne plutôt que de
   déborder sur 2 colonnes étroites. */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-article-excerpt {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.zh-ppf-body.zh-ppf-body--page .zh-ppf-article-foot {
  flex-wrap: wrap;
  margin-top: auto;
}

/* Contrastes ≥ 4,5:1 dans les deux thèmes : « Lire → » / « Ouvrir
   l'album → » en accent TEXTE (nuance 700 en clair, public-profile-page.css)
   au lieu de l'accent brut (#a855f7 ≈ 4:1 sur blanc) ; date d'album en
   texte atténué du thème (55 % d'opacité ≈ 4,4:1 sur blanc). */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-article-read {
  color: var(--pp-accent-text, #a855f7);
}
.zh-ppf-body.zh-ppf-body--page .zh-ppf-album-meta {
  color: var(--zh-ppf-text-muted, rgba(250, 250, 251, 0.62));
}

/* Bandeau producteur (Label) : la gouttière vient du panneau. */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-label-head {
  padding: 0 0 14px;
}

/* Modales article / album en plein écran mobile : hauteur dynamique (barre
   d'URL iOS), `vh` en repli. Elles vivent sur <body>, hors du panneau. */
@media (max-width: 768px) {
  body.zh-public-profile-page .zh-ppf-amodal-panel {
    max-height: 100vh;
    max-height: 100dvh;
  }
}
@media (max-width: 480px) {
  body.zh-public-profile-page .zh-ppf-almodal-panel {
    max-height: 100vh;
    max-height: 100dvh;
  }
}

/* ─── Cartes : survol, focus ────────────────────────────────────────────
   Soulèvement seulement sur les appareils qui survolent, mouvement permis. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-card:hover,
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-article:hover,
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-album:hover {
    transform: translateY(-2px);
  }
}

.zh-ppf-body.zh-ppf-body--page .zh-ppf-card:focus-visible,
.zh-ppf-body.zh-ppf-body--page .zh-ppf-article:focus-visible,
.zh-ppf-body.zh-ppf-body--page .zh-ppf-album:focus-visible {
  outline: 2px solid var(--pp-accent-text, #a78bfa);
  outline-offset: 2px;
}

/* ─── « Voir plus » ─────────────────────────────────────────────────── */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-more {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 180px;
  margin: 20px auto 0;
}

/* ─── État vide : hauteur naturelle ─────────────────────────────────── */
.zh-ppf-body.zh-ppf-body--page .zh-ppf-empty {
  height: auto;
  min-height: 360px;
  padding: 24px 0;
}

@media (max-width: 768px) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-empty {
    min-height: 320px;
    padding: 20px 0;
  }
}

/* ─── ZIC Live : grille fluide + squelette ──────────────────────────────
   1, 2 puis 3 colonnes ; le squelette (SSR, face courante) tient la place
   jusqu'au rendu de landing-public-live.js. */
.zh-ppf-body.zh-ppf-body--page .zh-live-feed,
.zh-ppf-body.zh-ppf-body--page .zh-live-skel {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.zh-ppf-body.zh-ppf-body--page .zh-live-skel {
  display: grid;
  gap: 18px;
  min-height: 320px;
}

.zh-ppf-body.zh-ppf-body--page .zh-live-skel-card {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  border: 1px solid var(--pp-line, rgba(168, 85, 247, 0.18));
  background: var(--pp-card-light, #231340);
  animation: zh-ppf-skel-pulse 1.4s ease-in-out infinite;
}

@media (max-width: 1023px) {
  .zh-ppf-body.zh-ppf-body--page .zh-live-skel-card:last-child {
    display: none;
  }
}

@media (max-width: 719px) {
  .zh-ppf-body.zh-ppf-body--page .zh-live-skel-card + .zh-live-skel-card {
    display: none;
  }
}

@keyframes zh-ppf-skel-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* ─── ZIC Pronos : grille fluide, sans défilement interne ───────────────
   1 colonne au téléphone, 2 sur tablette et à 1024 px, 3 dès 1280 px. */
.zh-ppf-body.zh-ppf-body--page > #zh-pronos-root {
  flex: none;
  min-height: 0;
  padding: 0;
}

.zh-ppf-body.zh-ppf-body--page .zh-pronos-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  overflow: visible;
  padding: 2px 0 8px;
}

/* ─── ZIC Sondage : fil « story » à hauteur explicite ───────────────────
   Le scroll-snap, l'avance automatique et le lien profond (scrollToCard)
   exigent une hauteur : le « téléphone » tient entier sous l'en-tête et les
   onglets collés. Repli px, puis vh, puis dvh (barre d'URL iOS). */
.zh-ppf-body.zh-ppf-body--page > #zh-sondage-root {
  height: 620px;
  height: clamp(460px, calc(100vh - var(--pp-sticky-h, 116px) - 24px), 760px);
  height: clamp(460px, calc(100dvh - var(--pp-sticky-h, 116px) - 24px), 760px);
  padding: 0 0 4px;
}

/* En fin de fil, le geste suivant fait défiler la PAGE (avis, pied) : sinon
   le téléphone, pleine largeur sur mobile, retiendrait l'utilisateur. */
.zh-ppf-body.zh-ppf-body--page .zh-sd-feed {
  overscroll-behavior-y: auto;
}

/* ─── Fan Zone privée : hauteur naturelle, tarif collant, toasts fixes ──
   La feuille et le JS de la face ne changent pas. La racine ne coupe plus
   (overflow visible) : sinon le tarif collerait à la racine, pas à la
   fenêtre. */
.zh-ppf-body.zh-ppf-body--page > #zh-fanzone-private-root {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 0;
}

.zh-ppf-body.zh-ppf-body--page .zh-fz-scroll {
  overflow: visible;
  padding: 0 0 16px;
}

/* Deux colonnes : la carte tarifaire colle SOUS l'en-tête et les onglets. */
@media (min-width: 900px) {
  .zh-ppf-body.zh-ppf-body--page .zh-fz-pricing {
    top: calc(var(--pp-sticky-h, 116px) + 12px);
  }
}

/* Toasts : `absolute` dans une racine désormais aussi haute que son
   contenu, ils s'affichaient hors écran → fixes, au-dessus de la page. */
.zh-ppf-body.zh-ppf-body--page .zh-fz-toasts {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 2300;
}

/* ─── ZIC Wall Street : SURCHARGES uniquement ───────────────────────────
   Le bloc de base de landing-public-wallstreet.css est figé par
   test_wallstreet_face_css (racine en conteneur de requêtes). Son
   `container-type` contient aussi les `fixed` : le toast passe donc en
   `sticky` (collé au bas de la fenêtre tant que la face est à l'écran),
   apparition en opacité seule. */
.zh-ppf-body.zh-ppf-body--page > #zh-wallstreet-root {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.zh-ppf-body.zh-ppf-body--page .zh-ws-scroll {
  overflow: visible;
  padding: 2px 0 24px;
}

.zh-ppf-body.zh-ppf-body--page .zh-ws-toast {
  position: sticky;
  left: auto;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  align-self: center;
  margin: -44px auto 8px;
  transform: none;
  animation: zh-ppf-ws-toast-in 0.2s ease-out;
}

@keyframes zh-ppf-ws-toast-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .zh-ppf-body.zh-ppf-body--page .zh-ws-scroll {
    padding: 0 0 16px;
  }
}

/* ─── Lightbox : plus d'en-tête fixe à éviter ───────────────────────────
   (z 110 > en-tête 70) : boutons au bord haut, sous l'encoche. */
@media (max-width: 768px) {
  body.zh-public-profile-page .zh-ppl-close,
  body.zh-public-profile-page .zh-ppl-audio {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
  }
}

/* ─── Cibles tactiles ≥ 44 px ─────────────────────────────────────────── */
@media (pointer: coarse) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-article-action,
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-article-read {
    min-height: 44px;
  }
  body.zh-public-profile-page .zh-ppl-close,
  body.zh-public-profile-page .zh-ppl-audio {
    width: 44px;
    height: 44px;
  }
}

/* ─── Mouvement réduit ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-card,
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-article,
  .zh-ppf-body.zh-ppf-body--page .zh-ppf-album {
    transition: none;
  }
  .zh-ppf-body.zh-ppf-body--page .zh-live-skel-card,
  .zh-ppf-body.zh-ppf-body--page .zh-ws-toast {
    animation: none;
  }
}