/* =====================================================================
   Braillard — Widget Slideshow / Média
   1+ images ou vidéos, fondu enchaîné, légende + compteur en bas à droite,
   flèche « suivant » (flèche maison), avance auto + boucle.
   ===================================================================== */
.br-slideshow{ position: relative; width: 100%; }

/* Slideshow d'en-tête bord à bord : le conteneur Elementor qui enveloppe le
   héros porte le padding horizontal par défaut (10px) des conteneurs, ce qui
   laissait un liseré à gauche/droite. On l'annule pour tous les héros d'un coup
   (l'édition programmatique du padding dans _elementor_data ne se régénère pas
   côté CSS sur ce projet — cf. mémoire). */
.e-con:has(> .elementor-widget-braillard-slideshow),
.e-con:has(> .e-con-inner > .elementor-widget-braillard-slideshow){
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.br-slideshow__stage{
  position: relative; width: 100%;
  aspect-ratio: var(--br-ss-ratio, 16 / 9);
  overflow: hidden; background: #ececec;
}
.br-slideshow__slide{
  position: absolute; inset: 0; margin: 0;
  opacity: 0; z-index: 0;
  transition: opacity var(--br-ss-fade, .4s) ease;
  pointer-events: none;
}
/* Ancien slide : reste PLEIN dessous pendant le fondu (pas de transparence -> pas de superposition). */
.br-slideshow__slide.is-prev{ opacity: 1; z-index: 1; transition: none; }
/* Nouveau slide : fond enchaîné PAR-DESSUS l'ancien. */
.br-slideshow__slide.is-active{ opacity: 1; z-index: 2; pointer-events: auto; }
.br-slideshow__slide img,
.br-slideshow__slide video{
  /* ABSOLU + inset plutôt que height:100% : Safari iOS calcule mal la hauteur
     des enfants d'un parent dimensionné par aspect-ratio — certaines photos
     (portrait) débordaient sur le texte en mobile (retour client 2026-07-13).
     Identique visuellement sur les moteurs sains. */
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Fallback si aspect-ratio est absent/mal interprété : hauteur par ratio
   (padding-hack) pour que le stage occupe toujours sa place dans le flux. */
@supports not (aspect-ratio: 16 / 9){
  .br-slideshow__stage{ height: 0; padding-top: 56.25%; }
}

/* ⚠️ Firefox (diagnostic sonde 2026-07-13, chevauchement client) : dans un
   e-con flex, la hauteur intrinsèque d'un stage dimensionné par aspect-ratio
   se recalcule FAUX au re-layout du changement de slide (la légende change de
   nombre de lignes) : conteneur h145 < stage h152 → le bloc suivant remontait
   sur l'image. En mobile, on retire aspect-ratio du calcul : padding-hack en
   % de largeur (var --br-ss-ratio = expression « 21 / 9 » → calc la divise).
   Géométrie identique, calcul consensuel tous moteurs. */
@media (max-width: 900px){
  .br-slideshow__stage{
    height: 0;
    aspect-ratio: auto;
    padding-top: calc(100% / (var(--br-ss-ratio, 1.7778)));
  }
  /* 2e couche (sonde client, 2026-07-13) : même en padding-hack, le moteur
     du client calcule la hauteur du e-con FLEX à 144.88px pour un contenu de
     ~195px (valeur stable → largeur fantôme de ~338px, scrollbar ?). Un bloc
     ne se trompe pas : on sort du flex le conteneur du slideshow (1 seul
     enfant, colonne → visuellement identique). */
  .e-con:has(> .elementor-widget-braillard-slideshow){
    display: block !important;
    height: auto !important;
  }
}

/* ---- Barre légende / compteur / flèche (bas à droite) ---- */
.br-slideshow__bar{
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(16px, 1.9vw, 32px);
  padding: clamp(10px, 1vw, 16px) 0 0;
  font-family: var(--br-font-body);
}
.br-slideshow__count{
  font-size: clamp(13px, 0.93vw, 16px); color: var(--br-black);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.br-slideshow__cap{
  font-size: clamp(13px, 0.93vw, 16px); color: #6b6660;
  text-align: right; flex: 0 1 auto;
}
.br-slideshow__next{
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--br-black); line-height: 0; display: inline-flex;
  transition: transform .3s ease;
}
.br-slideshow__next svg{ width: clamp(64px, 6vw, 92px); height: auto; display: block; }
.br-slideshow__next:hover{ transform: translateX(5px); }

/* Un seul média : pas de barre inutile si pas de légende (géré côté PHP par le bouton),
   la barre reste pour la légende seule -> flèche absente, alignée à droite. */