/* ===========================================================
 * BP Technology Steps
 * Homepage section: 3-step technology explanation
 * POSITIONNER -> RETENIR -> RENDRE DISPONIBLE
 * =========================================================== */

.bp-technology-steps {
	--bp-ts-panel-bg:  #FAF6EC;
	--bp-ts-fg:        #1F2A1F;
	--bp-ts-muted:     #5A6B5A;
	--bp-ts-olive:     #B8B25A;
	--bp-ts-green:     #2A3F2A;
	--bp-ts-border:    rgba( 184, 178, 90, 0.30 );
	--bp-ts-shadow:    0 18px 48px -28px rgba( 31, 42, 31, 0.30 );
	--bp-ts-radius:    26px;
	--bp-ts-cta-bg:    #374F37;
	--bp-ts-cta-fg:    #FFFFFF;

	position: relative;
	color: var(--bp-ts-fg);
	overflow-x: clip;
	isolation: isolate;
}

.bp-technology-steps__header {
	max-inline-size: 820px;
	margin-inline: auto;
	margin-block-end: clamp( 16px, 2vw, 24px );
	text-align: center;
}

.bp-technology-steps__eyebrow {
	display: inline-block;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #374F3C;
	margin-block-end: 14px;
}

/* Title divider — mirrors the bp-why-choose reference:
 * 40px line + 6px rotated gold diamond + 40px line, 10px gap. */
.bp-technology-steps__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 auto 18px;
}
.bp-technology-steps__divider-line {
	display: block;
	inline-size: 40px;
	block-size: 1px;
	background: var(--bp-ts-olive);
}
.bp-technology-steps__divider-diamond {
	display: block;
	inline-size: 6px;
	block-size: 6px;
	background: var(--bp-ts-olive);
	transform: rotate(45deg);
}

.bp-technology-steps__title {
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp( 28px, 3.6vw, 44px );
	line-height: 1.15;
	margin: 0 0 14px;
	color: #374F3C;
}

.bp-technology-steps__subtitle {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: clamp( 14px, 1.3vw, 16px );
	line-height: 1.6;
	color: var(--bp-ts-muted);
	max-inline-size: 640px;
	margin: 0 auto;
}

/* ---- Panel ---- */
.bp-technology-steps__panel {
	position: relative;
	max-inline-size: 1280px;
	margin-inline: auto;
	background: var(--bp-ts-panel-bg);
	border: 1px solid var(--bp-ts-border);
	border-radius: var(--bp-ts-radius);
	padding: clamp( 28px, 4vw, 56px ) clamp( 20px, 3vw, 40px ) clamp( 40px, 4vw, 56px );
	box-shadow: var(--bp-ts-shadow);
	overflow: hidden;
}

/* ---- 3-step grid ---- */
.bp-technology-steps__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	column-gap: clamp( 16px, 2.5vw, 36px );
	row-gap: clamp( 28px, 3vw, 40px );
}

.bp-technology-steps__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: transparent;
}

/* upper portion: 35-40% */
.bp-technology-steps__top {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block-end: clamp( 20px, 2.5vw, 28px );
}

.bp-technology-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: var(--bp-ts-olive);
	color: #FFFFFF;
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 22px;
	line-height: 1;
	margin-block-end: 4px;
}

.bp-technology-steps__step-title {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #374F3C;
	margin: 0;
}

.bp-technology-steps__step-subtitle {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--bp-ts-fg);
	margin: 0;
	line-height: 1.45;
}

.bp-technology-steps__step-text {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: var(--bp-ts-muted);
	margin: 0;
}

/* lower portion: 60-65% — visual + callout */
.bp-technology-steps__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.bp-technology-steps__image,
.bp-technology-steps__placeholder,
.bp-technology-steps__visual img,
.bp-technology-steps__visual .bp-technology-steps__image {
	display: block;
	inline-size: 100%;
	block-size: clamp( 220px, 28vw, 340px );
	object-fit: cover;
	object-position: center bottom;
	border-radius: 22px !important;
	overflow: hidden;
	background: linear-gradient( 180deg, rgba( 184, 178, 90, 0.10 ) 0%, rgba( 184, 178, 90, 0.20 ) 55%, rgba( 42, 63, 42, 0.20 ) 56%, rgba( 42, 63, 42, 0.32 ) 100% );
	color: var(--bp-ts-olive);
}

.bp-technology-steps__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bp-technology-steps__placeholder svg {
	color: var(--bp-ts-olive);
	opacity: 0.6;
}

/* callout pill — overlapping the visual */
.bp-technology-steps__callout {
	position: relative;
	margin-block-start: -22px;
	margin-inline: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--bp-ts-panel-bg);
	border: 1px solid var(--bp-ts-border);
	border-radius: 999px;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bp-ts-fg);
	box-shadow: 0 6px 16px -10px rgba( 31, 42, 31, 0.20 );
	z-index: 1;
	max-inline-size: 92%;
}

.bp-technology-steps__callout-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-ts-olive);
	line-height: 1;
}

.bp-technology-steps__callout-icon i,
.bp-technology-steps__callout-icon svg {
	font-size: 14px;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.bp-technology-steps__callout-text {
	color: var(--bp-ts-fg);
}

/* arrows between steps */
.bp-technology-steps__arrow {
	position: absolute;
	inset-block-start: 70px;
	inset-inline-end: -18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-ts-olive);
	z-index: 2;
}

.bp-technology-steps__arrow svg {
	display: block;
}

.bp-technology-steps__step:last-child .bp-technology-steps__arrow {
	display: none;
}

/* ---- Final sentence ---- */
.bp-technology-steps__final {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-block-start: clamp( 28px, 3.5vw, 44px );
	padding-block-start: clamp( 24px, 2.5vw, 32px );
	border-block-start: 1px solid var(--bp-ts-border);
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: clamp( 14px, 1.3vw, 16px );
	font-weight: 500;
	color: #374F3C;
	text-align: center;
}

.bp-technology-steps__final-rule {
	display: block;
	inline-size: 64px;
	block-size: 2px;
	background: var(--bp-ts-olive);
	border-radius: 1px;
}

/* ---- Decorative leaf (faded, lower-left) ---- */
.bp-technology-steps__leaf {
	display: none;
}

/* ---- Responsive ---- */

/* TABLET 769–1024 — 3 columns, tighter spacing */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-technology-steps__grid {
		column-gap: clamp( 12px, 1.5vw, 18px );
		row-gap: clamp( 20px, 2vw, 28px );
	}
	.bp-technology-steps__arrow {
		inset-block-start: 60px;
		inset-inline-end: -10px;
	}
	.bp-technology-steps__arrow svg {
		width: 18px;
		height: 18px;
	}
	.bp-technology-steps__image,
	.bp-technology-steps__placeholder {
		block-size: clamp( 200px, 32vw, 260px );
	}
	.bp-technology-steps__panel {
		padding: 32px 20px 40px;
	}
}

/* MOBILE <=768 — 1 column, arrows become downward connectors */
@media ( max-width: 768px ) {
	.bp-technology-steps__grid {
		grid-template-columns: 1fr;
		row-gap: clamp( 32px, 5vw, 48px );
	}
	.bp-technology-steps__step {
		flex-direction: column;
	}
	.bp-technology-steps__arrow {
		position: static;
		transform: rotate( 90deg );
		margin: -8px auto;
		inset: auto;
	}
	.bp-technology-steps__image,
	.bp-technology-steps__placeholder {
		block-size: clamp( 220px, 60vw, 320px );
	}
}

@media ( max-width: 480px ) {
	.bp-technology-steps__panel {
		padding: 24px 16px 32px;
	}
	.bp-technology-steps__title {
		font-size: 26px;
	}
	.bp-technology-steps__image,
	.bp-technology-steps__placeholder {
		block-size: 200px;
	}
}

/* ---- RTL safety (logical properties used everywhere) ---- */
[dir="rtl"] .bp-technology-steps__arrow {
	transform: scaleX( -1 );
	inset-inline-end: -12px;
}

/* ---- Reduced motion ---- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-technology-steps__arrow,
	.bp-technology-steps__callout {
		transition: none !important;
		animation: none !important;
	}
}

/* ---- CTA below the steps list ----
 * Byte-identical to `.bp-product-solution__cta` so the same
 * premium button language appears at the bottom of the three
 * steps. Only the `margin-block-start` and `margin-inline:
 * auto` declarations are added so the button sits centered
 * below the steps list (the product-solution button is
 * in-line with adjacent content and needs no such spacing). */
.bp-technology-steps__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: var(--bp-ts-cta-bg);
	color: var(--bp-ts-cta-fg);
	padding-block: 14px;
	padding-inline: 28px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 200ms ease;
	margin-block-start: 28px;
	margin-inline: auto;
}

.bp-technology-steps__cta:hover {
	background-color: #374F37;
}

.bp-technology-steps__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.bp-technology-steps__cta-icon i,
.bp-technology-steps__cta-icon svg {
	font-size: 14px;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.bp-technology-steps__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}