/* =========================================================================
   VXG DatingPromo — inserts on-site.

   Les créations vivent DANS le site : elles doivent se fondre dans le thème,
   pas s'en distinguer. On hérite donc des jetons de vxg-v2.css quand ils
   existent, avec un repli pour les surfaces qui ne les définissent pas
   (iframe de spot, page shorts autonome).

   Correction de mise en page héritée du dispositif d'origine : la carte de
   grille reproduit exactement le gabarit d'une vignette vidéo KVS — visuel en
   56 %, bloc texte de hauteur FIXE. Une carte qui respire différemment des
   vignettes voisines se lit comme une publicité avant même d'être lue.
   ========================================================================= */

.vxg-dp{
  --dp-accent:var(--primary,#ff3355);
  --dp-accent-2:var(--primary-glow,#ff7a45);
  --dp-surface:var(--surface,#181215);
  --dp-surface-2:var(--card,#211a1e);
  --dp-line:var(--border,rgba(255,255,255,.09));
  --dp-text:var(--foreground,#f7f4f5);
  --dp-muted:var(--muted-foreground,rgba(255,255,255,.6));
  --dp-online:#2fd07a;
  display:block;color:var(--dp-text);text-decoration:none;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.vxg-dp img{display:block;width:100%;height:100%;object-fit:cover}
.vxg-dp__shot{position:relative;display:block;overflow:hidden;background:var(--dp-surface-2)}

/* ---------- carte native de grille --------------------------------------- */
.vxg-dp--card{border-radius:8px;overflow:hidden;background:var(--dp-surface)}
.vxg-dp--card .vxg-dp__visual{position:relative;display:block;padding-bottom:56%;overflow:hidden;border-radius:8px}
.vxg-dp--card .vxg-dp__visual .vxg-dp__shot{position:absolute;inset:0}
.vxg-dp--card .vxg-dp__visual--multi{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding-bottom:0;height:0;padding-top:56%;position:relative}
.vxg-dp--card .vxg-dp__visual--multi .vxg-dp__shot{position:static;height:100%}
.vxg-dp--card .vxg-dp__visual--multi{display:block}
.vxg-dp__badge{
  position:absolute;top:6px;left:6px;z-index:2;padding:3px 8px;border-radius:99px;
  background:linear-gradient(120deg,var(--dp-accent),var(--dp-accent-2));color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}
.vxg-dp--card .vxg-dp__text{
  display:block;padding:8px 2px;
  /* Hauteur figée : le bloc texte d'une vignette KVS fait 69 px. Une carte qui
     dépasse décale toute la rangée de la grille. */
  min-height:69px;
}
.vxg-dp__title{display:block;font-size:13.5px;font-weight:700;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.vxg-dp__body{display:block;margin-top:2px;font-size:12px;color:var(--dp-muted);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vxg-dp__cta{
  display:inline-block;margin-top:6px;padding:4px 10px;border-radius:99px;
  background:color-mix(in oklab,var(--dp-accent) 22%,transparent);
  border:1px solid color-mix(in oklab,var(--dp-accent) 55%,transparent);
  font-size:12px;font-weight:700;
}
.vxg-dp__cta--block{display:block;margin-top:8px;padding:9px 12px;border-radius:9px;text-align:center;
  background:linear-gradient(120deg,var(--dp-accent),var(--dp-accent-2));border:0;color:#fff;font-size:13.5px}

/* ---------- rail de colonne (page vidéo) ---------------------------------- */
.vxg-dp--rail{
  padding:10px;border:1px solid var(--dp-line);border-radius:10px;background:var(--dp-surface);
}
.vxg-dp__eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dp-accent-2);margin-bottom:4px}
.vxg-dp--rail .vxg-dp__title{-webkit-line-clamp:2;font-size:14px;margin-bottom:9px}
.vxg-dp--rail .vxg-dp__items{display:grid;gap:8px}
.vxg-dp--rail .vxg-dp__tile{
  display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:center;
  text-decoration:none;color:inherit;
}
.vxg-dp--rail .vxg-dp__shot{width:76px;height:95px;border-radius:8px}
.vxg-dp__who{min-width:0;display:block}
.vxg-dp__who b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vxg-dp__who em{display:block;margin-top:2px;font-size:12px;font-style:normal;color:var(--dp-muted)}
.vxg-dp__shot::after{
  content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-radius:50%;
  background:var(--dp-online);box-shadow:0 0 0 2px rgba(0,0,0,.5);
}

/* ---------- carrousel sous pagination ------------------------------------- */
.vxg-dp--carousel{padding:12px;border:1px solid var(--dp-line);border-radius:12px;background:var(--dp-surface)}
.vxg-dp--carousel .vxg-dp__title{font-size:15px;margin-bottom:10px;-webkit-line-clamp:1}
.vxg-dp--carousel .vxg-dp__items{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.vxg-dp--carousel .vxg-dp__tile{text-decoration:none;color:inherit}
.vxg-dp--carousel .vxg-dp__shot{aspect-ratio:3/4;border-radius:8px}
.vxg-dp--carousel .vxg-dp__who{margin-top:5px;font-size:12px;font-weight:600;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:639px){
  .vxg-dp--carousel .vxg-dp__items{grid-template-columns:repeat(3,1fr)}
  .vxg-dp--carousel .vxg-dp__items > *:nth-child(n+4){display:none}
}

/* ---------- carte du feed vertical ---------------------------------------- */
.vxg-dp--reel{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;height:100%;min-height:320px;border-radius:12px;overflow:hidden;background:#000;
}
.vxg-dp--reel .vxg-dp__visual{position:absolute;inset:0}
.vxg-dp--reel .vxg-dp__visual img{width:100%;height:100%}
.vxg-dp--reel .vxg-dp__text{
  position:relative;z-index:2;padding:22px 18px 24px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88) 55%);
}
.vxg-dp--reel .vxg-dp__title{font-size:20px;-webkit-line-clamp:3;line-height:1.2}
.vxg-dp--reel .vxg-dp__body{white-space:normal;margin-top:6px;font-size:13.5px}
.vxg-dp--reel .vxg-dp__cta{margin-top:12px;padding:11px 18px;border-radius:10px;font-size:15px;
  background:linear-gradient(120deg,var(--dp-accent),var(--dp-accent-2));border:0;color:#fff}

/* ---------- barre collante mobile ----------------------------------------- */
.vxg-dp-sticky{
  position:fixed;right:12px;bottom:calc(var(--vxg-mobile-bottomnav-clearance,0px) + 12px + env(safe-area-inset-bottom,0px));z-index:170; /* ordre de la maison : unités de coin sous la barre d'onglets (200) et les toasts (300) ; au-dessus de la pilule d'onglets par la réserve du thème */
  width:min(360px,calc(100vw - 24px));padding:8px;border-radius:14px;
  background:var(--surface,#181215);border:1px solid var(--border,rgba(255,255,255,.12));
  box-shadow:0 20px 50px -20px #000;
  transform:translateY(140%);transition:transform .26s ease;
}
.vxg-dp-sticky[data-shown="1"]{transform:none}
.vxg-dp-sticky__close{
  position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;
  background:#000;color:#fff;border:1px solid rgba(255,255,255,.25);cursor:pointer;
  font-size:16px;line-height:1;
}
@media (max-width:520px){
  .vxg-dp-sticky{left:12px;right:12px;width:auto;bottom:calc(var(--vxg-mobile-bottomnav-clearance,84px) + 8px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
  .vxg-dp-sticky{transition:none}
}

/* ---------- contextes hôtes (relecture du 04/09/2026) ---------------------- */
/* Colonne de la page vidéo : même respiration que le bloc natif au-dessus. */
.vxg-dating-side{margin-top:16px}
.vxg-dating-side:empty{display:none}
/* Slide du feed vertical : la carte remplit le cadre 9:16 comme le bras live
   (.shorts-ad-card est relative, hauteur 100 %), et le texte remonte au-dessus
   du bouton « passer » (absolu, bottom 28 px + zone sûre). */
.shorts-ad-card .vxg-dp--reel{position:absolute;inset:0;border-radius:0;min-height:0}
.shorts-ad-card .vxg-dp--reel .vxg-dp__text{padding-bottom:96px;margin-bottom:env(safe-area-inset-bottom,0px)}

/* ---------- rangée du spot pagination + barre collante (04/09/2026) ---------- */
/* Aligné sur .vxg-ct-rail{margin:4px 0 26px} de vxg-cartes.css. */
.vxg-dating-rail{margin:4px 0 26px}
.vxg-dating-rail:empty{display:none}

/* Barre collante (relecture du 04/09/2026) : une BARRE, pas une carte de grille —
   photo 64 px à gauche, titre + CTA à droite ; cachée pendant qu'un menu de
   vignette est ouvert (appui long sur mobile), sinon le tap suivant partirait sur la pub. */
.vxg-dp-sticky .vxg-dp--card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;border-radius:12px}
.vxg-dp-sticky .vxg-dp__visual{padding-bottom:0;height:64px;border-radius:10px;overflow:hidden}
.vxg-dp-sticky .vxg-dp__text{min-height:0;padding:2px 34px 2px 0}
.vxg-dp-sticky .vxg-dp__title{font-size:13.5px;line-height:1.2;-webkit-line-clamp:2}
.vxg-dp-sticky .vxg-dp__body{display:none}
.vxg-dp-sticky .vxg-dp__cta{margin-top:5px;padding:4px 10px;font-size:12px}
.vxg-dp-sticky .vxg-dp__badge{display:none}
body:has(.vxg-thumb-menu) .vxg-dp-sticky,body:has(.vxg-thumb-card.is-menu-open) .vxg-dp-sticky{display:none}

/* ---------- rail de colonne : quatre gabarits (04/09/2026) -------------------- */
/* liste : distance + ce qu'il cherche, sur la même ligne */
.vxg-dp--tpl-liste .vxg-dp__who em{display:inline-block;margin-right:6px}
.vxg-dp__chip{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:99px;font-size:10.5px;font-weight:700;
  vertical-align:middle;color:var(--dp-accent-2);background:color-mix(in oklab,var(--dp-accent) 16%,transparent)}
/* fiche / flash : un mec plein cadre, texte par-dessus */
.vxg-dp--tpl-fiche,.vxg-dp--tpl-flash{padding:0;overflow:hidden}
.vxg-dp__hero{position:relative;display:block;aspect-ratio:4/5;min-height:300px;text-decoration:none;color:inherit;background:#000}
.vxg-dp--rail .vxg-dp__hero .vxg-dp__shot{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border-radius:0}
.vxg-dp__hero .vxg-dp__shot::after{display:none}
.vxg-dp__hero .vxg-dp__shot img{transform:scale(1.02);transition:transform .6s ease}
.vxg-dp__hero:hover .vxg-dp__shot img{transform:scale(1.07)}
.vxg-dp__hero .vxg-dp__eyebrow{position:absolute;top:10px;left:10px;z-index:2;margin:0;padding:3px 8px;border-radius:99px;
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(4px)}
.vxg-dp__over{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:5px;padding:80px 12px 12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.6) 40%,rgba(0,0,0,.94))}
.vxg-dp__pill{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:3px 9px 3px 7px;border-radius:99px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);font-size:11px;font-weight:700;color:#fff}
.vxg-dp__pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dp-online);box-shadow:0 0 0 3px rgba(47,208,122,.28)}
.vxg-dp__hero .vxg-dp__title{margin:0;font-size:17px;line-height:1.15;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.vxg-dp__hero .vxg-dp__body{margin:0;white-space:normal;font-size:12.5px;color:rgba(255,255,255,.85);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.vxg-dp__hero .vxg-dp__cta--block{margin-top:4px}
.vxg-dp--tpl-flash{--dp-accent:#e5132e;--dp-accent-2:#ff3d5a}
.vxg-dp--tpl-flash .vxg-dp__over{background:linear-gradient(180deg,transparent,rgba(110,0,20,.45) 35%,rgba(16,0,4,.96))}
.vxg-dp--tpl-flash .vxg-dp__hero .vxg-dp__eyebrow{background:rgba(229,19,46,.8)}
.vxg-dp--tpl-flash .vxg-dp__hero .vxg-dp__body{font-weight:600;letter-spacing:.02em}
/* mur : six visages, trois par rangée */
.vxg-dp--rail.vxg-dp--tpl-mur .vxg-dp__items{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vxg-dp--rail.vxg-dp--tpl-mur .vxg-dp__tile{display:block}
.vxg-dp--rail.vxg-dp--tpl-mur .vxg-dp__shot{width:100%;height:auto;aspect-ratio:1;border-radius:8px}
.vxg-dp--tpl-mur .vxg-dp__who{text-align:center}
.vxg-dp--tpl-mur .vxg-dp__who b{margin-top:3px;font-size:11.5px}
.vxg-dp--tpl-mur .vxg-dp__title{font-size:15px}
/* ---------- rangée sous pagination : cinq gabarits (04/09/2026) --------------- */
.vxg-dp--carousel .vxg-dp__intro{margin-bottom:10px}
.vxg-dp--carousel .vxg-dp__intro .vxg-dp__title{margin-bottom:0}
.vxg-dp--carousel .vxg-dp__intro .vxg-dp__body{margin-top:4px;white-space:normal}
/* file : trois conversations côte à côte, empilées sur mobile */
.vxg-dp--ctpl-file .vxg-dp__rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vxg-dp--ctpl-file .vxg-dp__row{display:grid;grid-template-columns:64px minmax(0,1fr) max-content;gap:10px;align-items:center;
  padding:8px;border:1px solid var(--dp-line);border-radius:12px;background:var(--dp-surface-2);text-decoration:none;color:inherit}
.vxg-dp--ctpl-file .vxg-dp__row:hover{border-color:color-mix(in oklab,var(--dp-accent) 55%,transparent)}
.vxg-dp--ctpl-file .vxg-dp__shot{width:64px;height:64px;border-radius:10px}
.vxg-dp--ctpl-file .vxg-dp__who b{font-size:14px}
.vxg-dp--ctpl-file .vxg-dp__who em{display:block;font-size:12px}
.vxg-dp--ctpl-file .vxg-dp__row .vxg-dp__cta{margin-top:0;white-space:nowrap}
.vxg-dp--ctpl-file .vxg-dp__cta--block{margin-top:12px;max-width:360px;margin-left:auto;margin-right:auto}
/* profil : un mec en grand + cinq visages */
.vxg-dp--ctpl-profil{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:center}
.vxg-dp--ctpl-profil .vxg-dp__main{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center;text-decoration:none;color:inherit}
.vxg-dp--ctpl-profil .vxg-dp__main .vxg-dp__shot{aspect-ratio:3/4;border-radius:12px}
.vxg-dp--ctpl-profil .vxg-dp__text{display:grid;gap:6px;min-width:0}
.vxg-dp--ctpl-profil .vxg-dp__text .vxg-dp__title{font-size:18px;margin:0;-webkit-line-clamp:2}
.vxg-dp--ctpl-profil .vxg-dp__text .vxg-dp__body{white-space:normal;font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.vxg-dp--ctpl-profil .vxg-dp__text .vxg-dp__cta--block{margin-top:4px;max-width:260px}
.vxg-dp--ctpl-profil .vxg-dp__rest{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:start}
.vxg-dp--ctpl-profil .vxg-dp__small{display:block;text-decoration:none;color:inherit;text-align:center}
.vxg-dp--ctpl-profil .vxg-dp__small .vxg-dp__shot{aspect-ratio:1;border-radius:10px}
.vxg-dp--ctpl-profil .vxg-dp__small .vxg-dp__who{display:block;margin-top:4px;font-size:11.5px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vxg-dp--ctpl-profil .vxg-dp__more{grid-column:1/-1;display:block;margin-top:2px;padding:7px 12px;border-radius:9px;text-align:center;
  font-size:12.5px;font-weight:700;text-decoration:none;color:var(--dp-text);
  border:1px solid color-mix(in oklab,var(--dp-accent) 55%,transparent);background:color-mix(in oklab,var(--dp-accent) 14%,transparent)}
/* proximite : le nombre, puis six visages ronds et leur distance */
.vxg-dp--ctpl-proximite .vxg-dp__intro{display:block;text-align:center}
.vxg-dp--ctpl-proximite .vxg-dp__intro .vxg-dp__title{font-size:17px;-webkit-line-clamp:2}
.vxg-dp--ctpl-proximite .vxg-dp__count{font-size:34px;line-height:1;font-weight:800;color:var(--dp-accent-2);vertical-align:-2px;margin-right:4px}
.vxg-dp--ctpl-proximite .vxg-dp__items{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:720px;margin:0 auto}
.vxg-dp--ctpl-proximite .vxg-dp__tile{text-align:center}
.vxg-dp--ctpl-proximite .vxg-dp__shot{aspect-ratio:1;border-radius:50%;max-width:84px;margin:0 auto}
.vxg-dp--ctpl-proximite .vxg-dp__shot::after{right:6px;bottom:4px}
.vxg-dp--ctpl-proximite .vxg-dp__who{margin-top:6px;font-size:12.5px;font-weight:700}
.vxg-dp--ctpl-proximite .vxg-dp__km{display:block;font-size:11.5px;color:var(--dp-muted)}
.vxg-dp--ctpl-proximite .vxg-dp__cta--block{max-width:320px;margin:12px auto 0}
/* soir : deux bustes plein cadre, texte par-dessus, cramoisi */
.vxg-dp--ctpl-soir{--dp-accent:#e5132e;--dp-accent-2:#ff3d5a;padding:0;overflow:hidden;background:#000}
.vxg-dp--ctpl-soir .vxg-dp__scene{position:relative;display:block;min-height:240px;text-decoration:none;color:inherit}
.vxg-dp--ctpl-soir .vxg-dp__shots{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.vxg-dp--ctpl-soir .vxg-dp__shot{border-radius:0;height:100%}
.vxg-dp--ctpl-soir .vxg-dp__shot::after{display:none}
.vxg-dp--ctpl-soir .vxg-dp__shot img{transform:scale(1.02);transition:transform .6s ease}
.vxg-dp--ctpl-soir .vxg-dp__scene:hover img{transform:scale(1.07)}
.vxg-dp--ctpl-soir .vxg-dp__over{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:6px;padding:90px 18px 16px;max-width:none;
  background:linear-gradient(180deg,transparent,rgba(110,0,20,.45) 40%,rgba(16,0,4,.96))}
.vxg-dp--ctpl-soir .vxg-dp__eyebrow{width:max-content;padding:3px 8px;border-radius:99px;background:rgba(229,19,46,.8);color:#fff}
.vxg-dp--ctpl-soir .vxg-dp__title{font-size:22px;line-height:1.1;margin:0;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);-webkit-line-clamp:2}
.vxg-dp--ctpl-soir .vxg-dp__body{white-space:normal;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.88);margin:0}
.vxg-dp--ctpl-soir .vxg-dp__cta--block{max-width:300px;margin-top:4px}
@media (max-width:639px){
  .vxg-dp--ctpl-file .vxg-dp__rows{grid-template-columns:1fr}
  .vxg-dp--ctpl-profil{grid-template-columns:1fr;gap:12px}
  .vxg-dp--ctpl-profil .vxg-dp__main{grid-template-columns:120px minmax(0,1fr)}
  .vxg-dp--ctpl-profil .vxg-dp__text .vxg-dp__title{font-size:16px}
  .vxg-dp--ctpl-profil .vxg-dp__rest{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .vxg-dp--ctpl-proximite .vxg-dp__items{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vxg-dp--ctpl-proximite .vxg-dp__items > *:nth-child(n+4){display:none}
  .vxg-dp--ctpl-soir .vxg-dp__shots{grid-template-columns:1fr}
  .vxg-dp--ctpl-soir .vxg-dp__shot--second{display:none}
  .vxg-dp--ctpl-soir .vxg-dp__title{font-size:19px}
}/* corrections banc d'essai (16 h 15) : les bustes du gabarit « soir » remplissent leur colonne
   (la règle 3:4 du carrousel les réduisait), et la ligne « En ligne · à 23 km » de la file
   peut passer à la ligne sur mobile au lieu d'être rognée. */
.vxg-dp--carousel.vxg-dp--ctpl-soir .vxg-dp__shot{aspect-ratio:auto;width:100%;height:100%}
.vxg-dp--carousel.vxg-dp--ctpl-file .vxg-dp__who em{white-space:normal}

/* ---------- carte de grille : cinq gabarits (04/09/2026) ---------------------- */
.vxg-dp--card .vxg-dp__visual--multi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:2px;padding:0;aspect-ratio:16/9;height:auto}
.vxg-dp--card .vxg-dp__visual--multi .vxg-dp__shot{position:relative;inset:auto;height:100%}
.vxg-dp--card .vxg-dp__pill{position:absolute;left:6px;bottom:6px;z-index:2}
.vxg-dp--card .vxg-dp__chips{position:absolute;left:8px;bottom:8px;z-index:2;display:grid;gap:4px;max-width:72%}
.vxg-dp__chip-bubble{display:inline-block;width:max-content;max-width:100%;padding:4px 10px;border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.94);color:#111;font-size:11.5px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.vxg-dp__chip-bubble--2{background:linear-gradient(120deg,var(--dp-accent),var(--dp-accent-2));color:#fff;border-radius:14px 14px 4px 14px;margin-left:14px}
.vxg-dp--card-duo .vxg-dp__visual--duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding-bottom:0;aspect-ratio:16/9;height:auto}
.vxg-dp--card-duo .vxg-dp__side{position:relative;display:block;height:100%;text-decoration:none;color:inherit}
.vxg-dp--card-duo .vxg-dp__side .vxg-dp__shot{position:absolute;inset:0}
.vxg-dp--card-duo .vxg-dp__name{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 8px 6px;color:#fff;font-size:12px;font-weight:700;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75))}
.vxg-dp--card-duo .vxg-dp__cta{text-decoration:none;color:inherit}
.vxg-dp--card-contact .vxg-dp__title,.vxg-dp--card-autour .vxg-dp__title,.vxg-dp--card-dialogue .vxg-dp__title,.vxg-dp--card-duo .vxg-dp__title{-webkit-line-clamp:1}
/* ---------- gabarits de plus, d'après le kit (04/09/2026, soir) ------------------ */
/* rail : duo (deux visages côte à côte), dialogue (héros + bulles), presence (six ronds) */
.vxg-dp--rail.vxg-dp--tpl-duo .vxg-dp__items{grid-template-columns:1fr 1fr;gap:6px}
.vxg-dp--rail.vxg-dp--tpl-duo .vxg-dp__tile{display:block}
.vxg-dp--rail.vxg-dp--tpl-duo .vxg-dp__shot{width:100%;height:auto;aspect-ratio:1;border-radius:10px}
.vxg-dp--rail.vxg-dp--tpl-duo .vxg-dp__who{text-align:center}
.vxg-dp--rail.vxg-dp--tpl-duo .vxg-dp__who b{margin-top:4px;font-size:13px}
.vxg-dp--rail.vxg-dp--tpl-duo .vxg-dp__title{font-size:17px}
.vxg-dp--tpl-dialogue{padding:0;overflow:hidden}
.vxg-dp--rail .vxg-dp__hero .vxg-dp__chips{position:absolute;left:10px;top:44px;z-index:2;display:grid;gap:4px;max-width:70%}
.vxg-dp--tpl-dialogue{--dp-accent:#2bb8ff;--dp-accent-2:#5f8cff}
.vxg-dp--rail.vxg-dp--tpl-presence .vxg-dp__items{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vxg-dp--rail.vxg-dp--tpl-presence .vxg-dp__tile{display:block;text-align:center}
.vxg-dp--rail.vxg-dp--tpl-presence .vxg-dp__shot{width:100%;height:auto;aspect-ratio:1;border-radius:50%;max-width:80px;margin:0 auto}
.vxg-dp--rail.vxg-dp--tpl-presence .vxg-dp__shot::after{right:4px;bottom:4px;width:10px;height:10px}
.vxg-dp--rail.vxg-dp--tpl-presence .vxg-dp__who b{margin-top:4px;font-size:12px}
.vxg-dp--rail.vxg-dp--tpl-presence .vxg-dp__count{font-size:26px;line-height:1;font-weight:800;color:var(--dp-online);vertical-align:-2px;margin-right:3px}
.vxg-dp--rail.vxg-dp--tpl-presence .vxg-dp__eyebrow{color:var(--dp-online)}
/* rangée : duo, dialogue, presence */
.vxg-dp--ctpl-duo .vxg-dp__intro{text-align:center}
.vxg-dp--ctpl-duo .vxg-dp__intro .vxg-dp__title{font-size:20px}
.vxg-dp--ctpl-duo .vxg-dp__items{grid-template-columns:minmax(0,200px) max-content minmax(0,200px);gap:14px;justify-content:center;align-items:center}
.vxg-dp--ctpl-duo .vxg-dp__tile{text-align:center}
.vxg-dp--ctpl-duo .vxg-dp__shot{aspect-ratio:3/4;border-radius:12px}
.vxg-dp--ctpl-duo .vxg-dp__who{margin-top:6px;font-size:13px;font-weight:700}
.vxg-dp--ctpl-duo .vxg-dp__vs{font-size:14px;font-weight:800;text-transform:uppercase;color:var(--dp-muted)}
.vxg-dp--ctpl-duo .vxg-dp__cta--block{max-width:300px;margin:12px auto 0}
.vxg-dp--ctpl-dialogue{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:center;--dp-accent:#2bb8ff;--dp-accent-2:#5f8cff}
.vxg-dp--ctpl-dialogue .vxg-dp__main{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center;text-decoration:none;color:inherit}
.vxg-dp--ctpl-dialogue .vxg-dp__main .vxg-dp__shot{aspect-ratio:3/4;border-radius:12px}
.vxg-dp--ctpl-dialogue .vxg-dp__main .vxg-dp__chips{position:absolute;left:8px;bottom:10px;z-index:2;display:grid;gap:4px;max-width:88%}
.vxg-dp--ctpl-dialogue .vxg-dp__text{display:grid;gap:6px;min-width:0}
.vxg-dp--ctpl-dialogue .vxg-dp__text .vxg-dp__title{font-size:18px;margin:0;-webkit-line-clamp:2}
.vxg-dp--ctpl-dialogue .vxg-dp__text .vxg-dp__body{white-space:normal;font-size:13px}
.vxg-dp--ctpl-dialogue .vxg-dp__text .vxg-dp__cta--block{margin-top:4px;max-width:260px}
.vxg-dp--ctpl-dialogue .vxg-dp__rest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start}
.vxg-dp--ctpl-dialogue .vxg-dp__small{display:block;text-decoration:none;color:inherit;text-align:center}
.vxg-dp--ctpl-dialogue .vxg-dp__small .vxg-dp__shot{aspect-ratio:1;border-radius:10px}
.vxg-dp--ctpl-dialogue .vxg-dp__small .vxg-dp__who{display:block;margin-top:4px;font-size:11.5px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vxg-dp--ctpl-dialogue .vxg-dp__more{grid-column:1/-1;display:block;margin-top:2px;padding:7px 12px;border-radius:9px;text-align:center;
  font-size:12.5px;font-weight:700;text-decoration:none;color:var(--dp-text);
  border:1px solid color-mix(in oklab,var(--dp-accent) 55%,transparent);background:color-mix(in oklab,var(--dp-accent) 14%,transparent)}
.vxg-dp--ctpl-presence .vxg-dp__intro{text-align:center}
.vxg-dp--ctpl-presence .vxg-dp__eyebrow{color:var(--dp-online)}
.vxg-dp--ctpl-presence .vxg-dp__items{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;max-width:880px;margin:0 auto}
.vxg-dp--ctpl-presence .vxg-dp__tile{text-align:center}
.vxg-dp--ctpl-presence .vxg-dp__shot{aspect-ratio:1;border-radius:50%;max-width:78px;margin:0 auto;box-shadow:0 0 0 2px var(--dp-online)}
.vxg-dp--ctpl-presence .vxg-dp__shot::after{right:4px;bottom:2px;width:10px;height:10px}
.vxg-dp--ctpl-presence .vxg-dp__who{margin-top:6px;font-size:12.5px;font-weight:700}
.vxg-dp--ctpl-presence .vxg-dp__km{display:block;font-size:11px;color:var(--dp-online)}
.vxg-dp--ctpl-presence .vxg-dp__cta--block{max-width:320px;margin:12px auto 0}
@media (max-width:639px){
  .vxg-dp--ctpl-duo .vxg-dp__items{grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr)}
  .vxg-dp--ctpl-dialogue{grid-template-columns:1fr;gap:12px}
  .vxg-dp--ctpl-dialogue .vxg-dp__main{grid-template-columns:120px minmax(0,1fr)}
  .vxg-dp--ctpl-dialogue .vxg-dp__text .vxg-dp__title{font-size:16px}
  .vxg-dp--ctpl-presence .vxg-dp__items{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vxg-dp--ctpl-presence .vxg-dp__items > *:nth-child(n+5){display:none}
}
/* barre collante : les bulles et la pastille distance n'ont pas la place sur 64 px */
.vxg-dp-sticky .vxg-dp__chips,.vxg-dp-sticky .vxg-dp__pill{display:none}/* reel : contact (pastille distance) et soir (cramoisi) */
.vxg-dp--reel .vxg-dp__pill{margin-bottom:6px}
.vxg-dp--rtpl-soir{--dp-accent:#e5132e;--dp-accent-2:#ff3d5a}
.vxg-dp--rtpl-soir .vxg-dp__text{background:linear-gradient(180deg,transparent,rgba(110,0,20,.5) 40%,rgba(16,0,4,.95))}
.vxg-dp--rtpl-soir .vxg-dp__body{font-weight:600;letter-spacing:.02em}
.vxg-dp--rtpl-contact .vxg-dp__title{font-size:19px}
/* ---------- barre collante = slide « messenger » (07/09/2026) ---------------------- */
/* Glisse depuis le bord droit (bureau) ou depuis le bas (mobile), comme une
   notification de messagerie : avatar rond, point vert, identité, accroche,
   bouton. Une seule cible cliquable + la croix. */
.vxg-dp-sticky{
  padding:0;width:min(392px,calc(100vw - 24px));border-radius:16px;
  background:color-mix(in oklab,var(--surface,#181215) 92%,#000);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px -14px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
  transform:translate3d(120%,0,0);opacity:0;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .28s ease
}
.vxg-dp-sticky[data-shown="1"]{transform:none;opacity:1}
.vxg-dp-sticky .vxg-dp--notice{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;
  padding:12px 40px 12px 12px;border-radius:16px;text-decoration:none;color:inherit
}
.vxg-dp-sticky .vxg-dp__avatar{position:relative;display:block;width:56px;height:56px;border-radius:50%;background:#000}
.vxg-dp-sticky .vxg-dp__avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.vxg-dp-sticky .vxg-dp__online{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;
  background:var(--dp-online,#2fd07a);box-shadow:0 0 0 2px color-mix(in oklab,var(--surface,#181215) 92%,#000)}
.vxg-dp-sticky .vxg-dp__text{display:grid;gap:2px;min-width:0;padding:0}
.vxg-dp-sticky .vxg-dp__eyebrow{margin:0;font-size:10px;letter-spacing:.06em;color:var(--dp-online,#2fd07a);text-transform:uppercase}
.vxg-dp-sticky .vxg-dp__title{font-size:14px;line-height:1.2;-webkit-line-clamp:1;margin:0}
.vxg-dp-sticky .vxg-dp__body{display:-webkit-box;margin:0;font-size:12.5px;line-height:1.3;color:var(--dp-muted,rgba(255,255,255,.72));
  white-space:normal;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.vxg-dp-sticky .vxg-dp__cta{margin-top:6px;padding:5px 12px;font-size:12.5px;width:max-content}
.vxg-dp-sticky__close{top:8px;right:8px}
.vxg-dp-sticky--dialogue{--dp-accent:#2bb8ff;--dp-accent-2:#5f8cff}
@media (max-width:520px){
  .vxg-dp-sticky{transform:translate3d(0,120%,0)}
  .vxg-dp-sticky[data-shown="1"]{transform:none}
}
@media (prefers-reduced-motion:reduce){.vxg-dp-sticky{transition:opacity .2s ease}}/* slide messenger : gabarits dialogue (bulles sous l'identité), local (trois avatars), soir (cramoisi) */
.vxg-dp-sticky .vxg-dp--notice .vxg-dp__chips{position:static;display:grid;gap:4px;margin:4px 0 2px;max-width:100%}
.vxg-dp-sticky .vxg-dp--notice .vxg-dp__chip-bubble{font-size:12px;padding:4px 10px}
.vxg-dp-sticky .vxg-dp__avatars{position:relative;display:block;width:56px;height:56px}
.vxg-dp-sticky .vxg-dp__avatar--small{position:absolute;width:36px;height:36px;border:2px solid color-mix(in oklab,var(--surface,#181215) 92%,#000)}
.vxg-dp-sticky .vxg-dp__avatar--small:nth-child(1){left:0;top:0;z-index:3}
.vxg-dp-sticky .vxg-dp__avatar--small:nth-child(2){left:18px;top:10px;z-index:2}
.vxg-dp-sticky .vxg-dp__avatar--small:nth-child(3){left:6px;top:22px;z-index:1}
.vxg-dp-sticky .vxg-dp__avatars .vxg-dp__online{right:0;bottom:0;z-index:4}
.vxg-dp-sticky--local .vxg-dp__title{font-size:15px}
.vxg-dp-sticky--soir{--dp-accent:#e5132e;--dp-accent-2:#ff3d5a;border-color:rgba(229,19,46,.45);
  background:linear-gradient(160deg,rgba(110,0,20,.55),color-mix(in oklab,var(--surface,#181215) 92%,#000) 60%)}
.vxg-dp-sticky--soir .vxg-dp__eyebrow{color:#ff3d5a}
.vxg-dp-sticky--soir .vxg-dp__online{background:#ff3d5a}/* relecture du 07/09 : bulles du gabarit dialogue hors clamp ; largeur mobile ; point vert de la pile ; contraste soir */
.vxg-dp-sticky .vxg-dp--notice-dialogue .vxg-dp__body{display:block;-webkit-line-clamp:unset;overflow:visible}
@media (max-width:520px){.vxg-dp-sticky{width:auto}}
.vxg-dp-sticky .vxg-dp__avatars .vxg-dp__online{left:34px;top:44px;right:auto;bottom:auto}
.vxg-dp-sticky--soir .vxg-dp__eyebrow{color:#ff5d76}