/* BP Demandez un devis — Final CTA widget styles
 *
 * Centered, contained CTA card that closes the
 * "Demandez un devis" page. ONE single 1140px card with ONE
 * singular background image. A soft cream → transparent
 * horizontal fade sits above the image so the editorial
 * left column (eyebrow / divider / serif title / description
 * / two buttons) stays perfectly readable while the
 * photograph keeps its presence on the right. No boxed
 * image, no clipped mask, no split-block composition.
 *
 * Width architecture (HARD CONSTRAINT):
 *   .bp-devis-fcta                  transparent outer section,
 *                                   sits on the page cream
 *                                   background
 *     .bp-devis-fcta__box           ONE single 1140px centered
 *                                   card (max-inline-size 1140px,
 *                                   width 100%, margin-inline:
 *                                   auto, rounded corners, soft
 *                                   shadow). The whole card uses
 *                                   ONE singular background image
 *                                   covering the entire box.
 *       .bp-devis-fcta__decoration  3 subtle line-art slots
 *                                   (upper-left botanical,
 *                                    lower-left botanical,
 *                                    center topographic contour)
 *       .bp-devis-fcta__overlay     absolute; cream → transparent
 *                                   L→R fade for readability
 *       .bp-devis-fcta__content     left-side text block
 *         .bp-devis-fcta__eyebrow
 *         .bp-devis-fcta__title
 *         .bp-devis-fcta__divider
 *         .bp-devis-fcta__description
 *         .bp-devis-fcta__actions   2 buttons side-by-side
 *
 * The CTA card is NOT full viewport width. The page background
 * remains visible on BOTH sides of the card.
 *
 * Approved palette ONLY:
 *   #1F2A1F  near-black text
 *   #374F37  deep green
 *   #5C6A3C  olive-green
 *   #B8B25A  olive / gold
 *   #FBF6EC  cream
 *   #F4ECDC  cream tint
 *   #E4DCCB  cream border
 *   + rgba variants for overlays.
 *
 * All visual rules use logical CSS properties (padding-inline,
 * inset-inline, margin-inline, text-align start/end) so the
 * same stylesheet covers /ar/ without a separate RTL file.
 */

/* =========================================================
 * ROOT
 * ========================================================= */
.bp-devis-fcta {
	--bp-devis-fcta-green:        #374F37;
	--bp-devis-fcta-olive:        #B8B25A;
	--bp-devis-fcta-olive-deep:   #5C6A3C;
	--bp-devis-fcta-cream:        #FBF6EC;
	--bp-devis-fcta-cream-tint:   #F4ECDC;
	--bp-devis-fcta-text:         #1F2A1F;
	--bp-devis-fcta-text-muted:   #5C6A5C;
	--bp-devis-fcta-border:       #E4DCCB;

	--bp-devis-fcta-overlay-left:  rgba(244, 236, 220, 0.97);
	--bp-devis-fcta-overlay-mid:   rgba(244, 236, 220, 0.55);
	--bp-devis-fcta-overlay-right: rgba(244, 236, 220, 0);

	--bp-devis-fcta-box-max:      1140px;
	--bp-devis-fcta-box-radius:   28px;
	--bp-devis-fcta-box-min-h:    480px;

	--bp-devis-fcta-primary-start:  #5C6A3C;
	--bp-devis-fcta-primary-end:    #374F37;
	--bp-devis-fcta-primary-fg:     #FBF6EC;

	--bp-devis-fcta-secondary-bg:     rgba(251, 246, 236, 0.55);
	--bp-devis-fcta-secondary-fg:     #374F37;
	--bp-devis-fcta-secondary-border: #374F37;

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

	position: relative;
	isolation: isolate;
	overflow: visible;
	margin-block-end: 100px;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	margin: 0;
	margin-block-end: 100px;
	padding: 80px 24px 96px;
	background-color: var(--bp-devis-fcta-cream);
	color: var(--bp-devis-fcta-text);
	font-family: var(--bp-devis-fcta-font-body);
}

.bp-devis-fcta *,
.bp-devis-fcta *::before,
.bp-devis-fcta *::after {
	box-sizing: border-box;
}

.bp-devis-fcta a {
	color: inherit;
	text-decoration: none;
}

.bp-devis-fcta img {
	max-inline-size: 100%;
	block-size: auto;
}

/* Widget outer spacing — keeps the card centered. */
.elementor .elementor-widget.elementor-widget-bp-devis-final-cta,
.elementor-widget.elementor-widget-bp-devis-final-cta {
	position: relative;
	z-index: 1;
}

.elementor .elementor-widget.elementor-widget-bp-devis-final-cta {
	--container-default-padding-top:    0px;
	--container-default-padding-bottom: 0px;
}

/* =========================================================
 * BOX — the single centered CTA card
 * ONE singular background image covers the whole card. The
 * readability overlay sits above the image, the decorations
 * sit between the image and the overlay, and the content
 * sits above everything. The card is NOT full viewport
 * width; the page background remains visible on both sides.
 * ========================================================= */
.bp-devis-fcta__box {
	position: relative;
	isolation: isolate;
	inline-size: 100%;
	max-inline-size: var(--bp-devis-fcta-box-max);
	margin-inline: auto;
	background-color: var(--bp-devis-fcta-cream);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
	border-radius: var(--bp-devis-fcta-box-radius);
	overflow: hidden;
	padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 64px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	min-block-size: var(--bp-devis-fcta-box-min-h);
	box-shadow: 0 18px 44px -22px rgba(31, 42, 31, 0.22);
}

.bp-devis-fcta__box--no-shadow {
	box-shadow: none;
}

.bp-devis-fcta__box--bordered {
	border: 1px solid var(--bp-devis-fcta-border);
}

/* =========================================================
 * DECORATIONS — 3 subtle line-art slots
 * Sits above the background image (z-index 0) and below the
 * readability overlay (z-index 1) so the cream fade softly
 * mutes them on the left side, leaving the line art visible
 * only on the right where the photo stays clear. Each slot
 * is fully editable from the Elementor sidebar (show/hide,
 * image, width, height, X, Y, opacity, rotation, z-index).
 * Default inline-SVG art ships in the markup so the card is
 * visually complete the moment the widget is dropped.
 * ========================================================= */
.bp-devis-fcta__decoration {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	display: block;
	inline-size: 180px;
	block-size: 140px;
	opacity: 0.3;
}

.bp-devis-fcta__decoration--upper_left {
	inset-inline-start: 20px;
	inset-block-start: 10px;
	opacity: 0.35;
}

.bp-devis-fcta__decoration--lower_left {
	inset-inline-start: 20px;
	inset-block-start: 240px;
	opacity: 0.3;
}

.bp-devis-fcta__decoration--center {
	inset-inline-start: 35%;
	inset-block-start: 40px;
	inline-size: 220px;
	block-size: 160px;
	opacity: 0.22;
}

.bp-devis-fcta__decoration img,
.bp-devis-fcta__decoration svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* =========================================================
 * READABILITY OVERLAY — the single L→R cream fade.
 * The gradient anchors to inline-start (left in LTR, right
 * in RTL) and dissolves to transparent at inline-end so the
 * photo is fully visible on the opposite side. The gradient
 * is built from three editable colour tokens so the user
 * can dial the strength from the Elementor sidebar.
 * ========================================================= */
.bp-devis-fcta__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to right,
		var(--bp-devis-fcta-overlay-left)  0%,
		var(--bp-devis-fcta-overlay-left)  36%,
		var(--bp-devis-fcta-overlay-mid)   62%,
		var(--bp-devis-fcta-overlay-right) 92%,
		var(--bp-devis-fcta-overlay-right) 100%
	);
}

/* =========================================================
 * CONTENT — left text block above the buttons
 * Positioned above the overlay (z-index 3) so the text stays
 * fully opaque. Capped to ~62% of the card width on desktop
 * so the right half of the photograph stays unobstructed.
 * ========================================================= */
.bp-devis-fcta__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-inline-size: 62%;
	min-inline-size: 0;
	text-align: start;
}

/* =========================================================
 * EYEBROW — small green uppercase label with a tiny icon
 * ========================================================= */
.bp-devis-fcta__eyebrow {
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	color: var(--bp-devis-fcta-green);
	font-family: var(--bp-devis-fcta-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-devis-fcta__eyebrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 22px;
	block-size: 22px;
	color: var(--bp-devis-fcta-green);
	flex: 0 0 auto;
}

.bp-devis-fcta__eyebrow-icon,
.bp-devis-fcta__eyebrow-icon i,
.bp-devis-fcta__eyebrow-icon svg,
.bp-devis-fcta__eyebrow-icon svg * {
	color: var(--bp-devis-fcta-green);
	fill: var(--bp-devis-fcta-green);
	stroke: var(--bp-devis-fcta-green);
}

.bp-devis-fcta__eyebrow-icon i,
.bp-devis-fcta__eyebrow-icon svg {
	inline-size: 14px;
	block-size: 14px;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bp-devis-fcta__eyebrow-text {
	display: inline-block;
}

/* =========================================================
 * TITLE — serif display headline, dark green
 * Multiple lines stack with a small inline gap so the
 * two-line title feels intentional, not stacked.
 * ========================================================= */
.bp-devis-fcta__title {
	margin: 6px 0 0;
	font-family: var(--bp-devis-fcta-font-display);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.1;
	letter-spacing: -0.005em;
	color: var(--bp-devis-fcta-text);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bp-devis-fcta__title-line {
	display: block;
}

/* =========================================================
 * DIVIDER — small olive underline between title and body
 * ========================================================= */
.bp-devis-fcta__divider {
	display: block;
	inline-size: 48px;
	block-size: 2px;
	background-color: var(--bp-devis-fcta-olive);
	border-radius: 2px;
	margin-block-start: 6px;
}

/* =========================================================
 * DESCRIPTION — body copy, dark green on desktop, cream on mobile
 * The description defaults to the site dark green (#374F37)
 * so the editorial look is the default. The cream color is
 * scoped to mobile only (see MOBILE block at the bottom of
 * the file) so the paragraph remains readable over the
 * photographic background on phones/tablets.
 * ========================================================= */
.bp-devis-fcta__description {
	margin: 4px 0 0;
	color: #374F37;
	font-family: var(--bp-devis-fcta-font-body);
	font-size: 15px;
	line-height: 1.65;
	max-inline-size: 460px;
	opacity: 0.92;
}

/* =========================================================
 * ACTIONS — 2 buttons side-by-side
 * ========================================================= */
.bp-devis-fcta__actions {
	margin-block-start: 12px;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* =========================================================
 * BUTTONS — shared base
 * The arrow sits in a small circle on the inline-end side of
 * the label. In RTL the circle is drawn on the inline-start
 * side via logical properties (auto-flipped by dir=rtl).
 * ========================================================= */
body.elementor-page-23 .elementor-element.elementor-element-3a42fae .bp-devis-fcta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding-inline: 26px;
	padding-block: 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--bp-devis-fcta-font-body);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	white-space: nowrap;
}

.bp-devis-fcta__btn:focus-visible {
	outline: 2px solid var(--bp-devis-fcta-olive);
	outline-offset: 2px;
}

.bp-devis-fcta__btn-label {
	display: inline-block;
	/* Color is inherited from the parent button:
	 *   primary   → cream (var(--bp-devis-fcta-primary-fg))
	 *   secondary → dark green (var(--bp-devis-fcta-secondary-fg))
	 * Mobile re-applies cream via the MOBILE block at the bottom
	 * of the file so the label stays readable over the photo.
	 */
}

.bp-devis-fcta__btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	background-color: currentColor;
	color: inherit;
	flex: 0 0 auto;
	position: relative;
	isolation: isolate;
}

.bp-devis-fcta__btn-arrow svg {
	inline-size: 12px;
	block-size: 12px;
	display: block;
}

.bp-devis-fcta__btn-arrow svg * {
	stroke: currentColor;
	color: currentColor;
}

/* The arrow circle is filled with white (matching the button
 * text colour) and the SVG stroke uses the dark-green button
 * colour so the icon stays visible against its own circle. */
.bp-devis-fcta__btn--primary .bp-devis-fcta__btn-arrow,
.bp-devis-fcta__btn--secondary .bp-devis-fcta__btn-arrow {
	background-color: #FFFFFF;
}

.bp-devis-fcta__btn--primary .bp-devis-fcta__btn-arrow svg,
.bp-devis-fcta__btn--primary .bp-devis-fcta__btn-arrow svg *,
.bp-devis-fcta__btn--secondary .bp-devis-fcta__btn-arrow svg,
.bp-devis-fcta__btn--secondary .bp-devis-fcta__btn-arrow svg * {
	color: #374F37;
	stroke: #374F37;
}

/* Primary + Secondary: unified dark-green pill matching the
 * approved .bp-pfc__btn--primary reference. No visual
 * primary/secondary distinction. */
body.elementor-page-23 .elementor-element.elementor-element-3a42fae .bp-devis-fcta__btn--primary,
body.elementor-page-23 .elementor-element.elementor-element-3a42fae .bp-devis-fcta__btn--secondary {
	background-color: #374F37;
	color: #FFFFFF;
	border-color: transparent;
}

/* Force the label to white so it can never fall back to a
 * sibling button's color through cascade. */
body.elementor-page-23 .elementor-element.elementor-element-3a42fae .bp-devis-fcta__btn--primary .bp-devis-fcta__btn-label,
body.elementor-page-23 .elementor-element.elementor-element-3a42fae .bp-devis-fcta__btn--secondary .bp-devis-fcta__btn-label {
	color: #FFFFFF;
}

body.elementor-page-23 .elementor-element.elementor-element-3a42fae a.bp-devis-fcta__btn--primary:hover,
body.elementor-page-23 .elementor-element.elementor-element-3a42fae a.bp-devis-fcta__btn--primary:focus-visible,
body.elementor-page-23 .elementor-element.elementor-element-3a42fae a.bp-devis-fcta__btn--secondary:hover,
body.elementor-page-23 .elementor-element.elementor-element-3a42fae a.bp-devis-fcta__btn--secondary:focus-visible {
	background-color: #374F37;
	color: #FFFFFF;
	border-color: transparent;
	transform: translateY(2.37px);
	box-shadow: none;
}

/* =========================================================
 * TABLET (≤ 1024px)
 * Content stays in the left column, slightly tightened.
 * Decoration slots remain in place; the lower-left branch
 * moves up so it never collides with the buttons.
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-devis-fcta { padding: 64px 20px 80px; }

	.bp-devis-fcta__box {
		padding: 44px 40px;
		border-radius: 24px;
		gap: 14px;
		--bp-devis-fcta-box-min-h: 420px;
	}

	.bp-devis-fcta__content { max-inline-size: 60%; }
	.bp-devis-fcta__title { font-size: 32px; }
	.bp-devis-fcta__description { max-inline-size: 100%; font-size: 14.5px; }

	.bp-devis-fcta__decoration--upper_left { inline-size: 150px; block-size: 110px; }
	.bp-devis-fcta__decoration--lower_left { inline-size: 160px; block-size: 120px; inset-block-start: 200px; }
	.bp-devis-fcta__decoration--center { inline-size: 180px; block-size: 130px; }
}

/* =========================================================
 * TABLET PORTRAIT (≤ 860px)
 * Content spans more of the card width. The overlay stays
 * left-heavy so the right half of the photo still peeks.
 * ========================================================= */
@media (max-width: 860px) {
	.bp-devis-fcta { padding: 56px 18px 72px; }

	.bp-devis-fcta__box {
		padding: 40px 32px;
		border-radius: 22px;
		--bp-devis-fcta-box-min-h: 0;
	}

	.bp-devis-fcta__content { max-inline-size: 72%; gap: 14px; }
	.bp-devis-fcta__title { font-size: 30px; }
	.bp-devis-fcta__description { font-size: 14px; }

	.bp-devis-fcta__decoration--lower_left { display: none; }
	.bp-devis-fcta__decoration--center { inline-size: 150px; block-size: 110px; }
}

/* =========================================================
 * MOBILE (≤ 600px)
 * Full stacking. Buttons become full-width, comfortable tap
 * targets. Outer gutters tightened to 16-20px so the card
 * fills the available inner width without touching the
 * physical phone edges. The cream overlay is strengthened
 * so the title remains fully readable even when the photo
 * subject sits on the right.
 *
 * MOBILE WIDTH ARCHITECTURE: explicit
 * `inline-size: 100% / max-inline-size: 100% / min-inline-size: 0`
 * on every key element so the CTA card fills the available
 * inner width (≈ viewport − 2 × gutter) on every phone — not
 * a squeezed desktop column.
 * ========================================================= */
@media (max-width: 600px) {
	.bp-devis-fcta { padding: 48px 16px 56px; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }

	.bp-devis-fcta__box {
		padding: 36px 24px;
		border-radius: 20px;
		gap: 14px;
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		/* Strengthen the cream overlay on mobile so the title
		 * stays fully opaque against the photo. */
		--bp-devis-fcta-overlay-left:  rgba(244, 236, 220, 0.99);
		--bp-devis-fcta-overlay-mid:   rgba(244, 236, 220, 0.85);
		--bp-devis-fcta-overlay-right: rgba(244, 236, 220, 0.25);
	}

	.bp-devis-fcta__content {
		max-inline-size: 100%;
		inline-size: 100%;
		min-inline-size: 0;
		gap: 12px;
	}

	.bp-devis-fcta__eyebrow { font-size: 11.5px; letter-spacing: 0.18em; }
	.bp-devis-fcta__eyebrow-icon { inline-size: 20px; block-size: 20px; }
	.bp-devis-fcta__eyebrow-icon i,
	.bp-devis-fcta__eyebrow-icon svg { inline-size: 13px; block-size: 13px; }

	.bp-devis-fcta__title { font-size: 30px; line-height: 1.1; }
	.bp-devis-fcta__divider { inline-size: 40px; }
	.bp-devis-fcta__description { font-size: 14px; max-inline-size: 100%; }

	.bp-devis-fcta__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		margin-block-start: 6px;
	}

	.bp-devis-fcta__btn {
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		min-block-size: 50px;
		padding-block: 10px;
		font-size: 13.5px;
		justify-content: center;
	}

	.bp-devis-fcta__decoration--upper_left { inline-size: 120px; block-size: 90px; opacity: 0.28; inset-block-start: 6px; inset-inline-start: 10px; }
	.bp-devis-fcta__decoration--center { inline-size: 120px; block-size: 90px; opacity: 0.16; }
}

/* =========================================================
 * SMALL MOBILE (≤ 430px) — iPhone Pro Max band
 * ========================================================= */
@media (max-width: 430px) {
	.bp-devis-fcta { padding: 40px 16px 48px; }

	.bp-devis-fcta__box { padding: 30px 20px; border-radius: 18px; }

	.bp-devis-fcta__title { font-size: 26px; }
	.bp-devis-fcta__description { font-size: 13.5px; }
}

/* =========================================================
 * SMALLER MOBILE (≤ 390px) — iPhone 12/13/14
 * ========================================================= */
@media (max-width: 390px) {
	.bp-devis-fcta { padding: 36px 14px 44px; }

	.bp-devis-fcta__box { padding: 28px 18px; }

	.bp-devis-fcta__title { font-size: 24px; }
}

/* =========================================================
 * TINY MOBILE (≤ 360px) — minimum-width budget
 * 16px minimum gutter. The card uses the full available
 * inner width and never touches the physical phone edge.
 * ========================================================= */
@media (max-width: 360px) {
	.bp-devis-fcta { padding: 32px 16px 40px; }

	.bp-devis-fcta__box { padding: 26px 16px; border-radius: 16px; }

	.bp-devis-fcta__title { font-size: 22px; line-height: 1.12; }
	.bp-devis-fcta__eyebrow { font-size: 11px; letter-spacing: 0.16em; }
	.bp-devis-fcta__btn { min-block-size: 48px; font-size: 13px; padding-inline: 18px; }
}

/* =========================================================
 * Safe-area insets (notched devices)
 * ========================================================= */
@supports (padding: max(0px)) {
	.bp-devis-fcta {
		padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
	}
}

/* =========================================================
 * MOBILE ONLY (≤ 768px) — cream description + button labels
 * The base rules above default to dark green on desktop.
 * On mobile the photographic background is still heavy on
 * the right half of the card, so we re-apply cream with
 * !important to keep the description and every button label
 * (primary + secondary) readable. Scoped under
 * `.bp-devis-fcta` for higher specificity than the base.
 * ========================================================= */
@media (max-width: 768px) {
	.bp-devis-fcta .bp-devis-fcta__description,
	.bp-devis-fcta .bp-devis-fcta__description.is-revealed {
		color: #FBF6EC !important;
	}

	.bp-devis-fcta .bp-devis-fcta__btn-label,
	.bp-devis-fcta .bp-devis-fcta__btn:hover .bp-devis-fcta__btn-label,
	.bp-devis-fcta .bp-devis-fcta__btn:focus .bp-devis-fcta__btn-label,
	.bp-devis-fcta .bp-devis-fcta__btn:focus-visible .bp-devis-fcta__btn-label,
	.bp-devis-fcta .bp-devis-fcta__btn:active .bp-devis-fcta__btn-label {
		color: #FBF6EC !important;
	}
}

/* =========================================================
 * ARABIC / RTL
 * Logical properties handle the visual flip automatically.
 * Display family falls back to the Arabic Noto Sans. The
 * agricultural background photo is NOT mirrored.
 * ========================================================= */
[lang="ar"] .bp-devis-fcta__title,
[dir="rtl"] .bp-devis-fcta__title,
[lang="ar"] .bp-devis-fcta__title-line,
[dir="rtl"] .bp-devis-fcta__title-line {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

[lang="ar"] .bp-devis-fcta__description,
[dir="rtl"] .bp-devis-fcta__description,
[lang="ar"] .bp-devis-fcta__eyebrow,
[dir="rtl"] .bp-devis-fcta__eyebrow,
[lang="ar"] .bp-devis-fcta__btn,
[dir="rtl"] .bp-devis-fcta__btn {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	letter-spacing: 0;
}

/* In RTL the gradient direction still reads "start → end", which
 * produces the same visual fade because `to right` follows the
 * inline axis — the heavy cream is on the inline-start side
 * (right in RTL) and the photo is fully visible on the
 * inline-end side (left in RTL). */

/* =========================================================
 * Reduced motion
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.bp-devis-fcta [data-bp-reveal] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	.bp-devis-fcta__btn { transition: none !important; }
}

/* =========================================================
 * Print
 * ========================================================= */
@media print {
	.bp-devis-fcta { padding: 0 16px; }
	.bp-devis-fcta__box { box-shadow: none; padding: 16px; }
	.bp-devis-fcta__overlay { display: none; }
	.bp-devis-fcta__decoration { display: none; }
}