/* BP Demandez un devis Hero widget styles
 *
 * Full-width hero for the quotation-request page. The
 * agricultural / olive-orchard photograph spans the entire
 * viewport width as one continuous background (no boxed
 * image, no weird mask shape, no split-block composition). A
 * single cream → transparent gradient fade sits on the
 * inline-start side so the left editorial block (eyebrow /
 * gold divider / two-tone serif title / description / single
 * dark-green CTA with trailing arrow / horizontal pair of
 * trust items) 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. Botanical / topographic decorations (3 slots, low z)
 *   2. Background photograph (full-bleed, cover)
 *   3. Cream fade layer (cream → transparent, inline-start)
 *   4. Inner content (eyebrow / divider / title / description
 *      / CTA / trust row) + 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, horizontal trust
 * row with vertical separator, three subtle decoration slots.
 *
 * Tablet: keep image + fade, allow the trust row to wrap if
 * necessary, keep typography readable.
 *
 * Mobile: stack the trust items to a single column with a
 * horizontal separator, keep the title at ~32–44px so it
 * never feels squashed, keep the CTA full-width; the photo
 * remains visible behind the cream fade so the hero never
 * feels empty.
 *
 * 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-devis-hero {
	/* Theme tokens. Editable from the Elementor sidebar. */
	--bp-dh-bg:         #FBF6EC;
	--bp-dh-fade:       62%;

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

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

	/* Decoration offsets / transforms / z-index (Elementor-driven). */
	--bp-dh-deco-upper-x:   -20px;
	--bp-dh-deco-upper-y:   -10px;
	--bp-dh-deco-upper-r:    0deg;
	--bp-dh-deco-upper-z:    1;
	--bp-dh-deco-lower-x:   -30px;
	--bp-dh-deco-lower-y:   -20px;
	--bp-dh-deco-lower-r:    0deg;
	--bp-dh-deco-lower-z:    1;
	--bp-dh-deco-center-x:   30%;
	--bp-dh-deco-center-y:   20px;
	--bp-dh-deco-center-r:   0deg;
	--bp-dh-deco-center-z:   1;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
	min-block-size: 600px;
	margin-block-end: 100px;
	background: transparent;
	color: #1F2A1F;
	font-family: var(--bp-dh-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 Comment Utiliser Hero / BP
 * Calculateur Hero / BP Résultats Hero pattern.
 *
 * Every override is anchored to a parent that actually contains
 * the `.elementor-widget-bp-devis-hero` widget using
 * `:has()` / descendant selectors — no global Elementor overrides
 * leak onto other pages. */
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-hero) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-hero) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-hero) > .e-con,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-hero) > .e-con > .e-con-inner,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-hero) > .elementor-container > .elementor-column,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-devis-hero {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}

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

/* Override the reset above so the hero creates a 100px gap to the
 * next page section. Higher selector specificity (0,2,0) so it beats
 * the `.elementor-element.bp-devis-hero` (0,2,0) reset on the same
 * level; source order then gives the override the win. */
.elementor .bp-devis-hero {
	margin-block-end: 100px;
}

/* Legacy `.elementor-inner` row layout: only override when the
 * section actually hosts this widget. */
.elementor-inner section.elementor-section:has(.elementor-widget-bp-devis-hero) > .elementor-container,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-devis-hero) > .elementor-row,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-devis-hero) > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-devis-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-devis-hero,
.elementor-widget.elementor-widget-bp-devis-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-devis-hero),
.e-con:has(> .e-con-inner > .elementor-widget-bp-devis-hero),
.e-con-inner:has(> .elementor-widget-bp-devis-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-devis-hero {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ---------------- Decorations ----------------
 * Three subtle line-art slots. They sit BEHIND the photograph
 * and the fade (z-index 0) so they never compete with the
 * content. Anchored to the VIEWPORT edge via
 * `inset-inline-start: 0` (mirrored for RTL) plus an Elementor-
 * driven X / Y / rotation offset. Pointer-events disabled so
 * they can never block a click on the content above. */
.bp-devis-hero__decoration {
	position: absolute;
	display: block;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	z-index: 1;
	block-size: auto;
	transition: opacity 200ms ease;
}

/* Upper-left botanical. */
.bp-devis-hero__deco--upper {
	inset-inline-start: var(--bp-dh-deco-upper-x);
	inset-block-start:  var(--bp-dh-deco-upper-y);
	transform: rotate( var(--bp-dh-deco-upper-r) );
	z-index: var(--bp-dh-deco-upper-z);
	inline-size: 220px;
	opacity: 0.28;
}

/* Lower-left botanical branches. */
.bp-devis-hero__deco--lower {
	inset-inline-start: var(--bp-dh-deco-lower-x);
	inset-block-end:    var(--bp-dh-deco-lower-y);
	transform: rotate( var(--bp-dh-deco-lower-r) );
	z-index: var(--bp-dh-deco-lower-z);
	inline-size: 240px;
	opacity: 0.24;
}

/* Center topographic contour lines. */
.bp-devis-hero__deco--center {
	inset-inline-start: 50%;
	inset-block-start:  var(--bp-dh-deco-center-y);
	transform: translateX( -50% ) rotate( var(--bp-dh-deco-center-r) );
	z-index: var(--bp-dh-deco-center-z);
	inline-size: 280px;
	opacity: 0.22;
}
/* When the user nudges center X off 50% via the slider, the
 * `translateX(-50%)` baseline collapses; switch the transform
 * to a CSS-var-driven X offset so the Elementor X slider still
 * anchors the decoration cleanly. The slider target is the
 * --bp-dh-deco-center-x token, so we consume it directly. */
[dir="rtl"] .bp-devis-hero__deco--center,
[lang="ar"] .bp-devis-hero__deco--center {
	transform: translateX( 50% ) rotate( var(--bp-dh-deco-center-r) );
}

/* ---------------- 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-devis-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position-x: 60%;
	background-position-y: 45%;
	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-dh-fade)` (0–100%) controls how
 * far the cream extends across the hero: 62% (default) means
 * the cream covers the left ~62% 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-devis-hero__fade {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(
		to right,
		var(--bp-dh-bg) 0%,
		var(--bp-dh-bg) calc( var(--bp-dh-fade) - 28% ),
		color-mix( in srgb, var(--bp-dh-bg) 65%, transparent ) calc( var(--bp-dh-fade) - 6% ),
		color-mix( in srgb, var(--bp-dh-bg) 28%, transparent ) calc( var(--bp-dh-fade) + 8% ),
		transparent calc( var(--bp-dh-fade) + 30% )
	);
}

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

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

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

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

/* ---------------- Eyebrow ----------------
 * Standardized eyebrow style matching the approved
 * .bp-contact-global-network__eyebrow baseline. */
.bp-devis-hero__eyebrow {
	margin: 0 0 12px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #374F37;
	line-height: 1.3;
	text-align: start;
}

/* Decorative gold accent line under the eyebrow. Anchored to
 * the inline-start edge so the line always begins at the same
 * x as the eyebrow text. */
.bp-devis-hero__eyebrow-line {
	display: block;
	inline-size: 40px;
	block-size: 1.5px;
	background-color: #B8B25A;
	margin-block-start: 10px;
	border: 0;
}

/* ---------------- Title ----------------
 * Unified serif title — both line spans inherit ONE
 * style from the parent. Matches the approved
 * .bp-contact-global-network__title baseline. */
.bp-devis-hero__title {
	margin: 0 0 16px;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, 'Times New Roman', serif);
	font-weight: 400;
	color: #374F37;
	line-height: 1.1;
	letter-spacing: 0.01em;
	font-size: clamp(32px, 4vw, 52px);
	text-align: start;
	text-transform: uppercase;
	max-inline-size: 26ch;
}
.bp-devis-hero__title-1,
.bp-devis-hero__title-2 {
	display: block;
	color: inherit;
}

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

/* ---------------- CTA button ----------------
 * Single primary CTA: dark green solid pill, cream label, a
 * trailing arrow on the inline-end side. The button is
 * intentionally self-contained — only one action on this
 * hero. The pill radius is fully rounded (default 999) per
 * the design spec. On mobile the button takes full inline-
 * size so it never sits stranded. */
.bp-devis-hero__ctas {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 12px;
	margin-block-start: 6px;
	min-inline-size: 0;
}

.bp-devis-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 52px;
	padding: 14px 28px;
	border-radius: 999px;
	background: #374F37;
	color: #FBF6EC;
	border: 1.5px solid #374F37;
	font-family: var(--bp-dh-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-devis-hero__cta:hover,
.bp-devis-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-devis-hero__cta-label {
	display: inline-block;
}

.bp-devis-hero__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
	color: currentColor;
}
.bp-devis-hero__cta-icon svg,
.bp-devis-hero__cta-icon i {
	inline-size: 16px;
	block-size: 16px;
	font-size: 16px;
}

/* ---------------- Trust row ----------------
 * Horizontal list of 2 items on desktop, separated by a soft
 * `border-inline-start` on item 2. On mobile the row stacks
 * to a single column with a `border-block-start` between
 * vertically stacked items. No separator elements are added
 * as extra grid children — borders live on the actual items. */
.bp-devis-hero__trust {
	list-style: none;
	margin: 6px 0 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	max-inline-size: 520px;
	width: 100%;
}

.bp-devis-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-inline: 18px;
	padding-block: 4px;
	min-inline-size: 0;
}
.bp-devis-hero__trust-item:first-child {
	padding-inline-start: 0;
}
.bp-devis-hero__trust-item + .bp-devis-hero__trust-item {
	border-inline-start: 1px solid rgba(55, 79, 55, 0.22);
}

.bp-devis-hero__trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #374F37;
	font-size: 20px;
}
.bp-devis-hero__trust-icon svg,
.bp-devis-hero__trust-icon i {
	inline-size: 20px;
	block-size: 20px;
	font-size: 20px;
}

.bp-devis-hero__trust-text {
	font-family: var(--bp-dh-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #1F2A1F;
	min-inline-size: 0;
	text-shadow:
		0 1px 2px rgba(251,246,236,.75),
		0 0 8px rgba(251,246,236,.45) !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-devis-hero`
 * — no global `svg {}` / `i {}` / `path {}` rules are
 * introduced.
 *
 *   Trust icons  → #374F37 (dark green)
 *   Primary CTA  → #FBF6EC (cream) on the dark green pill
 *   Decoration images keep their built-in stroke / fill colors
 *   so swapping the SVG is a no-op. */

/* Trust-row icons → dark green. */
.bp-devis-hero .bp-devis-hero__trust-icon,
.bp-devis-hero .bp-devis-hero__trust-icon svg,
.bp-devis-hero .bp-devis-hero__trust-icon i,
.bp-devis-hero .bp-devis-hero__trust-icon svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

/* Primary CTA arrow on the dark green pill → cream. */
.bp-devis-hero .bp-devis-hero__cta .bp-devis-hero__cta-icon,
.bp-devis-hero .bp-devis-hero__cta .bp-devis-hero__cta-icon svg,
.bp-devis-hero .bp-devis-hero__cta .bp-devis-hero__cta-icon i,
.bp-devis-hero .bp-devis-hero__cta .bp-devis-hero__cta-icon svg * {
	color: #FBF6EC;
	fill: #FBF6EC;
	stroke: #FBF6EC;
}

/* ---------------- Tablet (769–1024) ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-devis-hero { min-block-size: 560px; }
	.bp-devis-hero__title { font-size: 56px; }
	.bp-devis-hero__inner {
		grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
		gap: 20px;
		padding-block: 56px 28px;
	}
	.bp-devis-hero__description { font-size: 15.5px; max-inline-size: 100%; }
	.bp-devis-hero__content { max-inline-size: 100%; gap: 18px; }
	.bp-devis-hero__deco--upper { inline-size: 180px; }
	.bp-devis-hero__deco--lower { inline-size: 200px; }
	.bp-devis-hero__deco--center { inline-size: 220px; }
}

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

	.bp-devis-hero__bg {
		/* Reposition the photograph so the agricultural subject
		 * stays visible behind the cream content. */
		background-position-x: 65% !important;
		background-position-y: 30% !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-devis-hero__fade {
		background: linear-gradient(
			to bottom,
			var(--bp-dh-bg) 0%,
			var(--bp-dh-bg) 32%,
			color-mix( in srgb, var(--bp-dh-bg) 70%, transparent ) 58%,
			color-mix( in srgb, var(--bp-dh-bg) 30%, transparent ) 82%,
			transparent 100%
		);
	}
	[dir="rtl"] .bp-devis-hero__fade,
	[lang="ar"] .bp-devis-hero__fade {
		background: linear-gradient(
			to bottom,
			var(--bp-dh-bg) 0%,
			var(--bp-dh-bg) 32%,
			color-mix( in srgb, var(--bp-dh-bg) 70%, transparent ) 58%,
			color-mix( in srgb, var(--bp-dh-bg) 30%, transparent ) 82%,
			transparent 100%
		);
	}

	/* Reposition the decorations: keep them at the screen edges
	 * but smaller and slightly higher / lower so they never
	 * crowd the content. */
	.bp-devis-hero__deco--upper {
		inline-size: 130px;
		inset-block-start: 0;
		inset-inline-start: -10px;
	}
	.bp-devis-hero__deco--lower {
		inline-size: 140px;
		inset-block-end: 0;
		inset-inline-start: -10px;
		opacity: 0.18;
	}
	/* Hide the center topographic decoration on small screens
	 * so the text never sits over a busy pattern. */
	.bp-devis-hero__deco--center { display: none; }

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

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

	.bp-devis-hero__title {
		font-size: 44px;
		line-height: 1.04;
	}

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

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

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

	.bp-devis-hero__trust {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		max-inline-size: 100%;
		margin-block-start: 6px;
	}
	.bp-devis-hero__trust-item {
		padding-block: 14px;
		padding-inline: 0;
		inline-size: 100%;
	}
	.bp-devis-hero__trust-item:first-child {
		padding-block-start: 8px;
	}
	.bp-devis-hero__trust-item + .bp-devis-hero__trust-item {
		border-inline-start: 0;
		border-block-start: 1px solid rgba(55, 79, 55, 0.22);
	}

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

/* ---------------- ≤ 480px ---------------- */
@media ( max-width: 480px ) {
	.bp-devis-hero__inner { padding-inline: 20px; padding-block: 40px 24px; }
	.bp-devis-hero__title { font-size: 40px; }
	.bp-devis-hero__content { gap: 16px; }
	.bp-devis-hero__cta { font-size: 14px; min-block-size: 50px; padding-inline: 22px; }
	.bp-devis-hero__cta-icon { inline-size: 14px; block-size: 14px; }
	.bp-devis-hero__cta-icon svg,
	.bp-devis-hero__cta-icon i { inline-size: 14px; block-size: 14px; }
	.bp-devis-hero__trust-text { font-size: 12px; }
	.bp-devis-hero__trust-icon { font-size: 18px; }
	.bp-devis-hero__trust-icon svg,
	.bp-devis-hero__trust-icon i { inline-size: 18px; block-size: 18px; }
	.bp-devis-hero__deco--upper { inline-size: 110px; }
	.bp-devis-hero__deco--lower { inline-size: 120px; }
}

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

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

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

/* ---------------- ≤ 360px ---------------- */
@media ( max-width: 360px ) {
	.bp-devis-hero__inner { padding-inline: 16px; gap: 10px; padding-block: 28px 16px; }
	.bp-devis-hero__title { font-size: 30px; line-height: 1.06; }
	.bp-devis-hero__eyebrow { font-size: 9px; letter-spacing: 0.14em; }
	.bp-devis-hero__description { font-size: 13px; line-height: 1.55; }
	.bp-devis-hero__cta { font-size: 12px; padding-inline: 16px; min-block-size: 46px; gap: 8px; }
	.bp-devis-hero__cta-icon { inline-size: 12px; block-size: 12px; }
	.bp-devis-hero__cta-icon svg,
	.bp-devis-hero__cta-icon i { inline-size: 12px; block-size: 12px; }
	.bp-devis-hero__trust-text { font-size: 11px; }
	.bp-devis-hero__trust-icon { font-size: 15px; }
	.bp-devis-hero__trust-icon svg,
	.bp-devis-hero__trust-icon i { inline-size: 15px; block-size: 15px; }
	.bp-devis-hero__eyebrow-line { inline-size: 24px; }
}

/* ---------------- 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
 * + the mirrored decoration anchoring. */
[lang="ar"] .bp-devis-hero__title,
[dir="rtl"] .bp-devis-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-devis-hero__title-1,
[lang="ar"] .bp-devis-hero__title-2,
[dir="rtl"] .bp-devis-hero__title-1,
[dir="rtl"] .bp-devis-hero__title-2 {
	color: inherit;
}
[lang="ar"] .bp-devis-hero__title-1,
[dir="rtl"] .bp-devis-hero__title-1 {
	color: #374F37;
}
[lang="ar"] .bp-devis-hero__title-2,
[dir="rtl"] .bp-devis-hero__title-2 {
	color: #7A9268;
}
[dir="rtl"] .bp-devis-hero__content { justify-self: end; }
[lang="ar"] .bp-devis-hero__trust,
[dir="rtl"] .bp-devis-hero__trust {
	flex-direction: row-reverse;
}
[lang="ar"] .bp-devis-hero__cta,
[dir="rtl"] .bp-devis-hero__cta {
	flex-direction: row-reverse;
}

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