/* ===== Widget Slideshow page contenu (braillard-slideshow-page) =====
   L'image occupe EXACTEMENT la colonne des textes : mêmes bords gauche et
   droit que les titres et paragraphes des autres sections (client 2026-10-01).
   Le widget ne pose donc plus aucun retrait propre : il hérite de celui de la
   colonne contenu (35 % à gauche, marge de page à droite), qu'il soit posé en
   enfant direct ou dans un conteneur.
   Historique : jusqu'au 2026-09-30 l'image débordait à gauche des textes
   (col. 4 Figma, 468px) et s'arrêtait à la fin de la col. 10 (331px du bord),
   d'après les retours graphistes des 2026-07-13 et 2026-09-17.
   — cluster ‹ 4/6 › au-dessus de l'image, calé sur son bord gauche
   — crédit photo à droite, SOUS l'image. */

.br-sscp{
  font-family: var(--br-font-body);
}

/* Rangée de tête : nav calée sur le bord gauche de l'image. */
.br-sscp__head{
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: clamp(6px, .6vw, 10px);
}
.br-sscp__nav{
  display: inline-flex; align-items: center; gap: clamp(8px, .9vw, 16px);
}
.br-sscp__prev, .br-sscp__next{
  background: none; border: 0; padding: 2px; cursor: pointer;
  color: var(--br-black, #000); line-height: 0; display: inline-flex;
}
.br-sscp__prev svg, .br-sscp__next svg{ width: clamp(30px, 2.4vw, 42px); height: auto; display: block; }
.br-sscp__prev:hover{ transform: translateX(-3px); }
.br-sscp__next:hover{ transform: translateX(3px); }
.br-sscp__count{
  font-size: clamp(13px, 0.93vw, 16px); color: var(--br-black, #000);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.br-sscp__cap{
  font-size: clamp(12px, 0.81vw, 14px); color: #6b6660;
  text-align: right; flex: 0 1 auto; min-height: 1em;
}

/* Crédit SOUS l'image, aligné sur son bord droit (retour client 2026-07-13,
   ex-au-dessus dans la rangée de tête). */
.br-sscp__foot{
  display: flex; justify-content: flex-end;
  margin-top: clamp(6px, .6vw, 10px);
}

/* Image : toute la largeur de la colonne des textes. */
.br-sscp__stage{
  position: relative;
  aspect-ratio: var(--sscp-ratio, 16 / 9);
  overflow: hidden; background: #ececec;
}
.br-sscp__slide{
  position: absolute; inset: 0; margin: 0;
  opacity: 0; z-index: 0;
  transition: opacity .4s ease;
}
.br-sscp__slide.is-prev{ opacity: 1; z-index: 1; transition: none; }
.br-sscp__slide.is-active{ opacity: 1; z-index: 2; }
.br-sscp__slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }