/* ── Carousel wrapper ─────────────────────────────────────────── */
.testimonials-carousel {
  overflow: hidden;
  position: relative;
  margin: 2rem 0;
}

/* ── Track (flex row qui glisse) ─────────────────────────────── */
.testimonials-track {
  display: flex;
  transition: transform 0.4s ease;
  gap: 1.5rem;
}

/* ── Cards ───────────────────────────────────────────────────── */
.testimonial {
  flex: 0 0 calc((100% - 3rem) / 3); /* 3 visibles, 2 gaps de 1.5rem */
  background: var(--md-code-bg-color);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-sizing: border-box;
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  float: left;
  margin: 0 1rem 0.5rem 0;
  object-fit: cover;
}

.testimonial strong {
  display: block;
}

.testimonial em {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
}

.testimonial hr {
  clear: both;
  margin: 0.75rem 0;
  border-color: var(--md-default-fg-color--lightest);
}

.testimonial p {
  margin: 0;
  font-style: italic;
}

/* ── Contrôles (flèches + dots) ──────────────────────────────── */
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.testimonials-prev,
.testimonials-next {
  background: none;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--md-default-fg-color);
  transition: background 0.2s;
}

.testimonials-prev:hover,
.testimonials-next:hover {
  background: var(--md-accent-fg-color--transparent);
}

.testimonials-prev:disabled,
.testimonials-next:disabled {
  opacity: 0.3;
  cursor: default;
}

.testimonials-dots {
  display: flex;
  gap: 0.4rem;
}

.testimonials-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-default-fg-color--lightest);
  cursor: pointer;
  transition: background 0.2s;
}

.testimonials-dots .dot.active {
  background: var(--md-accent-fg-color);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  .testimonial {
    flex: 0 0 calc((100% - 1.5rem) / 2); /* 2 visibles */
  }
}

@media (max-width: 600px) {
  .testimonial {
    flex: 0 0 100%; /* 1 visible */
  }
}