/* ═══════════════════════════════════════════════════════════════════════════
   SMYLE PLAY — Page Artiste Publique
   Sprint C · Design premium cohérent WATT · Mobile-first
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ap-bg:      #070608;
  --ap-panel:   rgba(14, 12, 18, .96);
  --ap-gold:    #FFD700;
  --ap-gold-2:  #FFC107;
  --ap-deep:    #FF9500;
  --ap-border:  rgba(255, 215, 0, .1);
  --ap-border2: rgba(255, 215, 0, .06);
  --ap-text:    rgba(232, 228, 240, .9);
  --ap-dim:     rgba(255, 255, 255, .25);
  --ap-topbar:  54px;

  /* ── Chantier 1.2 — Couleur de marque artiste ─────────────────────────────
     Surchargées dynamiquement par artiste.js depuis artist.brandColor.
     Fallback = or SMYLE PLAY, cohérent avec l'UI historique.
     --brand     : couleur hex (#RRGGBB)
     --brand-rgb : triplet r,g,b pour composer des rgba() dans les bordures
                   et halos sans recalculer côté CSS.
     ───────────────────────────────────────────────────────────────────── */
  --brand:      #FFD700;
  --brand-rgb:  255, 215, 0;

  /* ── Chantier "Profil artiste type" (migration 0017) ──────────────────────
     --bg = fond de page, surchargé dynamiquement par artiste.js depuis
     artist.profileBgColor. Null côté DB = pas de perso → on retombe sur
     le noir WATT par défaut (#070608). */
  --bg: #070608;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }

/* ─── États de chargement / erreur (V1) ──────────────────────────────────
   Centrés dans la page, sous la topbar. Spinner simple pour loading,
   panneau sobre pour l'erreur. Pas de styles exubérants : on veut juste
   que l'user voie immédiatement que quelque chose se passe (ou qu'un
   problème existe) au lieu d'un écran blanc. */
.ap-loading,
.ap-error {
  max-width: 480px;
  margin: 64px auto;
  padding: 32px 24px;
  text-align: center;
  color: rgba(232, 228, 240, .85);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.ap-loading p {
  margin-top: 14px;
  color: rgba(200, 196, 216, .72);
  font-size: 14px;
}

.ap-loading-spinner {
  width: 34px; height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2.5px solid rgba(var(--brand-rgb, 136, 0, 255), .22);
  border-top-color: var(--brand, #8800FF);
  animation: apSpin 0.85s linear infinite;
}

@keyframes apSpin { to { transform: rotate(360deg); } }

.ap-error h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(232, 228, 240, .95);
}

.ap-error p {
  color: rgba(200, 196, 216, .72);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 22px;
}

.ap-error .ap-nf-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(var(--brand-rgb, 136, 0, 255), .12);
  border: 1px solid rgba(var(--brand-rgb, 136, 0, 255), .28);
  color: rgba(232, 228, 240, .9);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease;
}

.ap-error .ap-nf-btn:hover {
  background: rgba(var(--brand-rgb, 136, 0, 255), .22);
}

/* ═══ Chantier "Profil artiste type" — CTA "profil vierge" ════════════════
   Bandeau affiché uniquement à l'owner tant que son profil n'est pas
   publié / pas rempli. Le visiteur lambda reçoit un 404 côté API et ne
   voit jamais ce bloc. Style : carte large en haut du main, teintée
   --brand, lisse mais avec un halo néon pour rester D.A WATT. */
.ap-empty-cta {
  max-width: 980px;
  margin: 28px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.ap-empty-cta-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(var(--brand-rgb), .14) 0%,
      rgba(var(--brand-rgb), .06) 55%,
      rgba(10, 8, 18, .78) 100%
    );
  border: 1px solid rgba(var(--brand-rgb), .32);
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb), .08),
    0 10px 32px rgba(0, 0, 0, .45),
    0 0 28px rgba(var(--brand-rgb), .18);
  backdrop-filter: blur(6px);
}
.ap-empty-cta-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand, #FFD700);
  background: rgba(var(--brand-rgb), .12);
  border: 1px solid rgba(var(--brand-rgb), .32);
  box-shadow: inset 0 0 10px rgba(var(--brand-rgb), .22);
}
.ap-empty-cta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.ap-empty-cta-text strong {
  font-size: 14px;
  font-weight: 700;
  color: rgba(245, 242, 252, .96);
  letter-spacing: .01em;
}
.ap-empty-cta-text span {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(200, 196, 216, .75);
}
.ap-empty-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0a0012;
  background: linear-gradient(
    135deg,
    var(--brand, #FFD700) 0%,
    rgba(var(--brand-rgb), .78) 100%
  );
  border: 1px solid rgba(var(--brand-rgb), .65);
  box-shadow:
    0 2px 14px rgba(var(--brand-rgb), .35),
    0 0 24px rgba(var(--brand-rgb), .18);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.ap-empty-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 22px rgba(var(--brand-rgb), .5),
    0 0 36px rgba(var(--brand-rgb), .28);
}
.ap-empty-cta-btn span { font-size: 14px; }

@media (max-width: 720px) {
  .ap-empty-cta { margin-top: 18px; padding: 0 14px; }
  .ap-empty-cta-inner {
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 12px;
  }
  .ap-empty-cta-btn { width: 100%; justify-content: center; }
}

body {
  /* Halo ambient basé sur --brand-rgb pour teinter subtilement le haut de
     la page aux couleurs de l'artiste. Reste très discret (6-10% alpha)
     pour ne pas rendre le fond agressif, mais assez visible pour qu'on
     sente l'univers couleur en arrivant. Fallback = or SMYLE si pas de
     brand définie (cf. :root --brand-rgb).
     --bg (chantier 0017) = fond personnalisable par l'artiste ; par défaut
     noir WATT #070608. Les halos restent au-dessus pour garder l'ambiance. */
  background:
    radial-gradient(
      ellipse 110% 55% at 50% 0%,
      rgba(var(--brand-rgb), 0.10) 0%,
      rgba(var(--brand-rgb), 0.045) 35%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 80% 60% at 50% 100%,
      rgba(var(--brand-rgb), 0.05) 0%,
      transparent 70%
    ),
    var(--bg, var(--ap-bg));
  background-attachment: fixed;
  color: var(--ap-text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ═══ Texture néon WATT (D.A cohérente avec la home) ═══════════════════════
   3 couches superposées en position fixed pour survoler tout le contenu
   sans en affecter le flow :
     1. Grille cyber fine (lignes verticales + horizontales) teintée --brand.
     2. Scanline horizontale qui descend lentement (effet CRT subtil).
     3. Points scintillants type étoiles (cf. .card-night de la home).
   Tout ça à très faible opacité (4-8%) pour rester ambient, pas agressif.
   pointer-events:none garantit qu'aucun clic n'est intercepté. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Grille verticale */
    linear-gradient(to right,
      rgba(var(--brand-rgb), .06) 1px,
      transparent 1px),
    /* Grille horizontale */
    linear-gradient(to bottom,
      rgba(var(--brand-rgb), .06) 1px,
      transparent 1px),
    /* Points scintillants — pattern pseudo-aléatoire */
    radial-gradient(1px 1px at 12% 18%, rgba(var(--brand-rgb), .55) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 42%, rgba(var(--brand-rgb), .35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 63% 74%, rgba(var(--brand-rgb), .48) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 28%, rgba(var(--brand-rgb), .38) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 88%, rgba(var(--brand-rgb), .42) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 66%, rgba(var(--brand-rgb), .32) 0%, transparent 100%);
  background-size:
    64px 64px,
    64px 64px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  animation: apGridPulse 8s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: .8;
}

/* Scanline CRT : barre lumineuse qui traverse l'écran lentement. Teintée
   --brand pour rester dans l'univers couleur choisi par l'artiste. */
body::after {
  content: '';
  position: fixed;
  left: 0; right: 0;
  top: -20%;
  height: 30%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--brand-rgb), .04) 40%,
    rgba(var(--brand-rgb), .08) 50%,
    rgba(var(--brand-rgb), .04) 60%,
    transparent 100%
  );
  animation: apScanline 9s linear infinite;
}

@keyframes apGridPulse {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}
@keyframes apScanline {
  0%   { transform: translateY(-30vh); }
  100% { transform: translateY(130vh); }
}

/* On passe tout le contenu au-dessus des couches fixed de texture. */
.ap-topbar,
.ap-loading,
.ap-error,
.ap-profile { position: relative; z-index: 1; }
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }


/* ── TOPBAR ──────────────────────────────────────────────────────────────── */

.ap-topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  height: var(--ap-topbar);
  background: rgba(7, 6, 8, .93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 215, 0, .06);
}

.ap-topbar-logo {
  display: flex; align-items: center; gap: 10px;
  color: rgba(136, 0, 255, .65);
  font-size: 13px; font-weight: 900;
  letter-spacing: .35em; text-transform: uppercase;
  transition: color .2s;
}
.ap-topbar-logo:hover { color: #cc88ff; }

.ap-topbar-right { display: flex; align-items: center; gap: 10px; }

.ap-back-btn {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .28);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 6px 14px; border-radius: 2px;
  transition: color .2s, border-color .2s;
}
.ap-back-btn:hover { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.2); }

.ap-share-btn {
  display: flex; align-items: center; gap: 7px;
  background: none;
  border: 1px solid var(--ap-border);
  color: rgba(255, 215, 0, .55);
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 2px;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.ap-share-btn:hover { border-color: rgba(255,215,0,.4); color: var(--ap-gold); }


/* ── NOT FOUND ───────────────────────────────────────────────────────────── */

.ap-not-found {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--ap-topbar));
  padding: 40px 20px;
}
.ap-nf-inner { text-align: center; max-width: 420px; }
.ap-nf-icon { font-size: 52px; margin-bottom: 20px; opacity: .25; }
.ap-nf-inner h2 {
  font-size: 18px; font-weight: 900; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255, 215, 0, .55); margin-bottom: 12px;
}
.ap-nf-inner p {
  font-size: 12px; color: var(--ap-dim); letter-spacing: .06em;
  line-height: 1.7; margin-bottom: 28px;
}
.ap-nf-btn {
  display: inline-block; margin: 0 6px 10px;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.38); border: 1px solid rgba(255,255,255,.12);
  padding: 10px 20px; border-radius: 2px; transition: all .2s;
}
.ap-nf-btn:hover { color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.28); }
.ap-nf-btn-watt {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  background: var(--ap-gold); color: #000;
  padding: 10px 20px; border-radius: 2px; transition: filter .2s;
}
.ap-nf-btn-watt:hover { filter: brightness(1.1); }


/* ═══════════════════════════════════════════════════════════════════════════
   C3 v3 — REFONTE STRUCTURELLE PROFIL PUBLIC (spec C3 ① — 2026-06-13)
   ─────────────────────────────────────────────────────────────────────────
   Nouveau squelette : bannière NATIVE de flux (260px) + bloc identité
   strictement dessous sur fond page + relique ADN pleine largeur.
   Remplace (supprimés, pas overridés) :
     • l'ancien hack « cover peinte sur #ap-hero-bg inset:0 »
     • les règles mortes .ap-hero-cover (aucun élément ne portait la classe)
     • l'ancienne .ap-dna-card-* (case vente ADN)
   Contrat JS inchangé : #ap-hero-bg reçoit backgroundImage + .has-image,
   .ap-hero reçoit .ap-has-cover (cf. renderHeader, artiste.js).
   Couleurs : tokens C0 + teinte brand artiste (--brand / --brand-rgb posés
   par applyTheme). Violet relique : #7c5cff (spec C3, aligné sur le drawer
   d'achat C2 — pas d'équivalent rgba dans tokens.css, d'où la valeur fixe).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── C3 v3 · HERO : bannière native ─────────────────────────────────────── */

.ap-hero {
  position: relative;
}

/* Bannière dédiée — élément de flux, plus jamais un fond absolu sous le
   texte. Sans cover : dégradé discret à partir de la couleur de marque. */
.ap-hero-banner {
  position: relative;
  height: 260px;
  background:
    radial-gradient(ellipse 70% 120% at 18% 0%,
      rgba(var(--brand-rgb), .22) 0%,
      transparent 60%),
    linear-gradient(135deg,
      rgba(var(--brand-rgb), .14) 0%,
      rgba(124, 92, 255, .08) 55%,
      rgba(7, 6, 8, 0) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Le JS pose backgroundImage inline + .has-image quand coverPhotoUrl existe :
   l'image couvre alors la bannière (équivalent object-fit:cover). */
.ap-hero-banner.has-image {
  background-size: cover;
  background-position: center;
}
/* Fondu bas léger — simple raccord doux vers le fond de page. */
.ap-hero-banner::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 34%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(7, 6, 8, .4) 62%,
    var(--bg, #070608) 100%);
  pointer-events: none;
}

/* ── C3 v3 · Bloc identité — strictement sous la bannière, fond page ───── */

.ap-identity {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
}
.ap-identity-inner {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.ap-identity-info {
  flex: 1;
  min-width: 0;
  padding-top: 16px;
}

/* Avatar 96px à cheval sur le bas de la bannière, anneau 3px brand. */
.ap-avatar-wrap {
  flex-shrink: 0;
  text-align: center;
  margin-top: -48px;
  position: relative;
  z-index: 2;
}
.ap-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background:
    linear-gradient(135deg,
      var(--brand) 0%,
      rgba(var(--brand-rgb), .55) 60%,
      rgba(var(--brand-rgb), .25) 100%);
  border: 3px solid var(--brand, #8800FF);
  box-shadow:
    0 0 0 4px rgba(7, 6, 8, .85),
    0 0 28px rgba(var(--brand-rgb), .25);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  overflow: hidden;
  transition: box-shadow .35s, transform .35s;
}
.ap-avatar:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 4px rgba(7, 6, 8, .85),
    0 0 44px rgba(var(--brand-rgb), .38);
}
.ap-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Pilule palier (C0 badges.js) à côté du nom. */
.ap-palier-pill { display: inline-flex; align-items: center; }

/* ── C3 v3 · Stats compactes rattachées à l'identité ────────────────────── */

.ap-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 4px;
}
.ap-stat {
  padding: 12px 10px;
  border-radius: 10px;
  text-align: center;
  background: rgba(var(--brand-rgb), .04);
  border: 1px solid rgba(var(--brand-rgb), .16);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ap-stat:hover {
  border-color: rgba(var(--brand-rgb), .38);
  box-shadow: 0 0 18px rgba(var(--brand-rgb), .14);
}
.ap-stat-value {
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--brand, #FFD700);
  text-shadow: 0 0 8px rgba(var(--brand-rgb), .3);
  line-height: 1.05;
}
.ap-stat-label {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(200, 196, 216, .55);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ── C3 v3 · RELIQUE ADN — bannière pleine largeur ──────────────────────────
   L'objet le plus précieux de la page : bord 1px en dégradé brand → violet
   ADN (#7c5cff) avec lueur lente et discrète. États : --owned (bord doré,
   pas de bouton) · --empty (owner sans ADN, relique grisée incitative). */

/* C4 (2026-06-17) — Grille 2 colonnes : ADN Musique | ADN Visuel, côte à côte
   et COMPACTES. Empilées sur mobile. Les reliques compactes (.ap-relic--compact)
   remplissent leur colonne (largeur auto) au lieu d'être pleine largeur. */
.ap-relics-grid {
  max-width: 980px;
  margin: 26px auto 0;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 720px) {
  .ap-relics-grid { grid-template-columns: 1fr; }
}

.ap-relic {
  max-width: 980px;
  margin: 26px auto 0;
  padding: 0 32px;
}
/* Variante compacte (dans la grille) : pas de marge/padding/max-width propre,
   la colonne gère la largeur ; on réduit légèrement les paddings internes. */
.ap-relics-grid .ap-relic.ap-relic--compact {
  max-width: none;
  margin: 0;
  padding: 0;
}
.ap-relics-grid .ap-relic--compact .ap-relic-body { padding: 16px 18px; }
.ap-relics-grid .ap-relic--compact .ap-relic-icon { width: 38px; height: 38px; }
.ap-relics-grid .ap-relic--compact .ap-relic-title { font-size: 16px; }
/* Bord doré spécifique au génome visuel possédé reste géré par --owned.
   La relique visuelle réutilise tout le style relique (twin parfait). */
.ap-relic-frame {
  position: relative;
  border-radius: 16px;
  padding: 1px; /* épaisseur du bord dégradé */
  background: linear-gradient(120deg,
    rgba(var(--brand-rgb), .85) 0%,
    rgba(124, 92, 255, .75) 55%,
    rgba(var(--brand-rgb), .35) 100%);
  animation: apRelicGlow 7s ease-in-out infinite;
}
@keyframes apRelicGlow {
  0%, 100% {
    box-shadow:
      0 0 16px rgba(124, 92, 255, .14),
      0 0 32px rgba(var(--brand-rgb), .08);
  }
  50% {
    box-shadow:
      0 0 24px rgba(124, 92, 255, .26),
      0 0 46px rgba(var(--brand-rgb), .13);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ap-relic-frame { animation: none; }
}
.ap-relic-body {
  border-radius: 15px;
  padding: 20px 24px;
  background: linear-gradient(180deg,
    rgba(18, 14, 28, .98) 0%,
    rgba(9, 7, 14, .99) 100%);
}
.ap-relic-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ap-relic-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb), .35) 0%,
    rgba(124, 92, 255, .3) 100%);
  border: 1px solid rgba(124, 92, 255, .35);
}
.ap-relic-titles { flex: 1; min-width: 0; }
.ap-relic-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200, 196, 216, .5);
}
.ap-relic-title {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-relic-title span { color: var(--brand, #cc88ff); }
/* Édition #X/N en évidence (éditions limitées uniquement). */
.ap-relic-edition {
  flex-shrink: 0;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 14px rgba(124, 92, 255, .45);
}
.ap-relic-teaser {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}
.ap-relic-teaser:empty { display: none; }
.ap-relic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ap-relic-meta:empty { display: none; }
/* Badges meta (guide, exemples, IA, rareté) — rendus par renderDna. */
.ap-dna-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .1);
}
/* C3 ② — état épuisé tokenisé (remplace le SOLD OUT couleur en dur) */
.ap-dna-badge-soldout {
  font-weight: 700;
  color: var(--sp-danger, #ff5577);
  border-color: color-mix(in srgb, var(--sp-danger, #ff5577) 45%, transparent);
  background: color-mix(in srgb, var(--sp-danger, #ff5577) 10%, transparent);
}
.ap-relic-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.ap-relic-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.ap-relic-price > span:first-child {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ap-relic-price-unit {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(200, 196, 216, .55);
}
.ap-relic-unlock-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, .55);
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb), .85) 0%,
    #7c5cff 100%);
  cursor: pointer;
  box-shadow: 0 2px 16px rgba(124, 92, 255, .25);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.ap-relic-unlock-btn:hover {
  filter: brightness(1.12);
  box-shadow: 0 4px 22px rgba(124, 92, 255, .4);
  transform: translateY(-1px);
}
.ap-relic-unlock-btn:active { transform: scale(.97); }
.ap-relic-unlock-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ap-relic-perk {
  font-size: 11px;
  color: rgba(200, 196, 216, .5);
}

/* État possédé : bord doré, plus de bouton (caché par renderDna). */
.ap-relic--owned .ap-relic-frame {
  background: linear-gradient(120deg,
    var(--ap-gold) 0%,
    rgba(255, 215, 0, .45) 60%,
    rgba(255, 193, 7, .7) 100%);
  animation: none;
  box-shadow: 0 0 22px rgba(255, 215, 0, .16);
}
.ap-relic-owned {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ap-gold);
  letter-spacing: .03em;
}

/* État vide owner : relique grisée incitative (décision Tom 2026-06-12). */
.ap-relic--empty .ap-relic-frame {
  background: rgba(255, 255, 255, .12);
  animation: none;
  box-shadow: none;
}
.ap-relic--empty .ap-relic-body { filter: saturate(.35); }
.ap-relic--empty .ap-relic-icon {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .55);
}
.ap-relic-empty { margin-top: 12px; }
.ap-relic-empty-msg {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(200, 196, 216, .75);
}
.ap-relic-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a0012;
  background: linear-gradient(135deg, var(--ap-gold) 0%, var(--ap-gold-2) 100%);
  transition: filter .15s, transform .1s;
}
.ap-relic-empty-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── C3 v3 · Prise PLUG WATT (barre owner) ──────────────────────────────── */

.ap-owner-btn-plug {
  color: var(--ap-gold);
  border-color: rgba(255, 215, 0, .38);
  background: rgba(255, 215, 0, .07);
  text-decoration: none;
}
.ap-owner-btn-plug:hover {
  color: var(--ap-gold);
  border-color: rgba(255, 215, 0, .6);
  background: rgba(255, 215, 0, .14);
}

/* ── C3 v3 · Mobile (≤720px) : tout s'empile proprement ─────────────────── */

@media (max-width: 720px) {
  .ap-hero-banner { height: 180px; }
  .ap-identity { padding: 0 16px; }
  .ap-identity-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .ap-identity-info { padding-top: 0; }
  .ap-avatar-wrap { margin-top: -44px; }
  .ap-avatar { width: 88px; height: 88px; font-size: 32px; }
  .ap-name-adn-row { justify-content: center; }
  .ap-hero-meta { justify-content: center; }
  .ap-hero-bio-preview { margin-left: auto; margin-right: auto; }
  /* Actions sous la bio, en ligne centrée */
  .ap-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 0;
  }
  .ap-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 18px 0 4px;
  }
  /* Relique empilée */
  .ap-relic { padding: 0 14px; margin-top: 20px; }
  .ap-relic-body { padding: 16px 16px 18px; }
  .ap-relic-head { flex-wrap: wrap; gap: 10px; }
  .ap-relic-actions { gap: 10px; }
  .ap-relic-unlock-btn { width: 100%; justify-content: center; }
}

/* ═══ Fin section C3 v3 ══════════════════════════════════════════════════ */

/* ── Boutons Follow + Message dans le hero (droite, même hauteur que le nom) */
.ap-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 8px;
}

.ap-hero-action-btn {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}

.ap-hero-action-btn:active { transform: scale(0.96); }

/* Suivre · Message · Proposer un échange.
   Écriture = couleur plateforme (lisible, on distingue chaque mécanique) ;
   SEUL LE CONTOUR prend la couleur de marque du profil (--brand-rgb posé par
   applyTheme). Évite l'effet monochrome qui noierait les fonctions. */
.ap-follow-hero-btn,
.ap-message-hero-btn,
.ap-trade-hero-btn {
  background: rgba(255, 255, 255, .04);
  color: #cc88ff;
  border: 1px solid rgba(var(--brand-rgb, 136, 0, 255), .55);
}

.ap-follow-hero-btn:hover,
.ap-message-hero-btn:hover,
.ap-trade-hero-btn:hover {
  background: rgba(var(--brand-rgb, 136, 0, 255), .12);
}

.ap-hero-followers {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  text-align: right;
}

/* (C3 v3 : le passage en ligne des actions sur mobile est géré par le bloc
   @media ≤720px de la section C3 v3 — ancien bloc 640px supprimé.) */

/* Avatar — C3 v3 : styles déplacés dans la section C3 v3 en tête de fichier
   (96px, anneau 3px brand, chevauchement bannière -48px). */

.ap-watt-badge-wrap { margin-top: 10px; }
.ap-watt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 8px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 215, 0, .7);
  border: 1px solid rgba(255, 215, 0, .22);
  border-radius: 10px; padding: 4px 10px;
  background: rgba(255, 215, 0, .04);
  white-space: nowrap;
}

/* ── U8 — Bouton Écouter tout (sous l'avatar) ───────────────────────────── */
.ap-play-all-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .12);
  border: 1px solid rgba(var(--brand-rgb), .35);
  color: var(--brand, #cc88ff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
}
.ap-play-all-btn:hover {
  background: rgba(var(--brand-rgb), .22);
  transform: translateY(-1px);
}
.ap-play-all-btn:active { transform: scale(.96); }

/* ── U8 — Nom + chip ADN en ligne ──────────────────────────────────────── */
.ap-name-adn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Chip ADN carré dans le hero */
.ap-adn-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(204, 136, 255, .08);
  border: 1px solid rgba(204, 136, 255, .3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s, border-color .15s;
}
.ap-adn-chip:hover {
  background: rgba(204, 136, 255, .16);
  border-color: rgba(204, 136, 255, .55);
  transform: translateY(-1px);
}
.ap-adn-chip:active { transform: scale(.94); }
.ap-adn-chip-icon { font-size: 18px; line-height: 1; }
.ap-adn-chip-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(204, 136, 255, .9);
}
.ap-adn-chip-price {
  font-size: 8px;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
}

/* ── U8 — Bio preview dans le hero ─────────────────────────────────────── */
.ap-hero-bio-preview {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
  max-width: 480px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Info — C3 v3 : .ap-hero-info remplacé par .ap-identity-info (section C3 v3). */

.ap-artist-name {
  /* C3 v3 — gabarit identité : 32-36px (fini le nom géant 52px). */
  font-size: clamp(30px, 4vw, 36px);
  font-weight: 900; letter-spacing: .06em;
  /* C3 ① ter (retour QA Tom) — le dégradé blanc→brand coupait le nom en
     deux couleurs (« SMY » blanc / « LE » rouge) : illisible. Nom plein,
     la teinte brand vit dans le halo néon (drop-shadows ci-dessous). */
  color: rgba(245, 242, 252, .98);
  /* Flicker néon teinté --brand (D.A WATT, même logique que .logo-text /
     .hitmix-title sur la home). Le halo lumineux autour du nom respire par
     saccades pour rester dans l'univers "enseigne néon" de SMYLE PLAY.
     Le dégradé texte reste intact, on ne touche qu'au text-shadow via drop
     filter pour qu'il fonctionne avec background-clip:text. */
  filter:
    drop-shadow(0 0 6px  rgba(var(--brand-rgb), .55))
    drop-shadow(0 0 18px rgba(var(--brand-rgb), .28))
    drop-shadow(0 0 42px rgba(var(--brand-rgb), .14));
  animation: apNeonName 4.2s infinite;
  line-height: 1.1; margin-bottom: 12px;
  word-break: break-word;
}

/* Flicker néon : 2 micro-coupures par cycle (à 18-20% et 51-53%) pour
   imiter l'effet d'enseigne qui saccade — exactement le timing utilisé
   sur .logo-text de la home (keyframes neon-v). On garde les valeurs
   proches pour que la sensation visuelle soit identique. */
@keyframes apNeonName {
  0%, 17%, 19%, 21%, 50%, 52%, 100% {
    filter:
      drop-shadow(0 0 6px  rgba(var(--brand-rgb), .55))
      drop-shadow(0 0 18px rgba(var(--brand-rgb), .28))
      drop-shadow(0 0 42px rgba(var(--brand-rgb), .14));
    opacity: 1;
  }
  18%, 51% {
    filter: none;
    opacity: .75;
  }
  20% {
    filter: drop-shadow(0 0 3px rgba(var(--brand-rgb), .35));
    opacity: .9;
  }
}

/* Stats publiques — C3 v3 : tuiles compactes rattachées au bloc identité,
   styles dans la section C3 v3 en tête de fichier. */

/* Ligne méta : genre + ville + date d'arrivée. Flex row, chips alignées. */
.ap-hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.ap-hero-meta:empty { display: none; }

/* Le genre-tag reste "à la marque" (couleur artiste), c'est le chip principal. */
.ap-genre-tag {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(var(--brand-rgb), .72);
  border: 1px solid rgba(var(--brand-rgb), .28);
  background: rgba(var(--brand-rgb), .05);
  border-radius: 2px; padding: 4px 12px;
}

/* Chips secondaires : même gabarit, plus neutres, avec petite icône. */
.ap-meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .1em;
  color: rgba(200, 196, 216, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02);
  border-radius: 2px; padding: 4px 10px;
}
.ap-meta-chip:empty { display: none; }
.ap-meta-chip svg { flex-shrink: 0; opacity: .7; }

/* ──────────────────────────────────────────────────────────────────────
   Casquettes / rôles déclarés — chips dans le hero + popover multi-select

   Design : une rangée de petites chips au-dessus des meta genre/ville.
   Chaque chip = une casquette. Couleur d'accent = brand de l'utilisateur.
   Un bouton "+ Casquettes" (owner-editing uniquement) ouvre un popover
   avec 12 checkboxes. La chip "Sans casquette" n'apparaît que pour
   l'owner qui n'a encore rien coché.
   ────────────────────────────────────────────────────────────────── */
.ap-roles {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.ap-roles:empty { display: none; }

.ap-role-chip {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px;
  color: rgba(var(--brand-rgb), .85);
  border: 1px solid rgba(var(--brand-rgb), .32);
  background: rgba(var(--brand-rgb), .06);
}
.ap-role-chip-ghost {
  color: rgba(180, 175, 200, .55);
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02);
  font-style: italic; letter-spacing: .15em;
}

/* Bouton d'édition des rôles (mode owner-editing uniquement) */
.ap-roles-edit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .12em;
  padding: 4px 10px; border-radius: 2px;
  color: rgba(var(--brand-rgb), .85);
  border: 1px dashed rgba(var(--brand-rgb), .45);
  background: transparent; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ap-roles-edit-btn:hover {
  background: rgba(var(--brand-rgb), .08);
  border-style: solid;
}

/* Popover multi-select */
.ap-roles-picker {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
  padding: 20px;
}
.ap-roles-picker-inner {
  width: min(520px, 100%);
  max-height: 80vh; overflow-y: auto;
  background: #0f0d14;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  padding: 22px 22px 16px;
  color: rgba(240, 236, 255, .92);
}
.ap-roles-picker-title {
  font-size: 14px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  margin: 0 0 4px;
  color: rgba(var(--brand-rgb), .92);
}
.ap-roles-picker-hint {
  font-size: 11px; line-height: 1.5;
  color: rgba(200, 196, 216, .55);
  margin: 0 0 16px;
}
.ap-roles-picker-list {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 18px;
}
.ap-role-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .12s;
}
.ap-role-option:hover {
  background: rgba(255, 255, 255, .03);
}
.ap-role-option input[type="checkbox"] {
  margin-top: 3px;
  width: 14px; height: 14px;
  accent-color: rgb(var(--brand-rgb));
  flex-shrink: 0; cursor: pointer;
}
.ap-role-option-main {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.ap-role-option-label {
  font-size: 12px; font-weight: 600;
  color: rgba(240, 236, 255, .92);
  letter-spacing: .05em;
}
.ap-role-option-desc {
  font-size: 10px;
  color: rgba(200, 196, 216, .55);
  line-height: 1.4;
}
.ap-roles-picker-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}
.ap-roles-picker-btn {
  font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.ap-roles-picker-btn-cancel {
  background: transparent;
  color: rgba(200, 196, 216, .65);
  border-color: rgba(255, 255, 255, .08);
}
.ap-roles-picker-btn-cancel:hover {
  background: rgba(255, 255, 255, .04);
  color: rgba(240, 236, 255, .9);
}
.ap-roles-picker-btn-save {
  background: rgb(var(--brand-rgb));
  color: #fff;
  border-color: rgb(var(--brand-rgb));
}
.ap-roles-picker-btn-save:hover {
  filter: brightness(1.1);
}

.ap-bio {
  font-size: 13px; line-height: 1.85;
  color: rgba(200, 196, 216, .72); letter-spacing: .03em;
  max-width: 580px; margin-bottom: 22px;
}
.ap-bio:empty { display: none; }

/* Influences / inspirations — bloc facultatif avec label discret. */
.ap-influences {
  max-width: 580px;
  margin-bottom: 22px;
  padding-left: 14px;
  border-left: 2px solid rgba(var(--brand-rgb), .32);
}
.ap-influences-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(var(--brand-rgb), .55);
  margin-bottom: 6px;
}
.ap-influences-text {
  font-size: 12.5px; line-height: 1.75;
  color: rgba(200, 196, 216, .55); letter-spacing: .02em;
  font-style: italic;
}

/* Liens sociaux — ronds, icônes seules. S'adaptent à la couleur de marque
   au hover pour renforcer l'identité de l'artiste. */
.ap-socials { display: flex; flex-wrap: wrap; gap: 9px; }
.ap-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: rgba(200, 196, 216, .55);
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
  -webkit-tap-highlight-color: transparent;
}
.ap-social-link:hover {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), .55);
  background: rgba(var(--brand-rgb), .08);
  transform: translateY(-1px);
}
.ap-social-link svg { display: block; }


/* ── CHANTIER 1 — Bouton Follow / Unfollow ──────────────────────────────── */
.ap-follow-wrap {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}

.ap-follow-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 3px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.ap-follow-btn[disabled] { opacity: .55; cursor: wait; }

/* État "Suivre" — couleur de marque artiste */
.ap-follow-btn.ap-follow-follow {
  background: linear-gradient(135deg,
    var(--brand) 0%,
    rgba(var(--brand-rgb), .78) 100%);
  color: #0a0812;
  border: 1px solid rgba(var(--brand-rgb), .65);
  box-shadow: 0 2px 18px rgba(var(--brand-rgb), .22);
}
.ap-follow-btn.ap-follow-follow:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* État "Abonné" — outline discret + hover "Se désabonner" en rouge */
.ap-follow-btn.ap-follow-following {
  background: rgba(var(--brand-rgb), .08);
  color: rgba(var(--brand-rgb), .95);
  border: 1px solid rgba(var(--brand-rgb), .45);
}
.ap-follow-btn.ap-follow-following .ap-follow-lbl-hover { display: none; }
.ap-follow-btn.ap-follow-following:hover {
  background: rgba(255, 80, 80, .08);
  color: rgba(255, 140, 140, .95);
  border-color: rgba(255, 100, 100, .45);
}
.ap-follow-btn.ap-follow-following:hover .ap-follow-lbl-default { display: none; }
.ap-follow-btn.ap-follow-following:hover .ap-follow-lbl-hover { display: inline; }
.ap-follow-btn.ap-follow-following:hover svg { display: none; }

/* Prompt non-connecté */
.ap-follow-btn.ap-follow-login {
  background: transparent;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.18);
}
.ap-follow-btn.ap-follow-login:hover { color: #fff; border-color: rgba(255,255,255,.35); }

/* C'est mon propre profil */
.ap-follow-self {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(0, 220, 120, .08);
  border: 1px solid rgba(0, 220, 120, .28);
  color: #6be8a8;
  border-radius: 3px;
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  text-decoration: none;
  transition: all .18s;
}
.ap-follow-self:hover { background: rgba(0, 220, 120, .14); color: #8cf0bd; }


/* ── STATS BAR — supprimée (C3 v3) : .ap-stats-bar/.ap-stat-val/.ap-stat-lbl
   n'étaient référencées par aucun HTML/JS (sélecteurs morts) et la double
   définition de .ap-stat entrait en conflit avec les tuiles réelles. ──── */


/* ── MAIN 2-COL LAYOUT ───────────────────────────────────────────────────── */

.ap-main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  padding: 44px 48px 100px;
  max-width: 1080px;
  margin: 0 auto;
}


/* ── TRACKS (legacy 2-col) — SUPPRIMÉ (C3 ② 2026-06-13) ──────────────────
   L'ancien design « track rows » du layout 2 colonnes (ap-track-num,
   ap-track-eq, ap-tracks-header…) était mort depuis la refonte hero.
   Les nouvelles rows C3 ② vivent dans la section « Tracks rows » plus bas. */


/* ── ASIDE ───────────────────────────────────────────────────────────────── */

.ap-aside { display: flex; flex-direction: column; gap: 16px; }


/* ── MINI PLAYER ─────────────────────────────────────────────────────────── */

.ap-mini-player {
  background: var(--ap-panel);
  border: 1px solid rgba(255, 215, 0, .14);
  border-radius: 4px;
  padding: 18px 16px 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.amp-header { margin-bottom: 14px; }
.amp-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 8px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 215, 0, .45);
}

.amp-track {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.amp-cover {
  width: 46px; height: 46px; border-radius: 3px;
  background: rgba(255, 215, 0, .07);
  border: 1px solid rgba(255, 215, 0, .14);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 215, 0, .28);
  overflow: hidden;
}
.amp-cover img { width: 100%; height: 100%; object-fit: cover; }

.amp-info { flex: 1; min-width: 0; }
.amp-title {
  font-size: 12px; font-weight: 600;
  color: rgba(232, 228, 240, .92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .02em;
}
.amp-artist { font-size: 10px; color: rgba(255,215,0,.42); margin-top: 3px; }

.amp-progress-wrap {
  height: 3px; background: rgba(255,215,0,.1);
  border-radius: 2px; margin-bottom: 7px; cursor: pointer;
  position: relative; transition: height .15s;
  touch-action: manipulation;
}
.amp-progress-wrap:hover { height: 5px; }
.amp-progress-fill {
  height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(to right, var(--ap-gold-2), var(--ap-gold));
  transition: width .1s linear; pointer-events: none;
}

.amp-time-row {
  display: flex; justify-content: space-between; margin-bottom: 14px;
}
.amp-time {
  font-size: 9px; color: rgba(255,215,0,.3);
  font-variant-numeric: tabular-nums;
}

.amp-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.amp-btn {
  background: none; border: none;
  color: rgba(255, 215, 0, .5);
  padding: 7px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.amp-btn:hover { color: var(--ap-gold); background: rgba(255,215,0,.06); }
.amp-btn.amp-play {
  width: 46px; height: 46px;
  background: rgba(255, 215, 0, .1);
  border: 1px solid rgba(255, 215, 0, .28);
  color: var(--ap-gold);
}
.amp-btn.amp-play:hover { background: rgba(255,215,0,.22); }


/* ── SHARE CARD ──────────────────────────────────────────────────────────── */

.ap-share-card {
  background: var(--ap-panel);
  border: 1px solid var(--ap-border);
  border-radius: 4px; padding: 16px;
}
.ap-share-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,215,0,.45); margin-bottom: 12px;
}
.ap-share-url {
  font-size: 11px; color: rgba(255,255,255,.38);
  letter-spacing: .03em; line-height: 1.55;
  padding: 9px 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 3px; word-break: break-all;
  margin-bottom: 10px;
}
.ap-copy-btn {
  width: 100%;
  background: rgba(255,215,0,.09);
  border: 1px solid rgba(255,215,0,.22);
  color: rgba(255,215,0,.75);
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  padding: 10px; border-radius: 2px;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ap-copy-btn:hover { background: rgba(255,215,0,.18); color: var(--ap-gold); }
.ap-copy-btn.copied {
  background: rgba(74,222,128,.09);
  border-color: rgba(74,222,128,.3);
  color: #4ade80;
}


/* ── WATT RANK CARD ──────────────────────────────────────────────────────── */

.ap-rank-card {
  background: linear-gradient(135deg, rgba(255,215,0,.07), rgba(255,149,0,.03));
  border: 1px solid rgba(255,215,0,.16);
  border-radius: 4px; padding: 22px 16px;
  text-align: center;
}
.ap-rank-lbl {
  font-size: 8px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,215,0,.35); margin-bottom: 8px;
}
.ap-rank-num {
  font-size: 48px; font-weight: 900; color: var(--ap-gold);
  text-shadow: 0 0 22px rgba(255,215,0,.32);
  line-height: 1; margin-bottom: 7px;
}
.ap-rank-sub {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,215,0,.28); margin-bottom: 14px;
}
.ap-rank-link {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,215,0,.45); transition: color .2s;
}
.ap-rank-link:hover { color: var(--ap-gold); }


/* ── JOIN CTA ────────────────────────────────────────────────────────────── */

.ap-join-card {
  background: rgba(255,215,0,.03);
  border: 1px solid rgba(255,215,0,.09);
  border-radius: 4px; padding: 20px 16px;
  text-align: center;
}
.ap-join-text {
  font-size: 12px; font-weight: 600;
  color: rgba(255,215,0,.7); letter-spacing: .04em;
  line-height: 1.5; margin-bottom: 14px;
}
.ap-join-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ap-gold); color: #000; font-weight: 700;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  padding: 11px 22px; border-radius: 2px;
  transition: filter .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ap-join-btn:hover { filter: brightness(1.1); }


/* ── TOAST ───────────────────────────────────────────────────────────────── */

.ap-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: rgba(14,12,18,.97);
  border: 1px solid rgba(255,215,0,.2);
  color: rgba(255,215,0,.88);
  font-size: 11px; letter-spacing: .1em;
  padding: 10px 22px; border-radius: 3px;
  opacity: 0; pointer-events: none; z-index: 300;
  transition: opacity .22s, transform .22s;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.ap-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first
   860px · 640px · 390px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 860px : Tablette ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ap-topbar { padding: 0 20px; }
  .ap-hero { padding: 40px 24px 36px; }
  .ap-main {
    grid-template-columns: 1fr;
    padding: 32px 24px 60px;
    gap: 28px;
  }
  .ap-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .ap-mini-player { grid-column: 1 / -1; }
  .ap-rank-card { grid-column: span 1; }
}

/* ── 640px : Portrait standard ──────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Topbar */
  .ap-topbar { padding: 0 14px; height: 50px; --ap-topbar: 50px; }
  .ap-topbar-logo { font-size: 12px; letter-spacing: .22em; }
  .ap-back-btn { font-size: 8px; padding: 5px 10px; }
  .ap-share-btn span { display: none; }
  .ap-share-btn { padding: 7px 10px; }

  /* Hero / identité / stats : gérés par le bloc @media ≤720px de la
     section C3 v3 (anciennes règles .ap-hero-inner/.ap-hero-info/
     .ap-stat-val/.ap-stat-lbl supprimées — sélecteurs disparus). */
  .ap-artist-name { font-size: clamp(22px, 7.5vw, 32px); margin-bottom: 10px; }
  .ap-bio { font-size: 12px; max-width: 100%; }
  .ap-socials { justify-content: center; }

  /* Main */
  .ap-main { padding: 24px 16px 60px; gap: 22px; }
  .ap-aside { grid-template-columns: 1fr; }

  /* Track rows */
  .ap-track-row { padding: 10px 10px; gap: 10px; }
  .ap-track-cover { width: 36px; height: 36px; }
  .ap-track-name { font-size: 12px; }
}

/* ── 390px : iPhone 14/15 Pro ───────────────────────────────────────────── */
@media (max-width: 390px) {
  .ap-avatar { width: 76px; height: 76px; font-size: 28px; }
  .ap-avatar-wrap { margin-top: -38px; }
  .ap-artist-name { font-size: 22px; }
  .ap-main { padding: 18px 12px 50px; }
  .ap-rank-num { font-size: 38px; }
  .ap-track-row { padding: 9px 8px; gap: 8px; }
}


/* ── COLLAB CARD (aside) ──────────────────────────────────────────────────── */
.ap-collab-card {
  background:    rgba(255,215,0,.03);
  border:        1px solid rgba(255,215,0,.12);
  border-radius: 10px;
  padding:       20px 18px 18px;
}
.ap-collab-card-title {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:       rgba(255,215,0,.7);
  margin-bottom: 8px;
}
.ap-collab-card-sub {
  font-size:   12px;
  color:       rgba(255,245,200,.45);
  margin-bottom: 14px;
  line-height: 1.55;
}
.ap-collab-btn {
  width:         100%;
  padding:       11px 0;
  background:    rgba(255,215,0,.08);
  border:        1px solid rgba(255,215,0,.25);
  border-radius: 7px;
  color:         rgba(255,215,0,.9);
  font-size:     12px;
  font-weight:   700;
  letter-spacing:.06em;
  cursor:        pointer;
  transition:    background .18s, border-color .18s;
}
.ap-collab-btn:hover {
  background:    rgba(255,215,0,.14);
  border-color:  rgba(255,215,0,.45);
}

/* ── COLLAB MODAL ─────────────────────────────────────────────────────────── */
.ap-collab-modal {
  position:        fixed;
  inset:           0;
  background:      rgba(4,4,6,.78);
  backdrop-filter: blur(8px);
  z-index:         9000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
.ap-collab-modal-inner {
  background:    rgba(14,10,22,.97);
  border:        1px solid rgba(255,215,0,.15);
  border-radius: 14px;
  padding:       28px 24px 22px;
  max-width:     480px;
  width:         100%;
  position:      relative;
}
.ap-collab-modal-close {
  position:   absolute;
  top:        14px;
  right:      16px;
  background: none;
  border:     none;
  color:      rgba(255,245,200,.4);
  font-size:  16px;
  cursor:     pointer;
  padding:    4px 6px;
}
.ap-collab-modal-close:hover { color: rgba(255,245,200,.8); }
.ap-collab-modal-title {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   15px;
  font-weight: 700;
  color:       rgba(255,215,0,.9);
  margin-bottom: 10px;
}
.ap-collab-modal-sub {
  font-size:    12px;
  color:        rgba(255,245,200,.5);
  line-height:  1.6;
  margin-bottom: 16px;
}
.ap-collab-textarea {
  width:         100%;
  background:    rgba(255,255,255,.04);
  border:        1px solid rgba(255,215,0,.12);
  border-radius: 8px;
  color:         rgba(255,245,200,.9);
  font-size:     13px;
  font-family:   inherit;
  padding:       12px 14px;
  resize:        vertical;
  min-height:    110px;
  outline:       none;
  transition:    border-color .2s;
}
.ap-collab-textarea:focus { border-color: rgba(255,215,0,.35); }
.ap-collab-char-hint {
  font-size: 10px;
  color:     rgba(255,245,200,.3);
  text-align: right;
  margin-top: 4px;
  margin-bottom: 12px;
}
.ap-collab-status {
  font-size:    12px;
  min-height:   18px;
  margin-bottom: 12px;
}
.ap-collab-status.error   { color: #ff6b6b; }
.ap-collab-status.success { color: rgba(80,255,160,.85); }
.ap-collab-modal-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             10px;
}
.ap-collab-cancel {
  padding:    9px 16px;
  background: none;
  border:     1px solid rgba(255,245,200,.12);
  border-radius: 7px;
  color:      rgba(255,245,200,.5);
  font-size:  12px;
  cursor:     pointer;
}
.ap-collab-cancel:hover { border-color: rgba(255,245,200,.28); color: rgba(255,245,200,.75); }
.ap-collab-send {
  padding:       9px 20px;
  background:    rgba(255,215,0,.12);
  border:        1px solid rgba(255,215,0,.3);
  border-radius: 7px;
  color:         rgba(255,215,0,.95);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    background .18s;
}
.ap-collab-send:hover    { background: rgba(255,215,0,.2); }
.ap-collab-send:disabled { opacity: .5; cursor: not-allowed; }


/* ── MARKETPLACE — ADN + prompts IA débloquables ─────────────────────────── */

.ap-marketplace-section {
  --ap-brand: #FFD700;      /* override dynamique depuis JS avec la brand color */
  margin-top: 28px;
}

/* Carte ADN */
.ap-adn-card {
  position: relative;
  padding: 18px 18px 16px;
  margin-top: 14px;
  margin-bottom: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)),
    rgba(18, 16, 24, .9);
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid var(--ap-brand);
  border-radius: 12px;
  overflow: hidden;
}
.ap-adn-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    120% 70% at 0% 0%,
    color-mix(in srgb, var(--ap-brand) 14%, transparent) 0%,
    transparent 55%
  );
  pointer-events: none;
}
.ap-adn-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
  position: relative;
}
.ap-adn-badge {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ap-brand);
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--ap-brand) 42%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--ap-brand) 8%, transparent);
  font-weight: 700;
}
.ap-adn-price {
  font-size: 12px; font-weight: 800;
  color: var(--ap-gold);
  letter-spacing: .04em;
}
.ap-adn-title {
  font-size: 15px; font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  position: relative;
}
.ap-adn-desc {
  font-size: 12px; line-height: 1.55;
  color: rgba(232, 228, 240, .72);
  margin-bottom: 12px;
  position: relative;
}
.ap-adn-perk {
  font-size: 10.5px; letter-spacing: .02em;
  color: rgba(255, 215, 0, .85);
  padding: 8px 11px;
  background: rgba(255, 215, 0, .05);
  border: 1px solid rgba(255, 215, 0, .14);
  border-radius: 8px;
  margin-bottom: 14px;
  position: relative;
}
.ap-adn-perk strong { color: var(--ap-gold); }

/* Bouton unlock */
.ap-unlock-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  color: #0a0812;
  background: linear-gradient(180deg, var(--ap-gold) 0%, var(--ap-gold-2) 100%);
  border: 1px solid rgba(255, 215, 0, .55);
  border-radius: 9px;
  cursor: pointer;
  transition: transform .14s, box-shadow .2s, filter .2s;
  box-shadow: 0 2px 12px rgba(255, 215, 0, .18);
}
.ap-unlock-btn:hover   { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 4px 18px rgba(255, 215, 0, .28); }
.ap-unlock-btn:active  { transform: translateY(0); }
.ap-unlock-btn:disabled,
.ap-unlock-btn.owned {
  background: rgba(0, 230, 118, .14);
  color: #9AF0B9;
  border-color: rgba(0, 230, 118, .3);
  box-shadow: none;
  cursor: default;
}
.ap-unlock-btn strong { font-weight: 900; }
.ap-price-strike {
  text-decoration: line-through;
  opacity: .55;
  margin-right: 6px;
  font-weight: 600;
}
.ap-unlock-btn-adn { margin-top: 2px; }

/* Grille de prompts */
.ap-prompts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.ap-prompt-card {
  padding: 13px 13px 12px;
  background: rgba(14, 12, 18, .86);
  border: 1px solid var(--ap-border2);
  border-radius: 10px;
  display: flex; flex-direction: column;
  gap: 8px;
  transition: border-color .18s, transform .14s;
}
.ap-prompt-card:hover { border-color: var(--ap-border); transform: translateY(-1px); }

.ap-prompt-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px;
}
.ap-prompt-title {
  font-size: 12.5px; font-weight: 800;
  color: #fff;
  line-height: 1.3;
  letter-spacing: .01em;
  flex: 1;
}
.ap-prompt-lyrics-badge {
  flex-shrink: 0;
  font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(170, 0, 255, .9);
  padding: 3px 7px;
  border: 1px solid rgba(170, 0, 255, .35);
  border-radius: 12px;
  background: rgba(170, 0, 255, .08);
  font-weight: 700;
}
.ap-prompt-desc {
  font-size: 10.5px; line-height: 1.5;
  color: rgba(232, 228, 240, .55);
  min-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ap-prompt-card .ap-unlock-btn {
  padding: 9px 12px;
  font-size: 11px;
  margin-top: auto;
}

/* Empty state marketplace */
.ap-mkt-empty {
  padding: 22px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
  border: 1px dashed rgba(255, 255, 255, .08);
  border-radius: 10px;
}

/* Mobile */
@media (max-width: 640px) {
  .ap-prompts-grid { grid-template-columns: 1fr; }
  .ap-adn-card { padding: 15px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHANTIER 1.2 — Section "Abonnés" (mini-cartes)
   Remonte jusqu'à 6 abonnés récents (via followersSample de l'API).
   Chaque carte clique vers /artiste/<slug> de l'abonné, en reprenant sa
   propre brand_color pour l'avatar — effet "réseau créatif" visible.
   ═══════════════════════════════════════════════════════════════════════════ */
.ap-followers-section { margin-top: 32px; }

.ap-followers-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ap-follower-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 14px 10px 12px;
  background: rgba(14, 12, 18, .86);
  border: 1px solid rgba(var(--brand-rgb), .1);
  border-radius: 10px;
  text-align: center;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  color: inherit; /* <a> désactive le underline dans le parent déjà */
}
.ap-follower-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-rgb), .28);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
}

.ap-follower-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  /* Chaque abonné prend SA propre couleur, fournie en inline style.
     On garde un fallback doré pour les profils sans brandColor. */
  background: var(--f-brand, var(--ap-gold));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  border: 1.5px solid rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .2);
}

.ap-follower-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(232, 228, 240, .86);
  letter-spacing: .02em;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.ap-followers-more {
  align-self: center;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--brand-rgb), .6);
  padding: 12px 14px;
  border: 1px dashed rgba(var(--brand-rgb), .22);
  border-radius: 10px;
  background: rgba(var(--brand-rgb), .03);
}

.ap-followers-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, .32);
  letter-spacing: .04em;
  border: 1px dashed rgba(255, 255, 255, .06);
  border-radius: 10px;
}

@media (max-width: 640px) {
  .ap-followers-row { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .ap-follower-avatar { width: 38px; height: 38px; font-size: 15px; }
  .ap-follower-name { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHANTIER "PROFIL ARTISTE TYPE" — Actualités + Événements
   Deux sections parallèles, même gabarit visuel :
   - .ap-posts-list  : feed de publications (texte + image + track partagée)
   - .ap-events-list : liste de dates à venir
   Chaque section a son empty state dédié (.ap-*-empty), affiché tant que la
   liste est vide. Le JS masque l'empty state dès qu'un item est rendu.
   ═══════════════════════════════════════════════════════════════════════════ */

.ap-posts-section,
.ap-events-section { margin-top: 36px; }

.ap-posts-list,
.ap-events-list {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 16px;
}

/* Carte de post — look "feed" avec bordure discrète et hover subtil */
.ap-post-card {
  padding: 18px 20px;
  background: rgba(14, 12, 18, .86);
  border: 1px solid rgba(var(--brand-rgb), .1);
  border-radius: 12px;
  transition: border-color .2s, transform .2s;
}
.ap-post-card:hover {
  border-color: rgba(var(--brand-rgb), .22);
  transform: translateY(-1px);
}
.ap-post-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.ap-post-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), rgba(var(--brand-rgb), .4));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  overflow: hidden;
  flex-shrink: 0;
}
.ap-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ap-post-meta { display: flex; flex-direction: column; min-width: 0; }
.ap-post-author {
  font-size: 12px; font-weight: 700;
  color: rgba(232, 228, 240, .88);
  letter-spacing: .02em;
}
.ap-post-date {
  font-size: 10px; color: rgba(255, 255, 255, .32);
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: 2px;
}
.ap-post-body {
  font-size: 13px; line-height: 1.7;
  color: rgba(200, 196, 216, .82);
  letter-spacing: .02em;
  white-space: pre-wrap;
  word-break: break-word;
}
.ap-post-image {
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  max-height: 420px;
}
.ap-post-image img { width: 100%; height: 100%; object-fit: cover; }

/* Carte d'événement — layout type billetterie : date à gauche, détails à droite */
.ap-event-card {
  display: flex; gap: 16px; align-items: center;
  padding: 14px 18px;
  background: rgba(14, 12, 18, .86);
  border: 1px solid rgba(var(--brand-rgb), .1);
  border-radius: 12px;
  transition: border-color .2s, transform .2s;
}
.ap-event-card:hover {
  border-color: rgba(var(--brand-rgb), .28);
  transform: translateY(-1px);
}
.ap-event-date {
  flex-shrink: 0;
  width: 58px; text-align: center;
  padding: 8px 0;
  border-radius: 8px;
  background: rgba(var(--brand-rgb), .08);
  border: 1px solid rgba(var(--brand-rgb), .22);
}
.ap-event-day {
  font-size: 22px; font-weight: 900;
  color: var(--brand);
  line-height: 1;
}
.ap-event-month {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(var(--brand-rgb), .72);
  margin-top: 3px;
}
.ap-event-info { flex: 1; min-width: 0; }
.ap-event-title {
  font-size: 13.5px; font-weight: 700;
  color: rgba(232, 228, 240, .92);
  letter-spacing: .02em;
  margin-bottom: 4px;
  word-break: break-word;
}
.ap-event-loc {
  font-size: 11px;
  color: rgba(200, 196, 216, .5);
  letter-spacing: .04em;
  display: flex; align-items: center; gap: 5px;
}
.ap-event-loc svg { opacity: .6; flex-shrink: 0; }
.ap-event-cta {
  flex-shrink: 0;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: rgba(var(--brand-rgb), .72);
  border: 1px solid rgba(var(--brand-rgb), .28);
  background: rgba(var(--brand-rgb), .05);
  border-radius: 2px; padding: 7px 14px;
  transition: all .2s;
}
.ap-event-cta:hover {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), .55);
  background: rgba(var(--brand-rgb), .1);
}

/* Empty states — même gabarit pour actus + events. */
.ap-posts-empty,
.ap-events-empty {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 22px;
  background: rgba(14, 12, 18, .55);
  border: 1px dashed rgba(255, 255, 255, .08);
  border-radius: 12px;
  margin-top: 16px;
}
.ap-empty-icon {
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(var(--brand-rgb), .42);
  background: rgba(var(--brand-rgb), .05);
  border: 1px solid rgba(var(--brand-rgb), .14);
}
.ap-empty-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-empty-text strong {
  font-size: 12.5px; font-weight: 700;
  color: rgba(232, 228, 240, .72);
  letter-spacing: .06em;
}
.ap-empty-text span {
  font-size: 11.5px; line-height: 1.5;
  color: rgba(200, 196, 216, .42);
  letter-spacing: .02em;
}

@media (max-width: 640px) {
  .ap-event-card { flex-wrap: wrap; gap: 12px; }
  .ap-event-cta { width: 100%; text-align: center; }
  .ap-posts-empty,
  .ap-events-empty { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANNIÈRE "PREVIEW" + PLACEHOLDERS
   ───────────────────────────────────────────────────────────────────────────
   Affichée uniquement quand l'utilisateur consulte sa propre page ET que
   son profil n'est pas encore publié sur la vitrine WATT. Elle sert trois
   objectifs :
     1. Rassurer — personne d'autre ne voit cette page tant qu'elle n'est
        pas publiée (pas besoin qu'elle soit "parfaite" pour exister).
     2. Inciter — un CTA direct vers /dashboard pour compléter le profil.
     3. Donner la logique de publication — on explique pourquoi la page
        est privée et ce qu'il faut faire pour la rendre publique.

   Les placeholders (.ap-placeholder) remplacent les champs vides dans
   le hero et les sections : ils montrent à l'artiste quoi remplir sans
   afficher de "vide" brut. Texte italique + gris doux.
   ═══════════════════════════════════════════════════════════════════════ */

.ap-preview-banner {
  position: sticky;
  top: 56px;                      /* Juste sous la topbar partagée (.stb-root min-height 56px) */
  z-index: 50;
  margin: 0 auto;
  padding: 10px 18px;
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb, 136, 0, 255), .18) 0%,
    rgba(var(--brand-rgb, 136, 0, 255), .08) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--brand-rgb, 136, 0, 255), .28);
  animation: apPreviewFadeIn .4s ease;
}

@keyframes apPreviewFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ap-preview-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ap-preview-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(var(--brand-rgb, 136, 0, 255), .22);
  color: var(--brand, #8800FF);
}

.ap-preview-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}

.ap-preview-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(235, 232, 245, .96);
  letter-spacing: .01em;
}

.ap-preview-text span {
  font-size: 12px;
  color: rgba(200, 196, 216, .72);
}

.ap-preview-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--brand, #8800FF);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(var(--brand-rgb, 136, 0, 255), .35);
  transition: transform .16s ease, box-shadow .16s ease;
}

.ap-preview-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--brand-rgb, 136, 0, 255), .48);
}

.ap-preview-cta svg { flex-shrink: 0; }

@media (max-width: 640px) {
  .ap-preview-banner { padding: 10px 14px; top: 48px; }
  .ap-preview-inner  { flex-wrap: wrap; gap: 10px; }
  .ap-preview-icon   { width: 28px; height: 28px; }
  .ap-preview-text   { flex: 1 1 calc(100% - 44px); }
  .ap-preview-cta    { width: 100%; justify-content: center; padding: 10px; }
}

/* ── Placeholders (champs vides affichés en italique gris) ─────────────── */

.ap-placeholder {
  color: rgba(200, 196, 216, .42) !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: 0;
}

/* Le nom d'artiste en placeholder garde sa taille originale mais passe
   en italique grisé : donne un "wireframe" propre. */
.ap-artist-name.ap-placeholder {
  opacity: .7;
}

/* Chips meta (genre / ville / depuis) en placeholder : bordure fantôme. */
.ap-meta-chip.ap-placeholder {
  background: transparent;
  border: 1px dashed rgba(var(--brand-rgb, 136, 0, 255), .28);
  color: rgba(200, 196, 216, .42);
  cursor: default;
}

.ap-meta-chip.ap-placeholder svg { opacity: .5; }

/* Bloc bio en placeholder : fond atténué, pas de bordure dure. */
.ap-bio.ap-placeholder {
  color: rgba(200, 196, 216, .48);
  font-style: italic;
  font-size: 14px;
}

/* Socials désactivés : même layout mais grisés + curseur "not-allowed". */
.ap-social-link.ap-disabled {
  pointer-events: none;
  opacity: .35;
  filter: grayscale(1);
}

/* C3 ① — règle morte .ap-preview-cover/.ap-hero-cover supprimée (aucune
   référence HTML/JS — vestige de l'ancien hero). */

/* ═══════════════════════════════════════════════════════════════════════════
   MODE SQUELETTE — profil non publié
   ─────────────────────────────────────────────────────────────────────────
   Quand le profil n'a pas été publié depuis le dashboard, la page affiche
   uniquement l'architecture (hero + stats) avec placeholders floutés, et
   une notice centrale qui pousse à finaliser la publication.
   Classe `.ap-skeleton` appliquée sur <body> par artiste.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Notice centrale "Remplissez votre WATT BOARD" ────────────────────── */
.ap-publish-notice {
  max-width: 720px;
  margin: 32px auto 24px;
  padding: 0 18px;
  animation: apPubNoticeIn .5s cubic-bezier(.22, 1, .36, 1);
}

@keyframes apPubNoticeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ap-publish-notice-inner {
  position: relative;
  text-align: center;
  padding: 34px 28px 30px;
  background:
    radial-gradient(ellipse at top,
      rgba(var(--brand-rgb, 136, 0, 255), .22) 0%,
      rgba(var(--brand-rgb, 136, 0, 255), .06) 55%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(14, 10, 24, .92) 0%,
      rgba(10, 7, 20, .96) 100%);
  border: 1px solid rgba(var(--brand-rgb, 136, 0, 255), .32);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb, 136, 0, 255), .08),
    0 18px 50px rgba(0, 0, 0, .55),
    0 0 36px rgba(var(--brand-rgb, 136, 0, 255), .18) inset;
  overflow: hidden;
}

.ap-publish-notice-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 23px,
    rgba(var(--brand-rgb, 136, 0, 255), .04) 23px 24px
  );
  pointer-events: none;
  opacity: .6;
}

.ap-publish-notice-icon {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--brand-rgb, 136, 0, 255), .18);
  border: 1px solid rgba(var(--brand-rgb, 136, 0, 255), .4);
  color: var(--brand, #8800FF);
  box-shadow: 0 0 24px rgba(var(--brand-rgb, 136, 0, 255), .35);
  position: relative;
  z-index: 1;
}

.ap-publish-notice-title {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}

.ap-publish-notice-msg {
  position: relative;
  z-index: 1;
  margin: 0 auto 20px;
  max-width: 480px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(230, 226, 248, .82);
}

.ap-publish-notice-msg strong {
  color: var(--brand, #8800FF);
  font-weight: 700;
  letter-spacing: .03em;
}

.ap-publish-notice-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg,
    rgba(var(--brand-rgb, 136, 0, 255), .85) 0%,
    rgba(var(--brand-rgb, 136, 0, 255), .65) 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  border: 1px solid rgba(var(--brand-rgb, 136, 0, 255), .6);
  box-shadow:
    0 6px 18px rgba(var(--brand-rgb, 136, 0, 255), .38),
    0 0 14px rgba(var(--brand-rgb, 136, 0, 255), .25) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ap-publish-notice-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow:
    0 10px 24px rgba(var(--brand-rgb, 136, 0, 255), .5),
    0 0 18px rgba(var(--brand-rgb, 136, 0, 255), .35) inset;
}

.ap-publish-notice-btn span { font-size: 15px; }

@media (max-width: 600px) {
  .ap-publish-notice { margin: 22px auto 18px; padding: 0 12px; }
  .ap-publish-notice-inner { padding: 26px 18px 24px; }
  .ap-publish-notice-title { font-size: 17px; }
  .ap-publish-notice-msg { font-size: 13.5px; }
  .ap-publish-notice-btn { width: 100%; justify-content: center; padding: 12px; }
}

/* ── Architecture en mode squelette (body.ap-skeleton) ────────────────── */

/* Avatar ghost : icône utilisateur neutre au lieu d'initiale ou image. */
.ap-avatar.ap-avatar-ghost {
  background:
    radial-gradient(circle at 30% 25%,
      rgba(var(--brand-rgb, 136, 0, 255), .28) 0%,
      rgba(20, 16, 32, .95) 72%);
  color: rgba(var(--brand-rgb, 136, 0, 255), .75);
  border: 1px dashed rgba(var(--brand-rgb, 136, 0, 255), .4);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* En mode squelette, on floute/atténue les infos pour montrer la structure
   sans leaker de données. Les stats sont forcées visibles pour exhiber
   l'architecture complète (même si trackCount=0). */
body.ap-skeleton .ap-artist-name {
  color: rgba(230, 226, 248, .45);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.01em;
}

body.ap-skeleton .ap-bio {
  color: rgba(200, 196, 216, .4);
  font-style: italic;
}

body.ap-skeleton .ap-stats {
  display: grid !important;
  opacity: .55;
  filter: saturate(.4);
  pointer-events: none;
}

body.ap-skeleton .ap-stat-value {
  color: rgba(var(--brand-rgb, 136, 0, 255), .55);
  font-style: italic;
}

body.ap-skeleton .ap-stat-label {
  color: rgba(200, 196, 216, .5);
}

/* Hero légèrement assourdi pour donner le ton "preview/wireframe".
   (C3 v3 : cible la bannière native .ap-hero-banner.) */
body.ap-skeleton .ap-hero-banner {
  opacity: .35;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODE OWNER — Page unifiée /artiste/<slug>
   (création + édition + vue fan en un seul écran)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Barre sticky owner (sous la topbar) ─────────────────────────────────── */
.ap-owner-bar {
  position: sticky;
  top: 56px;          /* sous la topbar */
  z-index: 50;
  padding: 10px 28px;
  background: linear-gradient(180deg, rgba(14,12,18,.96), rgba(14,12,18,.82));
  border-bottom: 1px solid rgba(136,0,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ap-owner-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.ap-owner-bar-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .02em;
  color: rgba(230,226,248,.82);
}
.ap-owner-bar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand, #8800FF);
  box-shadow: 0 0 10px rgba(var(--brand-rgb, 136,0,255), .6);
  animation: apOwnerPulse 2s ease-in-out infinite;
}
.ap-owner-bar.ap-owner-edit .ap-owner-bar-dot {
  background: #ffd700;
  box-shadow: 0 0 10px rgba(255,215,0,.55);
}
.ap-owner-bar.ap-owner-draft .ap-owner-bar-dot {
  background: rgba(255,255,255,.25);
  box-shadow: none;
  animation: none;
}
@keyframes apOwnerPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.ap-owner-bar-label { font-weight: 500; }

.ap-owner-bar-actions {
  display: inline-flex; gap: 8px; align-items: center;
}
.ap-owner-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 3px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(230,226,248,.88);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.ap-owner-btn:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.ap-owner-btn:active { transform: translateY(1px); }
.ap-owner-btn.is-active {
  background: rgba(255,215,0,.12);
  border-color: rgba(255,215,0,.35);
  color: #ffd700;
}
.ap-owner-btn-publish {
  background: var(--brand, #8800FF);
  border-color: transparent;
  color: #fff;
}
.ap-owner-btn-publish:hover {
  filter: brightness(1.1);
  background: var(--brand, #8800FF);
  color: #fff;
}
.ap-owner-btn-publish.is-disabled,
.ap-owner-btn-publish[disabled] {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.35);
  cursor: not-allowed;
  filter: none;
}

/* Gérer la visibilité — lien discret vers PLUG WATT (source unique
   de vérité pour profile_public). Ton neutre, pas d'accent couleur :
   c'est une action de navigation, pas une action destructive. */
.ap-owner-btn-manage {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
.ap-owner-btn-manage:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

/* Gate banner : affiché quand trackCount=0 */
.ap-owner-bar-gate {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  max-width: 1200px; margin: 10px auto 0;
  padding: 9px 12px; border-radius: 3px;
  background: rgba(255,215,0,.07);
  border: 1px solid rgba(255,215,0,.22);
  color: rgba(255,215,0,.82);
  font-size: 12px;
}
.ap-owner-bar-gate svg { flex-shrink: 0; }
.ap-owner-bar-gate-link {
  margin-left: auto; color: #ffd700; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: 10px;
}
.ap-owner-bar-gate-link:hover { text-decoration: underline; }


/* ── Champs éditables (contenteditable + placeholder visuel) ─────────────── */
.ap-editable {
  position: relative;
  transition: background .15s, outline-color .15s;
  border-radius: 3px;
  outline: 1px solid transparent;
  outline-offset: 3px;
}
/* Placeholder visuel quand vide (mode owner) */
.ap-editable.ap-editable-empty {
  color: rgba(230,226,248,.35);
  font-style: italic;
}
/* Hover / état éditable actif (owner en mode édition) */
body.ap-owner-editing .ap-editable {
  cursor: text;
  outline-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.015);
}
body.ap-owner-editing .ap-editable:hover {
  outline-color: rgba(var(--brand-rgb, 136,0,255), .35);
  background: rgba(var(--brand-rgb, 136,0,255), .04);
}
body.ap-owner-editing .ap-editable:focus {
  outline-color: var(--brand, #8800FF);
  background: rgba(var(--brand-rgb, 136,0,255), .08);
}
/* Ceinture : dès que le champ a le focus, le texte saisi s'affiche en
   couleur normale (blanche) et non italique, même si la classe
   .ap-editable-empty traînait encore (le JS la retire au focusin, mais
   on prend les devants côté CSS pour éliminer le moindre flash). */
body.ap-owner-editing .ap-editable:focus,
body.ap-owner-editing .ap-editable.ap-editable-empty:focus {
  color: #fff;
  font-style: normal;
}

/* Cas spécial du h1 .ap-artist-name : en mode lecture il utilise
   background-clip:text + -webkit-text-fill-color:transparent pour
   peindre un dégradé sur le texte. Pendant la frappe en edit mode,
   ça rendait la saisie invisible (le texte frais n'est peint par le
   gradient qu'au prochain reflow — d'où l'effet "le nom apparaît
   après Enter"). On désactive le clip pendant le focus pour que le
   texte suive la frappe en couleur pleine.                        */
body.ap-owner-editing .ap-artist-name:focus {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #fff;
  color: #fff;
  /* Filter drop-shadow reste OK — on garde le halo néon discret mais
     sans les valeurs agressives qui brouillaient la lecture pendant
     la saisie. */
  filter: drop-shadow(0 0 4px rgba(var(--brand-rgb), .35));
  animation: none;
}
/* Indicateur "en cours de sauvegarde" */
.ap-editable.ap-editable-saving {
  opacity: .6;
  outline-color: rgba(255,215,0,.3);
}


/* ── Chips "réseaux sociaux" (fan + owner) ───────────────────────────────── */
.ap-social-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 3px;
  font-size: 11px; letter-spacing: .05em;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.02);
  color: rgba(230,226,248,.85);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ap-social-chip:hover {
  border-color: rgba(var(--brand-rgb, 136,0,255), .5);
  background: rgba(var(--brand-rgb, 136,0,255), .08);
  color: #fff;
}
.ap-social-emoji { font-size: 13px; line-height: 1; }
.ap-social-label { font-weight: 500; }
.ap-social-chip.ap-social-add {
  border-style: dashed;
  color: rgba(230,226,248,.55);
}
.ap-social-chip.ap-social-add:hover {
  border-style: dashed;
  color: var(--brand, #8800FF);
}


/* ── Boutons d'édition "média" sur l'avatar + cover ──────────────────────── */
.ap-avatar-wrap { position: relative; }
.ap-avatar-edit {
  position: absolute; bottom: 4px; right: 4px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--brand, #8800FF);
  color: #fff;
  border: 2px solid rgba(14,12,18,.9);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: filter .15s, transform .1s;
}
.ap-avatar-edit:hover { filter: brightness(1.15); }
.ap-avatar-edit:active { transform: scale(.95); }

.ap-hero { position: relative; }
.ap-hero-bg-edit {
  position: absolute; top: 14px; right: 18px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 3px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
  background: rgba(14,12,18,.78);
  color: rgba(230,226,248,.88);
  border: 1px solid rgba(255,255,255,.16);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
  transition: background .15s, border-color .15s, color .15s;
}
.ap-hero-bg-edit:hover {
  background: rgba(14,12,18,.92);
  border-color: rgba(var(--brand-rgb, 136,0,255), .5);
  color: #fff;
}

/* (C3 v3 : .ap-hero-bg.has-image supprimé — la bannière .ap-hero-banner
   gère la cover dans la section C3 v3 en tête de fichier.) */


/* ── Pickers couleurs (bg + accent) ──────────────────────────────────────── */
.ap-colors {
  margin: 0 28px 24px;
  max-width: 1200px;
  padding: 18px;
  border: 1px dashed rgba(var(--brand-rgb, 136,0,255), .35);
  border-radius: 3px;
  background: rgba(var(--brand-rgb, 136,0,255), .04);
}
.ap-colors-inner { max-width: 900px; margin: 0 auto; }
.ap-colors-title {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(230,226,248,.85);
  margin-bottom: 14px;
  font-weight: 600;
}
.ap-colors-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
.ap-color-field {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.ap-color-sublabel {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(230,226,248,.6);
  min-width: 52px;
}
.ap-color-field input[type="color"] {
  width: 40px; height: 40px; padding: 0; border: none;
  background: none; cursor: pointer; border-radius: 3px;
  -webkit-appearance: none; appearance: none;
}
.ap-color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ap-color-field input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
}
.ap-color-hex {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .04em;
  color: rgba(230,226,248,.7);
  min-width: 66px;
}
.ap-color-reset {
  margin-left: auto;
  padding: 7px 12px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: rgba(230,226,248,.75);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ap-color-reset:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.ap-colors-hint {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(230,226,248,.45);
}


/* ── Modal URL (avatar / cover / socials) ────────────────────────────────── */
.ap-modal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ap-modal-inner {
  width: 100%; max-width: 440px;
  background: rgba(20,18,26,.98);
  border: 1px solid rgba(136,0,255,.3);
  border-radius: 4px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.ap-modal-title {
  margin: 0 0 6px;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; font-weight: 600;
}
.ap-modal-hint {
  margin: 0 0 14px;
  font-size: 12px;
  color: rgba(230,226,248,.55);
  line-height: 1.5;
}
.ap-modal-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.ap-modal-input:focus { border-color: var(--brand, #8800FF); }

/* ── Upload image depuis les fichiers (section du modal) ─────────────── */
.ap-modal-upload { margin-bottom: 14px; }
.ap-modal-upload-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 14px; border-radius: 3px;
  font-size: 12px; letter-spacing: .05em; font-weight: 600;
  border: 1px dashed rgba(var(--brand-rgb, 136,0,255), .5);
  background: rgba(var(--brand-rgb, 136,0,255), .08);
  color: var(--brand, #8800FF);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ap-modal-upload-btn:hover {
  background: rgba(var(--brand-rgb, 136,0,255), .15);
  border-color: var(--brand, #8800FF);
  color: #fff;
}
.ap-modal-upload-status {
  min-height: 16px;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(230,226,248,.6);
}
.ap-modal-upload-status.is-loading { color: rgba(255,215,0,.8); }
.ap-modal-upload-status.is-ok      { color: #6ee39a; }
.ap-modal-upload-status.is-error   { color: #ff6b7a; }
.ap-modal-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 6px;
  color: rgba(230,226,248,.35);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
.ap-modal-divider::before,
.ap-modal-divider::after {
  content: ''; flex: 1;
  height: 1px; background: rgba(255,255,255,.08);
}
.ap-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 16px;
}
.ap-modal-btn {
  padding: 9px 16px; border-radius: 3px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: rgba(230,226,248,.85);
  transition: background .15s, border-color .15s;
}
.ap-modal-btn:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.ap-modal-btn-save {
  background: var(--brand, #8800FF);
  border-color: transparent;
  color: #fff;
}
.ap-modal-btn-save:hover {
  background: var(--brand, #8800FF);
  color: #fff;
  filter: brightness(1.1);
}


/* ── Sections riches (Biographie / Influences / Mon univers) ────────────── */

.ap-section {
  max-width: 900px;
  margin: 0 auto 36px;
  padding: 0 28px;
}
.ap-section-title {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(245,242,252,.95);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--brand-rgb, 136,0,255), .22);
  text-shadow:
    0 0 8px  rgba(var(--brand-rgb,136,0,255),.80),
    0 0 24px rgba(var(--brand-rgb,136,0,255),.40);
}
.ap-section-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(232, 228, 240, .88);
  white-space: pre-wrap;     /* respecte les retours à la ligne saisis par l'artiste */
  word-break: break-word;
}
/* Variante pour les textes longs éditables : un peu plus de padding pour
   que l'outline focus respire, et min-height pour qu'un champ vide reste
   cliquable confortablement en mode édition. */
.ap-editable.ap-editable-long {
  display: block;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 3px;
}
body.ap-owner-editing .ap-editable.ap-editable-long {
  min-height: 72px;
}

/* Responsive sections */
@media (max-width: 860px) {
  .ap-section { padding: 0 24px; margin-bottom: 28px; }
  .ap-section-body { font-size: 14px; }
}
@media (max-width: 640px) {
  .ap-section { padding: 0 18px; }
}


/* ── Responsive barre owner ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ap-owner-bar { padding: 10px 16px; top: 56px; }
  .ap-owner-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ap-owner-bar-actions { width: 100%; justify-content: flex-end; }
  .ap-colors { margin: 0 16px 20px; padding: 14px; }
  .ap-colors-row { gap: 14px; }
  .ap-color-reset { margin-left: 0; width: 100%; text-align: center; }
  .ap-hero-bg-edit {
    top: 10px; right: 12px;
    padding: 6px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHANTIER "PROFIL ARTISTE VENDEUR" — sections marketplace conditionnelles
   ═══════════════════════════════════════════════════════════════════════════

   Blocs sous les socials, tous en display:none par défaut et révélés par
   artiste.js si la donnée correspondante est présente :
     • .ap-relic          — relique ADN (C3 v3, styles en tête de fichier)
     • .ap-prompts        — liste des recettes Suno à débloquer (N prompts)
     • .ap-tracks         — liste des sons publiés (avec <audio controls>)

   Look & feel aligné sur .ap-section (padding 0 32px, max-width 920). Le
   surlignage violet utilise --brand via rgba(var(--brand-rgb), α) pour
   réagir à la couleur de marque personnalisée de l'artiste. */

/* ── DNA card — SUPPRIMÉE (C3 v3 2026-06-13) ──────────────────────────────
   L'ancienne « case vente ADN » (.ap-dna-card-*) est remplacée par la
   relique pleine largeur .ap-relic-* — section C3 v3 en tête de fichier. */

/* ── Playlists ADN accordion — sous la relique ADN ────────────────────────── */
.ap-playlists-adn {
  max-width: 820px;
  margin: 8px auto 0;
  padding: 0 20px;
}
.ap-playlists-adn-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 8px;
}
.ap-playlists-adn-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.ap-playlists-adn-count {
  font-size: 10px;
  color: rgba(255,255,255,.25);
}
.ap-playlists-adn-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ap-pl-adn-item {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--pl-color, #cc88ff);
  border-radius: 10px;
  overflow: hidden;
}
.ap-pl-adn-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ap-pl-adn-summary::-webkit-details-marker { display: none; }
.ap-pl-adn-summary:hover { background: rgba(255,255,255,.03); }
.ap-pl-adn-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.ap-pl-adn-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-pl-adn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(204,136,255,.4);
  color: #cc88ff;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.ap-pl-adn-chevron {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  transition: transform .2s;
  flex-shrink: 0;
}
details.ap-pl-adn-item[open] .ap-pl-adn-chevron { transform: rotate(180deg); }
.ap-pl-adn-body {
  padding: 4px 14px 12px 38px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-pl-adn-desc {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
  margin: 0;
}
.ap-pl-adn-goto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(204,136,255,.8);
  text-decoration: none;
}
.ap-pl-adn-goto:hover { color: #cc88ff; text-decoration: underline; }

@media (max-width: 640px) {
  .ap-playlists-adn { padding: 0 14px; }
}

/* ── Prompts (recettes Suno) ─────────────────────────────────────────────── */
.ap-prompts {
  max-width: 920px;
  margin: 24px auto;
  padding: 0 32px;
}
.ap-prompts-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ap-prompts-title {
  font-size: 16px;
  margin: 0;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
}
.ap-prompts-count {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  letter-spacing: .04em;
}
.ap-prompts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.ap-prompt-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .12s ease, background .12s ease;
}
.ap-prompt-card:hover {
  border-color: rgba(var(--brand-rgb), .35);
  background: rgba(var(--brand-rgb), .05);
}
.ap-prompt-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.ap-prompt-card-title {
  font-size: 14px;
  margin: 0;
  color: #fff;
  font-weight: 600;
}
.ap-prompt-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,215,0,.1);
  color: #FFD700;
  border: 1px solid rgba(255,215,0,.25);
  white-space: nowrap;
}
.ap-prompt-card-desc {
  font-size: 12.5px;
  margin: 0;
  color: rgba(255,255,255,.62);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ap-prompt-card-actions { margin-top: auto; }
.ap-prompt-unlock-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .05em;
  color: #cc88ff;
  border-radius: 999px;
  border: 1px solid rgba(204, 136, 255, .45);
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.ap-prompt-unlock-btn:hover {
  background: rgba(204, 136, 255, .18);
  border-color: rgba(204, 136, 255, .8);
}
.ap-prompt-unlock-btn:disabled { opacity: .5; cursor: wait; }
/* Audio player sur card prompt (revert fusion 2026-05-05) — pré-écoute
   du track lié avant achat de la recette. */
.ap-prompt-audio {
  width: 100%;
  height: 36px;
  outline: none;
  border-radius: 6px;
  display: block;
  margin-top: 6px;
}
.ap-prompt-owner-note {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  font-style: italic;
}

/* ── Tracks (sons publiés) ───────────────────────────────────────────────── */
.ap-tracks {
  max-width: 920px;
  margin: 24px auto 48px;
  padding: 0 32px;
}
/* ── Accordéon externe Sons publiés + Voix à vendre ─────────────────── */
.ap-tracks-body,
.ap-voices-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.ap-tracks-body.is-open,
.ap-voices-body.is-open {
  max-height: 6000px;
}
.ap-section-arrow {
  font-size: 13px;
  color: #a09cb8;
  flex-shrink: 0;
  transition: transform .25s ease;
  margin-left: 10px;
}

.ap-tracks-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding-bottom: 14px;
}
.ap-tracks-title {
  font-size: 16px;
  margin: 0;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
}
.ap-tracks-count {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  letter-spacing: .04em;
}
/* ── Tracks rows (C3 ② — 2026-06-13) ─────────────────────────────────────
   Liste DENSE de rows sur le player global : bouton play rond, cover mini,
   titre, repères C0 (nature/palier/rareté/provenance), prix recette,
   like/+, 🗑 owner. Zebra subtile, hover teinté brand, row active marquée.
   L'audio est UNIQUE et partagé (wrapper #ap-shared-audio caché, body). */
.ap-tracks-list { display: flex; flex-direction: column; gap: 2px; }
.ap-track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--sp-radius-md, 10px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--sp-transition, 150ms ease),
              border-color var(--sp-transition, 150ms ease);
}
/* ═══ TAXONOMIE son/image/œuvre (2026-07-20) — profil artiste ═══════════════
   Miroir de la marketplace :
     • .ap-son-bar     → SON SEUL : barre musicale, aucune cover.
     • .ap-oeuvre-card → ŒUVRE : carte avec grande cover + socle binaire
       (Musique | Visuel) + pont d'achat de l'œuvre.
   Les deux gardent .ap-track-row pour hériter de la délégation de clics. */

.ap-oeuvre-card {
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--sp-surface, rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.09);
  margin-bottom: 10px;
}
.ap-oeuvre-card:hover { border-color: rgba(var(--brand-rgb), .45); }
.ap-oeuvre-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sp-surface-2, rgba(255,255,255,.07));
}
.ap-oeuvre-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-oeuvre-card .ap-track-play-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
}
.ap-oeuvre-body { padding: 12px 14px 14px; }
.ap-oeuvre-body .ap-track-row-title { font-size: 1rem; margin-bottom: 4px; }

/* Socle binaire — deux demi-colonnes reliées par une couture. */
.ap-oeuvre-socle {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  margin: 10px 0 0;
  border: .5px solid rgba(255,255,255,.10);
  border-radius: 9px;
  overflow: hidden;
}
.ap-oeuvre-socle + .ap-track-oeuvre-btn { border-radius: 0 0 9px 9px; margin-top: -1px; }
.ap-socle-seam { background: rgba(255,255,255,.14); }
.ap-socle-half { padding: 7px 9px; min-width: 0; }
.ap-socle-half--music  { background: rgba(0,85,255,.10); }
.ap-socle-half--visual { background: rgba(204,136,255,.09); }
.ap-socle-face {
  font-size: .64rem; font-weight: 700; letter-spacing: .4px;
  margin-bottom: 5px; text-transform: uppercase;
}
.ap-socle-half--music  .ap-socle-face { color: #7da2ff; }
.ap-socle-half--visual .ap-socle-face { color: #d9b0ff; }
.ap-socle-empty { font-size: .66rem; color: #8b84a3; }
.ap-oeuvre-card .ap-track-row-actions { margin-top: 10px; justify-content: flex-end; }

/* Son seul — barre. Sans pochette : play seul (padding léger). Avec pochette
   uploadée (cover_url mais pas d'image vendable liée, ex. morceaux SMYLE) :
   mini-vignette carrée avec le play superposé — la cover n'est plus jetée. */
.ap-son-bar .ap-track-row-main { padding-left: 2px; }
.ap-son-bar--has-cover .ap-track-row-main { padding-left: 0; }
.ap-son-bar-cover {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sp-surface-2, rgba(255,255,255,.07));
}
.ap-son-bar-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-son-bar-cover .ap-track-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  flex: none;
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, .42);
}
.ap-son-bar-cover .ap-track-play-btn:hover { background: rgba(0, 0, 0, .62); }

.ap-track-row:nth-child(even) { background: var(--sp-surface, rgba(255,255,255,.04)); }
.ap-track-row:hover { background: rgba(var(--brand-rgb), .07); }
.ap-track-row.is-active {
  background: rgba(var(--brand-rgb), .10);
  border-color: rgba(var(--brand-rgb), .35);
}
.ap-track-row.is-active .ap-track-row-title { color: var(--brand); }

.ap-track-play-btn {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--brand-rgb), .10);
  border: 1px solid rgba(var(--brand-rgb), .30);
  color: var(--sp-text, #e8e8f0);
  cursor: pointer;
  transition: background var(--sp-transition, 150ms ease),
              border-color var(--sp-transition, 150ms ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ap-track-play-btn:hover { background: rgba(var(--brand-rgb), .22); }
.ap-track-play-btn:disabled { opacity: .35; cursor: default; }
.ap-track-row.is-playing .ap-track-play-btn {
  background: rgba(var(--brand-rgb), .25);
  border-color: rgba(var(--brand-rgb), .60);
  color: var(--brand);
}

.ap-track-mini-cover {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--sp-radius-sm, 6px);
  overflow: hidden;
  background: var(--sp-surface-2, rgba(255,255,255,.07));
}
.ap-track-mini-cover img,
.ap-track-mini-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ap-track-row-main { flex: 1; min-width: 0; }
.ap-track-row-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sp-text, #e8e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-track-row-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.ap-track-row-badges .sp-pill { font-size: 10px; padding: 1px 7px; flex-shrink: 0; }
.ap-track-row-badges .sp-provenance { flex-shrink: 0; }
.ap-track-row-plays {
  font-size: 11px;
  color: var(--sp-text-faint, rgba(255,255,255,.55));
  flex-shrink: 0;
}

.ap-track-row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.ap-track-row-actions .like-btn,
.ap-track-row-actions .add-to-pl-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  flex: 0 0 28px !important;
  font-size: 13px !important;
  border-radius: 7px !important;
}

@media (max-width: 640px) {
  /* Dense en mobile : la provenance saute, les pilules restent */
  .ap-track-row-badges .sp-provenance { display: none; }
  .ap-track-row { gap: 9px; padding: 7px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VOICES — CAPSULES VOCALES (C3 ② — 2026-06-13)
   Une nature = une forme + une couleur : la voix est ORANGE (token C0
   --sp-nature-voix) et CAPSULE (card horizontale très arrondie), donc
   impossible à confondre avec les rows de tracks (teintées brand).
   Lecteur de preview ROND — l'<audio> est caché, piloté par le bouton.
   sample_url JAMAIS exposé publiquement (preview 30s only, gating router).
   ═══════════════════════════════════════════════════════════════════════ */
.ap-voices {
  max-width: 920px;
  margin: 24px auto;
  padding: 0 32px;
}
.ap-voices-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding-bottom: 14px;
}
.ap-voices-title {
  font-size: 16px;
  margin: 0;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
}
.ap-voices-count {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  letter-spacing: .04em;
}
.ap-voices-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ap-voice-capsule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 32px;  /* capsule */
  background: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--sp-nature-voix, #ff9500) 30%, transparent);
  cursor: pointer;
  transition: border-color var(--sp-transition, 150ms ease),
              background var(--sp-transition, 150ms ease);
}
.ap-voice-capsule:hover {
  border-color: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 55%, transparent);
  background: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 11%, transparent);
}
/* Fallback navigateurs sans color-mix : surfaces neutres tokens. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ap-voice-capsule {
    background: var(--sp-surface, rgba(255,255,255,.04));
    border-color: var(--sp-border, rgba(255,255,255,.10));
  }
}
.ap-voice-capsule.is-playing {
  border-color: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 75%, transparent);
}
.ap-voice-play {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sp-nature-voix, #ff9500) 55%, transparent);
  color: var(--sp-nature-voix, #ff9500);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--sp-transition, 150ms ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ap-voice-play:hover { background: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 30%, transparent); }
.ap-voice-play:disabled { opacity: .45; cursor: default; }
.ap-voice-capsule.is-playing .ap-voice-play {
  background: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 35%, transparent);
}
.ap-voice-main { flex: 1; min-width: 0; }
.ap-voice-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ap-voice-name {
  font-size: 14px;
  margin: 0;
  color: var(--sp-text, #e8e8f0);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-voice-style {
  font-size: 12px;
  margin: 2px 0 0;
  color: var(--sp-text-faint, rgba(255,255,255,.55));
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-voice-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.ap-voice-badges .sp-pill { font-size: 10px; padding: 1px 7px; }
.ap-voice-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--sp-radius-pill, 999px);
  background: var(--sp-surface, rgba(255,255,255,.04));
  color: var(--sp-text-muted, rgba(255,255,255,.72));
  border: 1px solid var(--sp-border, rgba(255,255,255,.10));
  white-space: nowrap;
}
.ap-voice-soldout {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--sp-radius-pill, 999px);
  color: var(--sp-danger, #ff5577);
  border: 1px solid color-mix(in srgb, var(--sp-danger, #ff5577) 45%, transparent);
  background: color-mix(in srgb, var(--sp-danger, #ff5577) 10%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
}
.ap-voice-side {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.ap-voice-unlock-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em;
  color: var(--sp-nature-voix, #ff9500);
  border-radius: var(--sp-radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--sp-nature-voix, #ff9500) 50%, transparent);
  background: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 10%, transparent);
  cursor: pointer;
  transition: background var(--sp-transition, 150ms ease),
              border-color var(--sp-transition, 150ms ease);
  white-space: nowrap;
}
.ap-voice-unlock-btn:hover {
  background: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 22%, transparent);
  border-color: color-mix(in srgb, var(--sp-nature-voix, #ff9500) 80%, transparent);
}
.ap-voice-unlock-btn:disabled { opacity: .5; cursor: wait; }
.ap-voice-owner-note {
  font-size: 12px;
  color: var(--sp-text-faint, rgba(255,255,255,.55));
  font-style: italic;
}
@media (max-width: 640px) {
  .ap-voice-capsule { gap: 9px; padding: 8px 12px 8px 8px; }
  .ap-voice-style { display: none; }
}
/* P1-F4 (2026-05-04) — réglages génération sur card prompt publique.
   Badges plateforme/modèle/vocal gender + bloc weirdness/style influence. */
.ap-prompt-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ap-prompt-settings {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 215, 0, .04);
  border: 1px dashed rgba(255, 215, 0, .15);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-prompt-setting {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.4;
}
.ap-prompt-setting-key {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, .82);
  margin-right: 6px;
}

/* C3 ② — l'ancienne « track card riche » (.ap-track-card-inner, cover 80px,
   <audio controls> par card) est SUPPRIMÉE : remplacée par les rows denses
   sur audio partagé (section « Tracks rows » plus haut). */
.ap-track-delete-btn {
  background: transparent;
  border: 1px solid rgba(255, 80, 80, .35);
  color: #ff8080;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.ap-track-delete-btn:hover {
  background: rgba(255, 80, 80, .1);
  border-color: rgba(255, 80, 80, .6);
}
.ap-track-delete-btn:disabled {
  opacity: .5;
  cursor: wait;
}
.ap-track-unlock-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .05em;
  color: #cc88ff;
  border-radius: 999px;
  border: 1px solid rgba(204, 136, 255, .45);
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.ap-track-unlock-btn:hover {
  background: rgba(204, 136, 255, .18);
  border-color: rgba(204, 136, 255, .8);
}
.ap-track-unlock-btn:disabled { opacity: .5; cursor: wait; }

/* C3 ② — .ap-voice-preview (audio controls natif) SUPPRIMÉ : la pré-écoute
   passe par le bouton rond des capsules (.ap-voice-play, audio caché). */

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTIQUE v2 — Cards compactes + Drawer de détail
   Clic sur une card → drawer latéral avec infos complètes + unlock
   ═══════════════════════════════════════════════════════════════════════════ */

.ap-boutique {
  max-width: 820px;
  margin: 0 auto 32px;
  padding: 0 20px;
}

.ap-boutique-hdr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.ap-boutique-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ap-text);
  margin: 0;
  letter-spacing: .3px;
}

.ap-boutique-count {
  font-size: 11px;
  color: var(--ap-dim);
}

/* ── Grille compact : 3-4 colonnes sur desktop ────────────────────────────── */

.ap-boutique-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

/* ── Card compacte (clic → drawer) ───────────────────────────────────────── */

.ap-shop-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid var(--ap-brand, #cc88ff);
  border-radius: 12px;
  padding: 11px 13px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: background .15s, transform .12s;
  user-select: none;
}

.ap-shop-card:hover {
  background: rgba(255, 255, 255, .06);
  transform: translateY(-2px);
}

.ap-shop-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-shop-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: rgba(204, 136, 255, .1);
}

.ap-shop-card-info { flex: 1; min-width: 0; }

.ap-shop-card-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(204, 136, 255, .7);
}

.ap-shop-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ap-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 1px;
}

.ap-shop-card-price {
  font-size: 11px;
  font-weight: 600;
  color: rgba(204, 136, 255, .9);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ap-shop-card-price-arrow {
  font-size: 10px;
  color: rgba(255, 255, 255, .3);
  margin-left: auto;
}

/* ── DRAWER — panneau de détail latéral ───────────────────────────────────── */

.boutique-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 1100;
  backdrop-filter: blur(2px);
}

.boutique-overlay.is-open { display: block; }

.boutique-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 92vw;
  background: #0f0d14;
  border-left: 1px solid rgba(204, 136, 255, .15);
  z-index: 1101;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.boutique-drawer.is-open {
  transform: translateX(0);
}

.boutique-drawer-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  z-index: 1;
}
.boutique-drawer-close:hover { background: rgba(255, 255, 255, .12); }

.boutique-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 52px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Drawer — cover image (sons) ──────────────────────────────────────────── */
.bd-cover {
  margin: -52px -22px 0;   /* annule le padding du body pour couvrir bord à bord */
  width: calc(100% + 44px);
  aspect-ratio: 1 / 1;
  max-height: 260px;
  overflow: hidden;
  flex-shrink: 0;
}
.bd-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Drawer — blocs de contenu ────────────────────────────────────────────── */

.bd-color-bar {
  height: 4px;
  border-radius: 2px;
  margin-bottom: 4px;
}

.bd-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(204, 136, 255, .75);
}

.bd-name {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 4px 0 0;
}

.bd-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.6;
  margin: 0;
}

.bd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bd-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .7);
}

.bd-preview-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  margin-bottom: 6px;
}

.bd-audio {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  outline: none;
  filter: invert(1) hue-rotate(180deg) brightness(.85);
}

.bd-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(204, 136, 255, .06);
  border: 1px solid rgba(204, 136, 255, .15);
}

.bd-price-amount {
  font-size: 20px;
  font-weight: 700;
  color: #cc88ff;
}

.bd-price-unit {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  margin-left: 4px;
}

.bd-perk-hint {
  font-size: 11px;
  color: rgba(204, 136, 255, .6);
}

.bd-unlock-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7a1fd6, #cc88ff);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .3px;
  transition: opacity .15s, transform .1s;
}
.bd-unlock-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.bd-unlock-btn:disabled { opacity: .45; cursor: not-allowed; }

.bd-self-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .35);
  padding: 10px;
}

/* ── Boutons Wishlist / Playlist dans le drawer ──────────────────────────── */
.bd-social-row {
  display: flex;
  gap: 8px;
  padding: 10px 0 4px;
}
.bd-like-btn,
.bd-addpl-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .65);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
  font-family: inherit;
  letter-spacing: .01em;
}
.bd-like-btn:hover {
  color: #ff7799;
  border-color: rgba(255, 119, 153, .35);
  background: rgba(255, 119, 153, .06);
}
.bd-like-btn.liked {
  color: #ff5577;
  border-color: rgba(255, 85, 119, .5);
  background: rgba(255, 85, 119, .08);
}
.bd-addpl-btn:hover {
  color: #cc88ff;
  border-color: rgba(204, 136, 255, .4);
  background: rgba(204, 136, 255, .07);
}

/* Responsive */
@media (max-width: 640px) {
  .ap-boutique { padding: 0 14px; }
  .ap-boutique-grid { grid-template-columns: 1fr 1fr; }
  .boutique-drawer { width: 100vw; max-width: 100vw; }
}
@media (max-width: 380px) {
  .ap-boutique-grid { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 640px) {
  .ap-prompts,
  .ap-voices,
  .ap-tracks { padding: 0 18px; }
  .ap-prompts-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELLULES CARTE — Biographie, Réseaux, Sons, Voix, Recettes, Playlists
   Fond blanc semi-transparent + bordure néon = couleur du profil (--brand-rgb)
   ═══════════════════════════════════════════════════════════════════════════ */

.ap-section,
.ap-section-socials {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(var(--brand-rgb,136,0,255),.3);
  box-shadow: 0 0 24px rgba(var(--brand-rgb,136,0,255),.06), 0 2px 16px rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 22px 28px;
  max-width: 900px;
  margin: 0 auto 20px;
}

.ap-tracks, .ap-voices, .ap-prompts {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(var(--brand-rgb,136,0,255),.3);
  box-shadow: 0 0 24px rgba(var(--brand-rgb,136,0,255),.06), 0 2px 16px rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 22px 28px;
  max-width: 900px;
  margin: 0 auto 20px;
}

#ap-playlists-root {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(var(--brand-rgb,136,0,255),.3);
  box-shadow: 0 0 24px rgba(var(--brand-rgb,136,0,255),.06), 0 2px 16px rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 22px 28px;
  max-width: 900px;
  margin: 0 auto 20px;
}

/* Titres de section profil — blanc + glow néon synchronisé avec la couleur du profil */
.ap-tracks-title, .ap-voices-title, .ap-prompts-title,
.ap-playlists-adn-title {
  color: rgba(245,242,252,.95);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow:
    0 0 8px  rgba(var(--brand-rgb,136,0,255),.85),
    0 0 24px rgba(var(--brand-rgb,136,0,255),.45);
}
.ap-tracks-count, .ap-voices-count, .ap-prompts-count {
  color: rgba(var(--brand-rgb,136,0,255),.6);
  font-size: 11px;
  font-weight: 600;
}

/* C3 ② — badge playlist sur card track (.ap-track-pl-badge) SUPPRIMÉ :
   il pointait vers la page courante, info redondante avec les tuiles-mondes. */

/* Réseaux sociaux : flex centré dans sa card */
.ap-section-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ap-section-socials:empty { display: none; }

/* Bouton accordéon */
.ap-accordion-toggle {
  display: block;
  margin: 14px auto 4px;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-rgb,136,0,255),.35);
  background: rgba(var(--brand-rgb,136,0,255),.06);
  color: var(--brand,#8800ff);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  font-family: inherit;
}
.ap-accordion-toggle:hover {
  background: rgba(var(--brand-rgb,136,0,255),.14);
  border-color: rgba(var(--brand-rgb,136,0,255),.6);
}

@media (max-width: 860px) {
  .ap-section, .ap-section-socials, .ap-tracks, .ap-voices, .ap-prompts {
    margin: 0 16px 16px; padding: 18px 20px; border-radius: 14px;
  }
}
@media (max-width: 640px) {
  .ap-section, .ap-section-socials, .ap-tracks, .ap-voices, .ap-prompts {
    margin: 0 12px 14px; padding: 16px; border-radius: 12px;
  }
}

/* ── Bouton Échange prompt ──────────────────────────────────────── */

.ap-prompt-trade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: #fb923c;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 6px;
}

.ap-prompt-trade-btn:hover {
  background: rgba(249, 115, 22, 0.22);
  border-color: rgba(249, 115, 22, 0.55);
}

/* ── Modal échange ADN ──────────────────────────────────────────── */

.trade-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.trade-modal-box {
  background: rgba(14, 7, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.7);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
}

.trade-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.trade-modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 6px;
  line-height: 1;
  font-family: inherit;
  transition: color 0.15s;
}
.trade-modal-close:hover { color: #fff; }

.trade-modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trade-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.trade-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.trade-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.3);
}

.trade-target-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 13px;
}

.trade-price-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 215, 0, 0.12);
  color: #ffd700;
  font-size: 11px;
  font-weight: 700;
}

.trade-from {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

.trade-select,
.trade-input,
.trade-textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.trade-select:focus,
.trade-input:focus,
.trade-textarea:focus {
  border-color: rgba(249, 115, 22, 0.5);
}

.trade-select option { background: #1a0030; }

.trade-textarea { resize: vertical; min-height: 60px; }

.trade-rules {
  font-size: 11px;
  color: rgba(255,255,255,0.30);
  line-height: 1.6;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}

.trade-submit-btn {
  padding: 11px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.1s;
}
.trade-submit-btn:hover { opacity: 0.88; }
.trade-submit-btn:active { transform: scale(0.97); }
.trade-submit-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Topbar overrides — spécifiques à la page artiste ───────────────────── */
/* MY MIX n'a pas de sens sur un profil artiste (mix-panel absent de la page) */
.stb-mymix { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   REFONTE VISUELLE PROFIL — 2026-06-11 (demande Tom : plus pro, plus actuel,
   cellule ADN discrète et stylisée, identité de l'artiste prioritaire).
   Bloc d'overrides volontairement groupé en fin de feuille (cascade) —
   la refonte structurelle complète (tuiles-mondes, rows player global,
   capsules voix) vit dans la spec C3 du vault.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Identité : le nom est la star ───────────────────────────────────── */
.ap-artist-name {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.ap-avatar {
  border: 3px solid rgba(var(--brand-rgb), .85);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, .55),
    0 10px 30px rgba(0, 0, 0, .55),
    0 0 24px rgba(var(--brand-rgb), .25);
}
.ap-hero-bio-preview {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(232, 228, 240, .62);
  max-width: 560px;
}

/* ── Carte ADN : DISCRÈTE et stylisée ────────────────────────────────────
   Avant : grosse boîte à barre latérale + halo. Après : fine carte de verre
   à liseré dégradé brand→violet (1px), padding réduit, halo supprimé,
   description sur 2 lignes max. Présente, précieuse, jamais envahissante. */
.ap-adn-card {
  padding: 12px 16px;
  margin-top: 10px;
  margin-bottom: 18px;
  border: 1px solid transparent;
  border-left: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(rgba(13, 11, 18, .96), rgba(13, 11, 18, .96)) padding-box,
    linear-gradient(120deg,
      rgba(var(--brand-rgb), .55),
      rgba(136, 0, 255, .40) 50%,
      rgba(255, 255, 255, .07)) border-box;
}
.ap-adn-card::before { background: none; }
.ap-adn-title { font-size: 13.5px; margin-bottom: 3px; }
.ap-adn-desc {
  font-size: 11.5px;
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* C3 ② — overrides hover de l'ancienne track card SUPPRIMÉS (rows denses). */

/* ── Respiration générale : les sections ne se touchent plus ─────────── */
.ap-section-title { margin-bottom: 14px; }

/* ── COVER SACRÉE — liaison 2026-06-11 SUPPRIMÉE (C3 v3 2026-06-13) ───────
   La bannière est désormais un élément de flux natif (.ap-hero-banner,
   section C3 v3 en tête de fichier) : plus besoin de contraindre un div
   inset:0 en bannière par overrides. */

/* ═══════════════════════════════════════════════════════════════════════════
   C3 ① bis — COHÉRENCE GÉNÉRALE (retour QA Tom 2026-06-12)
   ─────────────────────────────────────────────────────────────────────────
   Le langage visuel de la relique ADN (tiret dégradé brand→violet, eyebrows
   letterspacées, surfaces calmes) devient le langage de TOUTE la page.
   Point canonique : cette définition UNIFIE les 2 anciennes variantes de
   .ap-section-title (gold .32em / brand underline) — déclarée en fin de
   fichier exprès pour gagner la cascade à spécificité égale.
   ═══════════════════════════════════════════════════════════════════════ */

.ap-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 242, 252, .82);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 14px;
}
/* Tiret signature — écho direct du bord dégradé de la relique ADN. */
.ap-section-title::before {
  content: '';
  flex: 0 0 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--brand-rgb, 136, 0, 255), .95), #7c5cff);
}

/* Surfaces calmes unifiées : les grandes sections de contenu partagent la
   même respiration et le même cadre discret que la relique (en plus sobre). */
.ap-prompts,
.ap-tracks,
.ap-voices,
.ap-playlists-adn,
.ap-section-socials {
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 16px;
  background: rgba(255, 255, 255, .015);
  padding: 18px 20px;
}

/* Bio unique du bloc identité (fix double-bio) — calme, lisible, éditable. */
.ap-identity-bio {
  margin-top: 10px;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(214, 209, 228, .82);
  white-space: pre-line;
}
body:not(.ap-owner-editing) .ap-identity-bio:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   C3 ① ter — PASSE DE DÉTAIL (analyse visuelle réelle, retour QA Tom №2)
   Constats faits en regardant la page rendue (profil Smyle) :
   pilules à 2 langages + point flottant · boutons "+ réseau" visibles en
   vue fan · 2 styles d'accordéons (Playlists néon vs SONS PUBLIÉS) ·
   bordure brand criarde sur Playlists · texte fantôme du player.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Point séparateur flottant entre rôles et genre/ville : supprimé. */
.ap-meta-sep { display: none; }

/* 2. Genre / ville : même gabarit que les pilules de rôles (géométrie
   identique, accent neutre — la couleur reste réservée aux rôles). */
.ap-meta-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}

/* 3. Boutons "+ TikTok / + X…" = affordances d'ÉDITION : visibles
   uniquement en mode édition owner, jamais en vue fan. Si plus aucun
   réseau réel à montrer hors édition, la section disparaît (pas de
   boîte vide). */
body:not(.ap-owner-editing) .ap-social-add { display: none; }
body:not(.ap-owner-editing)
  .ap-section-socials:not(:has(.ap-social-chip:not(.ap-social-add))) {
  display: none;
}

/* 4. UN seul langage de section (Playlists tuiles-mondes + Sons publiés
   alignés sur les titres : tiret dégradé + uppercase letterspacé).
   #ap-playlists-root prime sur les styles injectés par playlists.js. */
#ap-playlists-root .ap-pl-worlds {
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 16px;
  background: rgba(255, 255, 255, .015);
  padding: 6px 20px 12px;
  margin: 0 0 18px;
}
#ap-playlists-root .ap-playlists-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 242, 252, .82);
  text-shadow: none;
}
#ap-playlists-root .ap-playlists-title::before {
  content: '';
  flex: 0 0 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--brand-rgb, 136, 0, 255), .95), #7c5cff);
}
#ap-playlists-root .ap-playlists-count {
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(160, 156, 184, .85);
}
/* Sons publiés : compteur au même registre neutre (fini le gold/brand). */
.ap-tracks-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 242, 252, .82);
}
.ap-tracks-title::before {
  content: '';
  flex: 0 0 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--brand-rgb, 136, 0, 255), .95), #7c5cff);
}
.ap-tracks-count {
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(160, 156, 184, .85);
}

/* 5. Texte fantôme du vieux player (« Sélectionne un morceau… ») :
   le player global (mini-bar) a son propre UI — on masque le résidu. */
.ap-page .player-empty { display: none; }

/* 6. Relique : la rangée de méta-chips se tient (taille unique, calme). */
#ap-dna-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#ap-dna-meta > * { font-size: 11px; line-height: 1.4; }