/* VideosXGays — VAST Discount.gay : overlay dans le lecteur + bandeau sous-player.
   Rendu de reference : /shop-promo/catalog-player.html, porte ici dans le
   vocabulaire vxg-catalog-* sans toucher a la mecanique (observer, ecouteurs kt*,
   timer 40 s, cap partage, croix de fermeture maison).
   Toutes les couleurs viennent des tokens vxg-v2 ; les valeurs en dur ne servent
   qu'a la carte CLAIRE de l'overlay, qui doit rester lisible sur n'importe quelle
   image video, et aux replis si vxg-v2.css n'est pas encore applique.
   Les modificateurs --fiche-overlay / --fiche-band / --fiche-badge poses par le JS
   sont conserves a titre documentaire : la geometrie tient sur les classes de base. */

/* ==========================================================================
   1. Socle commun aux trois surfaces
   ========================================================================== */
html .vxg-catalog-overlay,
html .vxg-catalog-mobile-badge,
html .vxg-catalog-panel{position:relative;box-sizing:border-box;isolation:isolate;overflow:hidden;color:var(--foreground,#f7f7f8);font-family:'Inter',sans-serif}
html .vxg-catalog-overlay *,html .vxg-catalog-mobile-badge *,html .vxg-catalog-panel *{box-sizing:border-box}
html .vxg-catalog-overlay[hidden],html .vxg-catalog-mobile-badge[hidden],html .vxg-catalog-panel[hidden]{display:none!important}
html.vxg-catalog-vast-handled .vxg-adcta{display:none!important}

/* Trois colonnes : packshot, texte, action. Sortir le bouton du bloc de prix
   (ou il disputait sa largeur au titre) est ce qui empeche les titres longs et
   les CTA traduits de deborder : chaque zone a desormais sa piste. */
html .vxg-catalog-link{position:relative;z-index:1;display:grid;grid-template-columns:var(--vxgc-media,104px) minmax(0,1fr) var(--vxgc-action,156px);align-items:center;column-gap:var(--vxgc-gap,14px);width:100%;height:100%;min-width:0;color:inherit;text-decoration:none}

/* Packshot : la plaque porte le fond et le repli texte, jamais le cadre —
   vider le cadre effacait aussi la pastille de remise. */
html .vxg-catalog-image{position:relative;align-self:stretch;display:block;overflow:hidden;width:100%;border-radius:var(--vxgc-media-r,12px);background:var(--vxgc-plate,#fff)}
html .vxg-catalog-plate{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:inherit;background:var(--vxgc-plate,#fff);box-shadow:inset 0 0 0 1px rgba(10,11,14,.10);color:#8b8f98;font:800 18px/1 'Outfit','Inter',sans-serif}
/* Packshots Discount detoures sur blanc : contain, avec une respiration. */
html .vxg-catalog-image img{display:block;width:100%;height:100%;padding:7%;object-fit:contain}
/* Photos Poppers : ce sont des prises de vue, elles remplissent la plaque. */
html .vxg-catalog-image--poppers img{padding:0;object-fit:cover}
html .vxg-catalog-image--poppers .vxg-catalog-plate{background:var(--surface,#191a1d);box-shadow:none}
html .vxg-catalog-image.is-fallback .vxg-catalog-plate{background:linear-gradient(145deg,color-mix(in oklab,var(--primary,#c5162e) 42%,#111),#0d0e10);box-shadow:none;color:#fff}
html .vxg-catalog-image-discount{position:absolute;z-index:2;top:6px;left:6px;display:inline-flex;align-items:center;justify-content:center;min-height:var(--vxgc-badge,24px);padding:0 8px;border-radius:8px;background:var(--gradient-brand,linear-gradient(135deg,#d51632,#a70f28));box-shadow:0 4px 12px rgba(0,0,0,.3);color:#fff;font:800 var(--vxgc-badge-fs,13px)/1 'Outfit','Inter',sans-serif;letter-spacing:-.02em;white-space:nowrap}

html .vxg-catalog-copy{display:flex;flex-direction:column;justify-content:center;gap:var(--vxgc-copy-gap,5px);min-width:0}
html .vxg-catalog-brand{display:flex;align-items:center;gap:8px;min-width:0}
html .vxg-catalog-logo{display:block;flex:0 0 auto;width:var(--vxgc-logo-w,92px);height:var(--vxgc-logo-h,19px);background:var(--vxgc-logo,url('/static/shop-promo/discount-brand-white.png')) left center/contain no-repeat}
html .vxg-catalog-brand-name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html .vxg-catalog-deal{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;min-height:18px;padding:0 7px;overflow:hidden;border-radius:9999px;background:color-mix(in oklab,var(--primary,#c5162e) 18%,transparent);color:var(--primary-glow,#f34855);font:800 9px/1 'Outfit','Inter',sans-serif;letter-spacing:.06em;text-overflow:ellipsis;white-space:nowrap}
html .vxg-catalog-title{display:-webkit-box;overflow:hidden;color:inherit;font:800 var(--vxgc-title,15px)/1.25 'Outfit','Inter',sans-serif;letter-spacing:-.01em;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:var(--vxgc-lines,2)}

html .vxg-catalog-offer{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0}
html .vxg-catalog-prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0;font-variant-numeric:tabular-nums}
html .vxg-catalog-price{color:inherit;font:800 var(--vxgc-price,19px)/1.15 'Outfit','Inter',sans-serif;letter-spacing:-.02em}
html .vxg-catalog-instead{color:var(--muted-foreground,#9b9ea6);font-size:10.5px;white-space:nowrap}
html .vxg-catalog-compare{color:var(--muted-foreground,#9b9ea6);font-size:12px;text-decoration-line:line-through;text-decoration-color:var(--primary-glow,#f34855);text-decoration-thickness:1.5px;white-space:nowrap}
/* Code promo : TEXTE seulement. Il n'entre jamais dans l'URL de destination. */
html .vxg-catalog-code{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;overflow:hidden;color:var(--muted-foreground,#9b9ea6);font-size:10.5px;white-space:nowrap}
html .vxg-catalog-code-value{padding:2px 7px;border:1px dashed color-mix(in oklab,var(--foreground,#fff) 30%,transparent);border-radius:6px;color:var(--foreground,#f7f7f8);font:800 10.5px/1 'Outfit','Inter',sans-serif;letter-spacing:.08em}

html .vxg-catalog-actions{display:flex;align-items:center;justify-content:flex-end;min-width:0}
html .vxg-catalog-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:var(--vxgc-cta-h,40px);padding:0 var(--vxgc-cta-pad,14px);border:0;border-radius:9999px;background:var(--gradient-brand,linear-gradient(135deg,#d51632,#a70f28));box-shadow:0 10px 20px -10px rgba(0,0,0,.9);color:#fff;font:800 var(--vxgc-cta,12px)/1 'Outfit','Inter',sans-serif;letter-spacing:.02em;text-align:center;text-decoration:none}
/* L'etiquette porte l'ellipse : un CTA traduit long se coupe, il ne pousse rien. */
html .vxg-catalog-cta-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

html .vxg-catalog-close{position:absolute;z-index:3;top:5px;right:5px;display:grid;place-items:center;width:var(--vxgc-close,34px);height:var(--vxgc-close,34px);padding:0;border:0;border-radius:9999px;background:transparent;color:var(--muted-foreground,#9b9ea6);cursor:pointer}
html .vxg-catalog-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
html .vxg-catalog-link:focus-visible,html .vxg-catalog-close:focus-visible{outline:2px solid var(--primary-glow,#f34855);outline-offset:-3px}
@media (hover:hover) and (pointer:fine){
  html .vxg-catalog-link:hover .vxg-catalog-cta{filter:brightness(1.1)}
  html .vxg-catalog-link:hover .vxg-catalog-title{color:var(--primary-glow,#f34855)}
  html .vxg-catalog-close:hover{background:color-mix(in oklab,#fff 12%,transparent);color:var(--foreground,#fff)}
}

/* ==========================================================================
   2. Overlay dans le lecteur — desktop et tablette uniquement (>= 768 px)
   ==========================================================================
   Carte CLAIRE posee sur l'image : le blanc et l'ombre portee la detachent de
   n'importe quel plan, la ou une carte sombre se noyait dans les plans sombres.
   Le packshot vient a fleur des trois bords, donc le produit parait plus grand
   a surface egale. Geometrie : 420 x 120, left 12, bottom 62 — les 62 px
   laissent libres la barre de progression, les boutons et le bouton skip KVS.
   Empilement : 140 au montage, 500 une fois visible. On reste sous l'UI du site
   (barre de reactions 2147483646, modales) et au-dessus des click-zones KVS 100. */
html .col-video .player-wrap .vxg-catalog-overlay{
  --vxgc-media:108px;--vxgc-media-r:0;--vxgc-gap:11px;--vxgc-action:108px;--vxgc-cta-pad:10px;
  --vxgc-logo:url('/static/shop-promo/discount-brand.png');--vxgc-logo-w:68px;--vxgc-logo-h:14px;
  --vxgc-title:13px;--vxgc-price:19px;--vxgc-cta:11px;--vxgc-cta-h:38px;--vxgc-close:30px;
  --vxgc-copy-gap:3px;--vxgc-badge:26px;--vxgc-badge-fs:14px;
  position:absolute;z-index:140;left:12px;bottom:62px;
  width:min(420px,calc(100% - 24px));max-width:420px;height:120px;max-height:calc(100% - 78px);
  padding:0 10px 0 0;border:1px solid rgba(10,11,14,.16);border-radius:14px;
  background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.46),0 2px 8px rgba(0,0,0,.26);
  color:#15100a;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
html .col-video .player-wrap .vxg-catalog-overlay.is-on{z-index:500;opacity:1;transform:translateY(0)}
html .vxg-catalog-overlay .vxg-catalog-image{border-right:1px solid rgba(10,11,14,.08)}
html .vxg-catalog-overlay .vxg-catalog-plate{box-shadow:none}
html .vxg-catalog-overlay .vxg-catalog-image img{padding:6%}
html .vxg-catalog-overlay .vxg-catalog-deal{background:rgba(197,22,46,.10);color:#a8201a}
html .vxg-catalog-overlay .vxg-catalog-title{color:#15100a}
html .vxg-catalog-overlay .vxg-catalog-price{color:#15100a}
html .vxg-catalog-overlay .vxg-catalog-instead{color:#6b6560}
html .vxg-catalog-overlay .vxg-catalog-compare{color:#6b6560;text-decoration-color:#c5162e}
html .vxg-catalog-overlay .vxg-catalog-cta{box-shadow:0 8px 18px rgba(166,12,38,.28)}
html .vxg-catalog-overlay .vxg-catalog-close{color:#6b6560}
@media (hover:hover) and (pointer:fine){
  html .vxg-catalog-overlay .vxg-catalog-link:hover .vxg-catalog-title{color:#a8201a}
  html .vxg-catalog-overlay .vxg-catalog-close:hover{background:rgba(10,11,14,.08);color:#15100a}
}
/* Tablette : le lecteur est plus etroit et sa barre de controles plus basse. */
@media (min-width:768px) and (max-width:1023px){
  html .col-video .player-wrap .vxg-catalog-overlay{--vxgc-media:98px;--vxgc-action:100px;--vxgc-cta-pad:8px;--vxgc-title:12.5px;--vxgc-price:17px;--vxgc-cta-h:36px;width:min(372px,calc(100% - 24px));height:112px;bottom:56px}
}
/* Colonne video etroite (sidebar visible des 1024 px). */
@media (min-width:1024px) and (max-width:1160px){
  html .col-video .player-wrap .vxg-catalog-overlay{--vxgc-media:104px;--vxgc-action:104px;width:min(396px,calc(100% - 24px))}
}

/* ==========================================================================
   3. Bandeau sous le lecteur — 124 px desktop, 96 px mobile
   ==========================================================================
   Le badge du pre-roll mobile et la bande d'apres-roll partagent la meme boite :
   l'un remplace l'autre au meme endroit, sans saut de mise en page. Fond sombre
   assume : ce bloc arrive au fil de la page, un encart clair y serait criard —
   et le logo a texte blanc y reste lisible.
   Il n'est PAS colle au lecteur : sous 1024 px le lecteur porte des marges
   laterales negatives, un raccord bord a bord decalerait de 16 px. */
html .vxg-catalog-panel,
html .vxg-catalog-mobile-badge{
  --vxgc-media:104px;--vxgc-media-r:12px;--vxgc-gap:14px;--vxgc-action:164px;
  --vxgc-logo:url('/static/shop-promo/discount-brand-white.png');--vxgc-logo-w:92px;--vxgc-logo-h:19px;
  --vxgc-title:15px;--vxgc-price:19px;--vxgc-cta:12px;--vxgc-cta-h:40px;--vxgc-close:32px;
  --vxgc-copy-gap:5px;--vxgc-plate:#fff;
  display:flex;align-items:center;width:100%;height:124px;
  margin:12px 0 0;padding:9px 10px;border:1px solid var(--border,rgba(255,255,255,.1));border-radius:16px;
  background:var(--card,#1c1d21);box-shadow:var(--shadow-card,0 8px 24px -12px rgba(0,0,0,.65));
  opacity:0;transform:translateY(-6px);transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.2,1)}
/* Filet de marque : les surfaces vxg-v2 sont proches, ce liseré donne au bloc
   un bord franc sans avoir a l'eclaircir. */
html .vxg-catalog-panel::before,
html .vxg-catalog-mobile-badge::before{position:absolute;z-index:0;top:0;right:0;left:0;height:3px;background:var(--gradient-brand,linear-gradient(90deg,#d51632,#a70f28));content:""}
html .vxg-catalog-panel.is-on,
html .vxg-catalog-mobile-badge.is-on{opacity:1;transform:translateY(0)}
/* Le badge n'existe que sous 768 px ; le JS ne le monte pas au-dela, la regle
   est un garde-fou si un rendu cache arrive d'une autre largeur. */
@media (min-width:768px){html .vxg-catalog-mobile-badge{display:none!important}}

/* ==========================================================================
   4. Mobile — overlay masque, bandeau conserve
   ========================================================================== */
@media (max-width:767px){
  html .col-video .player-wrap .vxg-catalog-overlay{display:none!important}
  html .vxg-catalog-panel,
  html .vxg-catalog-mobile-badge{
    --vxgc-media:78px;--vxgc-media-r:10px;--vxgc-gap:10px;--vxgc-action:96px;--vxgc-cta-pad:9px;
    --vxgc-title:13px;--vxgc-price:16px;--vxgc-cta:10.5px;--vxgc-cta-h:34px;--vxgc-close:38px;
    --vxgc-copy-gap:3px;--vxgc-badge:20px;--vxgc-badge-fs:11px;
    height:96px;margin-top:8px;padding:8px;border-radius:14px}
  /* A cette hauteur, seuls le nom, le prix et l'action meritent la place. */
  html .vxg-catalog-panel .vxg-catalog-brand,
  html .vxg-catalog-mobile-badge .vxg-catalog-brand,
  html .vxg-catalog-panel .vxg-catalog-code,
  html .vxg-catalog-mobile-badge .vxg-catalog-code{display:none}
  html .vxg-catalog-image-discount{top:4px;left:4px;padding:0 6px;border-radius:6px}
  /* Le bouton descend sous la croix : les deux cibles tactiles ne se croisent
     jamais, meme a 96 px de haut. */
  html .vxg-catalog-panel .vxg-catalog-actions,
  html .vxg-catalog-mobile-badge .vxg-catalog-actions{align-self:stretch;align-items:flex-end;padding-bottom:2px}
  html .vxg-catalog-panel .vxg-catalog-close,
  html .vxg-catalog-mobile-badge .vxg-catalog-close{top:0;right:0}
}
@media (max-width:374px){
  html .vxg-catalog-panel,
  html .vxg-catalog-mobile-badge{--vxgc-media:70px;--vxgc-action:88px;--vxgc-cta-pad:7px;--vxgc-title:12.5px;--vxgc-price:15px;--vxgc-cta:10px}
  html .vxg-catalog-instead{display:none}
}

/* ==========================================================================
   5. Preferences et impression
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html .vxg-catalog-overlay,html .vxg-catalog-mobile-badge,html .vxg-catalog-panel{transition:none!important;transform:none!important}
  html .vxg-catalog-cta{transition:none!important}
}
@media print{html .vxg-catalog-overlay,html .vxg-catalog-mobile-badge,html .vxg-catalog-panel{display:none!important}}