/* === VideoBanner — module-driven (clean) ================================ */

/* Bloc principal */
.vb-hero-wrapper{
  position: relative !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  overflow: hidden !important;
  background: #fff !important;
  z-index: 1;
  height: 420px !important;
}
@media (max-width: 992px){ .vb-hero-wrapper{ height: 380px !important; } }
@media (max-width: 768px){ .vb-hero-wrapper{ height: 340px !important; } }

/* Vidéo / iframe — SANS ZOOM, ratio respecté */
.vb-hero-wrapper iframe{
  position: absolute !important;
  inset: 0 !important;                 /* top/right/bottom/left: 0 */
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  z-index: 0 !important;
  pointer-events: none;
  background: #fff !important;
  mix-blend-mode: normal !important;
  object-fit: contain;                 /* clé : pas de zoom ni rognage */
}


/* Overlay texte */
.vb-overlay{
  position: absolute; top: 37% !important; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; z-index: 2; width: 100%;
  color: #111; padding: 10px;
  background: transparent !important;
  box-shadow: none !important; backdrop-filter: none !important;
}

/* Titre */
.vb-title{
  font-size: 2.4rem; line-height: 1.3; color: #000;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.9);
  padding: 12px 18px; border-radius: 8px; text-shadow: none;
  display: inline-block; font-weight: 700; margin-bottom: 10px;
}
@media (max-width: 768px){ .vb-title{ font-size: 1.5rem; } }

/* Sous-titre simple (fallback si pas de pipes) */
.vb-subtitle{
  font-size: 1.1rem; max-width: 850px; margin: 14px auto 0;
  color: #333; background: rgba(255,255,255,.6);
  padding: 10px 16px; border-radius: 6px; line-height: 1.5;
}

/* Bande “values pros” (si pipes) */
.vb-vp-band{
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; align-items: center;
  margin: 8px 0 10px; font-size: 16px;
}
.vb-vp-item{ display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px){ .vb-vp-band{ flex-direction: column; gap: 8px; } }

/* Couleurs des pictos par boutique */
body.shop-gts .vb-vp-band .vb-vp-item i { color: #0b7a3e !important; } /* GTS */
body.shop-tns .vb-vp-band .vb-vp-item i { color: #d62828 !important; } /* TNS */
body.shop-gtf .vb-vp-band .vb-vp-item i { color: #004aad !important; } /* GTF */

/* Texte blanc pour values sur fonds sombres (TNS/GTF) */

body.shop-gtf .vb-vp-band{
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
body.shop-tns .vb-vp-band{
  color: #111 !important;      /* ou #000 */
  text-shadow: none !important;
}
/* === Actions du héros : centre + droite (alignés sur la même ligne) ==== */

/* Bouton central (modeste) */
.vb-center-actions{
  position: absolute;
  left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 110;
}

/* Pilule “Pourquoi…” (droite) — gabarit identique au compteur */
.vb-trust-right{
  position: absolute; right: 24px; bottom: 28px; z-index: 120;
}
.vb-trust-link{
  display: flex; align-items: center; line-height: 1;
  min-height: 48px; padding: 10px 18px; border-radius: 12px;
  background: rgba(0,0,0,.38); color: #fff; text-decoration: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .25s;
}
.vb-trust-link:hover{ background: rgba(0,0,0,.55); }

/* Responsive ajustements */
@media (max-width: 992px){
  .vb-center-actions{ bottom: 16px; }
  .vb-trust-right{ right: 16px; bottom: 16px; }
}

/* === Fallback (si le TPL utilise encore .vb-actions /.vb-info-link) ==== */
/* -> À supprimer si tu es passé au nouveau TPL avec .vb-center-actions + .vb-trust-right */
.vb-actions{
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: 100%; text-align: center; z-index: 110;
}
.vb-actions .vb-cta{
  font-size: 14px; padding: 8px 14px; border-radius: 8px;
  background: #1e9220; color: #fff !important; border: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.vb-actions .vb-info-link{
  position: absolute; right: 24px; bottom: 0;
  display: flex; align-items: center;
  min-height: 48px; padding: 10px 18px; border-radius: 12px;
  background: rgba(0,0,0,.38); color: #fff !important; text-decoration: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* Modale “Pourquoi…“ — blindage d’affichage */
.vb-info-modal{ 
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: none !important;       /* toujours cachée par défaut */
  align-items: center; justify-content: center;
  z-index: 9999;
  animation: vb-fade-in .2s ease;
}
.vb-info-modal.show{ display: flex !important; }

.vb-info-dialog{
  background:#fff; border-radius:10px; padding:10px;
  max-width:1200px; width:calc(100% - 40px);
  box-shadow:0 10px 30px rgba(0,0,0,.25); position:relative;
}
.vb-info-content img{ display:block; width:100%; height:auto; border-radius:6px; }
.vb-close{ position:absolute; top:8px; right:10px; width:36px; height:36px; border:none;
  border-radius:18px; background:#000; color:#fff; font-size:22px; line-height:1; cursor:pointer; }
@keyframes vb-fade-in{ from{opacity:0;} to{opacity:1;} }
/* === Bouton central : position plus haute sous la bande d’avantages === */
/* Remonte légèrement le bloc texte (titre + avantages) */
.vb-overlay{ top:37% !important; }

/* Bouton centré un peu plus haut, réactif */
.vb-center-actions{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:110;
  bottom:clamp(64px, 19vh, 163px); /* mini 64px, idéal 19vh, maxi 163px */
}
@media (max-width: 992px){
  .vb-center-actions{ bottom:clamp(56px, 16vh, 120px); }
}
@media (max-width: 768px){
  .vb-center-actions{ bottom:56px; }
}
/* Style de base du CTA (ne force PAS la couleur de fond ici) */
.vb-cta{
  font-size:14px;
  padding:8px 14px;
  border-radius:8px;
  border:none;
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* === Couleur par boutique ============================================ */
/* GTS (vert) */
body.shop-gts .vb-cta{
  background:#1e9220;               /* vert GTS */
}
body.shop-gts .vb-cta:hover{ filter:brightness(0.92); }

/* TNS (rouge) */
body.shop-tns .vb-cta{
  background:#d62828;               /* rouge TNS */
}
body.shop-tns .vb-cta:hover{ filter:brightness(0.92); }

/* GTF (bleu) */
body.shop-gtf .vb-cta{
  background:#004aad;               /* bleu GTF */
}
body.shop-gtf .vb-cta:hover{ filter:brightness(0.92); }
/* Forcer le titre en noir sur T-Shirt Nice (shop-tns) */
body.shop-tns .vb-title{
  color: #000 !important;
}