.testimonial-slider-container {
    max-width: 56rem;      /* max-w-4xl => 56rem */
    margin-left: auto;     /* mx-auto => centrer horizontalement */
    margin-right: auto;    /* mx-auto */
    padding-left: 1rem;    /* facultatif : padding pour petits écrans */
    padding-right: 1rem;   /* facultatif */
}
.testimonial-slide {
    display: none;      /* toutes les slides cachées par défaut */
    position: relative;
}

.testimonial-slide.active {
    display: block;     /* seule la slide active s’affiche */
}

.testimonial-card {
    display: flex;               /* flex */
    flex-direction: column;      /* flex-col */
    gap: 1.5rem;                 /* gap-6 => 1.5rem */
    border-radius: 0.75rem;      /* rounded-xl => 12px */
    border: 1px solid #e5e7eb;   /* border et border-border => couleur à ajuster */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
    padding: 2rem;               /* p-8 => 32px */
    background-color: #fff;      /* bg-card => couleur à ajuster */
}

/* Pour md:p-12 => padding plus grand sur écran moyen et plus */
@media (min-width: 768px) {
    .testimonial-card {
        padding: 3rem;           /* p-12 => 48px */
    }
}

/* text-card-foreground => couleur du texte */
.testimonial-card {
    color: #111827; /* à adapter selon ton thème */
}

.testimonial-stars {
    display: flex;               /* flex */
    gap: 0.25rem;                /* gap-1 => 0.25rem */
}

.testimonial-stars svg {
    color: var(--wp--preset--color--blue-night);
}

.testimonial-stars svg.checked {
    fill: var(--wp--preset--color--blue-night); /* text-primary */
}

.testimonial-text {
    font-size: 1.125rem;          /* text-lg => 18px */
    line-height: 1.75rem;         /* leading-relaxed => 28px */
    color: #111827;               /* text-foreground => couleur à adapter */
    margin-bottom: 2rem;          /* mb-8 => 32px */
}

@media (min-width: 768px) {
    .testimonial-text {
        font-size: 1.25rem;       /* text-xl => 20px */
        line-height: 1.875rem;    /* ajustement proportionnel */
    }
}
.author-name {
    font-weight: 600;             /* font-semibold */
    color: #111827;               /* text-foreground : à adapter selon ton thème */
    font-size: 1.125rem;          /* text-lg => 18px */
}

.author-function {
    color: #6B7280;               /* text-muted-foreground : gris moyen */
    font-size: 1rem;              /* taille par défaut pour le texte secondaire */
}

/* Conteneur des flèches */
.slider-controls {
    display: flex;             /* flex */
    justify-content: center;   /* justify-center */
    gap: 1rem;                 /* gap-4 => 1rem */
    margin-top: 2rem;          /* mt-8 => 2rem (32px) si base 16px) */
}
.rtl .slider-controls {
    flex-direction: row-reverse;
}

/* Arrow */
.slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border-radius: 9999px; /* fully rounded */
    padding: 0.5rem;
    background-color: transparent;
}

.slider-arrow:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.slider-arrow:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(100, 150, 250, 0.5);
    border-color: #6496fa;
}

.slider-arrow:hover {
    background-color: #f0f0f0;
    color: #000;
}

/* SVG inside the button */
.slider-arrow .icon {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Optional: spacing for left/right arrows */
.slider-arrow.left { margin-right: 0.5rem; }
.slider-arrow.right { margin-left: 0.5rem; }

/* Conteneur des dots */
.dots {
    display: flex;            /* flex */
    justify-content: center;  /* centre horizontalement */
    gap: 0.5rem;              /* gap-2 => 0.5rem */
    margin-top: 1.5rem;       /* mt-6 => 1.5rem */
}

/* Style des dots */
.dots .dot {
    width: 0.5rem;            /* w-2 => 0.5rem */
    height: 0.5rem;           /* h-2 => 0.5rem */
    border-radius: calc(infinity * 1px);        /* rounded-full */
    background-color: #ccc;    /* bg-border */
    transition: all 0.3s;      /* transition-all */
    border: none;              /* pas de border par défaut */
    cursor: pointer;
    background-color: var(--wp--preset--color--gray-light);
}

/* Hover */
.dots .dot:hover {
    background-color: rgba(204, 204, 204, 0.5); /* hover:bg-border/80 */
}

/* Dot actif */
.dots .dot.active {
    width: 2rem;               /* w-8 => 2rem */
    background-color: var(--wp--preset--color--blue-night); /* bg-primary */
}