/* BP Résultats Hero widget styles
 *
 * Full-width hero for the "Résultats & Études de cas" page.
 * The agricultural 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 /
 * serif title / gold divider / description / dual CTAs /
 * floating proof strip) stays perfectly readable while the
 * photo 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 decoration PNG (subtle, behind everything)
 *   2. Background photograph (full-bleed, cover)
 *   3. Cream fade layer (cream → transparent, inline-start)
 *   4. Inner content (eyebrow / title / divider / description /
 *      CTAs / proof strip) + 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, buttons side-by-side, horizontal
 * proof strip floating at the bottom-left.
 *
 * Tablet: keep image + fade, allow the proof strip to wrap.
 * Mobile: stack buttons, stack proof items cleanly, keep text
 * readable; the photograph remains visible behind the cream
 * fade so the hero never feels empty.
 *
 * All visual rules use logical CSS properties (padding-inline,
 * inset-inline, border-inline-start) so the same stylesheet
 * covers /ar/ without a separate RTL file.
 */

.bp-resultats-hero {
	/* Theme tokens. Editable from the Elementor sidebar. */
	--bp-rh-bg:         #FBF6EC;
	--bp-rh-fade:       70%;
	--bp-rh-eyebrow:    #B8B25A;
	--bp-rh-title:      #374F37;
	--bp-rh-description:#1F2A1F;
	--bp-rh-divider:    #B8B25A;
	--bp-rh-deco-x:     -40px;
	--bp-rh-deco-y:     -30px;

	--bp-rh-inner-max:  1140px;
	--bp-rh-pad-x:      clamp(24px, 5vw, 64px);
	--bp-rh-pad-y-top:  clamp(56px, 6vw, 88px);
	--bp-rh-pad-y-bot:  clamp(24px, 3vw, 40px);

	--bp-rh-font-body:    var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-rh-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: 620px;
	background: transparent;
	color: var(--bp-rh-description);
	font-family: var(--bp-rh-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 Cultures Hero / BP Hero pattern.
 *
 * SCOPING (regression repair v0.1.184): every override below
 * is anchored to a parent that actually contains the
 * `.elementor-widget-bp-resultats-hero` widget, using
 * `:has()` or descendant selectors. The previous rules
 * targeted bare `.elementor-section` / `.elementor-container`
 * / `.elementor-column` / `.elementor-widget-wrap` and leaked
 * onto every other Elementor page that happened to enqueue
 * this stylesheet. They are gone. */
.elementor-section:has(> .elementor-container .elementor-widget-bp-resultats-hero) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-resultats-hero) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-resultats-hero) > .e-con,
.elementor-section:has(> .elementor-container .elementor-widget-bp-resultats-hero) > .e-con > .e-con-inner,
.elementor-section:has(> .elementor-container .elementor-widget-bp-resultats-hero) > .elementor-container > .elementor-column,
.elementor-section:has(> .elementor-container .elementor-widget-bp-resultats-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section:has(> .elementor-container .elementor-widget-bp-resultats-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor-section:has(> .elementor-container .elementor-widget-bp-resultats-hero) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-resultats-hero {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}

.elementor-element.bp-resultats-hero,
.elementor .bp-resultats-hero,
.e-con.bp-resultats-hero,
.bp-resultats-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-resultats-hero) > .elementor-container,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-resultats-hero) > .elementor-row,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-resultats-hero) > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-resultats-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-resultats-hero,
.elementor-widget.elementor-widget-bp-resultats-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-resultats-hero),
.e-con:has(> .e-con-inner > .elementor-widget-bp-resultats-hero),
.e-con-inner:has(> .elementor-widget-bp-resultats-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-resultats-hero {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ---------------- Botanical decoration ----------------
 * Subtle line-art PNG (or SVG) placed in the lower-left of the
 * hero, behind everything else. Sits at very low opacity so it
 * fades into the cream area and never competes with the content.
 * Position is driven by Elementor controls (--bp-rh-deco-x,
 * --bp-rh-deco-y) so the asset can be moved anywhere in the
 * cream zone. */
.bp-resultats-hero__decoration {
	position: absolute;
	inset-inline-start: var(--bp-rh-deco-x);
	inset-block-end:    var(--bp-rh-deco-y);
	inline-size: 260px;
	block-size: auto;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	opacity: 0.22;
}

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

/* RTL: mirror the fade so the cream anchors to the inline-end. */
[dir="rtl"] .bp-resultats-hero__fade,
[lang="ar"] .bp-resultats-hero__fade {
	background: linear-gradient(
		to left,
		var(--bp-rh-bg) 0%,
		var(--bp-rh-bg) calc( var(--bp-rh-fade) - 30% ),
		color-mix( in srgb, var(--bp-rh-bg) 60%, transparent ) calc( var(--bp-rh-fade) - 5% ),
		color-mix( in srgb, var(--bp-rh-bg) 25%, transparent ) calc( var(--bp-rh-fade) + 8% ),
		transparent calc( var(--bp-rh-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
 * dual CTAs + proof strip without crowding the title or the
 * paragraph line length. */
.bp-resultats-hero__inner {
	position: relative;
	z-index: 3;
	inline-size: 100%;
	max-inline-size: var(--bp-rh-inner-max);
	margin-inline: auto;
	padding-inline: var(--bp-rh-pad-x);
	padding-block:  var(--bp-rh-pad-y-top) var(--bp-rh-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-resultats-hero__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-inline-size: 640px;
	justify-self: start;
	inline-size: 100%;
	padding-block: 0;
	padding-inline: 0;
	position: relative;
	z-index: 4;
}

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

/* ---------------- Typography ---------------- */

/* Eyebrow: olive/gold uppercase text + small line-art leaf on
 * the inline-start side. The icon is a fixed inline SVG so the
 * eyebrow always ships with a consistent visual mark. */
.bp-resultats-hero__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--bp-rh-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-rh-eyebrow);
	line-height: 1.3;
}
.bp-resultats-hero__eyebrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-rh-eyebrow);
}
.bp-resultats-hero__eyebrow-icon svg {
	inline-size: 18px;
	block-size: 18px;
}

/* Title: dark green serif display, line-broken via the ||| marker
 * in the Elementor control. Default 68px desktop matches the
 * reference image proportion. */
.bp-resultats-hero__title {
	margin: 0;
	font-family: var(--bp-rh-font-display);
	font-weight: 400;
	color: var(--bp-rh-title);
	line-height: 1.04;
	letter-spacing: -0.008em;
	font-size: 68px;
}
.bp-resultats-hero__title-line {
	display: block;
}

/* Gold horizontal accent line under the title. */
.bp-resultats-hero__divider {
	display: block;
	inline-size: 56px;
	block-size: 2px;
	background-color: var(--bp-rh-divider);
	margin-block: 18px;
	border: 0;
}

/* Description */
.bp-resultats-hero__description {
	margin: 0;
	font-family: var(--bp-rh-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--bp-rh-description);
	max-inline-size: 560px;
}

/* ---------------- CTA buttons ----------------
 * Two buttons side-by-side: primary (dark green solid) and
 * secondary (translucent cream + dark green border + dark green
 * text). Both share the same height, padding, and border-radius
 * tokens so the row looks balanced. Icons inherit color via
 * `currentColor`. `flex-wrap: nowrap` keeps them on a single
 * horizontal row on desktop; they stack only on the mobile
 * breakpoint where the container is genuinely too narrow. */
.bp-resultats-hero__ctas {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 12px;
	margin-block-start: 8px;
	min-inline-size: 0;
}

.bp-resultats-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 52px;
	padding: 14px 24px;
	border-radius: 6px;
	font-family: var(--bp-rh-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;
	border: 1.5px solid transparent;
	flex: 0 1 auto;
	min-inline-size: 0;
	white-space: nowrap;
}

.bp-resultats-hero__cta--primary {
	background: #374F37;
	color: #FBF6EC;
	border-color: #374F37;
}
.bp-resultats-hero__cta--primary:hover,
.bp-resultats-hero__cta--primary:focus-visible {
	background: #2E422E;
	border-color: #2E422E;
	color: #FBF6EC;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(55, 79, 55, 0.28);
}

.bp-resultats-hero__cta--secondary {
	background: rgba(251, 246, 236, 0.55);
	color: #374F37;
	border-color: #374F37;
}
.bp-resultats-hero__cta--secondary:hover,
.bp-resultats-hero__cta--secondary:focus-visible {
	background: rgba(251, 246, 236, 0.85);
	color: #374F37;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(55, 79, 55, 0.16);
}

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

/* ---------------- 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-resultats-hero` — no global `svg {}` / `i {}` / `path {}`
 * rules are introduced.
 *
 *   Light backgrounds  → #374F37 (dark green)
 *   Dark green button  → #FBF6EC (cream) */

/* Eyebrow line-art icon on cream → dark green. */
.bp-resultats-hero .bp-resultats-hero__eyebrow-icon,
.bp-resultats-hero .bp-resultats-hero__eyebrow-icon svg,
.bp-resultats-hero .bp-resultats-hero__eyebrow-icon i,
.bp-resultats-hero .bp-resultats-hero__eyebrow-icon svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

/* Proof-strip icon on cream → dark green. */
.bp-resultats-hero .bp-resultats-hero__proof-icon,
.bp-resultats-hero .bp-resultats-hero__proof-icon svg,
.bp-resultats-hero .bp-resultats-hero__proof-icon i,
.bp-resultats-hero .bp-resultats-hero__proof-icon svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

/* Primary dark-green button icon → cream. */
.bp-resultats-hero .bp-resultats-hero__cta--primary .bp-resultats-hero__cta-icon,
.bp-resultats-hero .bp-resultats-hero__cta--primary .bp-resultats-hero__cta-icon svg,
.bp-resultats-hero .bp-resultats-hero__cta--primary .bp-resultats-hero__cta-icon i,
.bp-resultats-hero .bp-resultats-hero__cta--primary .bp-resultats-hero__cta-icon svg * {
	color: #FBF6EC;
	fill: #FBF6EC;
	stroke: #FBF6EC;
}

/* Secondary light button icon → dark green. */
.bp-resultats-hero .bp-resultats-hero__cta--secondary .bp-resultats-hero__cta-icon,
.bp-resultats-hero .bp-resultats-hero__cta--secondary .bp-resultats-hero__cta-icon svg,
.bp-resultats-hero .bp-resultats-hero__cta--secondary .bp-resultats-hero__cta-icon i,
.bp-resultats-hero .bp-resultats-hero__cta--secondary .bp-resultats-hero__cta-icon svg * {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}

/* ---------------- Proof strip ----------------
 * Compact horizontal strip floating at the bottom-left of the
 * content area. Light cream surface, subtle border, soft
 * shadow, rounded corners. Three equal columns on desktop,
 * separated by `border-inline-start` on items 2+ so no stray
 * line appears before the first / after the last block. On
 * tablet the grid stays at 3 columns; on mobile it collapses
 * 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-resultats-hero__proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-block-start: 12px;
	padding: 14px 20px;
	background: #FBF6EC;
	border: 1px solid rgba(55, 79, 55, 0.12);
	border-radius: 10px;
	box-shadow:
		0 1px 2px rgba(20, 28, 20, 0.04),
		0 12px 28px -16px rgba(20, 28, 20, 0.22);
	max-inline-size: 640px;
	width: 100%;
}

.bp-resultats-hero__proof-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-inline: 14px;
	padding-block: 6px;
	min-inline-size: 0;
}
.bp-resultats-hero__proof-item + .bp-resultats-hero__proof-item {
	border-inline-start: 1px solid rgba(55, 79, 55, 0.18);
}

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

.bp-resultats-hero__proof-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-family: var(--bp-rh-font-body);
	font-size: 13px;
	line-height: 1.35;
	min-inline-size: 0;
}
.bp-resultats-hero__proof-line-1 {
	color: #1F2A1F;
	font-weight: 700;
}
.bp-resultats-hero__proof-line-2 {
	color: #5C6A5C;
	font-weight: 500;
}

/* ---------------- Tablet (769–1024) ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-resultats-hero { min-block-size: 560px; }
	.bp-resultats-hero__title { font-size: 56px; }
	.bp-resultats-hero__inner {
		grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
		gap: 20px;
		padding-block: 56px 28px;
	}
	.bp-resultats-hero__description { font-size: 15px; max-inline-size: 100%; }
	.bp-resultats-hero__content { max-inline-size: 100%; gap: 16px; }
	.bp-resultats-hero__proof { padding: 12px 16px; }
	.bp-resultats-hero__proof-item { padding-inline: 10px; }
}

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

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

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

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

	.bp-resultats-hero__title {
		font-size: 44px;
		line-height: 1.06;
	}

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

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

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

	.bp-resultats-hero__proof {
		grid-template-columns: 1fr;
		max-inline-size: 100%;
		padding: 6px 14px;
		gap: 0;
	}
	.bp-resultats-hero__proof-item {
		padding-block: 12px;
		padding-inline: 0;
	}
	.bp-resultats-hero__proof-item + .bp-resultats-hero__proof-item {
		border-inline-start: 0;
		border-block-start: 1px solid rgba(55, 79, 55, 0.18);
	}

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

/* ---------------- ≤ 480px ---------------- */
@media ( max-width: 480px ) {
	.bp-resultats-hero__inner { padding-inline: 20px; padding-block: 36px 20px; }
	.bp-resultats-hero__title { font-size: 40px; }
	.bp-resultats-hero__content { gap: 14px; }
	.bp-resultats-hero__cta { font-size: 14px; min-block-size: 50px; padding-inline: 18px; }
	.bp-resultats-hero__proof-text { font-size: 12px; }
}

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

/* ---------------- ≤ 360px ---------------- */
@media ( max-width: 360px ) {
	.bp-resultats-hero__inner { padding-inline: 16px; gap: 10px; padding-block: 28px 12px; }
	.bp-resultats-hero__title { font-size: 30px; line-height: 1.06; }
	.bp-resultats-hero__eyebrow { font-size: 9px; letter-spacing: 0.10em; }
	.bp-resultats-hero__description { font-size: 13px; line-height: 1.55; }
	.bp-resultats-hero__cta { font-size: 12px; padding-inline: 14px; min-block-size: 46px; }
	.bp-resultats-hero__divider { inline-size: 32px; }
}

/* ---------------- 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-resultats-hero__title,
[dir="rtl"] .bp-resultats-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;
}
[dir="rtl"] .bp-resultats-hero__content { justify-self: end; }

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