/* VXG-v2 — cartes cam en direct.
 *
 * La carte cam émet la MÊME ossature qu'une carte vidéo
 * (.thumb.thumb_rel.item.vxg-thumb-card > .img-holder / .vxg-card-meta), elle
 * hérite donc du 16:9, du rayon 16 px, du dégradé ::after, du zoom au survol et
 * de la grille méta sans une ligne de CSS. Ce fichier ne décrit QUE ce qui
 * distingue un direct d'une vidéo : le badge LIVE, les chips de tags,
 * l'objectif en cours, et les squelettes qui garantissent un CLS nul.
 *
 * Le bloc de rattrapage vxg-v2.css:5746-5764 (« Tuiles promo (livecams) »)
 * devient inutile : il existait précisément parce que ces tuiles ne portaient
 * pas .vxg-thumb-card. Sa suppression est proposée à part.
 *
 * Nommage : aucun jeton visé par les filtres cosmétiques (promo, ad, banner,
 * sponsor, spot, livecam). AdGuard cible nommément `gayxnow.com##ul.grid-temp >
 * li.livecam` et `##ul.grid-temp > li.spot` sur le miroir anglais.
 */

/* ---------------------------------------------------------------------------
   1. Badge LIVE — prend la place de la durée, en bas à droite de l'image.
   Réutilise l'animation du menu (@keyframes vxg-menu-live-pulse, vxg-v2.css:2512)
   plutôt que d'en redéclarer une.
   --------------------------------------------------------------------------- */
html .thumb.vxg-lv-tile .time.vxg-lv-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--primary);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  padding:3px 8px;
}
html .thumb.vxg-lv-tile .time.vxg-lv-badge i{
  width:5px;height:5px;border-radius:999px;background:#fff;
  animation:vxg-menu-live-pulse 1.2s ease-in-out infinite;
}
/* Le compteur de spectateurs, séparé par une fine barre — même emplacement que la
   durée d'une carte vidéo. Il était sur une rangée à lui sous la carte : ~26px
   d'icônes et de marges qui faisaient dépasser la tuile cam dans la grille. */
html .thumb.vxg-lv-tile .time.vxg-lv-badge b{
  font-weight:600;
  padding-left:6px;
  margin-left:1px;
  border-left:1px solid oklch(1 0 0 / .38);
  font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce){
  html .thumb.vxg-lv-tile .time.vxg-lv-badge i{animation:none}
}

/* Drapeau accolé au pseudo — il remplace la ligne « Colombie · Solo », qui
   occupait une rangée entière pour un nom de pays et un format quasi toujours
   identique (81 % du vivier est en solo). Les fichiers existent déjà pour les
   243 pays sous /static/images/flags ; 363 octets pièce, et le jeu couvre les
   51 pays réellement présents dans le flux. */
html .vxg-lv-tile .title .vxg-lv-flag{
  display:inline-block;
  width:16px;
  height:11px;
  margin-left:6px;
  vertical-align:baseline;
  border-radius:2px;
  object-fit:cover;
  box-shadow:0 0 0 1px oklch(1 0 0 / .16);
}

/* ---------------------------------------------------------------------------
   2. Chips de tags — ce que le show EST, en français. C'est l'information la
   plus utile de la carte, et la seule que l'ancienne tuile ne portait pas
   (elle affichait un titre racoleur tiré au sort et un « 100 % » inventé).
   --------------------------------------------------------------------------- */
html .vxg-lv-tile .vxg-lv-chips{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:nowrap;
  gap:5px;
  margin-top:5px;
  min-width:0;
  overflow:hidden;
}
html .vxg-lv-tile .vxg-lv-chip{
  flex:0 1 auto;
  min-width:0;
  padding:2px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:oklch(1 0 0 / .04);
  color:var(--muted-foreground);
  font-size:11px;
  font-weight:500;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------------------------------------------------------------------------
   3. Objectif en cours — déjà en base (goal_message), jamais affiché jusqu'ici.
   La barre n'apparaît que si les deux bornes de progression sont connues.
   --------------------------------------------------------------------------- */
html .vxg-lv-tile .vxg-lv-goal{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:5px;
  min-width:0;
}
html .vxg-lv-tile .vxg-lv-goal-bar{
  flex:0 0 44px;
  height:4px;
  border-radius:999px;
  background:oklch(1 0 0 / .12);
  overflow:hidden;
}
html .vxg-lv-tile .vxg-lv-goal-bar i{
  display:block;height:100%;border-radius:999px;background:var(--primary);
}
html .vxg-lv-tile .vxg-lv-goal-txt{
  min-width:0;
  color:var(--muted-foreground);
  font-size:11.5px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------------------------------------------------------------------------
   4. Squelettes — CLS nul.
   Ils portent la MÊME ossature qu'une carte (.thumb.vxg-thumb-card dans un <li>)
   pour deux raisons : réserver la place exacte, et satisfaire le sélecteur
   `.vxg-listing .grid-temp:not(:has(.thumb.vxg-thumb-card))` de vxg-v2.css:8599,
   qui fait retomber sur UNE colonne toute grille ne contenant aucune carte vidéo.
   Un squelette vide produisait donc des blocs pleine largeur de 675px de haut.
   --------------------------------------------------------------------------- */
html li.vxg-lv-sk{min-width:0}
html .vxg-lv-sk-card .vxg-lv-sk-img,
html .vxg-lv-sk-card .vxg-lv-sk-txt{
  display:block;
  border-radius:16px;
  background:linear-gradient(100deg,
    oklch(1 0 0 / .04) 30%,
    oklch(1 0 0 / .08) 50%,
    oklch(1 0 0 / .04) 70%) var(--card);
  background-size:220% 100%;
  animation:vxg-lv-shimmer 1.4s linear infinite;
}
html .vxg-lv-sk-card .vxg-lv-sk-img{aspect-ratio:16 / 9}
/* Hauteur des rangées de texte : pseudo, chips, objectif. Calée sur la carte
   réelle mesurée en 2 colonnes mobile (224px au total) — un squelette trop court
   rendait 54px au lieu de 108 et la grille sautait au remplissage, ce qui est
   exactement ce que le squelette existe pour éviter. */
html .vxg-lv-sk-card .vxg-lv-sk-txt{height:82px;margin-top:9px;border-radius:8px}
/* Dans une grille de cartes vidéo, la tuile cam n'a pas d'objectif : le squelette
   réserve donc une rangée de moins, comme la carte qu'il remplace. */
html li[data-vxg-lv] .vxg-lv-sk-card .vxg-lv-sk-txt{height:58px}
@keyframes vxg-lv-shimmer{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){
  html .vxg-lv-sk-card .vxg-lv-sk-img,
  html .vxg-lv-sk-card .vxg-lv-sk-txt{animation:none}
}

/* ---------------------------------------------------------------------------
   5. Rail, colonne et grille sont TOUS des <ul class="grid-temp"> — c'est la seule
   structure qui donne aux cartes leur style : le thème KVS pose `.thumb{width:25%}`
   et seule `html .grid-temp .thumb.vxg-thumb-card{width:auto}` (vxg-v2.css:1789) la
   neutralise, deux autres règles exigeant même `.grid-temp>li>.thumb…`. Hors de
   cette chaîne, les cartes tombaient à 58px dans une colonne de 232px.
   On ne redéfinit donc ICI que la DISPOSITION, jamais l'apparence des cartes.
   --------------------------------------------------------------------------- */

/* Rail horizontal sous le player. vxg-hscroll.js pose .vxg-hscroll et gère le
   glisser, les fondus de bord et les chevrons. */
html ul.grid-temp.vxg-lv-rail{
  display:flex;
  grid-template-columns:none;
  /* Rythme des rails maison : .vxg-shorts-row 12px, .vxg-actors-rail et
     .vxg-categories-rail 16px, tous avec padding:4px 0 10px. On s'aligne dessus
     plutôt que d'inventer une valeur de plus. */
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 0 10px;
}
html ul.grid-temp.vxg-lv-rail::-webkit-scrollbar{display:none}
html ul.grid-temp.vxg-lv-rail>li{
  flex:0 0 clamp(190px, 44vw, 258px);
  scroll-snap-align:start;
}


/* Rail VERTICAL — mobile. Même piste horizontale que le rail 16:9, mais des
   cartes au format du flux : 9:16. C'est le format du trafic mobile — la
   vignette remplit la main et montre le modèle en entier, là où un cadre paysage
   le coupe à la taille.
   L'aspect-ratio est le SEUL réglage qui change sur la carte : tout le reste
   (rayon, dégradé, badges, grille méta) reste celui de .vxg-thumb-card, sinon on
   recréerait un composant parallèle à maintenir en double. */
html ul.grid-temp.vxg-lv-vrail{
  display:flex;
  grid-template-columns:none;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* Le rail déborde volontairement des marges du conteneur : une piste qui touche
     les bords se lit comme défilable, une piste alignée se lit comme une grille
     tronquée. */
  margin-inline:calc(-1 * var(--vxg-gutter, 12px));
  padding:4px var(--vxg-gutter, 12px) 10px;
}
html ul.grid-temp.vxg-lv-vrail::-webkit-scrollbar{display:none}
html ul.grid-temp.vxg-lv-vrail>li{
  flex:0 0 clamp(140px, 42vw, 178px);
  min-width:0;
  scroll-snap-align:start;
}
/* 9:16 au lieu du 16:9 hérité de .vxg-thumb-card. */
html .vxg-lv-vrail .thumb.vxg-thumb-card .img-holder,
html .vxg-lv-vrail .vxg-lv-sk-card .vxg-lv-sk-img{
  aspect-ratio:9 / 16;
}
/* Le badge LIVE et le compteur remontent d'un cran : sur une vignette haute, le
   bas de l'image est la zone que le pouce recouvre en défilant. */
html .vxg-lv-vrail .thumb.vxg-lv-tile .item-bottom{bottom:10px;right:10px}
html .vxg-lv-vrail .thumb.vxg-lv-tile .time.vxg-lv-badge{font-size:10.5px;padding:3px 7px}
html .vxg-lv-vrail .thumb.vxg-lv-tile .time.vxg-lv-badge b{padding-left:5px}
/* Titre un cran plus petit : la carte est deux fois plus étroite qu'en grille. */
html .vxg-lv-vrail .thumb.vxg-lv-tile .title{font-size:13px}
html .vxg-lv-vrail .vxg-lv-goal-txt,
html .vxg-lv-vrail .vxg-lv-chip{font-size:11px}
/* Squelette : même hauteur de texte qu'une carte pleine, une seule ligne. */
html .vxg-lv-vrail li.vxg-lv-sk{flex:0 0 clamp(140px, 42vw, 178px)}
html .vxg-lv-vrail .vxg-lv-sk-card .vxg-lv-sk-txt{height:40px}

/* Colonne latérale : une carte par ligne, pleine largeur de la colonne. */
html ul.grid-temp.vxg-lv-side{
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}

/* Grille de section : celle de .grid-temp, à UNE exception près.
   Sous 768px, les listings passent en densité compacte —
   `html:not(.vxg-density-comfort) .vxg-listing .grid-temp{gap:22px 8px!important}` —
   soit 8px entre les colonnes contre 22px entre les rangées. Sur une carte vidéo
   le déséquilibre passe (le titre sur deux lignes sépare l'œil) ; sur une section
   de cams, où toutes les cartes se ressemblent, les colonnes ont l'air collées.
   On rend donc à la SECTION cam le gap horizontal par défaut du thème (14px), en
   gardant le rythme vertical compact de la page. Les tuiles cam insérées DANS une
   grille vidéo ne sont pas concernées : elles suivent leur grille, c'est le but. */
@media (max-width:767px){
  html .vxg-listing ul.grid-temp.vxg-lv-grid{column-gap:14px!important}
}

/* ---------------------------------------------------------------------------
   8. Une image qui n'arrive ni du CDN ni du repli first-party ne doit pas
   laisser l'icône « image cassée » du navigateur au milieu d'une grille.
   --------------------------------------------------------------------------- */
html .vxg-lv-img[style*="hidden"]{background:var(--card)}