/* BP Comparison Anacardier widget styles
 *
 * Résultats page "Avec / Sans Barbary Plante" section.
 * Premium editorial comparison block:
 *   - Centered eyebrow + serif title + olive divider + intro
 *   - One large rounded comparison card (1140px) containing:
 *       TOP BAND  : 2 halves (green / cream) + circular "VS"
 *                   badge straddling the center seam
 *       IMAGE AREA: 50/50 split with center divider rail
 *                   (5 small circular nodes) for the comparison
 *                   slider look (static, not interactive)
 *       METRICS   : 3 rows × 3 cells (left value / center icon+
 *                   title / right value) with soft separators
 *   - 4 corner botanical decorations (CSS-positioned; opacity
 *     and width editable from Elementor)
 *
 * Approved palette ONLY:
 *   #374F37  dark green
 *   #FBF6EC  cream (page + card)
 *   #EDDBC3  light cream (right half band + icon bubbles)
 *   #B8B25A  olive / gold
 *   #1F2A1F  ink
 *   #5C6A5C  muted body
 *   #FFFFFF  white
 */

.bp-ca {
	--bp-ca-green:        #374F37;
	--bp-ca-olive:        #B8B25A;
	--bp-ca-cream:        #FBF6EC;
	--bp-ca-light-cream:  #EDDBC3;
	--bp-ca-white:        #FFFFFF;
	--bp-ca-ink:          #1F2A1F;
	--bp-ca-muted:        #5C6A5C;

	--bp-ca-inner-max:    1140px;
	--bp-ca-radius:       20px;

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

	position: relative;
	isolation: isolate;
	/* Full-bleed breakout: the section itself spans edge-to-edge
	 * so the decorative botanicals anchor to the actual viewport
	 * edges (left/right) rather than to the 1140px content column.
	 * The inner wrapper below stays at 1140px and centered. */
	inline-size: 100vw;
	max-inline-size: 100vw;
	min-inline-size: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end: calc(50% - 50vw);
	background-color: transparent;
	color: var(--bp-ca-ink);
	font-family: var(--bp-ca-font-body);
	overflow-x: clip;
}

/* Elementor wraps every widget in `.elementor-widget-bp-…` and
 * constrains the parent column. The same breakout is applied at
 * the widget-container level so the visual edge of the section
 * matches the screen edge in the editor preview. */
.elementor .elementor-widget-bp-comparison-anacardier {
	inline-size: 100vw;
	max-inline-size: 100vw;
	min-inline-size: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end: calc(50% - 50vw);
	position: relative;
	overflow-x: clip;
}

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

/* =========================================================
 * BOTANICAL CORNER DECORATIONS
 * Absolute wrappers; size/opacity set in PHP via inline
 * Elementor controls (see selectors in the widget). The
 * inner <img> uses object-fit: contain so the leaf artwork
 * never crops.
 * ========================================================= */
.bp-ca__botanical {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	display: flex;
	max-inline-size: 38%;
}
.bp-ca__botanical img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 100%;
	object-fit: contain;
}

.bp-ca__botanical--tl {
	inset-block-start: 0;
	left: 0;
	right: auto;
	justify-content: flex-start;
}
.bp-ca__botanical--tr {
	inset-block-start: 0;
	right: 0;
	left: auto;
	justify-content: flex-end;
}
.bp-ca__botanical--bl {
	inset-block-end: 0;
	left: 0;
	right: auto;
	justify-content: flex-start;
	align-items: flex-end;
}
.bp-ca__botanical--br {
	inset-block-end: 0;
	right: 0;
	left: auto;
	justify-content: flex-end;
	align-items: flex-end;
}

/* =========================================================
 * INNER WRAPPER (1140px content)
 * ========================================================= */
.bp-ca__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--bp-ca-inner-max);
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* =========================================================
 * HEADER (eyebrow / title / divider / intro)
 * ========================================================= */
.bp-ca__head {
	position: relative;
	z-index: 1;
	text-align: center;
	max-inline-size: 780px;
	margin-inline: auto;
}

.bp-ca__eyebrow {
	margin: 0 0 10px;
	color: var(--bp-ca-green);
	font-family: var(--bp-ca-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.bp-ca__title {
	margin: 0;
	color: var(--bp-ca-green);
	font-family: var(--bp-ca-font-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.18;
	letter-spacing: 0.01em;
}

/* Decorative divider: line / leaf SVG / line, in olive. */
.bp-ca__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-block: 16px 14px;
}
.bp-ca__divider-line {
	display: block;
	inline-size: 44px;
	block-size: 1px;
	background-color: var(--bp-ca-olive);
}
.bp-ca__divider-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-ca-olive);
	inline-size: 22px;
	block-size: 22px;
}
.bp-ca__divider-leaf svg {
	inline-size: 100%;
	block-size: 100%;
}

.bp-ca__intro {
	margin: 0;
	color: var(--bp-ca-muted);
	font-family: var(--bp-ca-font-body);
	font-weight: 500;
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.55;
	letter-spacing: 0.005em;
}

/* =========================================================
 * COMPARISON CARD
 * ========================================================= */
.bp-ca__card {
	position: relative;
	isolation: isolate;
	inline-size: 100%;
	background-color: var(--bp-ca-cream);
	border-radius: var(--bp-ca-radius);
	box-shadow:
		0 1px 2px rgba(31, 42, 31, 0.05),
		0 12px 30px -14px rgba(31, 42, 31, 0.18),
		0 28px 56px -32px rgba(31, 42, 31, 0.20);
	overflow: hidden;
}

/* ---------- TOP BAND (2 halves + VS badge) ---------- */
.bp-ca__band {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-block-size: 64px;
}

.bp-ca__band-half {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 28px;
	font-family: var(--bp-ca-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bp-ca__band--l {
	background: linear-gradient(180deg, #3F583F 0%, var(--bp-ca-green) 100%);
	color: var(--bp-ca-cream);
	justify-content: flex-start;
	padding-inline-start: clamp(20px, 4vw, 60px);
}
.bp-ca__band--r {
	background: var(--bp-ca-light-cream);
	color: var(--bp-ca-green);
	justify-content: flex-end;
	padding-inline-end: clamp(20px, 4vw, 60px);
}

.bp-ca__band-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.10);
	color: inherit;
	flex: 0 0 auto;
}
.bp-ca__band--r .bp-ca__band-icon {
	background-color: rgba(55, 79, 55, 0.08);
}
.bp-ca__band-icon svg,
.bp-ca__band-icon i {
	inline-size: 14px;
	block-size: 14px;
	color: inherit;
}

.bp-ca__band-label {
	display: inline-block;
}

/* The "VS" badge — absolutely centered on the seam, straddling
 * the band and the image area below. */
.bp-ca__vs {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background-color: var(--bp-ca-white);
	color: var(--bp-ca-green);
	font-family: var(--bp-ca-font-display);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 0.04em;
	box-shadow:
		0 1px 2px rgba(31, 42, 31, 0.10),
		0 8px 20px -8px rgba(31, 42, 31, 0.30);
	z-index: 3;
}

/* ---------- IMAGE COMPARISON AREA ---------- */
.bp-ca__images {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	aspect-ratio: 1140 / 340;
	min-block-size: 280px;
	background-color: #D8C8A8; /* fallback for missing images */
	isolation: isolate;
}

.bp-ca__img-half {
	position: relative;
	overflow: hidden;
	min-block-size: 0;
}
.bp-ca__img-half img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}
.bp-ca__img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	color: rgba(31, 42, 31, 0.55);
	font-family: var(--bp-ca-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: linear-gradient(180deg, #C5B690 0%, #8E7A55 100%);
}

/* Center divider rail with 5 small nodes. */
.bp-ca__divider-rail {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 1px;
	background-color: rgba(255, 255, 255, 0.55);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding-block: 14px;
	z-index: 2;
	pointer-events: none;
}
.bp-ca__node {
	display: block;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background-color: var(--bp-ca-white);
	box-shadow: 0 0 0 1px rgba(55, 79, 55, 0.25);
}

/* ---------- METRICS TABLE ---------- */
.bp-ca__rows {
	display: flex;
	flex-direction: column;
	background-color: var(--bp-ca-cream);
}

.bp-ca__row {
	display: grid;
	grid-template-columns: 1fr 1.1fr 1fr;
	align-items: center;
	column-gap: 24px;
	padding-block: 22px;
	padding-inline: 28px;
}
.bp-ca__row + .bp-ca__row {
	border-top: 1px solid rgba(55, 79, 55, 0.10);
}

.bp-ca__cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-inline-size: 0;
}
.bp-ca__cell--l {
	align-items: flex-end;
	text-align: end;
}
.bp-ca__cell--c {
	align-items: center;
	text-align: center;
	flex-direction: row;
	justify-content: center;
	gap: 14px;
}
.bp-ca__cell--r {
	align-items: flex-start;
	text-align: start;
}

.bp-ca__value {
	display: block;
	font-family: var(--bp-ca-font-display);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.05;
	letter-spacing: 0.005em;
	white-space: nowrap;
}
.bp-ca__cell--l .bp-ca__value { color: var(--bp-ca-green); }
.bp-ca__cell--r .bp-ca__value { color: var(--bp-ca-ink); }

.bp-ca__label {
	display: block;
	font-family: var(--bp-ca-font-body);
	font-weight: 500;
	font-size: clamp(12px, 1vw, 13.5px);
	line-height: 1.3;
	color: var(--bp-ca-muted);
	letter-spacing: 0.005em;
}

.bp-ca__criterion-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background-color: var(--bp-ca-light-cream);
	color: var(--bp-ca-green);
	flex: 0 0 auto;
}
.bp-ca__criterion-icon svg,
.bp-ca__criterion-icon i {
	inline-size: 16px;
	block-size: 16px;
	color: inherit;
}
.bp-ca__criterion-title {
	display: block;
	font-family: var(--bp-ca-font-body);
	font-weight: 800;
	font-size: clamp(12px, 1.05vw, 13.5px);
	line-height: 1.2;
	letter-spacing: 0.06em;
	color: var(--bp-ca-green);
	text-transform: uppercase;
	text-align: start;
	max-inline-size: 9ch;
}

/* =========================================================
 * ICON COLOR OVERRIDES — LIGHT / CREAM SURFACES ONLY
 * Forces every icon rendering form to the Barbary dark green
 * #374F37 on the criterion bubbles and on the right (light)
 * band. Outline icons that ship with fill="none" are
 * preserved (stroke recolored instead). The left dark-green
 * band is intentionally excluded so its icon keeps the cream
 * color inherited from the band.
 * ========================================================= */
.bp-ca__criterion-icon,
.bp-ca__criterion-icon i,
.bp-ca__criterion-icon svg,
.bp-ca__criterion-icon svg path,
.bp-ca__criterion-icon svg circle,
.bp-ca__criterion-icon svg line,
.bp-ca__criterion-icon svg polyline,
.bp-ca__criterion-icon svg polygon,
.bp-ca__criterion-icon svg rect,
.bp-ca__criterion-icon svg g {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}
.bp-ca__criterion-icon svg [fill="none"],
.bp-ca__criterion-icon svg g [fill="none"] {
	fill: none;
	stroke: #374F37;
}

.bp-ca__band--r .bp-ca__band-icon,
.bp-ca__band--r .bp-ca__band-icon i,
.bp-ca__band--r .bp-ca__band-icon svg,
.bp-ca__band--r .bp-ca__band-icon svg path,
.bp-ca__band--r .bp-ca__band-icon svg circle,
.bp-ca__band--r .bp-ca__band-icon svg line,
.bp-ca__band--r .bp-ca__band-icon svg polyline,
.bp-ca__band--r .bp-ca__band-icon svg polygon,
.bp-ca__band--r .bp-ca__band-icon svg rect,
.bp-ca__band--r .bp-ca__band-icon svg g {
	color: #374F37;
	fill: #374F37;
	stroke: #374F37;
}
.bp-ca__band--r .bp-ca__band-icon svg [fill="none"],
.bp-ca__band--r .bp-ca__band-icon svg g [fill="none"] {
	fill: none;
	stroke: #374F37;
}

/* Defensive override — keep the LEFT dark-green band icon
 * cream/light. Inherited `color: var(--bp-ca-cream)` already
 * does this for SVG `currentColor`, but Elementor icon SVGs
 * sometimes ship with explicit fill/stroke attributes that
 * win over inheritance, so we re-assert cream here. */
.bp-ca__band--l .bp-ca__band-icon,
.bp-ca__band--l .bp-ca__band-icon i,
.bp-ca__band--l .bp-ca__band-icon svg,
.bp-ca__band--l .bp-ca__band-icon svg path,
.bp-ca__band--l .bp-ca__band-icon svg circle,
.bp-ca__band--l .bp-ca__band-icon svg line,
.bp-ca__band--l .bp-ca__band-icon svg polyline,
.bp-ca__band--l .bp-ca__band-icon svg polygon,
.bp-ca__band--l .bp-ca__band-icon svg rect,
.bp-ca__band--l .bp-ca__band-icon svg g {
	color: var(--bp-ca-cream);
	fill: var(--bp-ca-cream);
	stroke: var(--bp-ca-cream);
}
.bp-ca__band--l .bp-ca__band-icon svg [fill="none"],
.bp-ca__band--l .bp-ca__band-icon svg g [fill="none"] {
	fill: none;
	stroke: var(--bp-ca-cream);
}

/* =========================================================
 * TABLET — 1024px
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-ca__inner {
		padding-inline: 20px;
	}
	.bp-ca__band-half {
		padding-block: 12px;
		font-size: 12px;
		letter-spacing: 0.12em;
	}
	.bp-ca__band--l { padding-inline-start: 32px; }
	.bp-ca__band--r { padding-inline-end: 32px; }
	.bp-ca__band-icon { inline-size: 26px; block-size: 26px; }
	.bp-ca__vs { inline-size: 48px; block-size: 48px; font-size: 16px; }
	.bp-ca__images {
		aspect-ratio: 900 / 320;
	}
	.bp-ca__row {
		padding-block: 18px;
		padding-inline: 20px;
		column-gap: 16px;
	}
	.bp-ca__criterion-title { font-size: 12px; }
}

/* =========================================================
 * MOBILE — 640px
 * ========================================================= */
@media (max-width: 640px) {
	.bp-ca__botanical--tl,
	.bp-ca__botanical--tr {
		opacity: 0.55;
	}
	.bp-ca__botanical--bl,
	.bp-ca__botanical--br {
		opacity: 0.4;
	}

	.bp-ca__inner {
		padding-inline: 20px;
		gap: 28px;
	}

	/* Band stacks: left half above, right half below; VS badge
	 * floats on the right edge between them. */
	.bp-ca__band {
		grid-template-columns: 1fr;
	}
	.bp-ca__band-half {
		justify-content: center;
		padding-block: 12px;
		padding-inline: 16px;
		text-align: center;
	}
	.bp-ca__vs {
		inline-size: 42px;
		block-size: 42px;
		font-size: 14px;
		inset-block-start: 50%;
	}

	/* Images stay side-by-side but shorter. */
	.bp-ca__images {
		aspect-ratio: 4 / 3;
		min-block-size: 220px;
	}

	/* Metrics stack: each cell becomes a centered row. */
	.bp-ca__row {
		grid-template-columns: 1fr;
		row-gap: 14px;
		padding-block: 18px;
		padding-inline: 16px;
		text-align: center;
	}
	.bp-ca__cell {
		align-items: center !important;
		text-align: center !important;
	}
	.bp-ca__cell--c {
		justify-content: center;
		padding-block: 4px;
		border-block: 1px dashed rgba(55, 79, 55, 0.10);
	}
	.bp-ca__value { white-space: normal; }
	.bp-ca__criterion-title { text-align: center; max-inline-size: none; }
}

/* Narrow-phone gutter scale (authoritative on this widget). */
@media ( max-width: 480px ) {
	.bp-ca__inner {
		padding-inline: 18px;
	}
}

@media ( max-width: 390px ) {
	.bp-ca__inner {
		padding-inline: 18px;
	}
}

@media ( max-width: 360px ) {
	.bp-ca__inner {
		padding-inline: 16px;
	}
}