/**
 * Bloc : Témoignages (ri-temoignages)
 * Convention : Classe complète sur la section, classes courtes scopées dedans.
 * Utilise les variables globales de root.css (--ri-*)
 */

/* ========================================
   Base
   ======================================== */

.ri-temoignages {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
	overflow: hidden;
}

.ri-temoignages .deco {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);
	pointer-events: none;
	line-height: 0;
}

/* ========================================
   Grid 1/3 + 2/3
   ======================================== */

.ri-temoignages .container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--ri-space-xl);
	align-items: center;
	overflow: visible;
}

/* ========================================
   Colonne contenu (1/3)
   ======================================== */

.ri-temoignages .content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
	justify-content: space-between;
	height: 100%;
}

.ri-temoignages .slider-wrapper {
	min-width: 0;
	position: relative;
}

.ri-temoignages .content-top {
	display: flex;
	flex-direction: column;
	gap: var(--ri-space-md);
}

.ri-temoignages .content-top > * {
	margin: 0;
}

.ri-temoignages .titre {
	font: 700 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	max-width: 410px;
}

.ri-temoignages .titre strong,
.ri-temoignages .titre b {
	color: var(--ri-color-yellow);
}

.ri-temoignages .description {
	font: 400 var(--ri-size-text-body) / 170% var(--ri-font-1);
}


/* ========================================
   Slider (2/3 + débordement)
   ======================================== */

.ri-temoignages .swiper {
	overflow: hidden;
	padding-block: 16px;
	margin-block: -16px;
}

.ri-temoignages .swiper-slide {
	width: 302px !important;
	display: flex;
	height: auto;
}

/* ========================================
   Slide / Témoignage
   ======================================== */

.ri-temoignages .temoignage {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--ri-space-md);
	background: var(--ri-temoignage-card-bg, var(--ri-color-white));
	row-gap: 62px;
	width: 100%;
}

.ri-temoignages .temoignage-top {
	display: flex;
	flex-direction: column;
}

.ri-temoignages .temoignage-bottom {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
}

.ri-temoignages .photo-wrapper {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	margin-bottom: 24px;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--ri-photo-bg, transparent);
}

.ri-temoignages .photo {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.ri-temoignages .photo--default {
	object-fit: contain;
	width: 55px !important;
	height: auto !important;
	transform: translateY(2px);
}

.ri-temoignages blockquote.texte {
	margin: 0;
	font: 400 var(--ri-size-text-body) / 170% var(--ri-font-1);
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ri-temoignages blockquote.texte::before {
	content: "\201C";
}

.ri-temoignages blockquote.texte::after {
	content: "\201D";
}

.ri-temoignages .auteur {
	margin: 0;
	font: 700 var(--ri-size-text-body) / 1.7 var(--ri-font-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ri-temoignages .profession {
	margin: 0;
	font: 400 var(--ri-size-text-body) / 1.2 var(--ri-font-1);
	color: var(--ri-color-grey);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ========================================
   Variantes de fond
   ======================================== */

/* Variante fond color-2 — colonne texte */
.ri-temoignages.has-color-2-background-color .titre,
.ri-temoignages.has-color-2-background-color .description,
.ri-temoignages.has-color-2-background-color .link-arrow,
.ri-temoignages.has-color-2-background-color .lien {
	color: var(--ri-color-violet-light);
}

.ri-temoignages.has-color-2-background-color .titre strong,
.ri-temoignages.has-color-2-background-color .titre b {
	color: var(--ri-color-yellow);
}

/* Variante fond color-2 — cards */
.ri-temoignages.has-color-2-background-color .temoignage {
	background: var(--ri-color-violet-light);
}

.ri-temoignages.has-color-2-background-color .temoignage blockquote.texte,
.ri-temoignages.has-color-2-background-color .temoignage .auteur,
.ri-temoignages.has-color-2-background-color .temoignage .profession {
	color: var(--ri-color-violet-dark);
}

/* Variante sans description ni lien — titre au-dessus du slider */
.ri-temoignages.has-titre-only .container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ri-space-lg);
}

.ri-temoignages.has-titre-only .content {
	height: auto;
	justify-content: flex-start;
	align-items: flex-start;
}

.ri-temoignages.has-titre-only .slider-wrapper {
	width: 100%;
}

.ri-temoignages.has-titre-only .swiper {
	width: 100%;
	overflow: hidden;
}

/* ========================================
   Preview éditeur (scroll horizontal = imite le slider)
   ======================================== */

.ri-temoignages .preview-wrapper {
	display: flex;
	flex-direction: row;
	gap: 24px;
	overflow-x: auto;
	overflow-y: visible;
	padding-block: 16px;
	margin-block: -16px;
	scroll-snap-type: x mandatory;
}

.ri-temoignages .preview-wrapper .temoignage {
	flex: 0 0 302px;
	width: 302px;
	scroll-snap-align: start;
}

/* ========================================
   Placeholder (éditeur)
   ======================================== */

.ri-temoignages.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: var(--ri-space-lg);
	background-color: var(--ri-color-grey-light);
	border: 2px dashed var(--ri-color-teal);
	text-align: center;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 782px) {

	.ri-temoignages {
		position: relative;
		overflow: hidden;
	}

	.ri-temoignages .slider-wrapper {
		position: static;
		overflow: visible;
		margin-right: calc(-1 * var(--ri-container-padding, 16px));
		width: calc(100% + var(--ri-container-padding, 16px));
	}

	.ri-temoignages .deco {
		transform: translateY(-50%);
	}

	.ri-temoignages .container {
		grid-template-columns: 1fr;
		overflow: visible;
		gap: 16px;
	}

	.ri-temoignages .titre {
		max-width: 75%;
	}

	.ri-temoignages .swiper {
		clip-path: none;
	}

	.ri-temoignages .swiper-slide {
		width: 253px !important;
		min-height: 320px;
	}

	.ri-temoignages .temoignage {
		row-gap: 32px;
	}

	.ri-temoignages .photo-wrapper {
		width: 40px;
		height: 40px;
	}

	.ri-temoignages .photo--default {
		width: 27px !important;
	}

	.ri-temoignages .link-wrapper {
		display: none;
	}
}