/* BP Calculateur Méthode de calcul widget styles
 *
 * Calculateur page "MÉTHODE DE CALCUL — Comment le calcul est
 * effectué ?" section.
 *
 * Width architecture (HARD CONSTRAINT):
 *   .bp-cm                    full-viewport section root
 *     .bp-cm__bg              absolute, low-opacity field photo
 *     .bp-cm__bg-tint         absolute, cream radial wash
 *     .bp-cm__bg-fade-b / -t  absolute, top/bottom cream fade
 *     .bp-cm__decor--left/right  screen-edge botanicals
 *     .bp-cm__inner           max-inline-size 1140px, centered
 *       .bp-cm__header        eyebrow + serif title + subtitle
 *       .bp-cm__formula       big cream formula card
 *         .bp-cm__equation    3 calc cards + 2 operators (× =)
 *           .bp-cm__calc      single calc card (3 variants)
 *           .bp-cm__op        × or = symbol
 *         .bp-cm__summary     centered summary line + leaf
 *       .bp-cm__info          2 horizontal info cards
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #FBF6EC  cream
 *   #B8B25A  olive / gold
 *   #F4F1E4  premium light gold-cream (result card bg)
 *   #FFFFFF  white
 *   + existing neutrals (#1F2A1F, #5C6A5C, #E4DCCB).
 *
 * All rules are scoped under `.bp-cm` so the widget never
 * leaks onto other sections or Elementor internals. No global
 * rules for .e-con / .elementor-section / img / svg / i.
 *
 * RTL is handled through logical CSS properties
 * (padding-inline, inset-inline, margin-inline, text-align:
 * start) so the same stylesheet covers /ar/ without a separate
 * file.
 */

/* =========================================================
 * ROOT — full-bleed breakout
 * ========================================================= */
.bp-cm {
	--bp-cm-green:        #374F37;
	--bp-cm-olive:        #B8B25A;
	--bp-cm-cream:        #FBF6EC;
	--bp-cm-cream-soft:   #F4F1E4;
	--bp-cm-white:        #FFFFFF;
	--bp-cm-text:         #1F2A1F;
	--bp-cm-text-muted:   #5C6A5C;
	--bp-cm-border:       #E4DCCB;

	--bp-cm-inner-max:    1140px;
	--bp-cm-formula-radius: 22px;
	--bp-cm-calc-radius:  18px;
	--bp-cm-info-radius:  18px;
	--bp-cm-gap:          28px;

	--bp-cm-font-body:    var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-cm-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);
	/* Section padding removed: open + integrated with page */
	padding-block: 0;
	padding-inline: 0;
	/* Section background removed: open + integrated with page */
	background-color: transparent;
	color: var(--bp-cm-text);
	font-family: var(--bp-cm-font-body);
	overflow: hidden;
}

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

/* =========================================================
 * FULL-WIDTH BACKGROUND IMAGE + CREAM WASH
 * Disabled: open + integrated with the page background.
 * The four decorative layers (`.bp-cm__bg` field photo,
 * `.bp-cm__bg-tint` cream radial wash, `.bp-cm__bg-fade-t`
 * + `.bp-cm__bg-fade-b` cream fades) are hidden so the
 * section shows only the page background color.
 * The original rules are kept below in commented form for
 * reference; no element uses them at runtime.
 * ========================================================= */
.bp-cm__bg,
.bp-cm__bg-tint,
.bp-cm__bg-fade-t,
.bp-cm__bg-fade-b {
	display: none !important;
}

/* =========================================================
 * BOTANICAL DECORATIONS — anchored to SCREEN EDGE
 * (never to the 1140px inner)
 * ========================================================= */
.bp-cm__decor {
	--bp-cm-decor-x: 0px;
	--bp-cm-decor-y: 0px;

	position: absolute;
	z-index: 1;
	pointer-events: none;
	display: none;
	color: #374F37;
	inline-size: 230px;
	block-size: auto;
	transform: translate(var(--bp-cm-decor-x), var(--bp-cm-decor-y));
	transform-origin: center center;
}

.bp-cm__decor.is-on {
	display: block;
}

.bp-cm__decor-img,
.bp-cm__decor-svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	color: currentColor;
}

.bp-cm__decor--left {
	inset-block-start: 40px;
	left: 0;
	right: auto;
}

.bp-cm__decor--right {
	inset-block-start: 60px;
	right: 0;
	left: auto;
}

/* =========================================================
 * INNER WRAPPER (1140px content)
 * ========================================================= */
.bp-cm__inner {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-cm-inner-max);
	margin-inline: auto;
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* =========================================================
 * HEADER
 * ========================================================= */
.bp-cm__header {
	inline-size: 100%;
	max-inline-size: 760px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.bp-cm__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px 0;
	color: #374F37;
	font-family: var(--bp-cm-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bp-cm__eyebrow-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	color: #374F37;
}

.bp-cm__eyebrow-leaf svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.bp-cm__eyebrow-line {
	display: inline-block;
	inline-size: 56px;
	block-size: 1.5px;
	background: var(--bp-cm-olive);
	opacity: 0.85;
}

.bp-cm__eyebrow-text {
	white-space: nowrap;
}

.bp-cm__title {
	margin: 0 0 18px 0;
	color: #374F37;
	font-family: var(--bp-cm-font-display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.bp-cm__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 10px auto 22px;
	max-inline-size: 100%;
}
.bp-cm__divider-line {
	display: block;
	inline-size: 40px;
	block-size: 1px;
	background-color: #B8B25A;
}
.bp-cm__divider-diamond {
	display: block;
	inline-size: 6px;
	block-size: 6px;
	background-color: #B8B25A;
	transform: rotate(45deg);
	flex: 0 0 auto;
}

.bp-cm__underline {
	display: none;
}

.bp-cm__subtitle {
	margin: 0;
	max-inline-size: 620px;
	font-family: var(--bp-cm-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--bp-cm-text);
}

/* =========================================================
 * FORMULA CARD (the cream container)
 * ========================================================= */
.bp-cm__formula {
	inline-size: 100%;
	background-color: #FBF6EC;
	border: 1px solid #B8B25A;
	border-radius: 22px;
	padding: 36px 32px;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* =========================================================
 * EQUATION (3 calc cards + 2 operators in a row)
 * ========================================================= */
.bp-cm__equation {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	gap: 28px;
	inline-size: 100%;
}

/* =========================================================
 * CALC CARDS (Votre surface / Dosage / Quantité)
 * ========================================================= */
.bp-cm__calc {
	flex: 1 1 0;
	min-inline-size: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	/* Premium subtle cream gradient (no more pure white) */
	background-image: linear-gradient(180deg, #FFFDF8 0%, #FBF6EC 100%);
	background-color: #FBF6EC;
	border: 1px solid var(--bp-cm-border);
	border-radius: var(--bp-cm-calc-radius);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.bp-cm__calc:hover {
	box-shadow:
		0 1px 2px rgba(31, 42, 31, 0.05),
		0 18px 36px -14px rgba(31, 42, 31, 0.2);
	transform: translateY(-1px);
}

/* Result card — premium subtle gradient + olive border. */
.bp-cm__calc--3 {
	background: linear-gradient(135deg, #F4F1E4 0%, #FBF6EC 60%, #F8F4E1 100%);
	border-color: var(--bp-cm-olive);
	box-shadow:
		0 1px 2px rgba(184, 178, 90, 0.12),
		0 18px 36px -16px rgba(55, 79, 55, 0.22);
}

/* Badge (subtle off-white cream circle around the icon) */
.bp-cm__calc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	background-color: #F9F2E3;
	color: var(--bp-cm-green);
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}

.bp-cm__calc--3 .bp-cm__calc-badge {
	background-color: var(--bp-cm-cream);
}

.bp-cm__calc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 22px;
	block-size: 22px;
	color: inherit;
}

.bp-cm__calc-icon i,
.bp-cm__calc-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
}

/* Text column inside a calc card */
.bp-cm__calc-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-inline-size: 0;
}

.bp-cm__calc-label {
	font-family: var(--bp-cm-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--bp-cm-text-muted);
	line-height: 1.2;
}

.bp-cm__calc-divider {
	display: block;
	inline-size: 36px;
	block-size: 1px;
	background: var(--bp-cm-olive);
	opacity: 0.7;
	/* Use dotted pattern as the design suggests */
	background-image: radial-gradient(circle, var(--bp-cm-olive) 0.5px, transparent 0.5px);
	background-size: 4px 1px;
	background-repeat: repeat-x;
	background-color: transparent;
}

.bp-cm__calc-value {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--bp-cm-font-display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.005em;
	color: var(--bp-cm-green);
}

.bp-cm__calc-number {
	font-size: 30px;
}

.bp-cm__calc-unit {
	font-family: var(--bp-cm-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--bp-cm-text-muted);
	letter-spacing: 0;
}

/* =========================================================
 * OPERATORS (×, =)
 * ========================================================= */
.bp-cm__op {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-family: var(--bp-cm-font-display);
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	color: var(--bp-cm-olive);
	user-select: none;
	min-inline-size: 28px;
}

/* =========================================================
 * SUMMARY LINE (Surface × dosage de référence = quantité…)
 * ========================================================= */
.bp-cm__summary {
	inline-size: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 16px;
	padding-block-start: 6px;
}

.bp-cm__summary-line {
	display: inline-block;
	flex: 0 1 80px;
	block-size: 1px;
	background: var(--bp-cm-olive);
	opacity: 0.55;
	min-inline-size: 24px;
}

.bp-cm__summary-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	color: var(--bp-cm-olive);
	flex: 0 0 auto;
}

.bp-cm__summary-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.bp-cm__summary-text {
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 8px;
	font-family: var(--bp-cm-font-body);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--bp-cm-green);
	line-height: 1.4;
}

.bp-cm__summary-word {
	white-space: normal;
}

.bp-cm__summary-op {
	font-family: var(--bp-cm-font-display);
	font-size: 18px;
	color: var(--bp-cm-olive);
	padding-inline: 2px;
}

/* =========================================================
 * LOWER INFO CARDS
 * ========================================================= */
.bp-cm__info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	inline-size: 100%;
}

.bp-cm__info-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 26px;
	border: 1px solid #B8B25A;
	border-radius: 22px;
	background-color: #FBF6EC;
	box-shadow: none;
	overflow: hidden;
}

.bp-cm__info-card--right {
	background: #FBF6EC;
	border-color: #B8B25A;
}

.bp-cm__info-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background-color: var(--bp-cm-cream-soft);
	color: var(--bp-cm-green);
	flex-shrink: 0;
}

.bp-cm__info-badge--dark {
	background-color: var(--bp-cm-green);
	color: var(--bp-cm-cream);
}

.bp-cm__info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	color: inherit;
}

.bp-cm__info-icon i,
.bp-cm__info-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
}

.bp-cm__info-decor {
	position: absolute;
	inset-block-end: -8px;
	inset-inline-end: -8px;
	inline-size: 60px;
	block-size: 60px;
	color: var(--bp-cm-olive);
	opacity: 0.25;
	pointer-events: none;
}

.bp-cm__info-decor svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.bp-cm__info-text {
	margin: 0;
	font-family: var(--bp-cm-font-body);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--bp-cm-text);
}

/* =========================================================
 * ICON COLOR — FORCED #374F37 / cream in dark badges
 * Same pattern as bp-preuves-documents: scoped to .bp-cm.
 * ========================================================= */

/* 1. Icon wrappers + SVG roots → default dark green */
.bp-cm i,
.bp-cm svg,
.bp-cm .bp-cm__eyebrow-leaf,
.bp-cm .bp-cm__eyebrow-leaf svg,
.bp-cm .bp-cm__calc-icon,
.bp-cm .bp-cm__calc-icon i,
.bp-cm .bp-cm__calc-icon svg,
.bp-cm .bp-cm__summary-icon,
.bp-cm .bp-cm__summary-icon svg,
.bp-cm .bp-cm__info-icon,
.bp-cm .bp-cm__info-icon i,
.bp-cm .bp-cm__info-icon svg,
.bp-cm .bp-cm__decor,
.bp-cm .bp-cm__decor-svg,
.bp-cm .bp-cm__decor-img,
.bp-cm .bp-cm__info-decor,
.bp-cm .bp-cm__info-decor svg {
	color: #374F37 !important;
	fill: #374F37 !important;
}

/* 2. SVG graphic primitives — force stroke #374F37 */
.bp-cm svg path,
.bp-cm svg circle,
.bp-cm svg line,
.bp-cm svg polyline,
.bp-cm svg polygon,
.bp-cm svg rect,
.bp-cm svg g,
.bp-cm svg use {
	stroke: #374F37 !important;
}

/* 3. Filled primitives (fill attribute present, not "none") */
.bp-cm svg path[fill]:not([fill="none"]),
.bp-cm svg circle[fill]:not([fill="none"]),
.bp-cm svg line[fill]:not([fill="none"]),
.bp-cm svg polyline[fill]:not([fill="none"]),
.bp-cm svg polygon[fill]:not([fill="none"]),
.bp-cm svg g[fill]:not([fill="none"]),
.bp-cm svg use[fill]:not([fill="none"]) {
	fill: #374F37 !important;
}

/* 4. Outline-only elements (fill="none") — preserve outline,
 *    force stroke to #374F37. */
.bp-cm svg [fill="none"] {
	fill: none !important;
	stroke: #374F37 !important;
}

/* Dark-green badge (right info card) → cream icon */
.bp-cm .bp-cm__info-badge--dark,
.bp-cm .bp-cm__info-badge--dark .bp-cm__info-icon,
.bp-cm .bp-cm__info-badge--dark .bp-cm__info-icon i,
.bp-cm .bp-cm__info-badge--dark .bp-cm__info-icon svg,
.bp-cm .bp-cm__info-badge--dark svg path,
.bp-cm .bp-cm__info-badge--dark svg circle,
.bp-cm .bp-cm__info-badge--dark svg line,
.bp-cm .bp-cm__info-badge--dark svg polyline,
.bp-cm .bp-cm__info-badge--dark svg polygon,
.bp-cm .bp-cm__info-badge--dark svg rect,
.bp-cm .bp-cm__info-badge--dark svg g,
.bp-cm .bp-cm__info-badge--dark svg use {
	color: #FBF6EC !important;
	fill: #FBF6EC !important;
	stroke: #FBF6EC !important;
}

/* =========================================================
 * RESPONSIVE — TABLET (1024 and below)
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-cm {
		padding-block: 0;
		--bp-cm-gap: 20px;
	}

	.bp-cm__inner {
		gap: 36px;
	}

	.bp-cm__title {
		font-size: 36px;
		line-height: 1.15;
	}

	.bp-cm__formula {
		padding: 28px 24px;
		gap: 22px;
	}

	.bp-cm__equation {
		gap: 18px;
	}

	.bp-cm__calc {
		padding: 16px 18px;
		gap: 12px;
	}

	.bp-cm__calc-badge {
		inline-size: 46px;
		block-size: 46px;
	}

	.bp-cm__calc-number {
		font-size: 26px;
	}

	.bp-cm__op {
		font-size: 30px;
	}

	.bp-cm__info {
		gap: 18px;
	}

	.bp-cm__decor--left {
		inset-block-start: 24px;
	}
	.bp-cm__decor--right {
		inset-block-start: 32px;
	}
	.bp-cm__decor {
		inline-size: 180px;
	}
}

/* =========================================================
 * RESPONSIVE — MOBILE (640 and below)
 * Equation stacks vertically; operators sit between cards.
 * ========================================================= */
@media (max-width: 640px) {
	.bp-cm {
		padding-block: 0;
		--bp-cm-gap: 16px;
	}

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

	.bp-cm__title {
		font-size: 34px;
		line-height: 1.15;
		margin-bottom: 14px;
	}

	.bp-cm__eyebrow {
		font-size: 12px;
		margin-bottom: 14px;
		letter-spacing: 0.1em;
	}

	/* (Underline element removed from PHP markup — no rule needed.) */
	.bp-cm__eyebrow-line {
		inline-size: 32px;
	}

	.bp-cm__formula {
		padding: 22px 18px;
		gap: 14px;
		border-radius: 18px;
	}

	/* Stack the equation vertically on mobile. */
	.bp-cm__equation {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.bp-cm__calc {
		padding: 14px 16px;
		gap: 12px;
	}

	.bp-cm__calc-badge {
		inline-size: 42px;
		block-size: 42px;
	}

	.bp-cm__calc-icon {
		inline-size: 18px;
		block-size: 18px;
	}

	.bp-cm__calc-number {
		font-size: 24px;
	}

	.bp-cm__calc-unit {
		font-size: 12.5px;
	}

	/* Operators between stacked cards: small centered glyph. */
	.bp-cm__op {
		font-size: 22px;
		min-inline-size: 0;
		block-size: 18px;
	}

	.bp-cm__summary {
		gap: 8px 10px;
		padding-block-start: 4px;
	}

	.bp-cm__summary-line {
		flex-basis: 40px;
	}

	.bp-cm__summary-text {
		font-size: 13px;
		gap: 6px;
	}

	.bp-cm__summary-op {
		font-size: 16px;
	}

	.bp-cm__info {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.bp-cm__info-card {
		padding: 18px 20px;
	}

	.bp-cm__info-badge {
		inline-size: 40px;
		block-size: 40px;
	}

	.bp-cm__info-icon {
		inline-size: 18px;
		block-size: 18px;
	}

	.bp-cm__decor {
		inline-size: 130px;
		opacity: 0.6;
	}

	.bp-cm__decor--left {
		inset-block-start: 18px;
	}

	.bp-cm__decor--right {
		inset-block-start: 22px;
	}
}

/* =========================================================
 * RESPONSIVE — NARROW PHONE GUTTERS
 * Authoritative scale (per widget, no global leak).
 * ========================================================= */
@media (max-width: 480px) {
	.bp-cm__inner {
		padding-inline: 18px;
	}

	/* Hide all purely decorative background artwork on mobile.
	 * Content (calc cards, formula, info cards, communication
	 * icons) stays untouched. Decorative elements are
	 * absolute-positioned, so hiding them leaves no empty space. */
	.bp-cm__bg,
	.bp-cm__bg-tint,
	.bp-cm__bg-fade-t,
	.bp-cm__bg-fade-b,
	.bp-cm__decor,
	.bp-cm__info-decor,
	.bp-cm::before,
	.bp-cm::after {
		display: none !important;
	}
}

@media (max-width: 430px) {
	.bp-cm__inner {
		padding-inline: 18px;
	}
	.bp-cm__formula {
		padding: 20px 16px;
	}
}

@media (max-width: 390px) {
	.bp-cm__inner {
		padding-inline: 18px;
	}
	.bp-cm__formula {
		padding: 18px 14px;
	}
	.bp-cm__calc {
		padding: 12px 14px;
	}
}

@media (max-width: 375px) {
	.bp-cm__inner {
		padding-inline: 17px;
	}
}

@media (max-width: 360px) {
	.bp-cm__inner {
		padding-inline: 16px;
	}
	.bp-cm__formula {
		padding: 16px 12px;
	}
	.bp-cm__calc {
		padding: 10px 12px;
		gap: 10px;
	}
	.bp-cm__calc-number {
		font-size: 22px;
	}
}

/* =========================================================
 * RTL SUPPORT
 * Logical CSS properties already make this RTL-clean. We
 * only override a few visual direction-neutral tweaks here.
 * ========================================================= */
html[dir="rtl"] .bp-cm__op,
html[lang="ar"] .bp-cm__op {
	font-family: var(--bp-cm-font-body);
	/* Keep × and = visually identical in RTL; only adjust weight. */
	font-weight: 500;
}