/* BP How To Use Before V2 widget styles
 *
 * Premium "AVANT DE COMMENCER" section for the
 * "Comment l'utiliser" page. Matches the supplied
 * mockup: warm cream background, dark green serif
 * heading, muted gold accents, thin green/gold
 * lines, rounded outlined strips and a clean
 * agricultural visual language.
 *
 * Visual structure (desktop, >= 1025px):
 *
 *   1. .bp-htu-before__inner
 *        Two-column grid:
 *          LEFT  : eyebrow + H2 + gold separator + intro
 *          RIGHT : .bp-htu-before__diagram
 *                    3 instructional points around a
 *                    central arched visual
 *                      - top point
 *                      - bottom-left point
 *                      - bottom-right point
 *                    Each point is a small circle icon +
 *                    uppercase title + supporting line.
 *                    Three thin gold connector lines
 *                    (top → center, left → center,
 *                    right → center) are rendered with
 *                    pure CSS borders + pseudo-elements.
 *                    No SVG connector artwork.
 *
 *   2. .bp-htu-before__retention
 *        Full-width outlined strip:
 *        [ icon ] LABEL  Text
 *        Warm cream, thin muted-gold border, rounded.
 *
 *   3. .bp-htu-before__bottom
 *        Outlined strip divided into 3 equal columns
 *        separated by soft vertical dividers.
 *        No cards inside the strip. No shadows.
 *
 * Tablet (769-1024px):
 *   - left / right become single column
 *   - diagram remains horizontal but the points
 *     become more compact
 *   - bottom 3-col strip remains 3 columns if
 *     space allows
 *
 * Mobile (<= 768px):
 *   - everything stacks
 *   - heading 36-42px
 *   - diagram points become a clean vertical list
 *   - central visual keeps its arched frame, scaled
 *   - connector lines hidden
 *   - bottom 3-col strip becomes 3 stacked rows
 *   - no horizontal overflow
 *
 * All rules are scoped under `.bp-htu-before` and use
 * logical CSS properties so LTR and RTL share the same
 * stylesheet.
 */

.bp-htu-before {
	--bp-htub-cream:        #F7F4EC;
	--bp-htub-green:        #374F37;
	--bp-htub-text:         #1F2A1F;
	--bp-htub-text-muted:   #5C6A5C;
	--bp-htub-olive:        #B8B25A;
	--bp-htub-gold:         #D8C47C;
	--bp-htub-cream-soft:   #F4ECDD;
	--bp-htub-card-bg:      #FCF8F0;
	--bp-htub-border-soft:  rgba(181, 153, 72, 0.32);
	--bp-htub-border-faint: rgba(181, 153, 72, 0.22);

	--bp-htub-inner-max:    1240px;
	--bp-htub-pad-x:        clamp(20px, 4vw, 48px);
	--bp-htub-pad-y:        clamp(56px, 7vw, 88px);

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

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
	background-color: var(--bp-htub-cream);
	color: var(--bp-htub-text);
	font-family: var(--bp-htub-font-body);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

/* Full-bleed: force the surrounding Elementor wrappers
 * to 100% width so the cream background spans edge to
 * edge. */
.elementor-widget.elementor-widget-bp-how-to-use-before-v2 {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

.bp-htu-before__inner {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-htub-inner-max);
	margin-inline: auto;
	padding-block-start: var(--bp-htub-pad-y);
	padding-block-end: 0;

	display: grid;
	grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

/* ---------------- Left column (head) ---------------- */
.bp-htu-before__head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-inline-size: 560px;
	inline-size: 100%;
}

.bp-htu-before__eyebrow {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bp-htub-green);
	line-height: 1;
}

.bp-htu-before__title {
	margin: 0;
	font-family: var(--bp-htub-font-display);
	font-weight: 400;
	color: #374F3C;
	font-size: clamp(36px, 4.4vw, 60px);
	line-height: 1.08;
	letter-spacing: -0.005em;
}

.bp-htu-before__divider {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-block: 2px 0;
}
.bp-htu-before__divider-line {
	inline-size: 36px;
	block-size: 1px;
	background-color: var(--bp-htub-olive);
}
.bp-htu-before__divider-diamond {
	inline-size: 5px;
	block-size: 5px;
	background-color: var(--bp-htub-olive);
	transform: rotate(45deg);
}

.bp-htu-before__intro {
	margin: 0;
	font-family: var(--bp-htub-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--bp-htub-text-muted);
	max-inline-size: 540px;
}

/* ---------------- Right column (diagram) ----------------
 * A 3-column grid: left point | center | right point.
 * Top point spans all columns on a first row.
 * Side nodes are vertically centered against the central
 * frame so the icon circles sit at the arch's vertical
 * midpoint.
 *
 *   ROW 1 : top point      (span all 3 cols)
 *   ROW 2 : left | center | right   (3 cols, all on the
 *                                  same row, vertically
 *                                  centered)
 *
 * Connectors are three independent segments (top vertical,
 * left horizontal, right horizontal) implemented as
 * absolutely-positioned dotted lines + a small gold dot
 * at the frame edge. z-index stack: connectors 1, frame
 * 3, nodes 4. The horizontal connectors sit in the
 * column-gap (28px) so they never overlap the side
 * nodes. */
.bp-htu-before__diagram {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 28px;
	row-gap: 14px;
	align-items: center;
	justify-items: center;
	inline-size: 100%;
	max-inline-size: 640px;
	margin-inline: auto;
	padding-block: 0;
}

.bp-htu-before__point {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	max-inline-size: 250px;
	inline-size: 100%;
	z-index: 4; /* nodes above frame and connectors */
}
.bp-htu-before__point--top {
	grid-column: 1 / -1;
	grid-row: 1;
}
.bp-htu-before__center {
	grid-column: 2;
	grid-row: 2;
	z-index: 3; /* central frame above connectors, below nodes */
}
.bp-htu-before__point--left {
	grid-column: 1;
	grid-row: 2;
	align-self: center;
	justify-self: end;
}
.bp-htu-before__point--right {
	grid-column: 3;
	grid-row: 2;
	align-self: center;
	justify-self: start;
}

/* Icon circles (top + side nodes). Larger, more
 * intentional presence. Thin green outline, clean
 * centered icon, restrained styling. */
.bp-htu-before__point-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 68px;
	block-size: 68px;
	border-radius: 50%;
	background-color: var(--bp-htub-card-bg);
	border: 1.5px solid var(--bp-htub-border-soft);
	color: var(--bp-htub-green);
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.bp-htu-before__point-icon i,
.bp-htu-before__point-icon svg {
	inline-size: 26px;
	block-size: 26px;
	font-size: 26px;
	color: inherit;
	fill: currentColor;
}

.bp-htu-before__point-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--bp-htub-font-body);
	line-height: 1.25;
}
.bp-htu-before__point-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-htub-text);
}
.bp-htu-before__point-sub {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bp-htub-text-muted);
	line-height: 1.35;
}

/* High-specificity icon color enforcement. */
.bp-htu-before .bp-htu-before__point-icon,
.bp-htu-before .bp-htu-before__point-icon svg,
.bp-htu-before .bp-htu-before__point-icon i,
.bp-htu-before .bp-htu-before__point-icon svg * {
	color: var(--bp-htub-green);
	fill: currentColor;
	stroke: currentColor;
}

/* Central visual: softly rounded vertical arch / capsule
 * with a thin gold outline. Larger, more intentional
 * presence. Opaque cream background so connectors can
 * never show through the placeholder text. */
.bp-htu-before__center {
	position: relative;
	inline-size: 260px;
	block-size: 312px;
	z-index: 3;
}
.bp-htu-before__frame {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 130px 130px 26px 26px;
	border: 1.5px solid var(--bp-htub-gold);
	background-color: var(--bp-htub-card-bg);
	overflow: hidden;
	position: relative;
	z-index: 3;
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.bp-htu-before__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}
.bp-htu-before__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-htub-text-muted);
	background-color: var(--bp-htub-card-bg);
	text-align: center;
	padding: 0 12px;
}

/* Connector lines: three independent segments + a small
 * gold dot at each frame edge. All connectors sit at
 * z-index 1, behind the central frame (z 3) and the
 * nodes (z 4) so they never cross placeholder text or
 * node icons.
 *
 *   A. top vertical:    top point → frame top
 *   B. left horizontal: left point → frame left side
 *   C. right horizontal: frame right side → right point
 *
 * Implemented with absolutely-positioned spans (real DOM
 * nodes rendered by the widget) so the geometry is
 * explicit, easy to tune, and survives pseudo-element
 * conflicts. The dots are ::before / ::after on each
 * segment, painted at the frame edge. */
.bp-htu-before__connector {
	position: absolute;
	background-color: transparent;
	pointer-events: none;
	z-index: 1;
}

/* A. top vertical — dotted, runs from the bottom of the
 * top point down to the frame's top edge. Sized to sit
 * inside the diagram row-gap so it never overlaps the
 * top point. */
.bp-htu-before__connector--top {
	inline-size: 0;
	block-size: 14px;
	inset-block-end: 100%;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	border-inline-start: 1px dashed var(--bp-htub-olive);
	background-color: transparent;
}
/* Frame-edge dot for the top connector. Sits centered
 * on the frame's top edge so half is visible above and
 * the rest is covered by the frame (z 3). */
.bp-htu-before__connector--top::before {
	content: "";
	position: absolute;
	inset-block-end: -3.5px;
	inset-inline-start: -3.5px;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background-color: var(--bp-htub-olive);
}

/* B. left horizontal — dotted, runs from the right edge
 * of the left point to the left side of the frame.
 * Sits in the column-gap (28px), with a small gold dot
 * centered on the frame's left edge. */
.bp-htu-before__connector--left {
	block-size: 0;
	inline-size: 28px;
	inset-block-start: 50%;
	inset-inline-end: 100%;
	transform: translateY(-50%);
	border-block-start: 1px dashed var(--bp-htub-olive);
}
/* Frame-edge dot for the left connector. */
.bp-htu-before__connector--left::before {
	content: "";
	position: absolute;
	inset-inline-end: -3.5px;
	inset-block-start: -3.5px;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background-color: var(--bp-htub-olive);
}

/* C. right horizontal — dotted, runs from the right side
 * of the frame to the left edge of the right point. */
.bp-htu-before__connector--right {
	block-size: 0;
	inline-size: 28px;
	inset-block-start: 50%;
	inset-inline-start: 100%;
	transform: translateY(-50%);
	border-block-start: 1px dashed var(--bp-htub-olive);
}
/* Frame-edge dot for the right connector. */
.bp-htu-before__connector--right::before {
	content: "";
	position: absolute;
	inset-inline-start: -3.5px;
	inset-block-start: -3.5px;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background-color: var(--bp-htub-olive);
}

/* ---------------- À RETENIR strip ----------------
 * Visual shell provided by the site-wide `.bp-info-strip`
 * utility (see `assets/css/elementor/bp-info-strip.css`).
 * Only the À RETENIR label styling remains as a
 * variant-specific override. */
.bp-htu-before__retention {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-htub-inner-max);
	margin-inline: auto;
	margin-block-start: 24px;
}

.bp-htu-before__retention-label {
	white-space: nowrap;
}

/* ---------------- Bottom 3-column strip ---------------- */
.bp-htu-before__bottom {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-htub-inner-max);
	margin-inline: auto;
	margin-block-start: 18px;
}

.bp-htu-before__bottom {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	background-color: var(--bp-htub-card-bg);
	border: 1px solid var(--bp-htub-border-soft);
	border-radius: 18px;
	padding: 22px 18px;
	box-sizing: border-box;
}

.bp-htu-before__bottom-col {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding-inline: 18px;
	min-inline-size: 0;
}
.bp-htu-before__bottom-col + .bp-htu-before__bottom-col {
	border-inline-start: 1px solid var(--bp-htub-border-faint);
}
.bp-htu-before__bottom-col:first-child { padding-inline-start: 0; }
.bp-htu-before__bottom-col:last-child  { padding-inline-end: 0; }

.bp-htu-before__bottom-icon {
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background-color: var(--bp-htub-cream);
	border: 1px solid var(--bp-htub-border-soft);
	color: var(--bp-htub-green);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bp-htu-before__bottom-icon i,
.bp-htu-before__bottom-icon svg {
	inline-size: 16px;
	block-size: 16px;
	font-size: 16px;
	color: inherit;
	fill: currentColor;
}

.bp-htu-before__bottom-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--bp-htub-font-body);
	line-height: 1.2;
	min-inline-size: 0;
}
.bp-htu-before__bottom-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bp-htub-text);
}
.bp-htu-before__bottom-sub {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bp-htub-text-muted);
	line-height: 1.3;
}

.bp-htu-before .bp-htu-before__retention-icon svg *,
.bp-htu-before .bp-htu-before__bottom-icon svg *,
.bp-htu-before .bp-htu-before__retention-icon i,
.bp-htu-before .bp-htu-before__bottom-icon i {
	color: inherit;
	fill: currentColor;
	stroke: currentColor;
}
.bp-htu-before .bp-htu-before__retention-icon {
	/* Icon color now unified by .bp-info-strip__icon (cream #FBF6EC). */
}

/* ---------------- Tablet ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-htu-before__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-block: 56px;
	}
	.bp-htu-before__head { max-inline-size: 100%; }
	.bp-htu-before__intro { max-inline-size: 100%; font-size: 16px; }
	.bp-htu-before__title { font-size: clamp(34px, 5vw, 50px); }
	.bp-htu-before__diagram { max-inline-size: 100%; }
	.bp-htu-before__center { inline-size: 220px; block-size: 270px; border-radius: 110px 110px 22px 22px; }
	.bp-htu-before__frame  { border-radius: 110px 110px 22px 22px; }
	.bp-htu-before__point  { max-inline-size: 230px; }
	.bp-htu-before__point-icon { inline-size: 60px; block-size: 60px; }
	.bp-htu-before__point-icon i,
	.bp-htu-before__point-icon svg { inline-size: 22px; block-size: 22px; font-size: 22px; }
	/* Hide connectors on tablet to keep things clean when
	 * the diagram is the only column. */
	.bp-htu-before__connector { display: none; }
}

/* ---------------- Mobile ---------------- */
@media ( max-width: 768px ) {
	.bp-htu-before__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-block: 48px 28px;
		padding-inline: 20px;
	}
	.bp-htu-before__head { gap: 14px; }
	.bp-htu-before__title { font-size: 38px; line-height: 1.08; }
	.bp-htu-before__intro { font-size: 15.5px; line-height: 1.6; max-inline-size: 100%; }

	/* Diagram collapses to a clean vertical list. The
	 * central visual sits in the middle between top and
	 * bottom points. Connectors are hidden. */
	.bp-htu-before__diagram {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto auto;
		column-gap: 0;
		row-gap: 18px;
		max-inline-size: 100%;
	}
	.bp-htu-before__connector { display: none; }

	.bp-htu-before__point--top    { grid-column: 1; grid-row: 1; }
	.bp-htu-before__center        { grid-column: 1; grid-row: 2; inline-size: 200px; block-size: 250px; border-radius: 100px 100px 20px 20px; }
	.bp-htu-before__frame         { border-radius: 100px 100px 20px 20px; }
	.bp-htu-before__point--left   { grid-column: 1; grid-row: 3; justify-self: center; }
	.bp-htu-before__point--right  { grid-column: 1; grid-row: 4; justify-self: center; }

	.bp-htu-before__point { max-inline-size: 100%; flex-direction: row; text-align: start; gap: 12px; align-items: center; justify-content: flex-start; }
	.bp-htu-before__point-text { align-items: flex-start; }
	.bp-htu-before__point-icon { inline-size: 56px; block-size: 56px; }
	.bp-htu-before__point-icon i,
	.bp-htu-before__point-icon svg { inline-size: 22px; block-size: 22px; font-size: 22px; }

	/* Retention strip: sizing owned by .bp-info-strip responsive block. */
	.bp-htu-before__retention {
		margin-block-start: 16px;
	}

	/* Bottom strip: 3 stacked rows. */
	.bp-htu-before__bottom { padding-inline: 20px; }
	.bp-htu-before__bottom {
		grid-template-columns: 1fr;
		padding: 14px 18px;
		gap: 8px;
	}
	.bp-htu-before__bottom-col {
		padding-block: 10px;
		padding-inline: 0;
	}
	.bp-htu-before__bottom-col + .bp-htu-before__bottom-col {
		border-inline-start: 0;
		border-block-start: 1px solid var(--bp-htub-border-faint);
	}
}

@media ( max-width: 480px ) {
	.bp-htu-before__title { font-size: 32px; }
	.bp-htu-before__center { inline-size: 180px; block-size: 230px; border-radius: 90px 90px 18px 18px; }
	.bp-htu-before__frame  { border-radius: 90px 90px 18px 18px; }
	/* Retention strip sizing owned by .bp-info-strip responsive block. */
}
@media ( max-width: 390px ) {
	.bp-htu-before__title { font-size: 28px; }
	.bp-htu-before__center { inline-size: 160px; block-size: 210px; border-radius: 80px 80px 16px 16px; }
	.bp-htu-before__frame  { border-radius: 80px 80px 16px 16px; }
}

/* ---------------- Arabic / RTL ---------------- */
[lang="ar"] .bp-htu-before__title,
[dir="rtl"] .bp-htu-before__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: 0;
}

/* ---------------- Reduced motion ---------------- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-htu-before [data-bp-stagger] {
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}