/* ==========================================================================
   FFSMC Slider - Diaporama d'accueil
   --------------------------------------------------------------------------
   Les valeurs reglables (couleurs, tailles, largeur du bloc de texte) sont
   injectees par le module sous forme de proprietes personnalisees. Ce fichier
   ne contient que la mecanique, jamais les reglages.

   Les diapositives sont empilees dans une grille CSS plutot qu'en position
   absolue : la hauteur du diaporama devient celle de la diapositive la plus
   haute, elle ne saute donc jamais d'une diapositive a l'autre, et le passage
   a la mise en page telephone (texte sous l'image) ne demande aucun calcul.
   ========================================================================== */

.ffsmc-slider {
  --ffsmc-bg: #E9EAEC;
  --ffsmc-accent: #F07C22;
  --ffsmc-btn-bg: #F07C22;
  --ffsmc-btn-fg: #FFFFFF;
  --ffsmc-title: clamp(20px, 3vw, 48px);
  --ffsmc-eyebrow: clamp(14px, 1.26vw, 20px);
  --ffsmc-text-width: 44%;
  --ffsmc-text-left: 4.4%;
  --ffsmc-max-width: 1600px;
  --ffsmc-fit: 1;

  position: relative;
  background: var(--ffsmc-bg);
  overflow: hidden;
}

.ffsmc-viewport {
  max-width: var(--ffsmc-max-width);
  margin: 0 auto;
  position: relative;
}

.ffsmc-track {
  display: grid;
}

.ffsmc-slide {
  grid-area: 1 / 1 / 2 / 2;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
}

.ffsmc-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* ---------- image ---------- */

.ffsmc-imglink,
.ffsmc-slide picture {
  display: block;
}

.ffsmc-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ---------- texte ---------- */

.ffsmc-caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.ffsmc-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ffsmc-text-left);
  width: var(--ffsmc-text-width);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  pointer-events: auto;
}

.ffsmc-eyebrow {
  margin: 0;
  font-size: calc(var(--ffsmc-eyebrow) * var(--ffsmc-fit));
  line-height: 1.45;
  color: var(--ffsmc-accent);
}

.ffsmc-title {
  margin: .38em 0 0;
  font-size: calc(var(--ffsmc-title) * var(--ffsmc-fit));
  line-height: 1.12;
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.ffsmc-btn {
  display: inline-block;
  margin-top: .85em;
  padding: .62em 1.7em;
  font-size: calc(var(--ffsmc-eyebrow) * var(--ffsmc-fit) * .88);
  line-height: 1.2;
  text-decoration: none;
  border-radius: 2px;
  background: var(--ffsmc-btn-bg);
  color: var(--ffsmc-btn-fg);
  transition: filter .15s ease;
}

.ffsmc-btn:hover,
.ffsmc-btn:focus {
  color: var(--ffsmc-btn-fg);
  text-decoration: none;
  filter: brightness(.92);
}

/* ---------- fleches ---------- */

.ffsmc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: #15181d;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .12);
}

.ffsmc-nav svg {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto;
}

.ffsmc-slider:hover .ffsmc-nav,
.ffsmc-nav:focus-visible {
  opacity: 1;
}

.ffsmc-nav:hover {
  background: #fff;
}

.ffsmc-prev { left: 14px; }
.ffsmc-next { right: 14px; }

/* ---------- pastilles ---------- */

.ffsmc-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ffsmc-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(21, 24, 29, .28);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.ffsmc-dot.is-active {
  background: var(--ffsmc-accent);
  transform: scale(1.25);
}

/* ==========================================================================
   Telephones : le bandeau est trop plat pour accueillir du texte par-dessus.
   On passe donc le texte SOUS l'image, sur le fond du bandeau.
   ========================================================================== */

@media (max-width: 767px) {
  .ffsmc-caption {
    position: static;
  }

  .ffsmc-text {
    position: static;
    width: auto;
    padding: 16px 18px 22px;
    align-items: flex-start;
  }

  .ffsmc-title {
    font-size: clamp(19px, 5.4vw, 30px);
  }

  .ffsmc-eyebrow {
    font-size: clamp(13px, 3.6vw, 17px);
  }

  .ffsmc-btn {
    font-size: clamp(13px, 3.4vw, 16px);
  }

  .ffsmc-nav {
    display: none;
  }

  .ffsmc-dots {
    position: static;
    padding: 0 0 14px;
  }
}

/* ---------- accessibilite ---------- */

.ffsmc-nav:focus-visible,
.ffsmc-dot:focus-visible,
.ffsmc-btn:focus-visible {
  outline: 3px solid var(--ffsmc-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ffsmc-slide,
  .ffsmc-nav,
  .ffsmc-dot,
  .ffsmc-btn {
    transition: none;
  }
}

/* Sans JavaScript, la premiere diapositive reste visible et lisible. */
.ffsmc-slider.no-js .ffsmc-slide:not(.is-active) {
  display: none;
}