/* BP Case Study 02 — Anacardier widget styles
 *
 * Résultats page "ÉTUDE DE CAS 02 — Anacardier" section.
 *
 * Two-column editorial composition:
 *   .bp-csa
 *     .bp-csa__inner
 *       .bp-csa__top                       2-col grid (image / content)
 *         .bp-csa__left                    tall image + dark-green footer
 *         .bp-csa__right                   header + trial-info + results panel
 *       .bp-csa__conclusion                rounded cream strip (researcher + 4 benefits)
 *       .bp-csa__source                    small italic source note
 *     .bp-csa__botanical                   absolute cashew line-art behind content
 *
 * Approved palette ONLY:
 *   #374F37  dark green
 *   #FBF6EC  cream (page)
 *   #EDDBC3  light cream (cards/strips)
 *   #B8B25A  olive / gold
 *   #1F2A1F  ink
 *   #FFFFFF  white
 */

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

	--bp-csa-inner-max:     1140px;
	--bp-csa-font-body:     var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-csa-font-display:  var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: 80px;
	padding-inline: 0;
	background-color: transparent;
	color: var(--bp-csa-ink);
	font-family: var(--bp-csa-font-body);
	overflow-x: clip;
}

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

.bp-csa .bp-csa__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 32px;
	inline-size: 100%;
	max-inline-size: var(--bp-csa-inner-max);
	margin-inline: auto;
	padding-inline: 24px;
}

/* =========================================================
 * BOTANICAL DECOR (line-art behind content)
 * ========================================================= */
.bp-csa .bp-csa__botanical {
	position: absolute;
	inset-block-start: 20px;
	right: 0;
	left: auto;
	z-index: 0;
	pointer-events: none;
	inline-size: 460px;
	max-inline-size: 38%;
	opacity: 0.55;
	color: var(--bp-csa-olive);
	display: flex;
	justify-content: flex-end;
}

.bp-csa .bp-csa__botanical-svg,
.bp-csa .bp-csa__botanical-img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	color: inherit;
}

.bp-csa .bp-csa__botanical-img {
	object-fit: contain;
}

/* =========================================================
 * TOP — 2-COLUMN COMPOSITION
 * ========================================================= */
.bp-csa .bp-csa__top {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	column-gap: 40px;
	row-gap: 32px;
	align-items: stretch;
}

/* ----- LEFT : image + dark-green footer ----- */
.bp-csa .bp-csa__left {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bp-csa .bp-csa__image-frame {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--bp-csa-light-cream);
	box-shadow:
		0 1px 2px rgba(31, 42, 31, 0.06),
		0 10px 24px -10px rgba(31, 42, 31, 0.18),
		0 24px 48px -28px rgba(31, 42, 31, 0.22);
	block-size: 100%;
}

.bp-csa .bp-csa__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	flex: 1 1 auto;
	object-fit: cover;
	object-position: center;
	aspect-ratio: 4 / 5;
	min-block-size: 520px;
}

.bp-csa .bp-csa__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	aspect-ratio: 4 / 5;
	min-block-size: 520px;
	background: linear-gradient(180deg, var(--bp-csa-light-cream) 0%, #d8c8a8 100%);
}

.bp-csa .bp-csa__image-placeholder svg {
	inline-size: 64px;
	block-size: 64px;
	color: var(--bp-csa-green);
	opacity: 0.6;
}

/* Dark-green information strip attached to the bottom of the image */
.bp-csa .bp-csa__image-footer {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	background-color: var(--bp-csa-green);
	color: var(--bp-csa-cream);
	padding: 18px 16px;
}

.bp-csa .bp-csa__footer-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-inline: 10px;
	text-align: start;
}

.bp-csa .bp-csa__footer-block + .bp-csa__footer-block {
	border-inline-start: 1px solid rgba(251, 246, 236, 0.25);
}

.bp-csa .bp-csa__footer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	inline-size: 18px;
	block-size: 18px;
	margin-block-end: 2px;
	color: var(--bp-csa-cream);
	fill: currentColor;
}

.bp-csa .bp-csa__footer-icon svg,
.bp-csa .bp-csa__footer-icon i {
	inline-size: 18px;
	block-size: 18px;
	color: inherit;
	fill: currentColor;
}

.bp-csa .bp-csa__footer-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	opacity: 0.78;
	line-height: 1.25;
}

.bp-csa .bp-csa__footer-value {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bp-csa-cream);
	white-space: pre-line;
}

/* ----- RIGHT : header + trial-info + results panel ----- */
.bp-csa .bp-csa__right {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.bp-csa .bp-csa__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-csa-green);
}

.bp-csa .bp-csa__eyebrow-line {
	display: inline-block;
	inline-size: 36px;
	block-size: 2px;
	background-color: var(--bp-csa-olive);
	border-radius: 2px;
}

.bp-csa .bp-csa__eyebrow-text {
	line-height: 1;
}

.bp-csa .bp-csa__title {
	margin: 0;
	font-family: var(--bp-csa-font-display);
	font-weight: 400;
	font-size: 44px;
	line-height: 1.1;
	color: var(--bp-csa-green);
	letter-spacing: -0.01em;
}

.bp-csa .bp-csa__intro {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--bp-csa-ink);
	max-inline-size: 56ch;
}

/* ----- TRIAL INFO ROW (3 blocks) ----- */
.bp-csa .bp-csa__trial {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-block-start: 4px;
}

.bp-csa .bp-csa__trial-block {
	display: grid;
	grid-template-columns: 28px 1fr;
	grid-template-rows: auto auto;
	column-gap: 10px;
	row-gap: 2px;
	padding-inline: 18px;
	align-items: start;
}

.bp-csa .bp-csa__trial-block:first-child {
	padding-inline-start: 0;
}

.bp-csa .bp-csa__trial-block + .bp-csa__trial-block {
	border-inline-start: 1px solid rgba(55, 79, 55, 0.18);
}

.bp-csa .bp-csa__trial-icon {
	grid-row: 1 / span 2;
	inline-size: 24px;
	block-size: 24px;
	color: var(--bp-csa-green);
	fill: currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bp-csa .bp-csa__trial-icon svg,
.bp-csa .bp-csa__trial-icon i {
	inline-size: 24px;
	block-size: 24px;
	color: inherit;
	fill: currentColor;
}

.bp-csa .bp-csa__trial-value {
	font-size: 17px;
	font-weight: 700;
	color: var(--bp-csa-green);
	line-height: 1.2;
}

.bp-csa .bp-csa__trial-label {
	font-size: 12px;
	color: var(--bp-csa-ink);
	line-height: 1.4;
}

/* =========================================================
 * RESULTS PANEL
 * ========================================================= */
.bp-csa .bp-csa__results {
	position: relative;
	margin-block-start: 8px;
	background-color: var(--bp-csa-cream);
	border: 1px solid rgba(55, 79, 55, 0.10);
	border-radius: 18px;
	padding: 32px 28px;
	box-shadow: 0 10px 28px -18px rgba(31, 42, 31, 0.20);
}

.bp-csa .bp-csa__results-heading-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 24px 0;
}

.bp-csa .bp-csa__results-line {
	inline-size: 60px;
	block-size: 1px;
	background-color: var(--bp-csa-olive);
}

.bp-csa .bp-csa__results-dot {
	inline-size: 5px;
	block-size: 5px;
	background-color: var(--bp-csa-olive);
	border-radius: 50%;
}

.bp-csa .bp-csa__results-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-csa-green);
	white-space: nowrap;
}

/* Stages — equal-width grid */
.bp-csa .bp-csa__stages {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

.bp-csa .bp-csa__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-block-start: 6px;
	height: 100%;
	flex: 1 1 auto;
}

.bp-csa .bp-csa__stage-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background-color: var(--bp-csa-green);
	color: var(--bp-csa-cream);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-block-end: 2px;
	fill: currentColor;
}

.bp-csa .bp-csa__stage-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-csa-green);
	text-align: center;
	line-height: 1.2;
}

.bp-csa .bp-csa__stage-icon {
	inline-size: 32px;
	block-size: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-csa-green);
	fill: currentColor;
	margin-block-end: 4px;
}

.bp-csa .bp-csa__stage-icon svg,
.bp-csa .bp-csa__stage-icon i {
	inline-size: 30px;
	block-size: 30px;
	color: inherit;
	fill: currentColor;
}

.bp-csa .bp-csa__stage-icon svg {
	stroke: currentColor;
	fill: none;
}

/* Stage pair (Avec / Témoin) */
.bp-csa .bp-csa__stage-pair {
	display: flex;
	flex-direction: column;
	gap: 6px;
	inline-size: 100%;
	flex: 1 1 auto;
	justify-content: stretch;
}

.bp-csa .bp-csa__compare {
	display: flex;
	flex-direction: column;
	background-color: var(--bp-csa-white);
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(55, 79, 55, 0.08);
	box-shadow: 0 4px 10px -8px rgba(31, 42, 31, 0.20);
	flex: 1 1 auto;
}

.bp-csa .bp-csa__with-header,
.bp-csa .bp-csa__ctrl-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 6px 6px;
	text-align: center;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.bp-csa .bp-csa__with-header {
	background-color: var(--bp-csa-green);
	color: var(--bp-csa-cream);
}

.bp-csa .bp-csa__ctrl-header {
	background-color: var(--bp-csa-light-cream);
	color: var(--bp-csa-green);
}

.bp-csa .bp-csa__with-text,
.bp-csa .bp-csa__ctrl-text {
	font-weight: 700;
}

.bp-csa .bp-csa__ctrl-sub {
	font-size: 8px;
	font-weight: 500;
	letter-spacing: 0.08em;
	opacity: 0.78;
}

.bp-csa .bp-csa__compare-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 10px 14px;
}

.bp-csa .bp-csa__stage-metric {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 6px;
	row-gap: 0;
	font-size: 10px;
	color: var(--bp-csa-ink);
}

.bp-csa .bp-csa__stage-metric .bp-csa__stage-clock {
	inline-size: 12px;
	block-size: 12px;
	color: var(--bp-csa-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	fill: currentColor;
}

.bp-csa .bp-csa__stage-metric .bp-csa__stage-clock svg,
.bp-csa .bp-csa__stage-metric .bp-csa__stage-clock i {
	inline-size: 12px;
	block-size: 12px;
	color: inherit;
	fill: currentColor;
}

.bp-csa .bp-csa__stage-value {
	font-family: var(--bp-csa-font-display);
	font-size: 22px;
	font-weight: 400;
	color: var(--bp-csa-green);
	line-height: 1;
}

.bp-csa .bp-csa__stage-label {
	font-size: 10px;
	color: var(--bp-csa-ink);
	line-height: 1.3;
}

.bp-csa .bp-csa__stage-support {
	margin: 4px 0 0 0;
	font-size: 10px;
	line-height: 1.45;
	color: var(--bp-csa-ink);
}

/* Stage connector (subtle horizontal line + dot) */
.bp-csa .bp-csa__stage-connector {
	position: absolute;
	inset-block-start: 22px;
	inset-inline-start: 100%;
	inline-size: 16px;
	block-size: 1px;
	background-color: var(--bp-csa-olive);
	transform: translateX(-8px);
	pointer-events: none;
}

.bp-csa .bp-csa__stage--last .bp-csa__stage-connector {
	display: none;
}

/* =========================================================
 * BOTTOM CONCLUSION STRIP
 * ========================================================= */
.bp-csa .bp-csa__conclusion {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.3fr);
	column-gap: 24px;
	align-items: center;
	background-color: #F3EBD9;
	border: 1px solid rgba(55, 79, 55, 0.10);
	border-radius: 18px;
	padding: 24px 28px;
	box-shadow: 0 10px 28px -18px rgba(31, 42, 31, 0.18);
}

.bp-csa .bp-csa__conclusion-left {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.bp-csa .bp-csa__conclusion-icon {
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background-color: var(--bp-csa-green);
	color: var(--bp-csa-cream);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	fill: currentColor;
}

.bp-csa .bp-csa__conclusion-icon svg,
.bp-csa .bp-csa__conclusion-icon i {
	inline-size: 24px;
	block-size: 24px;
	color: inherit;
	fill: currentColor;
}

.bp-csa .bp-csa__conclusion-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.bp-csa .bp-csa__conclusion-title {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-csa-green);
}

.bp-csa .bp-csa__conclusion-body {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--bp-csa-ink);
}

.bp-csa .bp-csa__conclusion-divider {
	inline-size: 1px;
	block-size: 60px;
	background-color: rgba(55, 79, 55, 0.18);
}

.bp-csa .bp-csa__conclusion-benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 8px;
	align-items: center;
}

.bp-csa .bp-csa__conclusion-benefit {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.bp-csa .bp-csa__conclusion-benefit-icon {
	inline-size: 24px;
	block-size: 24px;
	color: var(--bp-csa-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	fill: currentColor;
}

.bp-csa .bp-csa__conclusion-benefit-icon svg,
.bp-csa .bp-csa__conclusion-benefit-icon i {
	inline-size: 22px;
	block-size: 22px;
	color: inherit;
	fill: currentColor;
}

.bp-csa .bp-csa__conclusion-benefit-text {
	font-size: 12px;
	font-weight: 600;
	color: var(--bp-csa-ink);
	line-height: 1.3;
	white-space: pre-line;
}

/* =========================================================
 * SOURCE NOTE
 * ========================================================= */
.bp-csa .bp-csa__source {
	margin: 4px 0 0 0;
	text-align: center;
	font-size: 12px;
	font-style: italic;
	color: var(--bp-csa-muted);
	line-height: 1.5;
}

/* =========================================================
 * RESPONSIVE — TABLET (≤ 1024px)
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-csa {
		padding-block: 64px;
	}

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

	.bp-csa .bp-csa__top {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: 28px;
	}

	.bp-csa .bp-csa__title {
		font-size: 38px;
	}

	.bp-csa .bp-csa__botanical {
		inline-size: 360px;
		opacity: 0.4;
	}

	.bp-csa .bp-csa__image,
	.bp-csa .bp-csa__image-placeholder {
		aspect-ratio: 1 / 1;
		min-block-size: 0;
	}

	.bp-csa .bp-csa__stages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 28px;
	}

	.bp-csa .bp-csa__stage-num,
	.bp-csa .bp-csa__stage-title {
		grid-row: auto;
	}

	.bp-csa .bp-csa__stage {
		grid-column: span 1;
	}

	.bp-csa .bp-csa__stage-connector {
		display: none;
	}

	.bp-csa .bp-csa__conclusion {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}

	.bp-csa .bp-csa__conclusion-divider {
		inline-size: 100%;
		block-size: 1px;
	}

	.bp-csa .bp-csa__conclusion-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================
 * RESPONSIVE — MOBILE (≤ 640px)
 * ========================================================= */
@media (max-width: 640px) {
	.bp-csa {
		padding-block: 48px;
	}

	.bp-csa .bp-csa__inner {
		padding-inline: 20px;
	}

	.bp-csa .bp-csa__top {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.bp-csa .bp-csa__image,
	.bp-csa .bp-csa__image-placeholder {
		aspect-ratio: 4 / 5;
	}

	.bp-csa .bp-csa__image-footer {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 16px;
	}

	.bp-csa .bp-csa__footer-block + .bp-csa__footer-block {
		border-inline-start: 0;
		border-block-start: 1px solid rgba(251, 246, 236, 0.25);
		padding-block-start: 10px;
	}

	.bp-csa .bp-csa__title {
		font-size: 30px;
	}

	.bp-csa .bp-csa__trial {
		grid-template-columns: 1fr;
		row-gap: 14px;
	}

	.bp-csa .bp-csa__trial-block + .bp-csa__trial-block {
		border-inline-start: 0;
		border-block-start: 1px solid rgba(55, 79, 55, 0.18);
		padding-block-start: 14px;
	}

	.bp-csa .bp-csa__results {
		padding: 24px 18px;
	}

	.bp-csa .bp-csa__results-heading-wrap {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.bp-csa .bp-csa__results-line {
		inline-size: 28px;
	}

	.bp-csa .bp-csa__stages {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.bp-csa .bp-csa__stage-connector {
		display: none;
	}

	.bp-csa .bp-csa__conclusion {
		padding: 20px 16px;
	}

	.bp-csa .bp-csa__conclusion-left {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.bp-csa .bp-csa__conclusion-icon {
		inline-size: 48px;
		block-size: 48px;
	}

	.bp-csa .bp-csa__conclusion-benefits {
		grid-template-columns: 1fr;
		row-gap: 10px;
	}

	.bp-csa .bp-csa__botanical {
		display: none;
	}
}

/* Narrow-phone gutter scale (authoritative on this widget).
 * 20 / 18 / 18 / 16 px across 480 / 390 / 360 px. */
@media ( max-width: 480px ) {
	.bp-csa .bp-csa__inner {
		padding-inline: 18px;
	}
}

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

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