.ewk-testimonials {
	--ewk-columns: 3;
	--ewk-gap: 24px;
	--ewk-slide-align: stretch;
	--ewk-dot-color: rgba(0, 0, 0, 0.2);
	--ewk-dot-active: currentColor;
	--ewk-dots-spacing: 24px;

	position: relative;
}

.ewk-testimonials--grid {
	display: grid;
	grid-template-columns: repeat(var(--ewk-columns), minmax(0, 1fr));
	gap: var(--ewk-gap);
	align-items: var(--ewk-slide-align);
}

/* Repère de positionnement des flèches : exclut les puces, pour que le centrage
   vertical se fasse sur les diapositives et non sur l'ensemble du widget. */
.ewk-testimonials__stage {
	position: relative;
}

.ewk-testimonials__viewport {
	width: 100%;
}

.ewk-testimonials--carousel .swiper-wrapper {
	align-items: var(--ewk-slide-align);
}

.ewk-testimonials--carousel .swiper-slide {
	height: auto;
	display: flex;
	/* Sans min-width, la taille minimale automatique d'un flex item vaut sa largeur
	   max-content : la carte refuse de rétrécir et Swiper rogne le débordement. */
	min-width: 0;
	box-sizing: border-box;
}

/* --- Carte --- */
.ewk-testimonial {
	--ewk-align: start;
	--ewk-blocks-gap: 16px;

	display: flex;
	flex-direction: column;
	gap: var(--ewk-blocks-gap);
	align-items: var(--ewk-align);
	text-align: var(--ewk-align);
	/* border-box : le padding ne doit pas s'ajouter au 100 % de largeur, sinon la carte
	   déborde de sa diapositive. Certains thèmes ne le posent pas globalement. */
	box-sizing: border-box;
	padding: 24px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	transition-property: transform, box-shadow, background-color, border-color;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

.ewk-testimonial *,
.ewk-testimonial *::before,
.ewk-testimonial *::after {
	box-sizing: border-box;
}

.ewk-testimonial > * {
	margin: 0;
	max-width: 100%;
	min-width: 0;
}

/* --- Icône de citation --- */
.ewk-testimonial__icon {
	line-height: 1;
	order: 1;
}

.ewk-testimonial__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* --- Note --- */
.ewk-testimonial__rating {
	--ewk-star-active: #f5a623;
	--ewk-star-empty: #d8d8d8;
	--ewk-star-gap: 2px;

	position: relative;
	display: inline-block;
	order: 2;
	line-height: 1;
}

.ewk-testimonial__stars {
	display: flex;
	gap: var(--ewk-star-gap);
	white-space: nowrap;
}

.ewk-testimonial__stars svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex: none;
}

.ewk-testimonial__stars--empty {
	color: var(--ewk-star-empty);
}

.ewk-testimonial__stars--full {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: var(--ewk-star-active);
}

/* --- Citation --- */
.ewk-testimonial__quote {
	order: 3;
	quotes: none;
	/* stretch plutôt que la valeur de align-items du parent : en fit-content, la citation
	   se dimensionne sur son max-content et refuse de passer à la ligne. L'alignement
	   visuel reste assuré par le text-align hérité de la carte. */
	align-self: stretch;
	width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

.ewk-testimonial__quote p {
	margin: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

.ewk-testimonial__quote p + p {
	margin-block-start: 0.75em;
}

.ewk-testimonial__quote--quoted p:first-of-type::before {
	content: open-quote;
}

.ewk-testimonial__quote--quoted p:last-of-type::after {
	content: close-quote;
}

.ewk-testimonial__quote--quoted {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

/* --- Auteur --- */
.ewk-testimonial__author {
	--ewk-author-gap: 12px;

	order: 4;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-self: stretch;
	align-items: center;
	justify-content: var(--ewk-align);
	gap: var(--ewk-author-gap);
}

/* En colonne, l'axe transversal devient horizontal : c'est align-items qui porte
   l'alignement, plus justify-content. */
.ewk-author--column .ewk-testimonial__author {
	flex-direction: column;
	align-items: var(--ewk-align);
	justify-content: flex-start;
}

.ewk-testimonial__avatar {
	flex: none;
	object-fit: cover;
	width: 56px;
	height: 56px;
}

.ewk-testimonial__identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ewk-testimonial__name {
	font-style: normal;
}

.ewk-testimonial__logo {
	flex: none;
	height: auto;
	max-width: 100%;
}

/* --- Navigation --- */
.ewk-swiper-button {
	--ewk-arrow-size: 40px;

	position: absolute;
	inset-block-start: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ewk-arrow-size);
	height: var(--ewk-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: inherit;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.ewk-swiper-button svg {
	width: 55%;
	height: 55%;
}

.ewk-swiper-button--prev {
	inset-inline-start: 0;
}

.ewk-swiper-button--next {
	inset-inline-end: 0;
}

.ewk-swiper-button.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.ewk-swiper-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ewk-testimonials__dots.swiper-pagination {
	position: static;
	margin-block-start: var(--ewk-dots-spacing);
}

.ewk-testimonials__dots .swiper-pagination-bullet {
	background: var(--ewk-dot-color);
	opacity: 1;
}

.ewk-testimonials__dots .swiper-pagination-bullet-active {
	background: var(--ewk-dot-active);
}

@media (prefers-reduced-motion: reduce) {
	.ewk-testimonial,
	.ewk-swiper-button {
		transition: none;
	}
}