/**
 * mod_cfdtslider — diaporama CFDT
 * Personnalisation : redéfinir les variables ci-dessous dans user.css du template.
 */
.cfdt-slider {
  --cfdt-slider-accent: #ea5b0c;
  --cfdt-slider-bg: transparent;
  --cfdt-slider-caption-bg: rgba(255, 255, 255, .75);
  --cfdt-slider-caption-fg: #fff;
  --cfdt-slider-control-bg: rgba(255, 255, 255, .92);
  --cfdt-slider-control-fg: #1f2937;
  --cfdt-slider-dot: #d1d5db;
  --cfdt-slider-radius: 0;
  --cfdt-slider-fade: .7s;

  position: relative;
  width: 100%;
}

.cfdt-slider__stage {
  position: relative;
}

/* Les diapositives sont empilées dans la même cellule de grille :
   la hauteur du diaporama suit naturellement la plus grande image, sans hauteur fixe. */
.cfdt-slider__track {
  display: grid;
  overflow: hidden;
  border-radius: var(--cfdt-slider-radius);
  background: var(--cfdt-slider-bg);
}

/* Format fixe (largeur/hauteur de référence) : la hauteur suit la largeur du conteneur.
   La photo occupe un cadre centré (--cfdt-slider-img-w) ; la couleur de fond remplit les côtés.
   En mode « recadrer », la photo prend la largeur du cadre et le bas est coupé, comme DJ-ImageSlider. */
.cfdt-slider--fixed .cfdt-slider__track {
  display: block;
  position: relative;
  aspect-ratio: var(--cfdt-slider-ratio);
}

.cfdt-slider--fixed .cfdt-slider__slide {
  position: absolute;
  inset: 0;
}

.cfdt-slider--fixed .cfdt-slider__link {
  height: 100%;
}

.cfdt-slider--fixed .cfdt-slider__image {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cfdt-slider-img-w, 100%);
  height: 100%;
  transform: translateX(-50%);
  object-fit: var(--cfdt-slider-fit, cover);
  object-position: var(--cfdt-slider-pos, center top);
}

.cfdt-slider__slide {
  position: relative;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cfdt-slider-fade) ease, visibility var(--cfdt-slider-fade);
}

.cfdt-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.cfdt-slider__link,
.cfdt-slider__link:hover,
.cfdt-slider__link:focus {
  display: block;
  color: inherit;
  text-decoration: none;
}

.cfdt-slider__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* Légende : bandeau clair translucide sur toute la largeur (reprise de DJ-ImageSlider) */
.cfdt-slider__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.1rem .9375rem;
  color: var(--cfdt-slider-caption-fg);
  background: var(--cfdt-slider-caption-bg);
  text-align: left;
}

.cfdt-slider__title {
  margin: 0;
  font-size: 1.4375rem; /* 23 px, mesuré sur DJ-ImageSlider */
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

.cfdt-slider__description {
  margin-top: .35rem;
  font-size: clamp(.9rem, 1.6vw, 1rem);
}

.cfdt-slider__description > :last-child {
  margin-bottom: 0;
}

/* Boutons */
.cfdt-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--cfdt-slider-control-fg);
  background: var(--cfdt-slider-control-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}

.cfdt-slider__btn:hover {
  color: #fff;
  background: var(--cfdt-slider-accent);
}

.cfdt-slider__btn:focus-visible,
.cfdt-slider__dot:focus-visible {
  outline: 3px solid var(--cfdt-slider-accent);
  outline-offset: 2px;
}

.cfdt-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.cfdt-slider__arrow--prev { left: .75rem; }
.cfdt-slider__arrow--next { right: .75rem; }

/* Icônes en CSS : aucune dépendance à Font Awesome */
.cfdt-slider__icon {
  display: block;
  width: .7rem;
  height: .7rem;
}

.cfdt-slider__icon--prev,
.cfdt-slider__icon--next {
  border-top: 2.5px solid currentColor;
  border-left: 2.5px solid currentColor;
}

.cfdt-slider__icon--prev { transform: translateX(2px) rotate(-45deg); }
.cfdt-slider__icon--next { transform: translateX(-2px) rotate(135deg); }

.cfdt-slider__icon--pause {
  width: .6rem;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.cfdt-slider__icon--play {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: .4rem solid transparent;
  border-bottom: .4rem solid transparent;
  border-left: .65rem solid currentColor;
}

/* Barre de contrôles sous l'image */
.cfdt-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.5rem;
}

.cfdt-slider__controls .cfdt-slider__btn {
  width: 2.25rem;
  height: 2.25rem;
  box-shadow: none;
  border: 1px solid #e5e7eb;
}

.cfdt-slider__dots {
  display: flex;
  gap: .5rem;
}

.cfdt-slider__dot {
  width: .75rem;
  height: .75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cfdt-slider-dot);
  cursor: pointer;
  transition: width .3s, background-color .3s;
}

.cfdt-slider__dot:hover {
  background: #9ca3af;
}

.cfdt-slider__dot.is-active {
  width: 2rem;
  background: var(--cfdt-slider-accent);
}

/* Petits écrans : flèches plus discrètes, le glissement au doigt prend le relais */
@media (max-width: 575.98px) {
  .cfdt-slider__arrow {
    width: 2.25rem;
    height: 2.25rem;
  }

  .cfdt-slider__arrow--prev { left: .4rem; }
  .cfdt-slider__arrow--next { right: .4rem; }

  /* Sur mobile, le format très allongé rendrait la photo minuscule :
     on supprime les bandes de couleur et le cadre photo prend toute la largeur (même recadrage). */
  .cfdt-slider--fixed .cfdt-slider__track {
    aspect-ratio: var(--cfdt-slider-img-ratio, var(--cfdt-slider-ratio));
  }

  .cfdt-slider--fixed .cfdt-slider__image {
    left: 0;
    width: 100%;
    transform: none;
  }

  .cfdt-slider__caption {
    padding: .5rem .75rem;
  }

  .cfdt-slider__title {
    font-size: 1rem;
  }

  .cfdt-slider__description {
    display: none; /* sur mobile, seul le titre reste lisible par-dessus l'image */
  }
}

/* Style de légende « Comme DJ-ImageSlider » (option du module, 1.4.0 ; proportions 1.4.1)
   Reprend les règles de DJ-ImageSlider (thème par défaut + user.css du template Cfdt),
   en unités relatives : la légende suit la taille et l'interligne du texte du site,
   comme DJ. Mesuré identique sur cfdt-groupeeram.fr (texte 16 px → titre 24 px)
   et cfdt-sfd.fr (texte 15,2 px → titre 22,8 px).
   Double classe : plus forte que les règles par défaut ci-dessus, y compris celles du bloc téléphone. */
.cfdt-slider--caption-dj .cfdt-slider__caption {
  padding: 15px 15px 5px;
  font-size: inherit;
  line-height: inherit;
}

.cfdt-slider--caption-dj .cfdt-slider__title {
  margin: 0 0 10px;
  font-size: 1.5em;
  font-weight: 600;
  line-height: inherit;
}

@media (max-width: 768px) {
  .cfdt-slider--caption-dj .cfdt-slider__caption {
    padding: 0 5px;
  }

  .cfdt-slider--caption-dj .cfdt-slider__title {
    margin-bottom: 0;
    font-size: .8em;
    letter-spacing: -.03em;
  }

  .cfdt-slider--caption-dj .cfdt-slider__description {
    display: none;
  }
}

/* Respect du réglage « réduire les animations » du visiteur */
@media (prefers-reduced-motion: reduce) {
  .cfdt-slider__slide,
  .cfdt-slider__dot,
  .cfdt-slider__btn {
    transition: none;
  }
}