/* BP Calculateur Hero widget styles
 *
 * Full-width hero for the standalone "Calculateur" page.
 * The agricultural / measurement / agronomic-precision
 * photograph spans the entire viewport width as one
 * continuous background (no boxed image, no weird mask
 * shape). A single cream → transparent gradient fade sits on
 * the inline-start side so the left editorial block (eyebrow
 * with leaf icon / three-tone serif title / description /
 * single dark-green CTA with leading calculator icon and
 * trailing arrow / small trust line) stays perfectly readable
 * while the photograph keeps its full-bleed presence on the
 * inline-end.
 *
 * Visual stack (lowest to highest):
 *   0. Section background (cream fallback for no-image case)
 *   1. Background photograph (full-bleed, cover)
 *   2. Cream fade layer (cream → transparent, inline-start)
 *   3. Inner content (eyebrow / title / description / CTA /
 *      trust line) + empty media slot
 *
 * No Bootstrap, no jQuery, no GSAP. The fade is a pure CSS
 * linear gradient on a dedicated layer so the photograph is
 * never clipped or masked — it always reads as one continuous
 * hero background regardless of the source asset. The widget
 * reuses the shared `data-bp-reveal` observer for the entrance
 * animation; no JS is required for layout.
 *
 * Desktop: full-bleed photograph, left content + right photo
 * emphasis, smooth cream fade, single CTA with leading icon
 * + arrow + trust line.
 *
 * Tablet: keep image + fade, slightly tighter padding.
 * Mobile: stack cleanly, keep the photo as a subtle
 * background through a vertical cream fade, keep the title
 * readable, keep the button full-width and the trust line
 * single-line wrap.
 *
 * All visual rules use logical CSS properties (padding-inline,
 * inset-inline, margin-inline, text-align: start) so the same
 * stylesheet covers /ar/ without a separate RTL file.
 */

.bp-calculateur-hero {
	/* Theme tokens. Editable from the Elementor sidebar. */
	--bp-ch-bg:         #FBF6EC;
	--bp-ch-fade:       66%;

	--bp-ch-inner-max:  1140px;
	--bp-ch-pad-x:      clamp(24px, 5vw, 64px);
	--bp-ch-pad-y-top:  clamp(56px, 6vw, 96px);
	--bp-ch-pad-y-bot:  clamp(32px, 3vw, 48px);

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

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
	min-block-size: 600px;
	background: transparent;
	color: #1F2A1F;
	font-family: var(--bp-ch-font-body);
}

/* ---------------- Full-bleed breakout ----------------
 * Force the surrounding Elementor wrappers to 100% width, then
 * break out of any boxed container via the `100vw +
 * calc(50%-50vw)` negative margin trick so the hero truly spans
 * the full viewport regardless of the parent Elementor section
 * content width. Mirrors the BP Resultats Hero / BP Comment
 * Utiliser Hero pattern.
 *
 * Every override is anchored to a parent that actually contains
 * the `.elementor-widget-bp-calculateur-hero` widget using
 * `:has()` / descendant selectors — no global Elementor overrides
 * leak onto other pages. */
.elementor-section:has(> .elementor-container .elementor-widget-bp-calculateur-hero) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-calculateur-hero) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-calculateur-hero) > .e-con,
.elementor-section:has(> .elementor-container .elementor-widget-bp-calculateur-hero) > .e-con > .e-con-inner,
.elementor-section:has(> .elementor-container .elementor-widget-bp-calculateur-hero) > .elementor-container > .elementor-column,
.elementor-section:has(> .elementor-container .elementor-widget-bp-calculateur-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section:has(> .elementor-container .elementor-widget-bp-calculateur-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor-section:has(> .elementor-container .elementor-widget-bp-calculateur-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-calculateur-hero {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}

.elementor-element.bp-calculateur-hero,
.elementor .bp-calculateur-hero,
.e-con.bp-calculateur-hero,
.bp-calculateur-hero {
	padding: 0;
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

/* Legacy `.elementor-inner` row layout: only override when the
 * section actually hosts this widget. */
.elementor-inner section.elementor-section:has(.elementor-widget-bp-calculateur-hero) > .elementor-container,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-calculateur-hero) > .elementor-row,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-calculateur-hero) > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-calculateur-hero) > .elementor-row > .elementor-column > .elementor-widget-wrap {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	padding-inline: 0 !important;
}

.elementor .elementor-widget.elementor-widget-bp-calculateur-hero,
.elementor-widget.elementor-widget-bp-calculateur-hero {
	inline-size: 100vw !important;
	max-inline-size: 100vw !important;
	margin-inline-start: calc(50% - 50vw) !important;
	margin-inline-end:   calc(50% - 50vw) !important;
	position: relative;
	z-index: 1;
}

/* Zero default Elementor container padding + inter-widget spacing
 * so the hero sits flush with the page header. */
.e-con:has(> .elementor-widget-bp-calculateur-hero),
.e-con:has(> .e-con-inner > .elementor-widget-bp-calculateur-hero),
.e-con-inner:has(> .elementor-widget-bp-calculateur-hero) {
	--container-default-padding-top:    0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top:    0 !important;
	padding-bottom: 0 !important;
}
.elementor-widget.elementor-widget-bp-calculateur-hero {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ---------------- Background photograph ----------------
 * Absolute-positioned layer that fills the entire hero. Uses
 * the image URL as a CSS background so the file is never
 * cropped by an HTML <img> rule. Position / size / opacity
 * are controlled from the Elementor sidebar via responsive
 * slider controls. */
.bp-calculateur-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position-x: 60%;
	background-position-y: 50%;
	background-size: cover;
	pointer-events: none;
	transition: opacity 200ms ease;
}

/* ---------------- Cream fade layer ----------------
 * Smooth cream → transparent linear gradient anchored to the
 * inline-start edge. `var(--bp-ch-fade)` (0–100%) controls how
 * far the cream extends across the hero: 66% (default) means
 * the cream covers the left ~66% and fades to fully
 * transparent by the right edge, leaving the photograph
 * dominant on the right. The fade is a pure gradient — no
 * mask, no clip-path — so the photograph is never cut and
 * the hero always reads as one continuous background. */
.bp-calculateur-hero__fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to right,
		var(--bp-ch-bg) 0%,
		var(--bp-ch-bg) calc( var(--bp-ch-fade) - 28% ),
		color-mix( in srgb, var(--bp-ch-bg) 65%, transparent ) calc( var(--bp-ch-fade) - 6% ),
		color-mix( in srgb, var(--bp-ch-bg) 28%, transparent ) calc( var(--bp-ch-fade) + 8% ),
		transparent calc( var(--bp-ch-fade) + 30% )
	);
}

/* RTL: mirror the fade so the cream anchors to the inline-end. */
[dir="rtl"] .bp-calculateur-hero__fade,
[lang="ar"] .bp-calculateur-hero__fade {
	background: linear-gradient(
		to left,
		var(--bp-ch-bg) 0%,
		var(--bp-ch-bg) calc( var(--bp-ch-fade) - 28% ),
		color-mix( in srgb, var(--bp-ch-bg) 65%, transparent ) calc( var(--bp-ch-fade) - 6% ),
		color-mix( in srgb, var(--bp-ch-bg) 28%, transparent ) calc( var(--bp-ch-fade) + 8% ),
		transparent calc( var(--bp-ch-fade) + 30% )
	);
}

/* ---------------- Inner layout ----------------
 * Centered 1140px container. Two columns: content (left ~60%)
 * and an empty media slot (right ~40%) — the background
 * photograph already shows in the right slot. The content sits
 * in the cream area of the fade and is vertically centered.
 * The 60/40 split gives the left block enough room for the
 * 3-line title + CTA + trust line without crowding the line
 * length. */
.bp-calculateur-hero__inner {
	position: relative;
	z-index: 3;
	inline-size: 100%;
	max-inline-size: var(--bp-ch-inner-max);
	margin-inline: auto;
	padding-block:  var(--bp-ch-pad-y-top) var(--bp-ch-pad-y-bot);
	display: grid;
	grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
	min-block-size: inherit;
}

.bp-calculateur-hero__content {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-inline-size: 540px;
	justify-self: start;
	inline-size: 100%;
	padding-block: 0;
	padding-inline: 0;
	position: relative;
	z-index: 4;
}

.bp-calculateur-hero__media-slot {
	align-self: stretch;
	pointer-events: none;
}

/* ---------------- Eyebrow ----------------
 * Reference: `.bp-cfg__eyebrow` (color #374F37, 13px, 600,
 * 0.18em, uppercase, Manrope). Left-aligned to match the
 * left-anchored hero content column. */
.bp-calculateur-hero__eyebrow {
	margin: 0 0 12px;
	display: block;
	font-family: var(--bp-ch-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #374F37;
	line-height: 1.3;
	text-align: start;
}

/* ---------------- Title ----------------
 * Reference: `.bp-cfg__title` — single color #374F37, 400
 * weight, DM Serif Display, clamp(32px,4.4vw,52px),
 * line-height 1.1, letter-spacing 0.01em, uppercase.
 * Left-aligned to match the left-anchored hero content
 * column. Divider is now a real `.bp-calculateur-hero__divider`
 * block (line / diamond / line) rendered immediately after
 * the title — pseudo-element dividers were removed in 0.1.378
 * in favour of the shared Barbary divider pattern. */
.bp-calculateur-hero__title {
	margin: 0 0 28px 0;
	font-family: var(--bp-ch-font-display);
	font-weight: 400;
	color: #374F37;
	line-height: 1.1;
	letter-spacing: 0.01em;
	font-size: clamp(32px, 4.4vw, 52px);
	text-transform: uppercase;
	text-align: start;
	position: relative;
	display: block;
	padding-block-end: 0;
}
.bp-calculateur-hero__divider {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 22px 0;
	max-inline-size: 100%;
}
.bp-calculateur-hero__divider-line {
	display: block;
	inline-size: 40px;
	block-size: 1px;
	background-color: #B8B25A;
}
.bp-calculateur-hero__divider-diamond {
	display: block;
	inline-size: 6px;
	block-size: 6px;
	background-color: #B8B25A;
	transform: rotate(45deg);
	flex: 0 0 auto;
}
.bp-calculateur-hero__title-1,
.bp-calculateur-hero__title-2,
.bp-calculateur-hero__title-3 {
	display: block;
	color: #374F37;
}
.bp-calculateur-hero__title-3 {
	color: #374F37;
}

/* ---------------- Description ---------------- */
.bp-calculateur-hero__description {
	margin: 0;
	font-family: var(--bp-ch-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: #1F2A1F;
	max-inline-size: 520px;
}

/* ---------------- CTA button ----------------
 * Single primary CTA: dark green solid pill, cream label
 * with a leading calculator icon on the inline-start side
 * and a trailing arrow on the inline-end side. The button
 * is intentionally self-contained — only one action on
 * this hero. `flex-wrap: nowrap` keeps the icon + label
 * + arrow on a single horizontal row on desktop; the
 * button itself takes full inline-size on mobile where the
 * container is genuinely too narrow. */
.bp-calculateur-hero__ctas {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 12px;
	margin-block-start: 6px;
	min-inline-size: 0;
}

.bp-calculateur-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-block-size: 52px;
	padding: 14px 26px;
	border-radius: 8px;
	background: #374F37;
	color: #FBF6EC;
	border: 1.5px solid #374F37;
	font-family: var(--bp-ch-font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	text-decoration: none;
	line-height: 1.1;
	transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease, color 200ms ease;
	flex: 0 1 auto;
	min-inline-size: 0;
	white-space: nowrap;
}
.bp-calculateur-hero__cta:hover,
.bp-calculateur-hero__cta:focus-visible {
	background: #2E422E;
	border-color: #2E422E;
	color: #FBF6EC;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(55, 79, 55, 0.28);
}

.bp-calculateur-hero__cta-label {
	display: inline-block;
}

.bp-calculateur-hero__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
}
.bp-calculateur-hero__cta-icon--leading {
	margin-inline-end: 0;
}
.bp-calculateur-hero__cta-icon--trailing {
	margin-inline-start: 0;
}
.bp-calculateur-hero__cta-icon svg,
.bp-calculateur-hero__cta-icon i {
	inline-size: 18px;
	block-size: 18px;
	font-size: 18px;
}

/* ---------------- Trust line ----------------
 * Small uppercase-ish line under the CTA. Olive shield icon
 * on the inline-start side, muted dark green / grey text on
 * the inline-end side. Sits at a smaller size than the
 * description so it never competes with the main copy. */
.bp-calculateur-hero__trust {
	margin: 4px 0 0 0;
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--bp-ch-font-body);
	font-size: 13px;
	line-height: 1.45;
	color: #FBF6EC;
	max-inline-size: 520px;
}
.bp-calculateur-hero__trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #FBF6EC;
	font-size: 14px;
	padding-block-start: 1px;
}
.bp-calculateur-hero__trust-icon svg,
.bp-calculateur-hero__trust-icon i {
	inline-size: 14px;
	block-size: 14px;
	font-size: 14px;
}
.bp-calculateur-hero__trust-text {
	color: #FBF6EC !important;
}

/* ---------------- Icon colors (forced, scoped) ----------------
 * Elementor's icon manager + global stylesheets sometimes apply
 * `fill: #000` / `color: #000` to SVG children or <i> tags, so
 * we force the correct brand colors here with high-specificity
 * selectors. Everything is fully scoped under
 * `.bp-calculateur-hero` — no global `svg {}` / `i {}` / `path {}`
 * rules are introduced.
 *
 *   Eyebrow line-art icon on cream  → #374F37 (dark green)
 *   Primary CTA icons on dark green  → #FBF6EC (cream)
 *   Trust-line shield icon on cream  → #7A9268 (olive) */

/* Eyebrow icon: dark green. */
.bp-calculateur-hero .bp-calculateur-hero__eyebrow-icon,
.bp-calculateur-hero .bp-calculateur-hero__eyebrow-icon svg,
.bp-calculateur-hero .bp-calculateur-hero__eyebrow-icon i,
.bp-calculateur-hero .bp-calculateur-hero__eyebrow-icon svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

/* Primary CTA icons (leading calculator + trailing arrow) → cream. */
.bp-calculateur-hero .bp-calculateur-hero__cta .bp-calculateur-hero__cta-icon,
.bp-calculateur-hero .bp-calculateur-hero__cta .bp-calculateur-hero__cta-icon svg,
.bp-calculateur-hero .bp-calculateur-hero__cta .bp-calculateur-hero__cta-icon i,
.bp-calculateur-hero .bp-calculateur-hero__cta .bp-calculateur-hero__cta-icon svg * {
	color: #FBF6EC;
	fill: #FBF6EC;
	stroke: #FBF6EC;
}

/* Trust line shield icon → cream. */
.bp-calculateur-hero .bp-calculateur-hero__trust-icon,
.bp-calculateur-hero .bp-calculateur-hero__trust-icon svg,
.bp-calculateur-hero .bp-calculateur-hero__trust-icon i,
.bp-calculateur-hero .bp-calculateur-hero__trust-icon svg * {
	color: #FBF6EC !important;
	fill: currentColor;
	stroke: currentColor;
}

/* ---------------- Tablet (769–1024) ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-calculateur-hero { min-block-size: 560px; }
	.bp-calculateur-hero__title { font-size: 54px; }
	.bp-calculateur-hero__inner {
		grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
		gap: 20px;
		padding-block: 56px 28px;
	}
	.bp-calculateur-hero__description { font-size: 15px; max-inline-size: 100%; }
	.bp-calculateur-hero__content { max-inline-size: 100%; gap: 18px; }
	.bp-calculateur-hero__trust { max-inline-size: 100%; }
}

/* ---------------- Mobile (<= 768px) ---------------- */
@media ( max-width: 768px ) {
	.bp-calculateur-hero {
		min-block-size: auto;
	}

	.bp-calculateur-hero__bg {
		/* Reposition the photograph so the agricultural subject
		 * stays visible behind the cream content. */
		background-position-x: 65% !important;
		background-position-y: 35% !important;
	}

	/* On mobile the cream fade covers a larger portion of the
	 * screen so the text remains readable without a strong photo
	 * dominating the viewport. The fade is vertical so the
	 * image peeks through at the bottom. */
	.bp-calculateur-hero__fade {
		background: linear-gradient(
			to bottom,
			var(--bp-ch-bg) 0%,
			var(--bp-ch-bg) 32%,
			color-mix( in srgb, var(--bp-ch-bg) 70%, transparent ) 58%,
			color-mix( in srgb, var(--bp-ch-bg) 30%, transparent ) 82%,
			transparent 100%
		);
	}
	[dir="rtl"] .bp-calculateur-hero__fade,
	[lang="ar"] .bp-calculateur-hero__fade {
		background: linear-gradient(
			to bottom,
			var(--bp-ch-bg) 0%,
			var(--bp-ch-bg) 32%,
			color-mix( in srgb, var(--bp-ch-bg) 70%, transparent ) 58%,
			color-mix( in srgb, var(--bp-ch-bg) 30%, transparent ) 82%,
			transparent 100%
		);
	}

	.bp-calculateur-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 48px 28px;
		padding-inline: 24px;
		gap: 22px;
		align-items: stretch;
	}

	.bp-calculateur-hero__content {
		max-inline-size: 100%;
		min-inline-size: 0;
		gap: 18px;
		align-items: flex-start;
	}

	.bp-calculateur-hero__title {
		font-size: 42px;
		line-height: 1.06;
	}

	.bp-calculateur-hero__description {
		max-inline-size: 100%;
		min-inline-size: 0;
		font-size: 15.5px;
		line-height: 1.6;
	}

	.bp-calculateur-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		inline-size: 100%;
	}

	.bp-calculateur-hero__cta {
		inline-size: 100%;
		justify-content: center;
	}

	.bp-calculateur-hero__trust {
		max-inline-size: 100%;
	}

	.bp-calculateur-hero__media-slot { display: none; }
}

/* ---------------- ≤ 480px ---------------- */
@media ( max-width: 480px ) {
	.bp-calculateur-hero__inner { padding-inline: 20px; padding-block: 40px 24px; }
	.bp-calculateur-hero__title { font-size: 38px; }
	.bp-calculateur-hero__content { gap: 16px; }
	.bp-calculateur-hero__cta { font-size: 14px; min-block-size: 50px; padding-inline: 20px; }
	.bp-calculateur-hero__trust { font-size: 12px; }
	.bp-calculateur-hero__trust-icon { font-size: 13px; }
	.bp-calculateur-hero__trust-icon svg,
	.bp-calculateur-hero__trust-icon i { inline-size: 13px; block-size: 13px; }
}

/* ---------------- ≤ 430px ---------------- */
@media ( max-width: 430px ) {
	.bp-calculateur-hero__inner { padding-inline: 20px; padding-block: 36px 22px; }
	.bp-calculateur-hero__title { font-size: 36px; line-height: 1.06; }
	.bp-calculateur-hero__eyebrow { font-size: 11px; letter-spacing: 0.16em; }
	.bp-calculateur-hero__description { font-size: 15px; line-height: 1.6; max-inline-size: 100%; }
	.bp-calculateur-hero__content { gap: 14px; }
}

/* ---------------- ≤ 390px ---------------- */
@media ( max-width: 390px ) {
	.bp-calculateur-hero__inner { padding-inline: 18px; padding-block: 32px 20px; }
	.bp-calculateur-hero__title { font-size: 32px; line-height: 1.04; }
	.bp-calculateur-hero__eyebrow { font-size: 10px; letter-spacing: 0.14em; }
	.bp-calculateur-hero__description { font-size: 14px; line-height: 1.58; max-inline-size: 100%; }
	.bp-calculateur-hero__content { gap: 12px; }
	.bp-calculateur-hero__cta { font-size: 13px; padding-inline: 18px; min-block-size: 48px; }
	.bp-calculateur-hero__cta-icon { inline-size: 16px; block-size: 16px; }
	.bp-calculateur-hero__cta-icon svg,
	.bp-calculateur-hero__cta-icon i { inline-size: 16px; block-size: 16px; }
}

/* ---------------- ≤ 375px ---------------- */
@media ( max-width: 375px ) {
	.bp-calculateur-hero__inner { padding-inline: 18px; padding-block: 30px 18px; }
	.bp-calculateur-hero__title { font-size: 30px; line-height: 1.05; }
	.bp-calculateur-hero__description { font-size: 13.5px; }
	.bp-calculateur-hero__content { gap: 12px; }
}

/* ---------------- ≤ 360px ---------------- */
@media ( max-width: 360px ) {
	.bp-calculateur-hero__inner { padding-inline: 16px; gap: 10px; padding-block: 28px 16px; }
	.bp-calculateur-hero__title { font-size: 28px; line-height: 1.06; }
	.bp-calculateur-hero__eyebrow { font-size: 9px; letter-spacing: 0.12em; gap: 8px; }
	.bp-calculateur-hero__description { font-size: 13px; line-height: 1.55; }
	.bp-calculateur-hero__cta { font-size: 12px; padding-inline: 16px; min-block-size: 46px; gap: 10px; }
	.bp-calculateur-hero__trust { font-size: 11.5px; gap: 6px; }
}

/* ---------------- Arabic / RTL ----------------
 * The display headline falls back to the Arabic family instead
 * of inheriting the Latin display family. The layout already
 * mirrors via logical properties + the mirrored fade gradient. */
[lang="ar"] .bp-calculateur-hero__title,
[dir="rtl"] .bp-calculateur-hero__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: 0;
}
[lang="ar"] .bp-calculateur-hero__title-1,
[lang="ar"] .bp-calculateur-hero__title-2,
[lang="ar"] .bp-calculateur-hero__title-3,
[dir="rtl"] .bp-calculateur-hero__title-1,
[dir="rtl"] .bp-calculateur-hero__title-2,
[dir="rtl"] .bp-calculateur-hero__title-3 {
	color: inherit;
}
[lang="ar"] .bp-calculateur-hero__title-1,
[lang="ar"] .bp-calculateur-hero__title-2,
[dir="rtl"] .bp-calculateur-hero__title-1,
[dir="rtl"] .bp-calculateur-hero__title-2 {
	color: #374F37;
}
[lang="ar"] .bp-calculateur-hero__title-3,
[dir="rtl"] .bp-calculateur-hero__title-3 {
	color: #7A9268;
}
[dir="rtl"] .bp-calculateur-hero__content { justify-self: end; }

/* ---------------- Reduced motion ---------------- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-calculateur-hero [data-bp-stagger],
	.bp-calculateur-hero__cta,
	.bp-calculateur-hero__bg {
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}