/* vos-encheres.com — LIVES (« live shopping », façon Whatnot).
   Mobile-first (le desktop hérite des patrons via app.desktop.css : .page-pad
   prend la largeur lecture + le rail). Aucun style inline (CSP stricte). */

/* ---------- Liste des lives ---------- */
.live-list-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 4px 10px;
}
.live-list-title { flex: 1; margin: 0; font-size: 20px; font-weight: 800; }
.live-new-btn {
  border: 0; border-radius: 999px; padding: 9px 14px;
  background: #ff5a36; color: #fff; font-weight: 700; font-size: 15px;
  cursor: pointer;
}
.live-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 0 90px;
}
.live-card {
  display: flex; flex-direction: column; gap: 0;
  border: 0; padding: 0; background: transparent; text-align: left; cursor: pointer;
}
.live-card-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 14px; background-size: cover; background-position: center;
  background-color: #eceaf3;
}
.live-card-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #fff;
}
.live-card-badge.on { background: #e0173d; }
.live-card-badge.on::before { content: '● '; }
.live-card-badge.soon { background: rgba(20, 18, 30, .72); }
.live-card-body { padding: 7px 2px 0; }
.live-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.25;
}
.live-card-seller { display: block; margin-top: 2px; font-size: 12px; color: #6b6680; }
.live-empty { text-align: center; color: #6b6680; padding: 60px 20px; }
.live-empty-emoji { font-size: 44px; margin-bottom: 10px; }

/* ---------- Salle d'un live ---------- */
#screen-live { display: flex; flex-direction: column; background: #14121e; color: #f4f2fa; }
.live-room-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 6px;
  background: #14121e;
}
/* En-tête sombre : le bouton retour n'est PAS le cercle blanc par défaut
   (.icon-btn a background:#FFFFFF) — chevron blanc sur fond transparent. */
.live-room-head .icon-btn {
  color: #f4f2fa; background: transparent; border: 0; width: 30px; font-size: 26px;
}
/* Avatar du vendeur en tête (façon TikTok/Whatnot) */
.live-room-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background-color: #3a3450; color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 15px; font-weight: 800;
  background-size: cover; background-position: center; overflow: hidden;
}
.live-room-titlewrap { flex: 1; min-width: 0; }
.live-room-title {
  font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.live-room-seller { font-size: 12px; color: #b3aecb; }
.live-badge {
  padding: 4px 10px; border-radius: 999px; background: #e0173d;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff;
  white-space: nowrap;
}
.live-video-wrap {
  position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 56vh;
  background: #000; display: flex; align-items: center; justify-content: center;
}
.live-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.live-video-soon {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #b3aecb; font-size: 14px; padding: 16px;
  text-align: center; background: #000;
}
/* Quand la vidéo joue, on masque l'écran d'attente (et son fond noir) pour
   laisser voir le flux. */
.live-video-wrap.has-video .live-video-soon { display: none; }

/* Bandeau « lot en cours » */
.live-lot {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; text-align: left; cursor: pointer;
  padding: 10px 12px; background: #211d2f; color: #f4f2fa;
}
.live-lot-cover {
  width: 46px; height: 46px; border-radius: 10px; flex: none;
  background-size: cover; background-position: center; background-color: #322c44;
}
.live-lot-info { flex: 1; min-width: 0; }
.live-lot-title {
  display: block; font-weight: 700; font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.live-lot-price { display: block; font-size: 13px; color: #b3aecb; }
.live-lot-cta { color: #ff7a5c; font-weight: 800; font-size: 14px; white-space: nowrap; }

/* Contrôles vendeur */
.live-seller-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.live-sbtn {
  flex: 1; min-width: 120px; border: 1px solid #3a3450; border-radius: 10px;
  padding: 10px; background: #211d2f; color: #f4f2fa; font-weight: 700;
  font-size: 14px; cursor: pointer;
}
.live-sbtn-end { color: #ff8a8a; border-color: #5a3040; }
.live-ingest { padding: 10px 12px; background: #1b1828; font-size: 13px; }
.live-ingest-h { margin: 0 0 8px; color: #b3aecb; }
.live-ingest-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.live-ingest-row span { font-size: 12px; color: #b3aecb; }
.live-ingest-row input {
  width: 100%; border: 1px solid #3a3450; border-radius: 8px; padding: 9px;
  background: #14121e; color: #f4f2fa; font-size: 16px;
}

/* Chat */
.live-chat {
  flex: 1; overflow-y: auto; padding: 10px 12px; display: flex;
  flex-direction: column; gap: 6px; min-height: 120px;
}
.live-msg { font-size: 14px; line-height: 1.35; }
.live-msg-name { font-weight: 800; color: #ffb39c; }
.live-msg-text { color: #ece9f6; }
.live-chat-form {
  display: flex; gap: 8px; padding: 10px 12px;
  background: #14121e; border-top: 1px solid #2a2640;
  position: sticky; bottom: 0;
}
.live-chat-form .composer-input {
  flex: 1; border: 1px solid #3a3450; border-radius: 999px; padding: 10px 14px;
  background: #211d2f; color: #f4f2fa; font-size: 16px;
}

/* Sélecteur de lot (panneau bas) */
.live-lot-picker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  max-height: 70vh; overflow-y: auto;
  background: #1b1828; color: #f4f2fa;
  border-radius: 16px 16px 0 0; padding: 14px 12px 24px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .5);
}
.live-lot-picker-h { font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.live-lot-picker-empty { color: #b3aecb; padding: 14px 4px; }
.live-pick-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; border-bottom: 1px solid #2a2640; background: transparent;
  color: #f4f2fa; text-align: left; padding: 10px 2px; cursor: pointer;
}
.live-pick-cover {
  width: 42px; height: 42px; border-radius: 8px; flex: none;
  background-size: cover; background-position: center; background-color: #322c44;
}
.live-pick-title {
  flex: 1; min-width: 0; font-weight: 700; font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.live-pick-price { color: #b3aecb; font-size: 13px; }
.live-lot-picker-close {
  width: 100%; margin-top: 12px; border: 1px solid #3a3450; border-radius: 10px;
  padding: 11px; background: transparent; color: #f4f2fa; font-weight: 700;
  cursor: pointer;
}

/* ---------- Carrousel « En direct » en tête du feed (Whatnot/TikTok) ---------- */
.feed-live-rail { margin-bottom: 6px; }
.live-rail-row {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.live-rail-row::-webkit-scrollbar { display: none; }
.live-rail-card {
  flex: 0 0 auto; width: 104px; border: 0; padding: 0; background: transparent;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.live-rail-thumb {
  position: relative; display: block; width: 104px; height: 140px;
  border-radius: 14px; background-size: cover; background-position: center;
  background-color: #1b1828;
  box-shadow: 0 0 0 2px #e0173d, 0 0 0 4px rgba(224, 23, 61, .25);
}
.live-rail-badge {
  position: absolute; top: 7px; left: 7px; padding: 2px 7px; border-radius: 999px;
  background: #e0173d; color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .03em;
}
.live-rail-badge::before { content: '● '; }
.live-rail-foot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.live-rail-avatar { width: 22px; height: 22px; border-radius: 50%; flex: none; font-size: 11px; }
.live-rail-name {
  font-size: 12px; font-weight: 600; color: #2a2533; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Carte « Passer en direct » (création, façon « Ta story ») */
.live-rail-go {
  width: 104px; align-items: center; justify-content: center;
}
.live-rail-go .live-rail-go-ico,
.live-rail-go .live-rail-go-lbl { display: block; text-align: center; }
.live-rail-go-ico {
  width: 104px; height: 140px; border-radius: 14px;
  border: 2px dashed #e0173d; color: #e0173d; font-size: 34px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224, 23, 61, .05);
}
.live-rail-go-lbl { font-size: 12px; font-weight: 700; color: #e0173d; margin-top: 2px; }

/* ---------- Bouton « activer le son » (spectateur, flux muet) ---------- */
/* Bouton « activer le son » : le flux spectateur démarre en MUET (autoplay) →
   bouton TRÈS visible (rouge, centré) pour que le spectateur pense à l'activer. */
.live-unmute {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 5; border: 0; border-radius: 999px; padding: 13px 24px;
  background: rgba(224, 23, 61, .94); color: #fff; font-size: 16px; font-weight: 800;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  animation: live-unmute-pulse 1.8s ease-in-out infinite;
}
@keyframes live-unmute-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

/* ---------- Feuille de création d'un live (panneau bas auto-stylé) ---------- */
#live-create-backdrop {
  position: fixed; inset: 0; z-index: 1190; background: rgba(0, 0, 0, .45);
}
#live-create-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: #fff; border-radius: 18px 18px 0 0; padding: 16px 16px 26px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
}
.live-create-handle {
  width: 40px; height: 4px; border-radius: 2px; background: #d8d4e0;
  margin: 0 auto 14px;
}
.live-create-h { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
#live-create-title {
  width: 100%; border: 1px solid #ddd9e6; border-radius: 12px; padding: 13px 14px;
  font-size: 16px; margin-bottom: 14px;
}
.live-create-go {
  width: 100%; border: 0; border-radius: 12px; padding: 14px;
  background: #e0173d; color: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
}

/* ---------- Compteur spectateurs ---------- */
.live-viewers {
  padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .14);
  color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.live-rail-views {
  position: absolute; bottom: 7px; left: 7px; padding: 2px 6px;
  border-radius: 999px; background: rgba(20, 18, 30, .74); color: #fff;
  font-size: 10px; font-weight: 700;
}

/* ---------- Lot = mini-enchère temps réel ---------- */
.live-lot-main {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  border: 0; background: transparent; color: inherit; text-align: left;
  cursor: pointer; padding: 0;
}
.live-lot-metarow { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.live-lot-timer { font-size: 13px; font-weight: 800; color: #ffd27a; white-space: nowrap; }
.live-lot-timer.live-lot-timer-end { color: #ff7a7a; }
.live-lot-bid {
  flex: none; border: 0; border-radius: 10px; padding: 11px 16px;
  background: #ff5a36; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer;
}
.live-lot-bid:disabled { background: #3a3450; color: #b3aecb; cursor: default; }

/* ---------- Catégorie (feuille de création) ---------- */
.live-cat-label { font-size: 13px; color: #6b6680; margin-bottom: 8px; }
.live-cat-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  max-height: 124px; overflow-y: auto;
}
.live-cat-chip {
  border: 1px solid #ddd9e6; border-radius: 999px; padding: 8px 12px;
  background: #fff; font-size: 14px; cursor: pointer;
}
.live-cat-chip.on { background: #e0173d; color: #fff; border-color: #e0173d; }

/* ---------- Raccourci « Live » dans l'en-tête Vendre ---------- */
.sell-golive {
  border: 0; border-radius: 999px; padding: 5px 11px; background: #e0173d;
  color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
}

/* ---------- APP NATIVE iOS : live MASQUÉ jusqu'au binaire avec permissions ----
   La WKWebView charge le site de prod → toute évolution apparaît dans l'app, y
   compris le binaire EN REVIEW. Sans NSMicrophoneUsageDescription, « Passer en
   direct » (getUserMedia micro) CRASHE = rejet App Store. On masque donc tous
   les points d'entrée du live dans l'app native (web inchangé). À RETIRER une
   fois un binaire iOS à jour approuvé. */
.native-app .feed-live-rail { display: none !important; }
.native-app #sell-go-live { display: none !important; }
.native-app .p-menu-item[data-action="lives"] { display: none !important; }
/* Défense en profondeur : même via un lien profond /live/{id}, pas de bouton de
   diffusion (la LECTURE WHEP, elle, ne touche pas la caméra → sans risque). */
.native-app #live-seller-bar,
.native-app #live-create-sheet,
.native-app #live-create-backdrop { display: none !important; }

/* ---------- Écran « Live terminé » ---------- */
.live-ended-ov {
  position: absolute; inset: 0; z-index: 4; background: rgba(10, 8, 16, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center;
}
.live-ended-emoji { font-size: 40px; opacity: .85; }
.live-ended-txt { font-size: 18px; font-weight: 800; color: #f4f2fa; }
.live-ended-next {
  border: 0; border-radius: 999px; padding: 12px 22px; background: #e0173d;
  color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
.live-ended-back {
  border: 1px solid #4a4460; border-radius: 999px; padding: 10px 22px;
  background: transparent; color: #d8d4e6; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* ---------- Navigation verticale entre lives (TikTok) ---------- */
.live-nav {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  z-index: 3; display: flex; flex-direction: column; gap: 12px;
}
.live-nav-btn {
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(20, 18, 30, .55); color: #fff; font-size: 22px; font-weight: 700;
  cursor: pointer; backdrop-filter: blur(4px); line-height: 1;
}
.live-nav-btn:disabled { opacity: .25; cursor: default; }

/* ---------- Bascule caméra avant/arrière (vendeur) ---------- */
.live-flip {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(20, 18, 30, .55); color: #fff; font-size: 20px; cursor: pointer;
  backdrop-filter: blur(4px); line-height: 1;
}

/* ---------- Miroir SELFIE (caméra frontale du vendeur, façon Snapchat) ---------- */
.live-video.live-mirror { transform: scaleX(-1); }

/* ---------- Bouton partage du live (en-tête) ---------- */
.live-share-btn {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; cursor: pointer;
}

/* ---------- Alignement du carrousel sur le reste du feed (gouttière 12px) ----
   Comme .fs-row : l'inset latéral est porté par les cartes de BORD (WebKit iOS
   n'honore pas le padding sur un scroller overflow-x). */
.live-rail-row > .live-rail-card:first-child { margin-left: 12px; }
.live-rail-row > .live-rail-card:last-child { margin-right: 12px; }

/* Fond assombri du sélecteur d'articles (feuille modale) */
.live-lot-picker-bd {
  position: fixed; inset: 0; z-index: 1190; background: rgba(0, 0, 0, .5);
}

/* coverImg() insère un <img.g-cover> (+ un fond flou .g-cover-bg) qui ne sont
   stylés QUE dans .g-photo : hors de là (mes vignettes live), ils s'affichaient
   en TAILLE NATURELLE et débordaient en bas. On les contraint à la boîte, comme
   .sale-thumb (img en flux, fond flou masqué). */
.live-pick-cover, .live-lot-cover, .live-rail-thumb, .live-card-thumb { overflow: hidden; }
.live-pick-cover img.g-cover, .live-lot-cover img.g-cover,
.live-rail-thumb img.g-cover, .live-card-thumb img.g-cover {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.live-pick-cover img.g-cover-bg, .live-lot-cover img.g-cover-bg,
.live-rail-thumb img.g-cover-bg, .live-card-thumb img.g-cover-bg { display: none; }

/* Miniature (frame du flux Cloudflare) dans les cartes de live */
.live-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Effets temps réel : bulles d'enchère (façon TikTok) ---------- */
.live-fx {
  position: absolute; left: 12px; right: 12px; bottom: 92px; height: 0;
  z-index: 4; pointer-events: none;
}
.live-fx-bid {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: center;
  gap: 8px; white-space: nowrap; color: #fff;
  background: rgba(224, 23, 61, .94); border-radius: 999px;
  padding: 5px 14px 5px 5px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.live-fx-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background-color: #7a1027; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800;
  background-size: cover; background-position: center;
}
.live-fx-txt { display: flex; flex-direction: column; line-height: 1.12; }
.live-fx-name { font-size: 11.5px; font-weight: 700; opacity: .92; }
.live-fx-amt { font-size: 14px; font-weight: 800; }

/* ---------- Chat par-dessus la vidéo (façon TikTok) ---------- */
.live-chat-ov {
  position: absolute; left: 12px; bottom: 16px; z-index: 3; max-width: 72%;
  display: flex; flex-direction: column; gap: 5px; pointer-events: none;
}
.live-cov-msg {
  font-size: 13px; line-height: 1.25; color: #fff; width: fit-content; max-width: 100%;
  background: rgba(10, 8, 16, .5); border-radius: 12px; padding: 5px 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.live-cov-name { font-weight: 800; color: #ffb39c; }
.live-cov-sys { background: rgba(224, 23, 61, .55); font-weight: 700; }

/* ---------- Pluie de réactions (emojis qui montent à droite) ---------- */
.live-react-rain {
  position: absolute; right: 16px; bottom: 16px; z-index: 4; height: 0; width: 60px;
  pointer-events: none;
}
.live-rain-emoji {
  position: absolute; right: 0; bottom: 0; font-size: 30px;
  will-change: transform, opacity;
}

/* ---------- Barre de réactions (sous le chat) ---------- */
.live-reactions {
  display: flex; gap: 6px; padding: 6px 12px 0; justify-content: flex-end;
}
.live-react {
  border: 0; background: rgba(255, 255, 255, .09); border-radius: 999px;
  width: 38px; height: 38px; font-size: 19px; cursor: pointer; line-height: 1;
}
.live-react:active { transform: scale(.88); }