@font-face {
  font-family: 'Lil Grotesk';
  src: url('../lilgrotesk/LilGrotesk-Regular.otf') format('truetype');
}

@font-face {
  font-family: 'Blinds Audience';
  src: url('../blindsaudience/Blinds\ Audience.otf') format('woff');
}

.testimonials {
  width:100vw;
  display: block;
  font-family: 'Lil Grotesk', sans-serif;
}

.testimonial-container {
  position: relative;
  overflow: visible; /* Changé de 'hidden' à 'visible' */
  height: auto; /* Changé de hauteur fixe à 'auto' */
  min-height: 100px; /* Ajouté pour maintenir une hauteur minimale */
}

.testimonial-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.testimonial {
  position: relative;
  width: 80%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: left;
  background-color: transparent;
  padding-top:1em;
  padding-bottom:1em;
}

.testimonial.active {
  opacity: 1;
}

.testimonial-content {
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.5s ease;
  color: grey;
}



.testimonial-content.expanded {
  max-height: 1000px;
}

.expand-btn {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  display: block;
}

.scroll-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 2em;
  color: var(--gold);
  z-index: 2;
  width: 2em;
  height: 2em;
  background: var(--gold);
}

.scroll-btn.left {
  left: 5%;
  clip-path: polygon(5.75% 50%, 5.75% 50%, 24.75% 100%, 0% 50%, 25% 0%, 6% 50%, 5.75% 50%);
}



.scroll-btn.right {
  right: 5%;
  clip-path: polygon(94.25% 50%, 94.25% 50%, 75.25% 100%, 100% 50%, 75% 0%, 94% 50%, 94.25% 50%);
}

.testimonial.slide-out-left {
  transform: translateX(-150%);
  opacity: 0;
}

.testimonial.slide-out-right {
  transform: translateX(50%);
  opacity: 0;
}

.testimonial h3 {
  color: var(--gold);
  display: flex;
  align-items: center;
  padding-bottom:0.5em;
}

@media screen and (max-width: 768px) {

  .testimonial {
    width: 100%; /* Utiliser toute la largeur disponible */
  }
  .testimonial-content {
    min-height:8em;
  }

  .scroll-btn {
    width: 1rem; /* Réduire la largeur des boutons */
    height: 10%; /* Étendre les boutons sur toute la hauteur */
    top: 50%;
    transform: none;
    font-size: 1.2rem;
  }

  .scroll-btn.left {
    left: 5%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    clip-path: polygon(20% 0, 0% 50%, 20% 100%, 12% 50%);
  }

  .scroll-btn.right {
    right: 5%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    clip-path: polygon(80% 0, 100% 50%, 80% 100%, 88% 50%);
  }

  /* Ajuster le contenu pour qu'il ne soit pas caché par les boutons */
  .testimonial h3,
  .testimonial-content {
    max-width: calc(100% - 4rem); /* 100% moins la largeur des deux boutons */
    margin-left: 3em;
    margin-right: 3em;
  }
  .expand-btn{
    padding-left:4em;
  }
}