/* ============================================================
   SEXITY — COMPONENT STYLES (GLASSMORPHISM PINK)
   Creator Cards, Feed, Live, BID, Dashboard, etc.
   ============================================================ */

/* ─────────────────────────────────────────
   AGE GATE
───────────────────────────────────────── */
#age-gate {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-topmost) - 1);
  background: linear-gradient(135deg, #1a0614 0%, #120814 50%, #0d0520 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  overflow: hidden;
}

/* Background blob decorations */
#age-gate::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 71, 233, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

#age-gate::after {
  content: '';
  position: absolute;
  bottom: -15%;
  right: -10%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 26, 117, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.age-gate__bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/age-gate-bg.png');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
}

.age-gate__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-pink), var(--color-violet), transparent);
  top: 0;
  animation: scan 5s ease-in-out infinite;
  box-shadow: 0 0 16px var(--color-pink), 0 0 32px var(--color-pink-glow);
  z-index: 1;
}

.age-gate__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 320px;
}

.age-gate__logo {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  background: linear-gradient(135deg, var(--color-pink-pale), var(--color-pink), var(--color-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(255, 77, 148, 0.7));
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  animation: neon-flicker 10s infinite;
}

.age-gate__tagline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}

.age-gate__gate {
  background: rgba(255, 77, 148, 0.06);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 77, 148, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  box-shadow:
    0 0 48px rgba(255, 26, 117, 0.1),
    0 8px 40px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.age-gate__warning {
  font-size: 3.5rem;
  margin-bottom: var(--space-md);
}

.age-gate__title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
}

.age-gate__text {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.age-gate__text strong { color: var(--color-pink-light); }

.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.age-gate__disclaimer {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  line-height: 1.5;
}

/* ─────────────────────────────────────────
   CREATOR CARD (Feed)
───────────────────────────────────────── */
.creator-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(26, 13, 31, 0.8);
  border: 1px solid rgba(255, 77, 148, 0.1);
  position: relative;
  transition: all var(--transition-base);
  cursor: pointer;
}

.creator-card:hover {
  border-color: var(--color-pink-border);
  box-shadow:
    0 8px 32px var(--color-pink-glow),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(-2px);
}

.creator-card__image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.creator-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.creator-card:hover .creator-card__image img {
  transform: scale(1.05);
}

/* Face blur overlay */
.creator-card__image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg,
    rgba(18, 8, 20, 0.85) 0%,
    rgba(18, 8, 20, 0.3) 60%,
    transparent 100%
  );
  z-index: 1;
}

.creator-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(18, 8, 20, 0.97) 0%,
    rgba(18, 8, 20, 0.5) 35%,
    transparent 60%
  );
  z-index: 1;
}

.creator-card__badges {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}

.creator-card__distance {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-secondary);
  background: rgba(18, 8, 20, 0.75);
  backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 77, 148, 0.12);
  display: flex;
  align-items: center;
  gap: 4px;
}

.creator-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  z-index: 2;
}

.creator-card__name {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
  text-transform: uppercase;
  margin-bottom: 4px;
  truncate: true;
}

.creator-card__rate {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-gold);
}

.creator-card__actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.creator-card__actions .btn {
  flex: 1;
  padding: 8px 4px;
  font-size: 0.55rem;
  border-radius: var(--radius-md);
}

/* ─────────────────────────────────────────
   CREATOR CARD LARGE (Featured)
───────────────────────────────────────── */
.creator-card-featured {
  width: 220px;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(26, 13, 31, 0.85);
  border: 1px solid var(--color-pink-border);
  position: relative;
  box-shadow: 0 4px 24px var(--color-pink-glow);
  cursor: pointer;
  transition: all var(--transition-base);
}

.creator-card-featured:hover {
  box-shadow: 0 12px 40px var(--color-pink-glow), 0 0 1px var(--color-pink-border);
  transform: translateY(-2px);
}

.creator-card-featured__image {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
}

.creator-card-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-card-featured__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 8, 20, 1) 0%, rgba(18, 8, 20, 0.3) 45%, transparent 65%);
}

/* Face anonymization visual */
.creator-card-featured__anonymized {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(255, 77, 148, 0.1);
  border: 1px solid var(--color-pink-border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--color-pink-light);
  letter-spacing: 0.1em;
  z-index: 2;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.creator-card-featured__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  z-index: 2;
}

.creator-card-featured__name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--color-text-primary);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-card-featured__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

/* ─────────────────────────────────────────
   PRIVATE SESSION STATE — Creator Card
───────────────────────────────────────── */

/* Creator in a private 1-to-1 session — grayed out, unavailable */
.creator-card-featured--private {
  opacity: 0.65;
  filter: saturate(0.4);
}

.creator-card-featured--private::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(18, 8, 20, 0.45);
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
}

/* Private session badge */
.badge-private {
  background: rgba(193, 71, 233, 0.15);
  color: #c147e9;
  border: 1px solid rgba(193, 71, 233, 0.35);
  font-size: 0.6rem;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Disabled join button when creator in private session */
.btn-join-disabled {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--color-text-muted) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  flex: 1;
  padding: 8px 4px;
  font-size: 0.55rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.btn-join-disabled:hover {
  transform: none !important;
  opacity: 0.7;
}

/* Live type label on HUD */
.live-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid;
}

.live-type-badge--public {
  background: rgba(255, 77, 148, 0.12);
  color: var(--color-pink-light);
  border-color: var(--color-pink-border);
}

.live-type-badge--private {
  background: rgba(193, 71, 233, 0.12);
  color: #c147e9;
  border-color: rgba(193, 71, 233, 0.3);
}

/* Viewer count badge (public live) */
.live-viewers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}

/* Badge "Top Fan" (30j glissants, cadeaux) — utilisé sur le profil public
   ET dans le HUD live (voir .top-fan-badge--hud pour les ajustements de
   contexte). Couleur dorée cohérente avec le reste des éléments liés aux
   jetons/cadeaux (.badge-gold, --color-gold). */
.top-fan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-gold);
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-top: 6px;
  width: fit-content;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Dans le HUD live, s'aligne avec les autres badges (viewers, likes) plutôt
   que de prendre une ligne entière comme sur le profil. */
.top-fan-badge--hud {
  font-size: 0.6rem;
  margin-top: 0;
  padding: 3px 8px;
  max-width: 140px;
}

/* Map marker — private session (orange, voir main.css .status-dot--private
   pour le contexte : remplace l'ancien gris trop proche de "Hors ligne") */
.creator-marker--private .creator-marker__dot {
  background: var(--color-warning);
  box-shadow: 0 0 10px var(--color-warning);
  animation: pulse-live 2s ease infinite;
}

/* Map marker — en ligne (socket ouvert, ni live ni en session privée) et
   hors ligne. Ajoutés pour corriger le radar qui, avant, ne distinguait
   jamais que "live" vs "session privée" — le vert de la légende n'était
   jamais réellement affiché (voir renderRadar dans app.js). */
.creator-marker--online .creator-marker__dot {
  background: var(--color-success);
  box-shadow: 0 0 10px var(--color-success);
}
.creator-marker--offline .creator-marker__dot {
  background: var(--color-text-muted);
  box-shadow: none;
  animation: none;
}

/* ─────────────────────────────────────────
   FEED FILTERS
───────────────────────────────────────── */
.feed-filters {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.feed-filters::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────
   LANGUAGE SWITCHER (flottant, toutes pages)
───────────────────────────────────────── */
.lang-switcher-float {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  z-index: 500;
}
/* Variante "à côté du solde" : injectée dans .top-bar__actions par
   positionLangSwitcher() (app.js) au lieu de flotter en haut à gauche.
   Redevient position:relative pour que le menu déroulant se positionne
   par rapport au bouton (et non plus à la fenêtre), et s'ouvre vers la
   droite (right:0) car l'action row est elle-même alignée à droite. */
.lang-switcher-float--inline {
  position: relative;
  top: auto;
  left: auto;
  z-index: auto;
}
.lang-switcher-float--inline .lang-switcher-float__menu {
  top: 42px;
  left: auto;
  right: 0;
}
.lang-switcher-float__toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 77, 148, 0.25);
  background: rgba(10, 6, 16, 0.7);
  backdrop-filter: blur(8px);
  color: var(--color-text-primary);
  font-size: 1rem;
  cursor: pointer;
}
.lang-switcher-float__menu {
  display: none;
  position: absolute;
  top: 40px; left: 0;
  flex-direction: column;
  gap: 2px;
  background: rgba(10, 6, 16, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 77, 148, 0.2);
  border-radius: var(--radius-md, 10px);
  padding: 6px;
  min-width: 120px;
}
.lang-switcher-float.open .lang-switcher-float__menu { display: flex; }
.lang-switcher-float .lang-switch-btn {
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.lang-switcher-float .lang-switch-btn:hover { background: rgba(255, 77, 148, 0.08); color: var(--color-text-primary); }
.lang-switcher-float .lang-switch-btn.active { background: var(--color-pink-glow); color: var(--color-pink-light); }

/* Rangée de tags (découverte) — même mise en page que .feed-filters mais
   classe distincte pour que setFilter() ne réinitialise pas ces chips
   quand on change de tri (Proches/Nouveaux/...). */
.tag-filters {
  display: flex;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.tag-filters::-webkit-scrollbar { display: none; }

/* Bulles du fil de chat privé (payant au message) — même logique visuelle
   qu'une messagerie classique : les miennes à droite (rose/dégradé), celles
   de l'autre personne à gauche (fond neutre). */
.chat-bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: var(--radius-lg, 14px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.4;
  word-break: break-word;
}
.chat-bubble__text { white-space: pre-wrap; }
.chat-bubble__time {
  font-size: 0.6rem;
  opacity: 0.6;
  margin-top: 4px;
  text-align: right;
}
.chat-bubble--mine {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--color-pink), var(--color-magenta, var(--color-pink)));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble--theirs {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border-bottom-left-radius: 4px;
}
.chat-thread-messages { display: flex; flex-direction: column; }

/* Barre "enregistrement en cours" (message vocal) — remplace la ligne de
   saisie normale pendant l'enregistrement, voir startVoiceRecording()/
   stopVoiceRecording() dans app.js. */
.chat-voice-recording-bar {
  display: none;
  align-items: center;
  gap: var(--space-xs, 8px);
  padding: 8px 10px;
  margin-bottom: 6px;
  background: rgba(255, 51, 85, 0.08);
  border: 1px solid rgba(255, 51, 85, 0.25);
  border-radius: var(--radius-md, 10px);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-primary);
}
.chat-voice-recording-bar.active { display: flex; }
.chat-voice-recording-bar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-danger, #ff3355);
  animation: pulse-live 1s ease infinite;
  flex-shrink: 0;
}
#chat-voice-recording-timer { margin-right: auto; }

/* Bulle de message audio (lecteur natif habillé au minimum) */
.chat-bubble__audio audio { width: 220px; max-width: 60vw; height: 32px; }
.chat-bubble__audio { display: flex; align-items: center; }

/* Emoji animé inséré dans le texte d'une bulle de chat ou d'un commentaire
   (voir renderTextWithAnimatedEmojis() dans app.js). Format WebP (alpha réel,
   pas de contour opaque comme en GIF) pour un vrai fond transparent. */
.emoji-animated {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: -8px;
  background: transparent;
}

/* Sélecteur d'emojis animés — popover partagé (chat + commentaires),
   positionné dynamiquement en JS juste au-dessus du bouton qui l'ouvre.
   Structure : onglets de catégories (haut) + grille de la catégorie active. */
.emoji-picker-popover {
  display: none;
  flex-direction: column;
  position: fixed;
  z-index: 200;
  width: 320px;
  height: 320px;
  background: rgba(10, 6, 16, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 77, 148, 0.25);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
}
.emoji-picker-popover.open { display: flex; }

.emoji-picker-popover__tabs {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 6px 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.emoji-picker-popover__tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 6px 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
.emoji-picker-popover__tab:hover { background: rgba(255, 255, 255, 0.06); opacity: 0.85; }
.emoji-picker-popover__tab.active { background: rgba(255, 77, 148, 0.18); opacity: 1; }

.emoji-picker-popover__panels {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.emoji-picker-popover__panel {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.emoji-picker-popover__panel.active { display: grid; }
.emoji-picker-popover__item {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-picker-popover__item:hover { background: rgba(255, 77, 148, 0.12); }
.emoji-picker-popover__item img { width: 36px; height: 36px; pointer-events: none; background: transparent; }

.filter-chip {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 77, 148, 0.12);
  color: var(--color-text-secondary);
  background: rgba(255, 77, 148, 0.04);
  transition: all var(--transition-fast);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.filter-chip.active {
  background: var(--color-pink-glow);
  border-color: var(--color-pink);
  color: var(--color-pink-light);
  box-shadow: 0 0 12px var(--color-pink-glow);
}

.filter-chip:hover:not(.active) {
  border-color: rgba(255, 77, 148, 0.25);
  color: var(--color-text-primary);
  background: rgba(255, 77, 148, 0.07);
}

/* ─────────────────────────────────────────
   MAP VIEW
───────────────────────────────────────── */
.map-container {
  position: relative;
  flex: 1;
  background: radial-gradient(ellipse at center, #1e0a28 0%, #120814 100%);
  overflow: hidden;
  min-height: 400px;
}

/* Calque zoomable — voir mapZoomIn/mapZoomOut/mapRecenter (app.js) et le
   commentaire dans index.html. inset:0 le fait correspondre exactement à
   .map-container au repos, donc scale() zoome autour du centre visuel. */
.map-zoom-layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 77, 148, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 77, 148, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

.map-pulse {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 148, 0.2) 0%, transparent 70%);
  animation: float 4s ease-in-out infinite;
}

.creator-marker {
  position: absolute;
  cursor: pointer;
}

.creator-marker__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-pink);
  border: 2px solid var(--color-text-primary);
  box-shadow: 0 0 12px var(--color-pink), 0 0 24px var(--color-pink-glow);
  animation: pulse-pink 2s ease infinite;
  position: relative;
}

.creator-marker__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--color-pink-border);
  animation: pulse-pink 2s ease infinite 0.3s;
}

.creator-marker__live .creator-marker__dot {
  background: var(--color-danger);
  box-shadow: 0 0 12px var(--color-danger);
}

.map-user-location {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.map-user-location__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-pink), var(--color-violet));
  border: 2px solid var(--color-text-primary);
  box-shadow: 0 0 20px var(--color-pink);
  position: relative;
}

.map-user-location__ring {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid var(--color-pink-border);
  animation: pulse-pink 3s ease infinite;
}

.map-user-location__ring2 {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 77, 148, 0.1);
  animation: pulse-pink 3s ease infinite 0.5s;
}

.map-controls {
  position: absolute;
  bottom: var(--space-lg);
  right: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.map-control-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(26, 13, 31, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-pink-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.map-control-btn:hover {
  background: var(--color-pink-glow);
  color: var(--color-pink);
  border-color: var(--color-pink);
}

.map-nearby-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(0deg, rgba(18, 8, 20, 0.95) 0%, transparent 100%);
}

.map-nearby-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--color-pink-light);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  text-shadow: 0 0 8px var(--color-pink-glow);
}

/* ─────────────────────────────────────────
   BID INTERFACE
───────────────────────────────────────── */
.bid-form {
  background: rgba(193, 71, 233, 0.06);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-violet-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: 0 4px 32px var(--color-violet-glow);
}

.bid-form__title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--color-pink-light);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bid-amount-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.bid-amount-btn {
  padding: 12px 8px;
  border-radius: var(--radius-md);
  background: rgba(193, 71, 233, 0.06);
  border: 1px solid rgba(255, 77, 148, 0.12);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: center;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}

.bid-amount-btn:hover {
  border-color: var(--color-pink-border);
  color: var(--color-pink-light);
  background: var(--color-pink-glow);
}

.bid-amount-btn.selected {
  border-color: var(--color-pink);
  background: var(--color-pink-glow);
  color: var(--color-pink-light);
  box-shadow: 0 0 16px var(--color-pink-glow);
}

.bid-custom-input {
  margin-bottom: var(--space-md);
}

.bid-custom-input label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 6px;
}

/* ─────────────────────────────────────────
   INCOMING BID CARD (Creator Dashboard)
───────────────────────────────────────── */
.bid-incoming-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 179, 71, 0.04);
  border: 1px solid rgba(255, 179, 71, 0.15);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  backdrop-filter: blur(12px);
}

.bid-incoming-card:hover {
  border-color: rgba(255, 179, 71, 0.3);
  box-shadow: 0 4px 20px var(--color-gold-glow);
}

.bid-incoming-card.top-bid {
  border-color: var(--color-gold);
  background: rgba(255, 179, 71, 0.07);
  box-shadow: 0 0 24px var(--color-gold-glow);
}

.bid-incoming-card.top-bid::before {
  content: '👑 TOP BID';
  position: absolute;
  top: -8px;
  left: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-gold);
  background: var(--color-bg-primary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gold);
}

.bid-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(255, 77, 148, 0.1);
  border: 1px solid var(--color-pink-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  overflow: hidden;
}

.bid-avatar img { width: 100%; height: 100%; object-fit: cover; }

.bid-info { flex: 1; min-width: 0; }

.bid-username {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bid-type {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.bid-amount {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-gold);
  text-align: right;
  white-space: nowrap;
}

.bid-amount small {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  display: block;
}

.bid-actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* ─────────────────────────────────────────
   LIVE SESSION VIEW
───────────────────────────────────────── */
.live-view {
  position: relative;
  background: #000;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.live-video-area {
  flex: 1;
  position: relative;
  background: #000;
  overflow: hidden;
  /* Force un contexte d'empilement propre et isolé pour tous les calques
     du live (vidéo, overlays, HUD) — évite toute interférence de
     l'empilement CSS avec des éléments extérieurs à cette zone. */
  isolation: isolate;
}

.live-video-area video,
.live-video-area .video-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Session privée (BID accepté, vraie vidéo WebRTC) : la caméra locale passe
   en petite vignette (PIP) en bas à droite, le flux distant occupe le fond. */
.local-camera--pip {
  position: absolute !important;
  top: auto !important;
  bottom: 110px;
  right: 14px;
  width: 96px !important;
  height: 130px !important;
  border-radius: 12px;
  border: 2px solid var(--color-pink);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 5 !important;
  /* Déplaçable à la souris/au doigt (voir initDraggablePip() dans app.js) —
     touch-action:none empêche le navigateur d'interpréter le glissé comme
     un scroll de page sur mobile. */
  cursor: grab;
  touch-action: none;
}

.local-camera--pip.is-dragging {
  cursor: grabbing;
  box-shadow: 0 8px 28px rgba(0,0,0,0.65);
}

.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #180a20, #1a0814);
  font-size: 4rem;
}

/* HUD Overlay — z-index élevé (10, au-dessus de TOUS les autres calques du
   live : gift-flyover 6, hearts-container 5, local-camera--pip 5) + une
   couche de composition GPU dédiée (transform), sinon certains navigateurs
   mobiles (Android notamment) font passer la lecture vidéo matérielle
   au-dessus du reste dès que le flux démarre réellement, quel que soit le
   z-index CSS déclaré — les boutons Son/Commentaires/Cadeau/Terminer
   disparaissaient alors précisément "au démarrage de la vidéo". */
.live-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.live-hud__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(18, 8, 20, 0.75) 0%, transparent 100%);
  pointer-events: all;
}

.live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-danger);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.live-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulse-live 1s ease infinite;
}

.live-hud__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(0deg, rgba(18, 8, 20, 0.9) 0%, transparent 100%);
  pointer-events: all;
}

.live-billing-ticker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.live-elapsed {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
}

.live-cost {
  text-align: right;
}

.live-cost__value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-gold);
  line-height: 1;
}

.live-cost__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-muted);
}

.live-budget-bar {
  margin-bottom: var(--space-md);
}

.live-budget-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.live-budget-label .remaining {
  color: var(--color-success);
}

.live-budget-label.warning .remaining {
  color: var(--color-warning);
  animation: neon-flicker 1s infinite;
}

.live-budget-fill {
  height: 6px;
  background: rgba(255, 77, 148, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.live-budget-fill__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-success), var(--color-gold));
  border-radius: var(--radius-full);
  transition: width 1s linear;
}

.live-budget-fill__bar.warning {
  background: linear-gradient(90deg, var(--color-warning), var(--color-danger));
}

.live-controls {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.live-control-btn {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: rgba(255, 77, 148, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 148, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--transition-fast);
}

.live-control-btn:hover {
  background: var(--color-pink-glow);
  border-color: var(--color-pink-border);
}

.live-end-btn {
  flex: 1;
  background: rgba(255, 51, 85, 0.15);
  border-color: var(--color-danger);
  color: var(--color-danger);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────
   LIVE — commentaires temps réel + cadeaux (comme TikTok)
   ───────────────────────────────────────── */
.live-comments-overlay {
  position: absolute;
  left: var(--space-md);
  right: 80px;
  bottom: 168px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 34dvh;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, black 30%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%);
}

.live-comment-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(10, 6, 16, 0.5);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md, 10px);
  padding: 5px 10px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--color-text-primary);
  animation: live-comment-in 0.25s ease-out;
  word-break: break-word;
}

.live-comment-line__username {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--color-cyan);
  flex-shrink: 0;
}

.live-comment-line--gift {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.22), rgba(255, 77, 148, 0.18));
  border: 1px solid rgba(255, 215, 0, 0.35);
}

.live-comment-line--gift .live-comment-line__username { color: var(--color-gold); }

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

.live-comment-bar {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: 148px;
  z-index: 4;
  display: none;
  align-items: center;
  gap: var(--space-xs);
}

.live-comment-bar.open { display: flex; }

.live-comment-bar .input-field {
  flex: 1;
  margin-bottom: 0;
  background: rgba(10, 6, 16, 0.75);
  backdrop-filter: blur(10px);
}

/* Grand cadeau animé au centre de l'écran, déclenché par l'événement
   socket live:gift (envoyé par n'importe qui dans le live). */
.live-gift-flyover {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.live-gift-flyover__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: live-gift-pop 2.2s ease-out forwards;
}

.live-gift-flyover__emoji {
  font-size: 4.5rem;
  filter: drop-shadow(0 4px 18px rgba(255, 215, 0, 0.6));
}

.live-gift-flyover__emoji img {
  width: 96px;
  height: 96px;
  background: transparent;
}

.live-gift-flyover__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  background: rgba(10, 6, 16, 0.6);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

@keyframes live-gift-pop {
  0%   { opacity: 0; transform: scale(0.4) translateY(20px); }
  15%  { opacity: 1; transform: scale(1.1) translateY(0); }
  25%  { transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9) translateY(-10px); }
}

/* Picker de cadeaux (modal) */
.gift-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.gift-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 14px);
  padding: 12px 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.gift-picker-item:hover {
  background: var(--color-pink-glow);
  border-color: var(--color-pink-border);
}

.gift-picker-item__visual { font-size: 2.2rem; line-height: 1; }
.gift-picker-item__visual img { width: 44px; height: 44px; background: transparent; }
.gift-picker-item__name { font-size: 0.68rem; color: var(--color-text-primary); text-align: center; }
.gift-picker-item__price {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ─────────────────────────────────────────
   J'AIME — contenu (photos/vidéos) + live public (comme TikTok)
   ───────────────────────────────────────── */
.content-like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.content-like-btn:hover { border-color: var(--color-pink-border); background: var(--color-pink-glow); }

.content-like-btn.liked {
  border-color: rgba(255, 51, 85, 0.4);
  background: rgba(255, 51, 85, 0.1);
  color: #ff8fa3;
}

.content-like-btn span:first-child { font-size: 1rem; transition: transform 0.2s ease; }
.content-like-btn.liked span:first-child { animation: content-like-pop 0.35s ease; }

@keyframes content-like-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.content-viewer-media-wrap {
  position: relative;
}

/* ────────────────────────────────────────────────────────────
   FILIGRANE DYNAMIQUE (anti-fuite) — pseudo + horodatage du·de la
   spectateur·rice, tuilé en diagonale sur toute la surface du live/
   contenu. Objectif : pas d'empêcher la capture d'écran (impossible
   depuis le web, voir échange avec Jonas) mais rendre toute fuite
   traçable jusqu'à la personne qui l'a effectuée. Monté/démonté via
   mountWatermark()/unmountWatermark() (assets/js/app.js). Overlay
   pur CSS — pointer-events:none pour ne jamais gêner les clics, tuiles
   en grille pour survivre à un recadrage partiel de la capture.
   ──────────────────────────────────────────────────────────── */
.watermark-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.watermark-overlay__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-22deg);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.15);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  text-align: center;
  user-select: none;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.content-viewer-heart-burst {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.heart-burst__heart {
  font-size: 5rem;
  filter: drop-shadow(0 4px 16px rgba(255, 51, 85, 0.6));
  animation: heart-burst-pop 0.9s ease-out forwards;
}

@keyframes heart-burst-pop {
  0%   { opacity: 0; transform: scale(0.3); }
  25%  { opacity: 1; transform: scale(1.2); }
  40%  { transform: scale(1); }
  75%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* Cœurs flottants pendant le live public — montent depuis le bas-droite
   de la vidéo, comme TikTok, avec une légère dérive horizontale
   aléatoire (--drift, fixée en JS par particule). Auto-suppression via
   l'événement 'animationend' (voir spawnLiveHeartParticle() dans app.js)
   — pas d'accumulation DOM à nettoyer entre sessions. */
.live-hearts-container {
  position: absolute;
  right: 8px;
  bottom: 120px;
  width: 60px;
  height: 70%;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.live-heart-particle {
  position: absolute;
  right: 8px;
  bottom: 0;
  font-size: 1.8rem;
  animation: live-heart-rise 2.6s ease-in forwards;
}

@keyframes live-heart-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  10%  { opacity: 1; transform: translate(0, -10%) scale(1); }
  100% { opacity: 0; transform: translate(var(--drift, 0px), -420%) scale(0.9); }
}

/* ─────────────────────────────────────────
   SPENDING ALERT — TOAST NON-BLOQUANT
   (contrairement aux .modal-overlay classiques, celui-ci ne pose pas
   de fond opaque plein écran et n'empêche pas d'interagir avec le
   reste de la page — l'utilisateur garde le contrôle de son dernier
   budget restant sans être interrompu.)
───────────────────────────────────────── */
.spending-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-height) + var(--space-md) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  z-index: var(--z-modal);
  width: calc(100% - 32px);
  max-width: 380px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.spending-toast.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.spending-toast__card {
  background: rgba(26, 13, 31, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 179, 71, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 179, 71, 0.15);
  padding: var(--space-md);
}

.spending-alert {
  text-align: center;
  padding: var(--space-lg);
}

.spending-alert__icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  animation: float 2s ease-in-out infinite;
}

.spending-alert__title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: var(--color-warning);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  text-shadow: 0 0 12px var(--color-warning);
}

.spending-alert__text {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.spending-toast__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.spending-toast__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  animation: float 2s ease-in-out infinite;
}

.spending-toast__text {
  flex: 1;
}

.spending-toast__title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-warning);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.spending-toast__sub {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.spending-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 4px;
}
.spending-toast__close:hover { color: var(--color-text-primary); }

.spending-alert__extend {
  background: rgba(255, 77, 148, 0.05);
  border: 1px solid rgba(255, 77, 148, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  backdrop-filter: blur(8px);
}

.spending-alert__extend-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.extend-options {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.extend-option {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(26, 13, 31, 0.8);
  border: 1px solid rgba(255, 179, 71, 0.15);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  transition: all var(--transition-fast);
  text-align: center;
  backdrop-filter: blur(8px);
}

.extend-option.selected,
.extend-option:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: var(--color-gold-glow);
}

/* ─────────────────────────────────────────
   DASHBOARD (Creator)
───────────────────────────────────────── */
.dashboard-hero {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(135deg,
    rgba(193, 71, 233, 0.08) 0%,
    rgba(255, 77, 148, 0.06) 50%,
    transparent 100%
  );
  border-bottom: 1px solid var(--color-pink-border);
}

.dashboard-hero__greeting {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.dashboard-hero__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.earnings-card {
  background: rgba(255, 179, 71, 0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 179, 71, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-align: center;
  box-shadow:
    0 4px 32px var(--color-gold-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.earnings-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.earnings-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-gold);
  text-shadow: 0 0 24px var(--color-gold-glow);
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.earnings-change {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.earnings-change.positive { color: var(--color-success); }
.earnings-change.negative { color: var(--color-danger); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.stat-mini {
  background: rgba(255, 77, 148, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 148, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
}

.stat-mini__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-pink-light);
  margin-bottom: 2px;
  text-shadow: 0 0 10px var(--color-pink-glow);
}

.stat-mini__label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ─────────────────────────────────────────
   WALLET PAGE
───────────────────────────────────────── */
.wallet-balance-hero {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background: linear-gradient(180deg,
    rgba(193, 71, 233, 0.08) 0%,
    rgba(255, 77, 148, 0.04) 50%,
    transparent 100%
  );
  border-bottom: 1px solid var(--color-pink-border);
}

.wallet-token-display {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-gold), var(--color-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(255, 179, 71, 0.4));
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.wallet-token-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.token-package-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
}

.token-package {
  background: rgba(255, 77, 148, 0.05);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 77, 148, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.token-package::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-pink-glow), transparent, var(--color-violet-glow));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.token-package:hover::before,
.token-package.selected::before { opacity: 1; }

.token-package:hover,
.token-package.selected {
  border-color: var(--color-pink-border);
  box-shadow: 0 8px 28px var(--color-pink-glow);
  transform: translateY(-2px);
}

.token-package.popular {
  border-color: var(--color-violet-border);
  box-shadow: 0 4px 20px var(--color-violet-glow);
}

.token-package__popular-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, var(--color-pink), var(--color-violet));
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 0 var(--radius-xl) 0 var(--radius-lg);
}

.token-package__icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  position: relative;
}

.token-package__amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  line-height: 1;
  position: relative;
}

.token-package__unit {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-bottom: var(--space-sm);
  position: relative;
}

.token-package__price {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-text-primary);
  position: relative;
}

.token-package__bonus {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-success);
  margin-top: 4px;
  position: relative;
}

.payment-methods {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.payment-method-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 77, 148, 0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 148, 0.1);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.payment-method-btn:hover {
  border-color: var(--color-pink-border);
  background: var(--color-pink-glow);
  box-shadow: 0 4px 16px var(--color-pink-glow);
}

.payment-method-btn .method-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(255, 77, 148, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.payment-method-btn .method-info { flex: 1; text-align: left; }

.payment-method-btn .method-name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
}

.payment-method-btn .method-desc {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ─────────────────────────────────────────
   CONTENT GALLERY
───────────────────────────────────────── */
.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.content-thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(26, 13, 31, 0.8);
  cursor: pointer;
}

.content-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.content-thumb:hover img { transform: scale(1.05); }

.content-thumb__lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(18, 8, 20, 0.65);
  backdrop-filter: blur(3px);
  gap: 4px;
  transition: all var(--transition-fast);
}

.content-thumb:hover .content-thumb__lock {
  background: rgba(18, 8, 20, 0.78);
  backdrop-filter: blur(6px);
}

.content-thumb__lock-icon { font-size: 1.2rem; }

.content-thumb__price {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-gold);
}

.content-thumb__type {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.7rem;
  background: rgba(18, 8, 20, 0.6);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
}

.content-thumb__stats {
  position: absolute;
  bottom: 4px;
  left: 4px;
  display: flex;
  gap: 4px;
  z-index: 1;
}

.content-thumb__stat-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-primary);
  background: rgba(18, 8, 20, 0.65);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-sm);
  padding: 2px 5px;
  line-height: 1.3;
}

/* ─────────────────────────────────────────
   PROFILE VIEW
───────────────────────────────────────── */
.creator-profile-hero {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.creator-profile-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom; /* Show body, hide top/face */
}

.creator-profile-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    var(--color-bg-primary) 0%,
    rgba(18, 8, 20, 0.6) 50%,
    rgba(18, 8, 20, 0.82) 100%
  );
}

/* Anonymous face overlay */
.creator-profile-hero__anon {
  position: absolute;
  top: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 77, 148, 0.1);
  border: 1px solid var(--color-pink-border);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-pink-light);
  letter-spacing: 0.1em;
  backdrop-filter: blur(12px);
  white-space: nowrap;
}

.creator-profile-info {
  position: relative;
  padding: var(--space-md);
  margin-top: -40px;
}

.creator-profile__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  color: var(--color-text-primary);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.creator-profile__handle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.creator-profile__meta {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.creator-profile__meta-item {
  text-align: center;
}

.creator-profile__meta-value {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-text-primary);
}

.creator-profile__meta-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ─────────────────────────────────────────
   REGISTER / AUTH
───────────────────────────────────────── */
.auth-container {
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 400px;
  margin: 0 auto;
}

.role-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.role-card {
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-xl);
  background: rgba(255, 77, 148, 0.05);
  backdrop-filter: blur(16px);
  border: 2px solid rgba(255, 77, 148, 0.1);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
}

.role-card.selected-creator {
  border-color: var(--color-pink);
  background: var(--color-pink-glow);
  box-shadow: 0 0 24px var(--color-pink-glow);
}

.role-card.selected-consumer {
  border-color: var(--color-violet);
  background: var(--color-violet-glow);
  box-shadow: 0 0 24px var(--color-violet-glow);
}

.role-card__icon { font-size: 2rem; margin-bottom: var(--space-sm); }

.role-card__title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.role-card__desc {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* ─────────────────────────────────────────
   ONBOARDING / LEGAL DISCLAIMER
───────────────────────────────────────── */
.legal-box {
  background: rgba(255, 51, 85, 0.05);
  border: 1px solid rgba(255, 51, 85, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.legal-box strong { color: var(--color-danger); }

/* ─────────────────────────────────────────
   UPLOAD CONTENT FORM
───────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--color-pink-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  transition: all var(--transition-base);
  cursor: pointer;
  background: rgba(255, 77, 148, 0.03);
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--color-pink);
  background: var(--color-pink-glow);
  box-shadow: 0 0 24px var(--color-pink-glow);
}

.upload-zone__icon { font-size: 2.5rem; margin-bottom: var(--space-md); }

.upload-zone__title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-pink-light);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.upload-zone__sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.face-warning-banner {
  background: rgba(255, 170, 0, 0.06);
  border: 1px solid rgba(255, 170, 0, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.face-warning-banner .icon { font-size: 1.2rem; flex-shrink: 0; }
.face-warning-banner strong { color: var(--color-warning); }

/* ─────────────────────────────────────────
   NOTIFICATIONS — cloche réelle (remplace l'ancien .notif-dot 100%
   décoratif) + panneau déroulant + modale d'installation PWA.
───────────────────────────────────────── */
.notif-btn .notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-pink-vivid);
  border: 2px solid var(--color-bg-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notifications-panel {
  position: fixed;
  top: 64px;
  right: var(--space-md);
  left: var(--space-md);
  max-width: 380px;
  margin-left: auto;
  max-height: min(70dvh, 520px);
  display: flex;
  flex-direction: column;
  background: rgba(18, 8, 20, 0.97);
  border: 1px solid var(--color-pink-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  z-index: var(--z-modal);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.notifications-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notifications-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.notifications-panel__header h3 {
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
}

.notifications-panel__mark-all {
  background: none;
  border: none;
  color: var(--color-pink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 4px 6px;
  white-space: nowrap;
}

.notifications-panel__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

.notifications-panel__list {
  overflow-y: auto;
  flex: 1;
}

.notifications-panel__empty {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.notifications-panel__footer {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.notifications-panel__push-toggle {
  width: 100%;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 8px;
  cursor: pointer;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--transition-fast);
}

.notification-item:hover { background: rgba(255, 255, 255, 0.03); }

.notification-item--unread {
  background: rgba(255, 77, 148, 0.05);
}

.notification-item__icon {
  font-size: 1rem;
  flex: 0 0 auto;
  line-height: 1.4;
}

.notification-item__body { flex: 1; min-width: 0; }

.notification-item__title {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
}

.notification-item__text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-item__time {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.notification-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-pink-vivid);
  flex: 0 0 auto;
  margin-top: 4px;
}

/* ============================================================
   AVIS / CONFIANCE (migration 015)
   Étoiles dorées (cohérent avec .top-fan-badge/--color-gold, déjà associé
   aux éléments de valeur/reconnaissance sur la plateforme) — sur le profil
   public (lecture + écriture) et le Studio (lecture + réponse créatrice).
   ============================================================ */

.star-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.star-picker__star {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  transition: transform 0.1s ease, color 0.15s ease;
}

.star-picker__star:hover {
  transform: scale(1.15);
}

.star-picker__star--filled {
  color: var(--color-gold);
}

.review-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
}

.review-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.review-card__stars {
  color: var(--color-gold);
  font-size: 0.75rem;
  letter-spacing: 1px;
  flex: 0 0 auto;
}

.review-card__author {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-card__date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-muted);
  flex: 0 0 auto;
  white-space: nowrap;
}

.review-card__flag {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  opacity: 0.4;
  padding: 2px 4px;
  flex: 0 0 auto;
  transition: opacity 0.15s ease;
}

.review-card__flag:hover {
  opacity: 1;
}

.review-card__comment {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 6px;
  word-break: break-word;
}

.review-card__reply {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 215, 0, 0.06);
  border-left: 2px solid var(--color-gold);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.review-card__reply-label {
  display: block;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.58rem;
  margin-bottom: 3px;
}

.studio-review-reply-form {
  margin-top: 8px;
}

/* ============================================================
   GAMIFICATION LÉGÈRE (migration 016)
   Bonus quotidien (série), palier de fidélité, parrainage.
   ============================================================ */

.daily-bonus-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 52px;
  padding: 8px 6px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.daily-bonus-day__num {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.daily-bonus-day__amount {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.daily-bonus-day--past {
  opacity: 0.45;
}

.daily-bonus-day--current {
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--color-gold);
  box-shadow: 0 0 12px var(--color-gold-glow);
  transform: scale(1.08);
}

.daily-bonus-day--current .daily-bonus-day__num,
.daily-bonus-day--current .daily-bonus-day__amount {
  color: var(--color-gold);
}

.loyalty-card__badge {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-gold);
  margin-top: 2px;
}

.referral-card #profile-referral-link {
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

/* ============================================================
   STATISTIQUES STUDIO (analytics — remplace le toast décoratif)
   ============================================================ */

.analytics-chart {
  height: 90px;
  margin-bottom: 8px;
}

.analytics-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.analytics-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.analytics-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.analytics-breakdown__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.analytics-breakdown__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.analytics-breakdown__label {
  flex: 1;
  color: var(--color-text-secondary);
}

.analytics-breakdown__value {
  color: var(--color-text-primary);
  white-space: nowrap;
}

.analytics-content-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-sm);
}

.analytics-content-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analytics-content-row__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 8px);
  object-fit: cover;
  flex: 0 0 auto;
}

.analytics-content-row__info {
  flex: 1;
  min-width: 0;
}

.analytics-content-row__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-content-row__stats {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.analytics-content-row__revenue {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-gold, #ffd700);
  white-space: nowrap;
  flex: 0 0 auto;
}

.analytics-summary-line {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.analytics-funnel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.analytics-funnel__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
}

.analytics-funnel__icon {
  font-size: 1rem;
}

.analytics-funnel__count {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-text-primary);
}

.analytics-funnel__label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.analytics-funnel__rate {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-cyan);
  margin-top: 4px;
  margin-bottom: var(--space-sm);
}

/* ─────────────────────────────────────────
   TABLETTE TACTILE (≥768px) — adaptations par page
   Complète la coquille globale élargie dans main.css. Chaque grille pensée
   pour 430px de large (2-3 colonnes serrées) profite ici de plus de
   colonnes plutôt que de simplement s'étirer avec des vignettes énormes.

   Même garde tactile que main.css : (hover: none) and (pointer: coarse)
   exclut un PC/laptop à fenêtre large — l'affichage PC doit rester
   identique au mobile, seule une vraie tablette tactile est concernée.
───────────────────────────────────────── */
@media (min-width: 768px) and (hover: none) and (pointer: coarse) {
  /* Feed — grille des créateurs proches (feed.js, #nearby-grid,
     filtrable via .feed-filters : proches/nouveaux/tendances/...). */
  #nearby-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }

  /* Contenu (profil créateur, dashboard "Mes publications") — 3 colonnes
     fixes quel que soit l'écran actuellement ; sur tablette les vignettes
     deviennent inutilement grosses, on en affiche plus à la place. */
  .content-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  /* Live — la zone vidéo pleine hauteur devient très large sur tablette ;
     on la borne pour garder un cadrage proche du format d'origine plutôt
     qu'un rectangle démesurément étiré, HUD/PIP recalculent leurs cotes en
     conséquence (voir .local-camera--pip ci-dessous). */
  .live-view {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
  }

  .local-camera--pip {
    width: 130px !important;
    height: 176px !important;
    bottom: 130px;
    right: 18px;
  }
}

@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {
  #nearby-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .content-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}