/* ===== Widget Témoignages vidéo (braillard-temvid) =====
   Carrousel de slides .br-video (layout preview/overlay/bouton + modale
   réutilisés de video.css). Maquette sous-page TW (3146:624/529/530) :
   heading « Témoignages » au retrait des textes, chaque slide = bloc vidéo
   (titre col 5 débordant sur le vert, preview col 6 → bord droit), auteur
   sous le titre, cluster ‹ x/y › en bas à gauche.
   À poser en ENFANT DIRECT de la colonne contenu. */

.elementor-widget.elementor-widget-braillard-temoignages-video{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.br-temvid{
  --tv-pad: clamp(20px, 4vw, 56px);
  --tv-base: calc((100% - 2 * var(--tv-pad)) * .35);
  --tv-step: clamp(48px, 8vw, 138px);
  position: relative;
}

.br-temvid__heading{
  margin: 0 0 clamp(4px, .5vw, 10px);
  padding-left: var(--tv-base);
}

/* Pile en grille : hauteur = max des slides, pas de saut en naviguant. */
.br-temvid__viewport{ display: grid; }
.br-temvid__slide{
  grid-area: 1 / 1;
  /* Bascule par DISPLAY (non transitionnable — la visibility héritée se
     transitionnait au niveau des enfants → double titre fugace). Le FADE est
     séquentiel, orchestré par temvid.js : fondu de sortie (is-fading) →
     échange display à opacité nulle → fondu d'entrée. Seule l'OPACITÉ du
     wrapper transitionne (composite tout le slide d'un bloc). */
  display: none;
  opacity: 1;
  transition: opacity .25s ease !important;
}
.br-temvid__slide.is-active{ display: block; }
.br-temvid__slide.is-fading{ opacity: 0; }

/* Le slide reproduit le contexte du widget vidéo : le retrait des textes
   est porté ICI (le widget est full-bleed), le reste vient de video.css. */
.br-temvid .br-video{ padding-left: var(--tv-base); }
.br-temvid .br-video__preview{ margin-right: 0; }   /* déjà au bord droit (pas de padding module à annuler) */

.br-temvid__author{
  display: block;
  margin-top: clamp(-14px, -1vw, -8px);   /* resserre sous le titre (gap du body) */
  font-family: var(--br-font-body); font-weight: 400;
  font-size: clamp(13px, .93vw, 16px); color: #111;
}

/* Cluster ‹ x/y › (flèches 2 lignes) suspendu au coin BAS-GAUCHE de la
   preview (maquette) : la queue de la flèche ← est CALÉE sur le bord gauche
   de la vidéo (col 6 = base + step) et file vers la gauche ; « x/y » un peu
   à gauche du bord ; la flèche → dépasse dessous. */
.br-temvid__pag{
  width: clamp(120px, 10vw, 174px);
  margin: calc(-1 * clamp(6px, .8vw, 14px)) 0 0
          calc(var(--tv-base) + var(--tv-step) - clamp(70px, 6vw, 105px) - 35px);   /* la queue de la flèche ← s'arrête 35px AVANT le bord de la vidéo (maquette) */
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--br-font-body);
  position: relative; z-index: 2;   /* passe devant le bas de la preview */
}
.br-temvid__prev, .br-temvid__next{
  background: none; border: 0; padding: 2px; cursor: pointer;
  color: var(--br-black, #000); line-height: 0;
}
.br-temvid__prev{ align-self: flex-start; }
.br-temvid__next{ align-self: flex-end; }
.br-temvid__prev svg, .br-temvid__next svg{ width: clamp(70px, 6vw, 105px); height: auto; display: block; }
.br-temvid__prev:hover{ transform: translateX(-4px); }
.br-temvid__next:hover{ transform: translateX(4px); }
.br-temvid__count{
  align-self: center; font-size: clamp(13px, .93vw, 16px);
  font-variant-numeric: tabular-nums; color: var(--br-black, #000);
}

@media (max-width: 900px){
  .br-temvid .br-video{ padding-left: var(--tv-pad); }
  .br-temvid__heading{ padding-left: var(--tv-pad); }
  .br-temvid__pag{ margin-left: var(--tv-pad); }
}