/* BP Demandez un devis Form widget styles
 *
 * ONE widget, THREE interactive step states. The outer
 * card, the stepper, the right "Pourquoi ces informations"
 * panel and the bottom trust strip stay the same across
 * all three tabs. Only the form content inside the central
 * card is swapped when the user navigates between steps.
 *
 * Visual stack (lowest to highest):
 *   0. Section background (cream)
 *   1. Botanical decoration (top-right, bottom-right)
 *   2. Intro
 *   3. Layout: form card (left) + right info panel
 *   4. Trust strip
 *
 * 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. The form
 * inputs themselves are real <input> / <select> /
 * <textarea> elements; the decorative icons are
 * absolutely-positioned SVG layers that never
 * capture pointer events.
 *
 * No Bootstrap, no jQuery, no GSAP. The front-end JS
 * only handles step navigation, validation feedback,
 * a clean dropdown for the file upload and the AJAX
 * submit; layout is pure CSS.
 */

.bp-devis-form {
	--bp-df-bg: #FBF6EC;

	--bp-df-card-bg: #FFFDF8;
	--bp-df-card-bg-end: #FBF6EC;

	--bp-df-step-active-bg: #374F37;
	--bp-df-step-active-fg: #FBF6EC;
	--bp-df-step-completed-bg: #7A9268;

	--bp-df-field-bg: #FFFEFA;
	--bp-df-field-border: rgba(184, 178, 90, 0.45);
	--bp-df-field-focus: #7A9268;

	--bp-df-opt-bg: #FFFEFA;
	--bp-df-opt-selected-bg: linear-gradient(180deg, #FFFDF2 0%, #F2EBCF 100%);
	--bp-df-opt-selected-border: #7A9268;

	--bp-df-btn-bg: #374F37;
	--bp-df-btn-bg-end: #4A6A3E;
	--bp-df-btn-fg: #FBF6EC;

	--bp-df-panel-bg: rgba(255, 253, 248, 0.78);
	--bp-df-panel-border: rgba(55, 79, 55, 0.10);

	--bp-df-trust-bg: rgba(255, 253, 248, 0.78);
	--bp-df-trust-sep: rgba(55, 79, 55, 0.18);

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

	--bp-df-inner-max: 1140px;

	/* Per-decoration position tokens. These are emitted by
	 * the Elementor controls so the editor sidebar drives the
	 * live preview. Defaults mirror the previous hard-coded
	 * values so the visual stays identical until a value is
	 * changed from the sidebar. */
	--bp-df-deco1-x: -40px;
	--bp-df-deco1-y: -10px;
	--bp-df-deco1-r: -2deg;
	--bp-df-deco2-x: -20px;
	--bp-df-deco2-y: -40px;
	--bp-df-deco2-r: 4deg;

	/* Barbary icon tokens. Dark icons on light surfaces and
	 * light icons on dark surfaces. */
	--bp-df-icon-dark:  #374F37;
	--bp-df-icon-light: #FBF6EC;

	position: relative;
	isolation: isolate;
	inline-size: 100%;
	background: var(--bp-df-bg);
	color: #1F2A1F;
	font-family: var(--bp-df-font-body);
	overflow: hidden;
	padding-block: 0;
	padding-inline: 24px;
}

/* Outer full-bleed breakout (mirror the BP Devis Hero pattern). */
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-form) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-form) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-form) > .e-con,
.elementor-section:has(> .elementor-container .elementor-widget-bp-devis-form) > .e-con > .e-con-inner {
	max-inline-size: none !important;
	inline-size: 100% !important;
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}
.bp-devis-form {
	inline-size: 100vw;
	position: relative;
	margin-inline-start: calc(50% - 50vw);
}

.elementor-18 .elementor-element.elementor-element-pfrmf27543 .bp-devis-form {
	margin-block-start: 100px !important;
}

.bp-devis-form__inner {
	position: relative;
	z-index: 2;
}

/* ---------------- Decorations ----------------
 * Position is driven by per-decoration CSS custom
 * properties so the Elementor controls can override
 * them in real time without touching this file. The
 * defaults below match the previous hard-coded look
 * (--bp-df-deco*-x/y/r declared on .bp-devis-form). */
.bp-devis-form__deco {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.bp-devis-form__deco--top {
	inset-block-start: var(--bp-df-deco1-y);
	right:  var(--bp-df-deco1-x);
	left: auto;
	block-size: auto;
	transform: rotate(var(--bp-df-deco1-r));
}
.bp-devis-form__deco--bottom {
	inset-block-end:   var(--bp-df-deco2-y);
	right:  var(--bp-df-deco2-x);
	left: auto;
	block-size: auto;
	transform: rotate(var(--bp-df-deco2-r));
}

/* ---------------- Intro ---------------- */
.bp-devis-form__intro {
	max-inline-size: 880px;
	margin-inline: auto;
	margin-block-end: clamp(16px, 2vw, 24px);
}
.bp-devis-form__eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: #7A9268;
}
.bp-devis-form__title {
	margin: 0 0 28px;
	padding: 0;
	font-family: var(--bp-df-font-display);
	font-weight: 400;
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.12;
	letter-spacing: -0.005em;
	color: #374F37;
}
.bp-devis-form__title-1 { display: block; }
.bp-devis-form__title-2 { display: block; color: #7A9268; }

/* Header divider — line + diamond + line, mirrors the
 * `.bp-why-choose__divider` reference (40px line · 6px
 * rotated gold diamond · 40px line, 10px gap). */
.bp-devis-form__header-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 24px;
}
.bp-devis-form__header-divider-line {
	display: block;
	inline-size: 40px;
	block-size: 1px;
	background-color: #B8B25A;
}
.bp-devis-form__header-divider-diamond {
	display: block;
	inline-size: 6px;
	block-size: 6px;
	background-color: #B8B25A;
	transform: rotate(45deg);
}
.bp-devis-form__description {
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
	color: #1F2A1F;
	max-inline-size: 720px;
	text-align: center;
}

/* ---------------- Layout (form + right panel) ---------------- */
.bp-devis-form__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 32px;
	align-items: start;
	max-inline-size: 1140px;
	margin-inline: auto;
}

/* ---------------- Form card ---------------- */
.bp-devis-form__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 36px;
	background: linear-gradient(180deg, var(--bp-df-card-bg) 0%, var(--bp-df-card-bg-end) 100%);
	border: 1px solid rgba(55, 79, 55, 0.10);
	border-radius: 24px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 22px 60px -30px rgba(55, 79, 55, 0.18);
}

/* ---------------- Stepper ---------------- */
.bp-devis-form__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding-block-end: 24px;
	border-bottom: 1px solid rgba(55, 79, 55, 0.18);
}
.bp-devis-form__step {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: start;
	font: inherit;
	color: inherit;
}
.bp-devis-form__step:focus-visible {
	outline: 2px solid #7A9268;
	outline-offset: 4px;
	border-radius: 6px;
}
.bp-devis-form__step-circle {
	position: relative;
	inline-size: 44px;
	block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid rgba(55, 79, 55, 0.25);
	color: var(--bp-df-icon-dark);
	background: transparent;
	font-weight: 600;
	font-size: 14px;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
	flex-shrink: 0;
}
.bp-devis-form__step-num,
.bp-devis-form__step-check {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 200ms ease, transform 200ms ease;
}
.bp-devis-form__step-check {
	opacity: 0;
	transform: scale(0.6);
	color: inherit;
}
.bp-devis-form__step-check svg {
	inline-size: 22px;
	block-size: 22px;
}
.bp-devis-form__step-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
	line-height: 1.3;
}
.bp-devis-form__step-title {
	font-weight: 600;
	color: #1F2A1F;
}
.bp-devis-form__step-sub {
	font-size: 12.5px;
	color: rgba(31, 42, 31, 0.62);
}

/* Active state */
.bp-devis-form__step--active .bp-devis-form__step-circle {
	background: var(--bp-df-step-active-bg);
	color: var(--bp-df-step-active-fg);
	border-color: var(--bp-df-step-active-bg);
}
.bp-devis-form__step--active .bp-devis-form__step-title {
	color: #374F37;
}

/* Completed state */
.bp-devis-form__step--completed .bp-devis-form__step-circle {
	background: var(--bp-df-step-completed-bg);
	color: var(--bp-df-icon-light);
	border-color: var(--bp-df-step-completed-bg);
}
.bp-devis-form__step--completed .bp-devis-form__step-num {
	opacity: 0;
	transform: scale(0.6);
}
.bp-devis-form__step--completed .bp-devis-form__step-check {
	opacity: 1;
	transform: scale(1);
}
.bp-devis-form__step--completed .bp-devis-form__step-title {
	color: rgba(31, 42, 31, 0.75);
}

/* ---------------- Panels (one per step) ---------------- */
.bp-devis-form__panels {
	display: block;
}
.bp-devis-form__panel--step {
	display: flex;
	flex-direction: column;
	gap: 20px;
	animation: bp-df-fade-in 320ms ease both;
}
.bp-devis-form__panel--step[hidden] {
	display: none !important;
}

@keyframes bp-df-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------------- Rows & fields ---------------- */
.bp-devis-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.bp-devis-form__row--2 { grid-template-columns: 1fr 1fr; }
.bp-devis-form__row--3 { grid-template-columns: 1.1fr 1.3fr 1.4fr; }

.bp-devis-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-inline-size: 0;
}
.bp-devis-form__field--full { grid-column: 1 / -1; }
.bp-devis-form__label {
	font-size: 13px;
	font-weight: 600;
	color: #374F37;
}
.bp-devis-form__req {
	color: #C97A4E;
	font-weight: 600;
	margin-inline-start: 2px;
}
.bp-devis-form__input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.bp-devis-form__input {
	inline-size: 100%;
	block-size: 48px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 14.5px;
	color: #1F2A1F;
	background: var(--bp-df-field-bg);
	border: 1px solid var(--bp-df-field-border);
	border-radius: 10px;
	transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.bp-devis-form__input::placeholder {
	color: rgba(31, 42, 31, 0.45);
}
.bp-devis-form__input:focus {
	outline: none;
	border-color: var(--bp-df-field-focus);
	box-shadow: 0 0 0 3px rgba(122, 146, 104, 0.18);
	background: #FFFDF8;
}
.bp-devis-form__field--with-icon .bp-devis-form__input {
	padding-inline-end: 44px;
}
.bp-devis-form__input-icon {
	position: absolute;
	inset-inline-end: 14px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	inline-size: 18px;
	block-size: 18px;
	color: var(--bp-df-icon-dark);
	pointer-events: none;
}
.bp-devis-form__input-icon svg {
	inline-size: 18px;
	block-size: 18px;
}

/* Select chevron */
.bp-devis-form__input-wrap--select .bp-devis-form__input {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 44px;
	background-image: none;
}
.bp-devis-form__select-chevron {
	position: absolute;
	inset-inline-end: 14px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 16px;
	block-size: 16px;
	color: var(--bp-df-icon-dark);
	pointer-events: none;
}
.bp-devis-form__select-chevron svg {
	inline-size: 16px;
	block-size: 16px;
}

/* Phone field */
.bp-devis-form__phone {
	display: flex;
	align-items: stretch;
	block-size: 48px;
	background: var(--bp-df-field-bg);
	border: 1px solid var(--bp-df-field-border);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.bp-devis-form__phone:focus-within {
	border-color: var(--bp-df-field-focus);
	box-shadow: 0 0 0 3px rgba(122, 146, 104, 0.18);
}
.bp-devis-form__phone-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 12px;
	border-inline-end: 1px solid var(--bp-df-field-border);
	background: rgba(184, 178, 90, 0.10);
}
.bp-devis-form__phone-flag-emoji { font-size: 16px; }
.bp-devis-form__phone-chevron {
	inline-size: 12px;
	block-size: 12px;
	color: var(--bp-df-icon-dark);
}
.bp-devis-form__phone-chevron svg {
	inline-size: 12px;
	block-size: 12px;
}
.bp-devis-form__phone-dial {
	display: inline-flex;
	align-items: center;
	padding-inline: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #1F2A1F;
	border-inline-end: 1px solid var(--bp-df-field-border);
}
.bp-devis-form__phone-input {
	flex: 1 1 auto;
	block-size: 100%;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	color: #1F2A1F;
	padding-inline: 12px;
}
.bp-devis-form__phone-input:focus { outline: none; }

/* Textarea */
.bp-devis-form__textarea {
	block-size: auto;
	min-block-size: 130px;
	padding: 14px 16px;
	resize: vertical;
	line-height: 1.5;
}

/* ---------------- Option cards (radio / select) ---------------- */
.bp-devis-form__group {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bp-devis-form__group-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #7A9268;
	padding: 0;
}
.bp-devis-form__options {
	display: grid;
	gap: 10px;
}
.bp-devis-form__options--profile { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bp-devis-form__options--crop    { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bp-devis-form__options--soil    { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bp-devis-form__options--mode    { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bp-devis-form__options--request { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.bp-devis-form__option {
	position: relative;
	display: block;
	cursor: pointer;
}
.bp-devis-form__option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	inline-size: 0;
	block-size: 0;
}
.bp-devis-form__option-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 12px;
	text-align: center;
	background: var(--bp-df-opt-bg);
	border: 1px solid var(--bp-df-field-border);
	border-radius: 14px;
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
	min-block-size: 92px;
}
.bp-devis-form__option--sm .bp-devis-form__option-inner {
	padding: 12px 8px;
	gap: 6px;
	min-block-size: 76px;
}
.bp-devis-form__option--lg .bp-devis-form__option-inner {
	padding: 18px 16px;
	gap: 10px;
	min-block-size: 132px;
	text-align: start;
	align-items: flex-start;
}
.bp-devis-form__option-icon {
	inline-size: 26px;
	block-size: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-df-icon-dark);
}
.bp-devis-form__option-icon svg {
	inline-size: 22px;
	block-size: 22px;
}
.bp-devis-form__option--sm .bp-devis-form__option-icon svg { inline-size: 18px; block-size: 18px; }
.bp-devis-form__option-label {
	font-size: 13.5px;
	font-weight: 500;
	color: #1F2A1F;
	line-height: 1.25;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.bp-devis-form__option--lg .bp-devis-form__option-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bp-devis-form__option-title {
	font-size: 15px;
	font-weight: 600;
	color: #1F2A1F;
}
.bp-devis-form__option-desc {
	font-size: 12.5px;
	color: rgba(31, 42, 31, 0.65);
	line-height: 1.4;
	display: flex;
	flex-direction: column;
}
.bp-devis-form__option-check {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: #7A9268;
	color: var(--bp-df-icon-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 180ms ease, transform 180ms ease;
}
.bp-devis-form__option-check svg { inline-size: 12px; block-size: 12px; }
.bp-devis-form__option--lg .bp-devis-form__option-check {
	inset-block-start: 12px;
	inset-inline-end: 12px;
}

.bp-devis-form__option:hover .bp-devis-form__option-inner {
	border-color: rgba(122, 146, 104, 0.5);
	box-shadow: 0 6px 16px -10px rgba(55, 79, 55, 0.25);
}
.bp-devis-form__option input:checked + .bp-devis-form__option-inner {
	background: var(--bp-df-opt-selected-bg);
	border-color: var(--bp-df-opt-selected-border);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 6px 14px -10px rgba(122, 146, 104, 0.45);
}
.bp-devis-form__option input:checked + .bp-devis-form__option-inner .bp-devis-form__option-check {
	opacity: 1;
	transform: scale(1);
}
.bp-devis-form__option input:focus-visible + .bp-devis-form__option-inner {
	outline: 2px solid var(--bp-df-field-focus);
	outline-offset: 2px;
}

/* ---------------- Pills (product, formulation) ---------------- */
.bp-devis-form__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.bp-devis-form__pill {
	cursor: pointer;
}
.bp-devis-form__pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	inline-size: 0;
	block-size: 0;
}
.bp-devis-form__pill-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: #1F2A1F;
	background: var(--bp-df-opt-bg);
	border: 1px solid var(--bp-df-field-border);
	border-radius: 999px;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.bp-devis-form__pill:hover .bp-devis-form__pill-inner {
	border-color: rgba(122, 146, 104, 0.5);
}
.bp-devis-form__pill input:checked + .bp-devis-form__pill-inner {
	background: linear-gradient(180deg, #374F37 0%, #4A6A3E 100%);
	color: var(--bp-df-icon-light);
	border-color: #374F37;
}
.bp-devis-form__pill input:focus-visible + .bp-devis-form__pill-inner {
	outline: 2px solid var(--bp-df-field-focus);
	outline-offset: 2px;
}

/* ---------------- Upload ---------------- */
.bp-devis-form__upload {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bp-devis-form__upload-label {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	background: rgba(255, 253, 248, 0.6);
	border: 1.5px dashed var(--bp-df-field-border);
	border-radius: 14px;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease;
}
.bp-devis-form__upload-label:hover {
	background: rgba(255, 253, 248, 0.85);
	border-color: #7A9268;
}
.bp-devis-form__upload-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	inline-size: 0;
	block-size: 0;
}
.bp-devis-form__upload-icon {
	inline-size: 26px;
	block-size: 26px;
	color: var(--bp-df-icon-dark);
	margin-block-end: 4px;
}
.bp-devis-form__upload-icon svg { inline-size: 22px; block-size: 22px; }
.bp-devis-form__upload-title {
	font-size: 14px;
	font-weight: 600;
	color: #1F2A1F;
}
.bp-devis-form__upload-help {
	font-size: 12.5px;
	color: rgba(31, 42, 31, 0.6);
}
.bp-devis-form__upload-result {
	font-size: 13px;
	color: #7A9268;
	font-weight: 500;
	padding: 8px 12px;
	background: rgba(122, 146, 104, 0.10);
	border-radius: 8px;
}

/* Honeypot */
.bp-devis-form__honeypot {
	position: absolute !important;
	inline-size: 0 !important;
	block-size: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ---------------- Footer (confidentiality + buttons) ---------------- */
.bp-devis-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block-start: 16px;
	border-block-start: 1px solid rgba(55, 79, 55, 0.10);
	flex-wrap: wrap;
}
.bp-devis-form__confidential {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	color: rgba(31, 42, 31, 0.7);
	line-height: 1.45;
	max-inline-size: 360px;
}
.bp-devis-form__confidential-icon {
	inline-size: 18px;
	block-size: 18px;
	color: var(--bp-df-icon-dark);
	flex-shrink: 0;
	margin-block-start: 1px;
}
.bp-devis-form__confidential-icon svg { inline-size: 18px; block-size: 18px; }
.bp-devis-form__confidential-text { display: flex; flex-direction: column; gap: 1px; }
.bp-devis-form__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.bp-devis-form__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bp-df-btn-fg);
	background: linear-gradient(180deg, var(--bp-df-btn-bg) 0%, var(--bp-df-btn-bg-end) 100%);
	border: 1px solid var(--bp-df-btn-bg);
	border-radius: 999px;
	cursor: pointer;
	transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
	box-shadow: 0 10px 24px -16px rgba(55, 79, 55, 0.45);
}
.bp-devis-form__btn:hover {
	filter: brightness(1.05);
	box-shadow: 0 14px 30px -16px rgba(55, 79, 55, 0.55);
}
.bp-devis-form__btn:focus-visible {
	outline: 2px solid #7A9268;
	outline-offset: 3px;
}
.bp-devis-form__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	filter: none;
}
.bp-devis-form__btn-arrow { display: inline-flex; }
.bp-devis-form__btn-arrow svg { inline-size: 16px; block-size: 16px; }
.bp-devis-form__btn--back {
	background: transparent;
	border-color: var(--bp-df-field-border);
	color: #1F2A1F;
	box-shadow: none;
}
.bp-devis-form__btn--back:hover {
	background: rgba(184, 178, 90, 0.10);
	border-color: rgba(122, 146, 104, 0.6);
	box-shadow: none;
}

/* Feedback line */
.bp-devis-form__feedback {
	margin: 0;
	font-size: 13.5px;
	color: #C97A4E;
	font-weight: 500;
	min-block-size: 18px;
}
.bp-devis-form__feedback[data-state="success"] { color: #7A9268; }
.bp-devis-form__feedback[data-state="pending"] { color: #B8B25A; }

/* ---------------- Right info panel ---------------- */
.bp-devis-form__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 26px;
	background: var(--bp-df-panel-bg);
	border: 1px solid var(--bp-df-panel-border);
	border-radius: 24px;
	box-shadow: 0 22px 60px -30px rgba(55, 79, 55, 0.18);
}
.bp-devis-form__panel-top {
	display: flex;
	justify-content: center;
}
.bp-devis-form__panel-icon {
	inline-size: 56px;
	block-size: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(180deg, #FFFDF2 0%, #F2EBCF 100%);
	color: var(--bp-df-icon-dark);
	border: 1px solid rgba(184, 178, 90, 0.4);
}
.bp-devis-form__panel-icon svg { inline-size: 26px; block-size: 26px; }
.bp-devis-form__panel-title {
	margin: 0;
	text-align: center;
	font-family: var(--bp-df-font-display);
	font-size: 22px;
	font-weight: 400;
	color: #374F37;
}
.bp-devis-form__panel-divider {
	display: block;
	inline-size: 36px;
	block-size: 1.5px;
	background: #B8B25A;
	border-radius: 1px;
	margin-inline: auto;
}
.bp-devis-form__panel-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.bp-devis-form__panel-item {
	display: flex;
	gap: 14px;
	position: relative;
	padding-block-end: 18px;
}
.bp-devis-form__panel-item:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: 22px;
	inset-block-end: 0;
	block-size: 18px;
	border-inline-start: 1.5px dashed rgba(122, 146, 104, 0.35);
}
.bp-devis-form__panel-item-icon {
	inline-size: 44px;
	block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(180deg, #FFFDF2 0%, #F2EBCF 100%);
	color: var(--bp-df-icon-dark);
	border: 1px solid rgba(184, 178, 90, 0.4);
	flex-shrink: 0;
}
.bp-devis-form__panel-item-icon svg { inline-size: 20px; block-size: 20px; }
.bp-devis-form__panel-item-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #1F2A1F;
}
.bp-devis-form__panel-item-title {
	font-weight: 600;
	color: #1F2A1F;
}
.bp-devis-form__panel-item-desc {
	font-size: 12.5px;
	color: rgba(31, 42, 31, 0.65);
	display: flex;
	flex-direction: column;
}

/* ---------------- Trust strip ---------------- */
.bp-devis-form__trust {
	list-style: none;
	margin: 32px auto 0;
	padding: 22px 28px;
	max-inline-size: 1140px;
	background: var(--bp-df-trust-bg);
	border: 1px solid var(--bp-df-panel-border);
	border-radius: 18px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.bp-devis-form__trust-item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding-inline: 16px;
	position: relative;
}
.bp-devis-form__trust-item:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-end: -1px;
	inset-block-start: 8px;
	inset-block-end: 8px;
	border-inline-end: 1px solid var(--bp-df-trust-sep);
}
.bp-devis-form__trust-icon {
	inline-size: 28px;
	block-size: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-df-icon-dark);
	flex-shrink: 0;
}
.bp-devis-form__trust-icon svg { inline-size: 22px; block-size: 22px; }
.bp-devis-form__trust-text {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	line-height: 1.35;
	color: #1F2A1F;
}
.bp-devis-form__trust-title { font-weight: 600; }
.bp-devis-form__trust-sub { font-size: 12px; color: rgba(31, 42, 31, 0.65); }

/* ---------------- Scoped SVG icon color cascade ----------------
 * Everything is scoped to this widget's root class. SVGs inherit
 * the parent `color` via `currentColor` so any icon color change
 * at the parent level (light surface -> dark icon, dark surface
 * -> light icon) cascades automatically. Explicit `fill="none"`
 * and `stroke="none"` overrides are preserved so outline icons
 * stay outlined and bare-stroke icons stay bare.
 *
 * Rules stay under `.bp-devis-form` so they never leak to other
 * widgets or to global icon utilities. No naked `svg { }`,
 * `path { }`, `i { }` or `.icon { }` selectors are introduced. */
.bp-devis-form svg {
	fill: currentColor;
	stroke: currentColor;
}
.bp-devis-form svg [fill="none"],
.bp-devis-form svg[fill="none"] {
	fill: none;
}
.bp-devis-form svg [stroke="none"],
.bp-devis-form svg[stroke="none"] {
	stroke: none;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
	.bp-devis-form__layout {
		grid-template-columns: 1fr;
	}
	.bp-devis-form__options--profile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bp-devis-form__options--crop    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bp-devis-form__options--soil    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bp-devis-form__options--mode    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bp-devis-form__options--request { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-devis-form__trust { grid-template-columns: repeat(2, 1fr); }
	.bp-devis-form__trust-item:not(:nth-child(2n))::after {
		border-inline-end: 1px solid var(--bp-df-trust-sep);
	}
	.bp-devis-form__trust-item:nth-child(2n)::after {
		border-inline-end: 0;
	}
}

@media (max-width: 768px) {
	.bp-devis-form { padding-block: 56px; padding-inline: 18px; }
	.bp-devis-form__card { padding: 24px; }
	.bp-devis-form__row,
	.bp-devis-form__row--2,
	.bp-devis-form__row--3 {
		grid-template-columns: 1fr;
	}
	.bp-devis-form__steps {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.bp-devis-form__step {
		padding: 8px 12px;
		border-radius: 10px;
		background: rgba(255, 253, 248, 0.4);
	}
	.bp-devis-form__step--active {
		background: rgba(122, 146, 104, 0.10);
	}
	.bp-devis-form__step-circle { inline-size: 36px; block-size: 36px; }
	.bp-devis-form__options--profile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bp-devis-form__options--crop    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bp-devis-form__options--soil    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bp-devis-form__options--mode    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-devis-form__options--request { grid-template-columns: 1fr; }
	.bp-devis-form__footer { flex-direction: column; align-items: stretch; }
	.bp-devis-form__actions { width: 100%; }
	.bp-devis-form__btn { width: 100%; justify-content: center; }
	.bp-devis-form__btn--back { width: 100%; justify-content: center; }
	/* Decoration width / opacity / position are now driven by
	 * the Elementor responsive controls (see --bp-df-deco*-x/y/r
	 * + inline-size selectors). The previous hard-coded media
	 * overrides were removed so the sidebar is the single source
	 * of truth. */
}

@media (max-width: 480px) {
	.bp-devis-form { padding-inline: 16px; }
	.bp-devis-form__card { padding: 20px; border-radius: 20px; }
	.bp-devis-form__options--profile,
	.bp-devis-form__options--crop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-devis-form__options--soil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-devis-form__trust { grid-template-columns: 1fr; padding: 18px; }
	.bp-devis-form__trust-item::after { display: none !important; }
	.bp-devis-form__trust-item { padding-inline: 0; padding-block: 10px; }
	.bp-devis-form__trust-item:not(:last-child) { border-block-end: 1px solid var(--bp-df-trust-sep); }
	.bp-devis-form__input { block-size: 46px; font-size: 14px; }
	.bp-devis-form__phone { block-size: 46px; }
	.bp-devis-form__title { font-size: clamp(28px, 7vw, 40px); }
	/* Mobile: drop the fixed intro/description max-widths so the
	 * heading and supporting text can wrap naturally inside the
	 * section padding. No forced breaks, no fixed line counts. */
	.bp-devis-form__intro,
	.bp-devis-form__description { max-inline-size: 100%; }
	.bp-devis-form__title-1,
	.bp-devis-form__title-2 { display: inline; }
	.bp-devis-form__title-2::before { content: " "; }
	.bp-devis-form__description { text-align: start; }
	/* Decoration width / opacity are now driven by the
	 * Elementor responsive controls (see deco1/2_width and
	 * deco1/2_opacity). The previous hard-coded media
	 * overrides were removed so the sidebar stays the
	 * single source of truth. */
}

/* ---------------- RTL ----------------
 * Logical properties already cover most of the layout, but
 * a couple of one-offs (phone flag/dial order, check icon
 * position on request cards) get an explicit RTL rule so
 * /ar/ stays a 1:1 mirror of /fr/ without a separate
 * stylesheet. */
[dir="rtl"] .bp-devis-form__phone-flag { border-inline-end: 0; border-inline-start: 1px solid var(--bp-df-field-border); }
[dir="rtl"] .bp-devis-form__phone-dial  { border-inline-end: 0; border-inline-start: 1px solid var(--bp-df-field-border); }
[dir="rtl"] .bp-devis-form__panel-item-icon svg,
[dir="rtl"] .bp-devis-form__option-icon svg { transform: scaleX(1); }
[dir="rtl"] .bp-devis-form__btn--back .bp-devis-form__btn-arrow svg { transform: scaleX(-1); }

/* =============================================================
 * Product-page compact CTA (.bp-dev-cta)
 *
 * Replaces the full quote form on /produit/ (PID 18). No form,
 * no multi-step, no JS hooks — just a signpost to the dedicated
 * Demander un devis page and the Contact page. Reuses the
 * shared 1140px / 48px / 999px / 13px design tokens. Approved
 * palette only.
 * ============================================================= */
.bp-dev-cta {
	--bp-dev-cta-bg:        #FBF6EC;
	--bp-dev-cta-border:    #E4DCCB;
	--bp-dev-cta-fg:        #1F2A1F;
	--bp-dev-cta-muted:     #5C6A5C;
	--bp-dev-cta-note:      #7A8470;
	--bp-dev-cta-accent:    #374F37;
	--bp-dev-cta-gold:      #B8B25A;
	--bp-dev-cta-radius:    24px;
	--bp-dev-cta-shadow:    0 8px 24px rgba(31, 42, 31, 0.08);
	--bp-dev-cta-font:      var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-dev-cta-display:   var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	font-family: var(--bp-dev-cta-font);
	color: var(--bp-dev-cta-fg);
	box-sizing: border-box;
	padding-block: 56px;
}

.bp-dev-cta *,
.bp-dev-cta *::before,
.bp-dev-cta *::after { box-sizing: border-box; }

.bp-dev-cta__inner {
	inline-size: 100%;
	max-inline-size: 1140px;
	margin-inline: auto;
	padding-inline: 24px;
}

.bp-dev-cta__card {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	background: var(--bp-dev-cta-bg);
	border: 1px solid var(--bp-dev-cta-border);
	border-radius: var(--bp-dev-cta-radius);
	box-shadow: var(--bp-dev-cta-shadow);
	padding: 44px 48px;
}

/* ---------- Left column: copy + actions + benefits ---------- */
.bp-dev-cta__copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-inline-size: 0;
}

.bp-dev-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-dev-cta-accent);
}

.bp-dev-cta__eyebrow::before,
.bp-dev-cta__eyebrow::after {
	content: "";
	block-size: 1px;
	inline-size: 28px;
	background: var(--bp-dev-cta-gold);
	opacity: 0.8;
}

.bp-dev-cta__title {
	margin: 0;
	font-family: var(--bp-dev-cta-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1.18;
	letter-spacing: 0.005em;
	color: var(--bp-dev-cta-fg);
	max-inline-size: 18ch;
}

.bp-dev-cta__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bp-dev-cta-muted);
	max-inline-size: 52ch;
}

.bp-dev-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 6px;
}

.bp-dev-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding-inline: 24px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease,
		border-color 0.2s ease, transform 0.2s ease;
}

.bp-dev-cta__btn--primary {
	background: #374F37 !important;
	color: #FFFFFF !important;
	border: 1px solid #374F37;
}
.bp-dev-cta__btn--primary:hover,
.bp-dev-cta__btn--primary:focus-visible {
	background: #2A3F2A !important;
	border-color: #2A3F2A;
	transform: translateY(-1px);
}

.bp-dev-cta__btn--ghost {
	background: transparent !important;
	color: #374F37 !important;
	border: 1.5px solid #374F37;
}
.bp-dev-cta__btn--ghost:hover,
.bp-dev-cta__btn--ghost:focus-visible {
	background: rgba(55, 79, 55, 0.06) !important;
}

.bp-dev-cta__btn-arrow {
	display: inline-flex;
	align-items: center;
}

/* ---------- 4 compact benefit items ---------- */
.bp-dev-cta__benefits {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}

.bp-dev-cta__benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--bp-dev-cta-fg);
}

.bp-dev-cta__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 999px;
	background: rgba(55, 79, 55, 0.08);
	color: var(--bp-dev-cta-accent);
	flex: 0 0 26px;
}

.bp-dev-cta__benefit-icon svg {
	inline-size: 13px;
	block-size: 13px;
}

.bp-dev-cta__note {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bp-dev-cta-note);
	font-style: italic;
}

/* ---------- Right column: branded visual ---------- */
.bp-dev-cta__visual {
	position: relative;
	min-inline-size: 0;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: #F6EFE3;
	box-shadow: 0 12px 32px rgba(31, 42, 31, 0.12);
}

.bp-dev-cta__visual-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.bp-dev-cta__visual-fallback {
	inline-size: 100%;
	block-size: 100%;
}

.bp-dev-cta__visual-fallback svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* ---------- Tablet (≤ 960px) ---------- */
@media (max-width: 960px) {
	.bp-dev-cta__card {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 36px 32px;
	}
	.bp-dev-cta__title { max-inline-size: none; }
	.bp-dev-cta__visual { aspect-ratio: 16 / 10; }
}

/* ---------- Mobile (≤ 720px) ---------- */
@media (max-width: 720px) {
	.bp-dev-cta { padding-block: 40px; }
	.bp-dev-cta__card { padding: 28px 22px; gap: 24px; }
	.bp-dev-cta__benefits { grid-template-columns: 1fr; gap: 10px; }
	.bp-dev-cta__actions { flex-direction: column; align-items: stretch; }
	.bp-dev-cta__btn { inline-size: 100%; }
}

/* ---------- Small mobile (≤ 480px) ---------- */
@media (max-width: 480px) {
	.bp-dev-cta__card { padding: 24px 18px; border-radius: 18px; }
	.bp-dev-cta__visual { border-radius: 14px; }
}