/* BP Résultats Témoignages widget styles
 *
 * Résultats page "TÉMOIGNAGES" section.
 *
 * Structure:
 *   .bp-resultats-temoignages            root, full-bleed (100vw) so
 *                                        the screen-edge botanicals
 *                                        can reach the viewport edge.
 *     .bp-rt__decor--left                absolute, anchored to the
 *     .bp-rt__decor--right               LEFT / RIGHT screen edge,
 *                                        sit BEHIND the cards
 *     .bp-rt__inner                      1140px max, centered
 *       .bp-rt__header                   eyebrow / title / intro
 *       .bp-rt__grid                     3-column grid (cards)
 *         .bp-rt__card                   individual testimonial
 *           .bp-rt__card-top             badge + quote text
 *           .bp-rt__card-rule            hairline divider
 *           .bp-rt__card-person          portrait + name + role + location
 *
 * Approved palette ONLY:
 *   #374F37  dark green
 *   #B8B25A  olive / gold
 *   #FBF6EC  cream surface
 *   #FFFFFF  white
 *   + existing neutrals (#1F2A1F, #5C6A5C, #E4DCCB).
 *
 * All rules use logical CSS properties so LTR and RTL share
 * the same ruleset.
 */

.bp-resultats-temoignages {
	--bp-rt-green:        #374F37;
	--bp-rt-olive:        #B8B25A;
	--bp-rt-cream:        #FBF6EC;
	--bp-rt-white:        #FFFFFF;
	--bp-rt-text:         #1F2A1F;
	--bp-rt-muted:        #5C6A5C;
	--bp-rt-border:       #E4DCCB;

	--bp-rt-inner-max:    1140px;

	--bp-rt-font-body:    var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-rt-font-display: var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	/* Full-bleed breakout so the screen-edge botanicals
	 * (siblings of .bp-rt__inner) reference the full viewport.
	 * The inner wrapper still re-centers content at 1140px. */
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: 70px;
	padding-inline: 0;
	background: transparent;
	color: var(--bp-rt-text);
	font-family: var(--bp-rt-font-body);
	overflow-x: clip;
}

.bp-resultats-temoignages *,
.bp-resultats-temoignages *::before,
.bp-resultats-temoignages *::after {
	box-sizing: border-box;
}

.bp-resultats-temoignages .bp-rt__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--bp-rt-inner-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding-inline: 0;
}

/* =========================================================
 * BACKGROUND BOTANICAL DECORS
 * Full-bleed decorations anchored at the screen edges.
 * Defaults are driven by the widget's Elementor style
 * controls. Default state is `display: block` (visible).
 * ========================================================= */
.bp-resultats-temoignages .bp-rt__decor {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	display: none;
	inline-size: 260px;
	block-size: auto;
	color: var(--bp-rt-olive);
	filter: saturate(0.85);
}

.bp-resultats-temoignages .bp-rt__decor-svg,
.bp-resultats-temoignages .bp-rt__decor-img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
}

/* =========================================================
 * HEADER
 * ========================================================= */
.bp-resultats-temoignages .bp-rt__header {
	inline-size: 100%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.bp-resultats-temoignages .bp-rt__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--bp-rt-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.bp-resultats-temoignages .bp-rt__eyebrow-line {
	display: inline-block;
	inline-size: 40px;
	block-size: 1px;
	background: var(--bp-rt-olive);
	opacity: 0.9;
}

.bp-resultats-temoignages .bp-rt__eyebrow-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
}

.bp-resultats-temoignages .bp-rt__eyebrow-leaf svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.bp-resultats-temoignages .bp-rt__title {
	margin: 0;
	max-inline-size: 880px;
	font-family: var(--bp-rt-font-display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.12;
	letter-spacing: -0.005em;
}

.bp-resultats-temoignages .bp-rt__intro {
	margin: 0;
	max-inline-size: 720px;
	font-family: var(--bp-rt-font-body);
	font-size: 16px;
	line-height: 1.65;
}

/* =========================================================
 * GRID — 3 cards, equal columns on desktop
 * ========================================================= */
.bp-resultats-temoignages .bp-rt__grid {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.bp-resultats-temoignages .bp-rt__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;

	/* Warm cream gradient (145deg) — replaces flat white. */
	background:
		linear-gradient(
			145deg,
			#FFFCF6 0%,
			#FBF6EC 60%,
			#F3EBD9 100%
		);

	border: 1px solid rgba(184, 178, 90, 0.22);
	border-radius: 18px;
	padding: 34px 30px 28px;

	/* Soft layered 3D shadow:
	 *   - large cream/green-tinted ambient
	 *   - small neutral close shadow
	 *   - faint inner top highlight
	 * No harsh side, no grey halo, no dark drop. */
	box-shadow:
		0 30px 60px -32px rgba(55, 79, 55, 0.22),
		0 12px 24px -16px rgba(31, 42, 31, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);

	transition:
		transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: transform;
}

/* ONE elegant accent per card:
 * a subtle olive → green → olive gradient line at the top,
 * fading toward the edges. Slightly more visible on hover. */
.bp-resultats-temoignages .bp-rt__card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 14px;
	inset-inline-end: 14px;
	block-size: 2px;
	border-radius: 0 0 6px 6px;
	background: linear-gradient(
		90deg,
		rgba(184, 178, 90, 0) 0%,
		rgba(184, 178, 90, 0.85) 25%,
		rgba(55, 79, 55, 0.95) 50%,
		rgba(184, 178, 90, 0.85) 75%,
		rgba(184, 178, 90, 0) 100%
	);
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 320ms ease;
}

.bp-resultats-temoignages .bp-rt__card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 38px 70px -30px rgba(55, 79, 55, 0.26),
		0 16px 28px -14px rgba(31, 42, 31, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.bp-resultats-temoignages .bp-rt__card:hover::before {
	opacity: 0.85;
}

/* Top region: badge + quote text. */
.bp-resultats-temoignages .bp-rt__card-top {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1 1 auto;
}

/* Quote icon badge — clearly part of the hierarchy:
 * softly rounded cream surface, dark-green icon, subtle ring + glow. */
.bp-resultats-temoignages .bp-rt__card-quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	background:
		linear-gradient(
			155deg,
			#FBF6EC 0%,
			#F3EBD9 100%
		);
	color: var(--bp-rt-green);
	border: 1px solid rgba(184, 178, 90, 0.35);
	box-shadow:
		0 6px 14px -6px rgba(55, 79, 55, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.bp-resultats-temoignages .bp-rt__quote-mark-svg {
	display: block;
	inline-size: 20px;
	block-size: 20px;
	color: inherit;
	fill: currentColor;
}

.bp-resultats-temoignages .bp-rt__card-text {
	margin: 0;
	font-family: var(--bp-rt-font-body);
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--bp-rt-text);
}

/* Premium divider — gradient fade toward edges, not a hard line. */
.bp-resultats-temoignages .bp-rt__card-rule {
	display: block;
	inline-size: 100%;
	block-size: 1px;
	background: linear-gradient(
		90deg,
		rgba(184, 178, 90, 0) 0%,
		rgba(184, 178, 90, 0.55) 50%,
		rgba(184, 178, 90, 0) 100%
	);
	border: 0;
}

/* Person row at the bottom.
 * Flex row, never grid — keeps the portrait locked to its
 * intrinsic 72px and prevents any column from stretching. */
.bp-resultats-temoignages .bp-rt__card-person {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	margin-block-start: 0;
	min-inline-size: 0;
}

/* Perfect circle portrait.
 * Mathematically square wrapper. Every constraint property
 * (width, height, min, max, aspect-ratio, flex-basis) is set
 * so NOTHING can stretch it to an oval.
 *
 * WIDTH === HEIGHT (72px) is non-negotiable.
 */
.bp-resultats-temoignages .bp-rt__portrait {
	position: relative;
	display: block;
	box-sizing: border-box;
	flex: 0 0 72px;
	align-self: center;

	width: 72px;
	height: 72px;
	min-width: 72px;
	min-height: 72px;
	max-width: 72px;
	max-height: 72px;
	aspect-ratio: 1 / 1;

	border-radius: 50%;
	background: var(--bp-rt-cream);
	overflow: hidden;

	border: 2px solid #FBF6EC;
	outline: 1px solid rgba(55, 79, 55, 0.28);
	box-shadow:
		0 6px 14px -6px rgba(31, 42, 31, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* Image strictly fills the square wrapper.
 * No width/height auto, no max-width alone — every dimension
 * is forced. */
.bp-resultats-temoignages .bp-rt__portrait-img {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 0;

	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;

	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

.bp-resultats-temoignages .bp-rt__person-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.bp-resultats-temoignages .bp-rt__person-name {
	margin: 0;
	font-family: var(--bp-rt-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bp-rt-green);
}

.bp-resultats-temoignages .bp-rt__person-role {
	margin: 0;
	font-family: var(--bp-rt-font-body);
	font-size: 13px;
	line-height: 1.4;
	color: var(--bp-rt-muted);
}

.bp-resultats-temoignages .bp-rt__person-location {
	margin: 4px 0 0 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bp-rt-font-body);
	font-size: 13px;
	line-height: 1.4;
	color: var(--bp-rt-text);
}

.bp-resultats-temoignages .bp-rt__person-location-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 14px;
	block-size: 14px;
	color: var(--bp-rt-green);
}

.bp-resultats-temoignages .bp-rt__person-location-icon i,
.bp-resultats-temoignages .bp-rt__person-location-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
	fill: currentColor;
}

/* =========================================================
 * SCOPED ICON COLORS
 * Every dark icon on a light surface inside a card uses
 * the Barbary dark green (#374F37). Scoped to the
 * .bp-rt__card subtree so we never touch global selectors.
 * ========================================================= */
.bp-resultats-temoignages .bp-rt__card i,
.bp-resultats-temoignages .bp-rt__card i[class*="fa-"],
.bp-resultats-temoignages .bp-rt__card svg,
.bp-resultats-temoignages .bp-rt__card svg path,
.bp-resultats-temoignages .bp-rt__card svg g,
.bp-resultats-temoignages .bp-rt__card svg circle,
.bp-resultats-temoignages .bp-rt__card svg polygon,
.bp-resultats-temoignages .bp-rt__card svg rect {
	color: var(--bp-rt-green);
	fill: currentColor;
}

/* =========================================================
 * RESPONSIVE
 * - Tablet  : 2 + 1 (3rd card spans full width on its own row)
 * - Mobile  : 1 column, decor hidden to free vertical space
 * ========================================================= */
@media ( max-width: 1024px ) {
	.bp-resultats-temoignages {
		padding-block: 54px;
	}
	.bp-resultats-temoignages .bp-rt__inner {
		gap: 40px;
	}
	.bp-resultats-temoignages .bp-rt__title {
		font-size: 40px;
	}
	.bp-resultats-temoignages .bp-rt__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bp-resultats-temoignages .bp-rt__card:last-child {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 640px ) {
	.bp-resultats-temoignages {
		padding-block: 38px;
	}
	.bp-resultats-temoignages .bp-rt__inner {
		gap: 32px;
		padding-inline: 20px;
	}
	.bp-resultats-temoignages .bp-rt__title {
		font-size: 32px;
	}
	.bp-resultats-temoignages .bp-rt__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	.bp-resultats-temoignages .bp-rt__card {
		padding: 28px 24px 24px;
	}
	.bp-resultats-temoignages .bp-rt__card:last-child {
		grid-column: auto;
	}
	.bp-resultats-temoignages .bp-rt__card-person {
		gap: 14px;
	}
	.bp-resultats-temoignages .bp-rt__portrait {
		flex: 0 0 60px;
		width: 60px;
		height: 60px;
		min-width: 60px;
		min-height: 60px;
		max-width: 60px;
		max-height: 60px;
	}
	/* Disable hover lift on touch devices. */
	@media (hover: none) {
		.bp-resultats-temoignages .bp-rt__card:hover {
			transform: none;
		}
	}
	/* Reduce / hide the line-art decorations on phones so
	 * the section does not feel busy. */
	.bp-resultats-temoignages .bp-rt__decor {
		inline-size: 140px;
		opacity: 0.18;
	}
}

/* Narrow-phone gutter scale (authoritative on this widget).
 * The 640 px block above already gave the inner 20 px. The
 * three blocks below step the gutter down to 18 / 18 / 16 px
 * on the smallest devices so content never feels cramped. */
@media ( max-width: 480px ) {
	.bp-resultats-temoignages .bp-rt__inner {
		padding-inline: 18px;
	}
}

@media ( max-width: 390px ) {
	.bp-resultats-temoignages .bp-rt__inner {
		padding-inline: 18px;
	}
}

@media ( max-width: 360px ) {
	.bp-resultats-temoignages .bp-rt__inner {
		padding-inline: 16px;
	}
}