/* ═══════════════════════════════════════════════════════════════════════════
   /nos-vendeuses/decouvrir — cartes à glisser
   ---------------------------------------------------------------------------
   Rendu : includes/discover.php. Comportement : js/discover.js.
   Fichier identique sur les deux sites : les couleurs passent par les jetons
   --vtp-* de vtp.css, qui portent la palette de chacun.
   ═════════════════════════════════════════════════════════════════════════ */

.vtp-discover { padding-bottom: 28px; }
.vtp-discover-title { text-align: center; margin: 4px 0 16px; }

/* Le paquet tient dans l'écran visible : titre, boutons et nav basse compris. */
.vtp-swipe {
  position: relative; margin-inline: auto; max-width: 440px;
  height: min(600px, calc(100svh - var(--vtp-header-h) - var(--vtp-bottomnav-h) - 250px));
  min-height: 420px;
}
.vtp-swipe-deck { position: absolute; inset: 0; }

/* ── Carte ─────────────────────────────────────────────────────────────── */

.vtp-swipe-card {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 28px; background: var(--vtp-ink);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  color: #fff; user-select: none; -webkit-user-select: none;
  touch-action: pan-y;                 /* le défilement vertical reste au navigateur */
  transform-origin: 50% 100%;
  transition: transform .3s ease, opacity .3s ease;
  cursor: grab;
}
.vtp-swipe-card[hidden] { display: none; }
.vtp-swipe-card.is-dragging { transition: none; cursor: grabbing; }
/* Les cartes du dessous dépassent un peu : on voit qu'il y en a d'autres. */
.vtp-swipe-card[data-pos="1"] { transform: translateY(12px) scale(.95); pointer-events: none; }
.vtp-swipe-card[data-pos="2"] { transform: translateY(24px) scale(.90); pointer-events: none; opacity: .7; }

.vtp-swipe-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vtp-swipe-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(15,8,15,0.92) 0%, rgba(15,8,15,0.6) 42%, rgba(15,8,15,0) 72%);
}

.vtp-swipe-avatar {
  position: absolute; top: 18px; left: 18px; z-index: 1;
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.25); pointer-events: none;
}

.vtp-swipe-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
}
.vtp-swipe-name {
  margin: 0; font-family: Fredoka, 'Nunito Sans', sans-serif; font-weight: 600;
  font-size: 28px; line-height: 1.1; color: #fff;
}
.vtp-swipe-row { display: flex; flex-wrap: wrap; gap: 6px; }
.vtp-swipe-chip {
  display: inline-block; padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 700; color: #fff;
}
.vtp-swipe-bio {
  margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; font-weight: 600;
  color: rgba(255,255,255,0.9);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vtp-swipe-thumbs { display: flex; gap: 8px; margin-top: 2px; }
.vtp-swipe-thumb {
  position: relative; width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: 12px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.1);
}
.vtp-swipe-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vtp-swipe-price {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px;
  background: rgba(15,8,15,0.7); font-size: 10px; font-weight: 800; color: #fff;
}
.vtp-swipe-count { margin: 0; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); }

/* Tampons « J'aime » / « Suivante » : leur opacité suit le geste (JS). */
.vtp-swipe-stamp {
  position: absolute; top: 28px; z-index: 2; opacity: 0; pointer-events: none;
  padding: 6px 14px; border: 3px solid; border-radius: 12px;
  font-family: Fredoka, sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase;
  background: rgba(255,255,255,0.12);
}
.vtp-swipe-stamp--like { left: 22px;  color: #3bc98a; transform: rotate(-14deg); }
.vtp-swipe-stamp--nope { right: 22px; color: #ff5d6c; transform: rotate(14deg); }

/* ── Boutons ───────────────────────────────────────────────────────────── */

.vtp-swipe-actions {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 26px;
}
.vtp-swipe-actions[hidden] { display: none; }
.vtp-swipe-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  background: var(--vtp-surface); color: var(--vtp-ink);
  box-shadow: var(--vtp-shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vtp-swipe-btn:hover { transform: translateY(-2px); box-shadow: var(--vtp-shadow-media); }
.vtp-swipe-btn:active { transform: scale(.94); }
.vtp-swipe-btn--nope { width: 58px; height: 58px; border-radius: 50%; }
.vtp-swipe-btn--shop {
  height: 48px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 800; color: var(--vtp-ink);
}
:where(.vtp) a.vtp-swipe-btn--shop:hover { color: var(--vtp-ink); }
.vtp-swipe-btn--like {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--vtp-grad); color: #fff; box-shadow: var(--vtp-shadow-cta);
}
.vtp-swipe-btn--like svg { fill: currentColor; }

.vtp-swipe-hint { text-align: center; max-width: 340px; margin: 18px auto 0; line-height: 1.5; }

/* ── Fin du paquet ─────────────────────────────────────────────────────── */

.vtp-swipe-end {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  padding: 24px; border-radius: 28px; overflow-y: auto;
  background: var(--vtp-surface); box-shadow: var(--vtp-shadow-card);
}
.vtp-swipe-end[hidden] { display: none; }
.vtp-swipe-likes { width: 100%; }
.vtp-swipe-likes[hidden] { display: none; }
.vtp-swipe-likes ul {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.vtp-swipe-likes a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px;
  text-decoration: none; font-size: 12px; font-weight: 700; color: var(--vtp-ink);
}
.vtp-swipe-likes img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--vtp-line);
}
.vtp-swipe-end-actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .vtp-swipe-card { transition: none; }
}