.testimonies {
  /* Variables CSS avec valeurs par défaut */
  --_fg-testimonies: var(--fg-testimonies, #0000);
  --_bg-testimonies: var(--bg-testimonies, #f1f5f9);

  background-color: var(--_bg-testimonies);
  margin-bottom: 2rem;
  gap: 2rem;
}

/* Titre de la section */
.testimonies-title {
  text-align: center;
}

.testimony-image {
  display: block;
  object-fit: cover;
  align-content: center;
  width: 5rem;
  border: solid 2px #e0e0e0;
  border-radius: 50%;
}

.card-testimony {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Étoiles ou sous-image de notation */
.sub-image-stars {
  display: flex;
  flex-direction: column; /* Étoiles empilées verticalement */
  justify-content: center;
  align-items: center;
  color: #ff9800; /* Couleur des étoiles */
}

/* Conteneur d’un commentaire */
.comment-testimony {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem; /* Espace sous chaque témoignage */
}

/* Texte du commentaire */
.comment {
  text-align: center;
}

.name {
  display: flex;  /* Affichage en ligne flexible */
  font-weight: bold;
  gap: 2rem;
}

.carrousel {
  display: flex;
  align-items: center; /* Centrer verticalement */
  justify-content: center;
  gap: 0.2rem; /* Petit espace entre les points */
}

.point {
  flex-direction: row;
  width: 0.5rem;
  height: 0.5rem;
  cursor: pointer; /* Curseur en main */
  background-color: #00bfa6;
  border-radius: 50%;
}

.point--active {
  background-color: #009688; /* Couleur lorsque le point est actif */
}

.cards-testimonies {
  margin-bottom: 2rem; /* Espace sous le conteneur de cartes */
}

.point:hover {
  background-color: #009688;
}

/* Carte cachée*/
.card--testimony-hide {
  display: none;
}

@media (width > 40rem) {
  .testimonies-title {
    margin-bottom: 2rem; /* Plus d’espace sous le titre sur grand écran */
  }

  .cards-testimonies {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem; /* Espace entre les cartes */
  }

  .card--testimony-hide {
    display: block; /* Affiche les cartes cachées sur grand écran */
  }

  .card-testimony {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem; /* Marge autour des cartes */
  }

  .comment {
    font-size: 0.9rem; /* Taille légèrement plus petite pour le texte */
  }
  }

  .name {
    text-align: center;
  }

  .card-hide {
    display: none; /* Carte supplémentaire cachée*/
  }