/* =========================================================================
   VXG DatingPromo — créations bannières en iframe.

   Cinq tailles, quatre angles, un seul DOM. Tout ce qui change entre les
   vingt combinaisons est ici : nombre de vignettes visibles, gabarit de
   grille, tailles de texte.

   Trois leçons du dispositif d'origine, appliquées telles quelles :
   1. Ne jamais dimensionner la piste de texte sur le cumul théorique des
      `line-clamp` : aucune langue ne l'atteint, et on prend jusqu'à 91 px de
      noir en français. La piste texte est en `max-content`, la photo prend le
      reste (`minmax(0,1fr) max-content`).
   2. Supprimer la sous-ligne sur les petits formats. Un texte de 9-11 px
      tronqué n'est pas lu : il vole la place du bouton.
   3. Un bouton se touche. 22 px était sous le seuil du pouce ; ici 32 px
      minimum, 40 sur les grands formats.
   ========================================================================= */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-latin-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-latin-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-latin-700.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/outfit-latin-800.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}

.bn{
  --bn-bg:#120c0f;--bn-bg-2:#1d1319;--bn-line:rgba(255,255,255,.12);
  --bn-text:#fff;--bn-muted:rgba(255,255,255,.66);
  --bn-accent:#ff3355;--bn-accent-2:#ff7a45;--bn-online:#2fd07a;
  font:400 13px/1.35 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--bn-text);background:var(--bn-bg);
}
/* Quatre univers, quatre palettes — mais aucune n'est rose : Fabien l'a écarté
   nommément le 04/09/2026. « discover » reprend donc le rouge de marque du site
   (--primary de vxg-v2.css), et « private » descend vers un cramoisi profond
   pour rester distinguable de lui à côté sur une même page. */
.bn--chat{--bn-accent:#2bb8ff;--bn-accent-2:#5f8cff;--bn-bg:#070b11;--bn-bg-2:#0d1724}
.bn--nearby{--bn-accent:#ff8a1f;--bn-accent-2:#ffc247;--bn-bg:#120d08;--bn-bg-2:#1e1409}
.bn--discover{--bn-accent:#ff3344;--bn-accent-2:#ff7a45;--bn-bg:#0d0708;--bn-bg-2:#1a0c0e}
.bn--private{--bn-accent:#c2142b;--bn-accent-2:#ff5a2f;--bn-bg:#0a0606;--bn-bg-2:#150809}

.bn__frame{
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;
  height:100%;width:100%;padding:8px;text-decoration:none;color:inherit;
  background:linear-gradient(160deg,var(--bn-bg-2),var(--bn-bg) 62%);
  -webkit-tap-highlight-color:transparent;
}
.bn__head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:14px}
.bn__brand{
  display:inline-flex;align-items:center;gap:5px;font:800 11px/1 'Outfit',sans-serif;letter-spacing:.02em;
}
.bn__brand::before{
  content:"";width:11px;height:11px;border-radius:3px;
  background:linear-gradient(135deg,var(--bn-accent),var(--bn-accent-2));
}
.bn__label{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bn-accent-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%;
}
.bn__layout{display:grid;gap:8px;min-height:0}
.bn__media{display:grid;gap:4px;min-height:0}
.bn__shot{position:relative;display:block;border-radius:8px;overflow:hidden;background:#000;min-height:0}
.bn__status{
  position:absolute;top:4px;left:4px;padding:2px 6px;border-radius:99px;
  background:rgba(0,0,0,.62);font-size:8.5px;font-weight:700;letter-spacing:.02em;
}
.bn__status::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--bn-online);margin-right:4px;vertical-align:middle}
.bn__who{
  position:absolute;left:0;right:0;bottom:0;padding:12px 6px 4px;font-size:10px;font-weight:700;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bn__copy{display:grid;align-content:end;gap:5px;min-width:0}
.bn__title{
  font:800 15px/1.15 'Outfit',sans-serif;letter-spacing:-.01em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.bn__body{
  font-size:11px;color:var(--bn-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.bn__cta{
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:7px 10px;
  border-radius:9px;font-size:13px;font-weight:700;white-space:nowrap;
  background:linear-gradient(120deg,var(--bn-accent),var(--bn-accent-2));color:#fff;
}
.bn__cta b{font-size:15px;line-height:1}

/* ---------- 300x100 : une bande. Le corps disparaît, le titre tient sur 2 l. */
.bn--300x100 .bn__frame{padding:5px 7px;gap:3px}
.bn--300x100 .bn__head{min-height:11px}
.bn--300x100 .bn__brand{font-size:9px}
.bn--300x100 .bn__label{display:none}
.bn--300x100 .bn__layout{grid-template-columns:96px minmax(0,1fr);gap:7px;align-items:center}
.bn--300x100 .bn__body{display:none}
.bn--300x100 .bn__title{font-size:13px;-webkit-line-clamp:2}
.bn--300x100 .bn__cta{min-height:28px;font-size:11.5px;padding:5px 8px}
.bn--300x100.bn--nearby .bn__layout,.bn--300x100.bn--discover .bn__layout{grid-template-columns:minmax(0,1fr) 104px}
.bn--300x100.bn--nearby .bn__copy,.bn--300x100.bn--discover .bn__copy{order:-1}
.bn--300x100 .bn__media{grid-auto-flow:column;grid-auto-columns:1fr}
.bn--300x100 .bn__who,.bn--300x100 .bn__status{display:none}

/* ---------- 728x90 : la même bande, en plus large. */
.bn--728x90 .bn__frame{padding:6px 10px;gap:4px}
.bn--728x90 .bn__layout{grid-template-columns:minmax(0,240px) minmax(0,1fr) 150px;align-items:center;gap:14px}
.bn--728x90 .bn__media{grid-auto-flow:column;grid-auto-columns:1fr}
.bn--728x90 .bn__copy{align-content:center}
.bn--728x90 .bn__title{font-size:16px;-webkit-line-clamp:1}
.bn--728x90 .bn__body{-webkit-line-clamp:1;font-size:11.5px}
.bn--728x90 .bn__cta{grid-row:1;grid-column:3;min-height:38px;align-self:center}
.bn--728x90 .bn__who{display:none}

/* ---------- 300x250 et 300x300 : photo en haut, texte collé en bas. */
.bn--300x250 .bn__layout,.bn--300x300 .bn__layout{grid-template-rows:minmax(0,1fr) max-content}
.bn--300x250 .bn__title{font-size:17px;-webkit-line-clamp:2}
.bn--300x300 .bn__title{font-size:18px;-webkit-line-clamp:3}
.bn--300x250 .bn__body,.bn--300x300 .bn__body{-webkit-line-clamp:2}
.bn--300x250 .bn__media,.bn--300x300 .bn__media{grid-auto-flow:column;grid-auto-columns:1fr}
.bn--300x250.bn--nearby .bn__media,.bn--300x300.bn--nearby .bn__media,
.bn--300x250.bn--discover .bn__media,.bn--300x300.bn--discover .bn__media{
  grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
}
.bn--300x250 .bn__cta,.bn--300x300 .bn__cta{min-height:38px;font-size:14px}

/* ---------- 300x600 : le format qui a le meilleur taux de clic. La hauteur
   est libre : on la donne à la photo, pas au texte. */
.bn--300x600 .bn__frame{padding:12px;gap:10px}
.bn--300x600 .bn__layout{grid-template-rows:minmax(0,1fr) max-content;gap:12px}
.bn--300x600 .bn__title{font-size:22px;-webkit-line-clamp:3}
.bn--300x600 .bn__body{font-size:12.5px;-webkit-line-clamp:3}
.bn--300x600 .bn__cta{min-height:44px;font-size:15px;border-radius:11px}
.bn--300x600 .bn__media{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:6px}
.bn--300x600.bn--chat .bn__media,.bn--300x600.bn--private .bn__media{grid-template-columns:1fr}
.bn--300x600.bn--chat .bn__shot:first-child,.bn--300x600.bn--private .bn__shot:first-child{grid-column:1/-1}
.bn--300x600 .bn__who{font-size:11.5px}

/* ---------- Angle hero : la première photo domine ---------------------- */
.bn--hero .bn__media{position:relative}
.bn--hero.bn--300x250 .bn__media,.bn--hero.bn--300x300 .bn__media{grid-template-columns:1.6fr 1fr}
.bn--hero.bn--300x250 .bn__shot:first-child,.bn--hero.bn--300x300 .bn__shot:first-child{grid-row:span 2}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =========================================================================
   Gabarits « fiche », « strip », « flash » (04/09/2026). La photo prend TOUT
   le cadre, le texte vit par-dessus dans un dégradé bas, le CTA reste un
   bouton qui se touche. Servis sur 300x100 et 300x250 seulement.
   ========================================================================= */
.bn--tpl-fiche .bn__frame,.bn--tpl-strip .bn__frame,.bn--tpl-flash .bn__frame{
  position:relative;display:block;padding:0;background:#000;overflow:hidden
}
.bn--tpl-fiche .bn__head,.bn--tpl-strip .bn__head,.bn--tpl-flash .bn__head{
  position:absolute;z-index:3;top:7px;left:9px;right:9px;pointer-events:none
}
.bn--tpl-fiche .bn__brand,.bn--tpl-strip .bn__brand,.bn--tpl-flash .bn__brand{
  padding:3px 7px 3px 5px;border-radius:99px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)
}
.bn--tpl-fiche .bn__label,.bn--tpl-strip .bn__label,.bn--tpl-flash .bn__label{
  padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.5);color:#fff;font-size:9px
}
.bn--tpl-fiche .bn__layout,.bn--tpl-strip .bn__layout,.bn--tpl-flash .bn__layout{position:absolute;inset:0;display:block}
.bn--tpl-fiche .bn__media,.bn--tpl-flash .bn__media{position:absolute;inset:0;display:block}
.bn--tpl-fiche .bn__shot,.bn--tpl-flash .bn__shot{position:absolute;inset:0;border-radius:0}
/* Spécificité relevée : les règles par taille × angle (.bn--300x250.bn--discover)
   imposent sinon une grille 2x2 au strip. */
.bn.bn--tpl-strip .bn__media,.bn.bn--tpl-strip.bn--300x250 .bn__media,.bn.bn--tpl-strip.bn--300x100 .bn__media{
  position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);gap:2px
}
.bn--tpl-strip .bn__shot{border-radius:0}
.bn--tpl-strip .bn__shot img,.bn--tpl-fiche .bn__shot img,.bn--tpl-flash .bn__shot img{
  transform:scale(1.03);transition:transform .6s ease
}
.bn--tpl-fiche .bn__frame:hover img,.bn--tpl-strip .bn__frame:hover img,.bn--tpl-flash .bn__frame:hover img{transform:scale(1.08)}
.bn--tpl-fiche .bn__status,.bn--tpl-fiche .bn__who,.bn--tpl-flash .bn__status,.bn--tpl-flash .bn__who,
.bn--tpl-strip .bn__status{display:none}
.bn--tpl-strip .bn__who{padding:22px 6px 4px;font-size:10.5px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65))}
.bn--tpl-fiche .bn__copy,.bn--tpl-strip .bn__copy,.bn--tpl-flash .bn__copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 10px 10px;gap:6px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.58) 34%,rgba(0,0,0,.93))
}
.bn__pill{
  display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:3px 9px 3px 7px;border-radius:99px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);font-size:10px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.bn__pill::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--bn-online);box-shadow:0 0 0 3px rgba(47,208,122,.28)}
.bn--tpl-fiche .bn__title{font-size:17px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.bn--tpl-strip .bn__title{font-size:17px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.bn--tpl-flash .bn__title{font-size:20px;line-height:1.1;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.bn--tpl-fiche .bn__body,.bn--tpl-strip .bn__body,.bn--tpl-flash .bn__body{color:rgba(255,255,255,.82);-webkit-line-clamp:1}
.bn--tpl-flash .bn__body{letter-spacing:.02em;font-weight:600}
.bn--tpl-fiche .bn__cta,.bn--tpl-strip .bn__cta,.bn--tpl-flash .bn__cta{min-height:38px;font-size:14px;box-shadow:0 6px 18px -8px rgba(0,0,0,.9)}
/* fiche = bleu tchat (dial), strip = rouge de marque (rencontre), flash = cramoisi (chaud). */
.bn--tpl-fiche{--bn-accent:#2bb8ff;--bn-accent-2:#5f8cff}
.bn--tpl-strip{--bn-accent:#ff3344;--bn-accent-2:#ff7a45}
.bn--tpl-flash{--bn-accent:#e5132e;--bn-accent-2:#ff3d5a;--bn-online:#ff3d5a}
.bn--tpl-flash .bn__copy{background:linear-gradient(180deg,transparent,rgba(110,0,20,.42) 30%,rgba(16,0,4,.96))}
.bn--tpl-flash .bn__label{background:rgba(229,19,46,.75)}

/* ---- 300x100 : la bande, en trois lectures ---- */
.bn--300x100.bn--tpl-fiche .bn__layout{position:static;display:grid;grid-template-columns:100px minmax(0,1fr);height:100%}
.bn--300x100.bn--tpl-fiche .bn__media{position:relative;inset:auto;height:100%}
.bn--300x100.bn--tpl-fiche .bn__head{left:auto;right:8px;top:6px}
.bn--300x100.bn--tpl-fiche .bn__brand{display:none}
.bn--300x100.bn--tpl-fiche .bn__copy{position:relative;inset:auto;padding:8px 8px 7px 9px;gap:4px;background:none;align-content:center}
.bn--300x100.bn--tpl-fiche .bn__pill{font-size:9px;padding:2px 7px 2px 6px}
.bn--300x100.bn--tpl-fiche .bn__title{font-size:12.5px;line-height:1.15;-webkit-line-clamp:2;text-shadow:none}
.bn--300x100.bn--tpl-fiche .bn__body{display:none}
.bn--300x100.bn--tpl-fiche .bn__cta{min-height:28px;font-size:11.5px;padding:5px 8px;box-shadow:none}
.bn--300x100.bn--tpl-strip .bn__copy,.bn--300x100.bn--tpl-flash .bn__copy{
  display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:end;gap:8px;padding:30px 8px 7px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 40%,rgba(0,0,0,.9))
}
.bn--300x100.bn--tpl-flash .bn__copy{background:linear-gradient(180deg,transparent,rgba(110,0,20,.5) 40%,rgba(16,0,4,.95))}
.bn--300x100.bn--tpl-strip .bn__title,.bn--300x100.bn--tpl-flash .bn__title{font-size:13.5px;-webkit-line-clamp:2}
.bn--300x100.bn--tpl-strip .bn__body,.bn--300x100.bn--tpl-flash .bn__body{display:none}
.bn--300x100.bn--tpl-strip .bn__cta,.bn--300x100.bn--tpl-flash .bn__cta{min-height:30px;font-size:11.5px;padding:5px 10px;border-radius:99px}
.bn--300x100.bn--tpl-strip .bn__who{display:none}
.bn--300x100.bn--tpl-strip .bn__head,.bn--300x100.bn--tpl-flash .bn__head{top:5px;left:7px;right:7px}
.bn--300x100.bn--tpl-strip .bn__label,.bn--300x100.bn--tpl-flash .bn__label{display:inline-block}

/* ---- 300x250 : la photo respire, le texte s'ancre en bas ---- */
.bn--300x250.bn--tpl-strip .bn__copy{padding-top:60px}
.bn--300x250.bn--tpl-flash .bn__copy{padding-top:70px}
.bn--300x250.bn--tpl-fiche .bn__copy{padding-top:56px}