/* BP Comment Utiliser Application widget styles
 *
 * Full-bleed "GUIDE D'UTILISATION — Application" section for
 * the "Comment utiliser" page. Same architecture as the
 * bp-comment-utiliser-preparation widget: the section is a
 * 100vw breakout with a centred 1140px inner that holds the
 * actual content, while the decorative botanicals are
 * absolutely positioned against the FULL-WIDTH section root so
 * they reach the actual viewport edges (not the 1140px wrapper).
 *
 * Layout (desktop, top → bottom):
 *   1. Editorial 3-column composition
 *        LEFT  — header (eyebrow / large serif title / subtitle /
 *                olive divider / body) + "PRINCIPES CLÉS" card
 *                (3 principles, each with a dark-green circle
 *                icon, title, text; rows separated by a thin
 *                line)
 *        CENTER — top "Bon à savoir" strip (lightbulb circle +
 *                 label + separator + text) above a dominant
 *                 root-zone image with a white dashed oval
 *                 marking the application zone and a bottom
 *                 dark-green gradient overlay labelled
 *                 "ZONE D'ABSORPTION RACINAIRE"
 *        RIGHT  — "OÙ ET COMMENT APPLIQUER ?" heading with
 *                 small olive underline + 3 application cases
 *                 (circular light frame illustration + title +
 *                 text; subtle separators between cases)
 *   2. Depth strip — left "PROFONDEUR D'ENFOUISSEMENT" (icon +
 *      title + body), center "POURQUOI CETTE PROFONDEUR ?" with
 *      3 check points, right soil depth image with visible
 *      0 cm / 5 cm / 10 cm markers
 *   3. Bottom "CONSEILS PRATIQUES" strip — 4 tips with icons
 *      separated by thin vertical dividers
 *
 * Mobile (≤ 768px):
 *   - Intentional single-column stack:
 *       Intro → Bon à savoir → Main root-zone visual →
 *       Principes clés → Où et comment appliquer ? → 3 cases →
 *       Depth strip → Conseils pratiques
 *   - The 3-column composition becomes a clean single-column flow
 *   - The root-zone image stays large; the overlay text moves
 *     under the image on phones; no absolute labels spill out
 *   - Application cases stack vertically with illustration on top
 *   - Depth strip converts to stacked layout (title → why →
 *     image)
 *   - Practical tips: 1 column
 *   - All side botanicals hide so they never crowd the content
 *
 * Approved palette ONLY:
 *   #374F37  dark green
 *   #FBF6EC  cream
 *   #B8B25A  olive
 *   #F4ECDC  light cream tint
 *   #FFFFFF  white
 *   plus existing neutral tokens (#1F2A1F, #E4DCCB).
 *
 * All rules are scoped under `.bp-cu-app` and use logical
 * CSS properties (margin-inline, padding-inline,
 * inset-inline-start/end, text-align start/end) so LTR and
 * RTL share the same stylesheet.
 */

/* =========================================================
 * ROOT SECTION (full-width, breakout)
 * ========================================================= */
.bp-cu-app {
	--bp-cu-app-bg:           #FBF6EC;
	--bp-cu-app-green:        #374F37;
	--bp-cu-app-cream:        #FBF6EC;
	--bp-cu-app-cream-tint:   #F4ECDC;
	--bp-cu-app-olive:        #B8B25A;
	--bp-cu-app-text:         #1F2A1F;
	--bp-cu-app-border:       #E4DCCB;
	--bp-cu-app-shadow:       0 6px 18px rgba(55, 79, 55, 0.07);

	--bp-cu-app-inner-max:    1140px;
	--bp-cu-app-image-h:      520px;
	--bp-cu-app-principle-icon: 42px;
	--bp-cu-app-bon-icon:     40px;
	--bp-cu-app-depth-icon:   28px;
	--bp-cu-app-conseil-icon: 22px;

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

	/* Per-botanical X / Y offsets (set per-device via Elementor
	 * responsive controls). */
	--bp-cu-app-tl-x: 0px; --bp-cu-app-tl-y: 0px;
	--bp-cu-app-le-x: 0px; --bp-cu-app-le-y: 0px;
	--bp-cu-app-bl-x: 0px; --bp-cu-app-bl-y: 0px;
	--bp-cu-app-tr-x: 0px; --bp-cu-app-tr-y: 0px;
	--bp-cu-app-re-x: 0px; --bp-cu-app-re-y: 0px;
	--bp-cu-app-br-x: 0px; --bp-cu-app-br-y: 0px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: 100%;
	box-sizing: border-box;
	margin: 0;
	padding-block: 72px;
	background: var(--bp-cu-app-bg);
	color: var(--bp-cu-app-text);
	font-family: var(--bp-cu-app-font-body);
}

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

/* =========================================================
 * ELEMENTOR FULL-BLEED BREAKOUT
 * Same :has()-anchored pattern as bp-comment-utiliser-preparation:
 * every override is scoped to a parent that ACTUALLY hosts this
 * widget, so no global Elementor rule leaks onto other pages.
 * ========================================================= */
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-application) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-application) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-application) > .e-con,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-application) > .e-con > .e-con-inner,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-application) > .elementor-container > .elementor-column,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-application) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-application) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-application) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-cu-app {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}

.elementor-element.bp-cu-app,
.elementor .bp-cu-app,
.e-con.bp-cu-app,
.bp-cu-app {
	padding: 0;
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-application) > .elementor-container,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-application) > .elementor-row,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-application) > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-application) > .elementor-row > .elementor-column > .elementor-widget-wrap {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	padding-inline: 0 !important;
}

.elementor .elementor-widget.elementor-widget-bp-comment-utiliser-application,
.elementor-widget.elementor-widget-bp-comment-utiliser-application {
	inline-size: 100vw !important;
	max-inline-size: 100vw !important;
	margin-inline-start: calc(50% - 50vw) !important;
	margin-inline-end:   calc(50% - 50vw) !important;
	position: relative;
	z-index: 1;
}

/* =========================================================
 * DECOR LAYER (full-bleed, behind inner)
 * Six absolutely-positioned slots, each anchored to its own
 * screen edge. pointer-events:none so they never block clicks.
 * ========================================================= */
.bp-cu-app__decor {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.bp-cu-app__botanical {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	color: var(--bp-cu-app-olive);
	inline-size: 180px;
	max-block-size: 360px;
}

.bp-cu-app__botanical img,
.bp-cu-app__botanical-svg {
	inline-size: 100%;
	block-size: auto;
	max-block-size: inherit;
	display: block;
	color: inherit;
	fill: none;
	stroke: currentColor;
}

.bp-cu-app__botanical--default { opacity: 0.5; }

.bp-cu-app__botanical--tl {
	inset-block-start: 0;
	left: 0;
	right: auto;
	transform: translate(
		var(--bp-cu-app-tl-x, 0px),
		var(--bp-cu-app-tl-y, 0px)
	);
}
.bp-cu-app__botanical--le {
	inset-block-start: 50%;
	left: 0;
	right: auto;
	transform: translate(
		var(--bp-cu-app-le-x, 0px),
		calc(-50% + var(--bp-cu-app-le-y, 0px))
	);
}
.bp-cu-app__botanical--bl {
	inset-block-end: 0;
	left: 0;
	right: auto;
	transform: translate(
		var(--bp-cu-app-bl-x, 0px),
		var(--bp-cu-app-bl-y, 0px)
	);
}
.bp-cu-app__botanical--tr {
	inset-block-start: 0;
	right: 0;
	left: auto;
	transform: translate(
		var(--bp-cu-app-tr-x, 0px),
		var(--bp-cu-app-tr-y, 0px)
	);
}
.bp-cu-app__botanical--re {
	inset-block-start: 50%;
	right: 0;
	left: auto;
	transform: translate(
		var(--bp-cu-app-re-x, 0px),
		calc(-50% + var(--bp-cu-app-re-y, 0px))
	);
}
.bp-cu-app__botanical--br {
	inset-block-end: 0;
	right: 0;
	left: auto;
	transform: translate(
		var(--bp-cu-app-br-x, 0px),
		var(--bp-cu-app-br-y, 0px)
	);
}

/* =========================================================
 * INNER (1140px, centered)
 * ========================================================= */
.bp-cu-app__inner {
	position: relative;
	z-index: 2;
	inline-size: calc(100% - 40px);
	max-inline-size: var(--bp-cu-app-inner-max);
	margin-inline: auto;
	padding-inline: clamp(18px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* =========================================================
 * 3-COLUMN COMPOSITION (desktop)
 * left | center | right.
 * ========================================================= */
.bp-cu-app__left,
.bp-cu-app__center,
.bp-cu-app__right {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.bp-cu-app__left,
.bp-cu-app__center,
.bp-cu-app__right {
	row-gap: 22px;
}

@media (min-width: 1025px) {

	.bp-cu-app__left,
	.bp-cu-app__center,
	.bp-cu-app__right {
		row-gap: 24px;
	}
}

/* =========================================================
 * HEADER TYPOGRAPHY (left column)
 * ========================================================= */
.bp-cu-app__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-cu-app__eyebrow-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	color: var(--bp-cu-app-green);
	flex: 0 0 auto;
}

.bp-cu-app__eyebrow-mark svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-cu-app__title {
	margin: 0;
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-display);
	font-weight: 400;
	font-size: clamp(40px, 4.6vw, 64px);
	line-height: 1.05;
	letter-spacing: 0.005em;
}

.bp-cu-app__subtitle {
	margin: 0;
	color: var(--bp-cu-app-text);
	font-family: var(--bp-cu-app-font-display);
	font-weight: 400;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.35;
	max-inline-size: 32ch;
}

.bp-cu-app__divider {
	display: block;
	inline-size: 56px;
	block-size: 2px;
	background-color: var(--bp-cu-app-olive);
	margin-block: 4px 2px;
}

.bp-cu-app__body {
	margin: 0;
	color: var(--bp-cu-app-text);
	font-family: var(--bp-cu-app-font-body);
	font-size: 15px;
	line-height: 1.6;
	max-inline-size: 40ch;
}

/* =========================================================
 * PRINCIPLES CARD (under left intro)
 * ========================================================= */
.bp-cu-app__principles {
	margin-block-start: 6px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 20px;
	background-color: var(--bp-cu-app-cream-tint);
	border: 1px solid var(--bp-cu-app-border);
	border-radius: 14px;
	box-shadow: var(--bp-cu-app-shadow);
	max-inline-size: 440px;
}

.bp-cu-app__principles-title {
	margin: 0;
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-cu-app__principles-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.bp-cu-app__principle {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 4px;
	padding-block: 14px;
	align-items: start;
	min-inline-size: 0;
}

.bp-cu-app__principle + .bp-cu-app__principle {
	border-block-start: 1px solid var(--bp-cu-app-border);
}

.bp-cu-app__principle:first-child {
	padding-block-start: 4px;
}

.bp-cu-app__principle:last-child {
	padding-block-end: 4px;
}

.bp-cu-app__principle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-cu-app-principle-icon);
	block-size: var(--bp-cu-app-principle-icon);
	border-radius: 50%;
	background-color: var(--bp-cu-app-green);
	color: var(--bp-cu-app-cream);
	flex: 0 0 auto;
	box-shadow: 0 4px 10px rgba(31, 42, 31, 0.18);
	grid-row: 1 / span 2;
}

.bp-cu-app__principle-icon i,
.bp-cu-app__principle-icon svg {
	color: inherit;
	fill: currentColor;
}

.bp-cu-app__principle-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.bp-cu-app__principle-title {
	margin: 0;
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.bp-cu-app__principle-text {
	margin: 0;
	color: var(--bp-cu-app-text);
	font-family: var(--bp-cu-app-font-body);
	font-size: 12.5px;
	line-height: 1.5;
}

/* =========================================================
 * BON À SAVOIR STRIP (above the central image)
 * ========================================================= */
.bp-cu-app__bon {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background-color: var(--bp-cu-app-cream-tint);
	border: 1px solid var(--bp-cu-app-border);
	border-radius: 16px;
	box-shadow: var(--bp-cu-app-shadow);
	flex-wrap: wrap;
}

.bp-cu-app__bon-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-cu-app-bon-icon);
	block-size: var(--bp-cu-app-bon-icon);
	border-radius: 50%;
	background-color: var(--bp-cu-app-green);
	color: var(--bp-cu-app-cream);
	flex: 0 0 auto;
	box-shadow: 0 4px 10px rgba(31, 42, 31, 0.18);
}

.bp-cu-app__bon-icon i,
.bp-cu-app__bon-icon svg {
	color: inherit;
	fill: currentColor;
}

.bp-cu-app__bon-label {
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--bp-cu-app-olive);
	flex: 0 0 auto;
}

.bp-cu-app__bon-sep {
	display: block;
	inline-size: 1px;
	block-size: 18px;
	background-color: var(--bp-cu-app-olive);
	flex: 0 0 auto;
}

.bp-cu-app__bon-text {
	margin: 0;
	color: var(--bp-cu-app-text);
	font-family: var(--bp-cu-app-font-body);
	font-size: 13px;
	line-height: 1.5;
	flex: 1 1 220px;
	min-inline-size: 0;
}

/* =========================================================
 * MAIN ROOT-ZONE IMAGE + OVAL + OVERLAY
 * ========================================================= */
.bp-cu-app__image-wrap {
	position: relative;
	isolation: isolate;
	block-size: var(--bp-cu-app-image-h);
	overflow: hidden;
	border-radius: 28px;
	background-color: rgba(184, 178, 90, 0.06);
}

.bp-cu-app__image {
	display: block;
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	min-inline-size: 100%;
	min-block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.bp-cu-app__image-placeholder {
	inline-size: 100%;
	block-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-cu-app-olive);
	font-family: var(--bp-cu-app-font-display);
	font-size: 24px;
	text-align: center;
	padding-inline: 16px;
}

/* Dashed oval marking the active root zone. */
.bp-cu-app__oval {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 22%;
	inline-size: 70%;
	block-size: 50%;
	transform: translateX(-50%);
	border: 2px dashed #FFFFFF;
	border-radius: 50% / 50%;
	pointer-events: none;
	z-index: 1;
	box-sizing: border-box;
}

.bp-cu-app__root-marker {
	position: absolute;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background-color: #FFFFFF;
	box-shadow: 0 0 0 2px rgba(55, 79, 55, 0.55);
}

.bp-cu-app__oval .bp-cu-app__root-marker:nth-child(1) {
	inset-block-start: -4px;
	inset-inline-start: 15%;
}
.bp-cu-app__oval .bp-cu-app__root-marker:nth-child(2) {
	inset-block-start: 50%;
	inset-inline-end: -4px;
	transform: translateY(-50%);
}
.bp-cu-app__oval .bp-cu-app__root-marker:nth-child(3) {
	inset-block-end: -4px;
	inset-inline-start: 65%;
}

/* Bottom dark-green gradient overlay with title + text. */
.bp-cu-app__overlay {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 18px 20px;
	background: linear-gradient(
		to top,
		rgba(55, 79, 55, 0.92) 0%,
		rgba(55, 79, 55, 0.55) 60%,
		rgba(55, 79, 55, 0) 100%
	);
	color: var(--bp-cu-app-cream);
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 2;
}

.bp-cu-app__overlay-title {
	margin: 0;
	color: var(--bp-cu-app-cream);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-cu-app__overlay-text {
	margin: 0;
	color: var(--bp-cu-app-cream);
	font-family: var(--bp-cu-app-font-body);
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.95;
	max-inline-size: 56ch;
}

/* =========================================================
 * RIGHT COLUMN — OÙ ET COMMENT APPLIQUER ?
 * ========================================================= */
.bp-cu-app__ou-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.bp-cu-app__ou-title {
	margin: 0;
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-cu-app__ou-underline {
	display: block;
	inline-size: 40px;
	block-size: 2px;
	background-color: var(--bp-cu-app-olive);
}

.bp-cu-app__cases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.bp-cu-app__case {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 4px;
	padding-block: 18px;
	align-items: start;
	min-inline-size: 0;
}

.bp-cu-app__case + .bp-cu-app__case {
	border-block-start: 1px solid var(--bp-cu-app-border);
}

.bp-cu-app__case:first-child {
	padding-block-start: 6px;
}

.bp-cu-app__case:last-child {
	padding-block-end: 0;
}

.bp-cu-app__case-frame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 72px;
	block-size: 72px;
	border-radius: 50%;
	background-color: var(--bp-cu-app-cream-tint);
	border: 1px solid var(--bp-cu-app-border);
	color: var(--bp-cu-app-green);
	flex: 0 0 auto;
}

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

.bp-cu-app__case-icon i,
.bp-cu-app__case-icon svg {
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
	fill: currentColor;
}

.bp-cu-app__case-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
}

.bp-cu-app__case-title {
	margin: 0;
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 1.35;
}

.bp-cu-app__case-text {
	margin: 0;
	color: var(--bp-cu-app-text);
	font-family: var(--bp-cu-app-font-body);
	font-size: 13px;
	line-height: 1.55;
}

/* =========================================================
 * DEPTH STRIP
 * 3 desktop columns: left = depth title + text;
 * center = why + 3 check points; right = soil depth image
 * with 0/5/10 cm markers.
 * ========================================================= */
.bp-cu-app__depth {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
	column-gap: 28px;
	row-gap: 24px;
	align-items: start;
	padding: 22px 24px;
	background-color: var(--bp-cu-app-cream-tint);
	border: 1px solid var(--bp-cu-app-border);
	border-radius: 18px;
	box-shadow: var(--bp-cu-app-shadow);
}

.bp-cu-app__depth-left {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-inline-size: 0;
}

.bp-cu-app__depth-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-cu-app-depth-icon);
	block-size: var(--bp-cu-app-depth-icon);
	color: var(--bp-cu-app-green);
	flex: 0 0 auto;
}

.bp-cu-app__depth-icon i,
.bp-cu-app__depth-icon svg {
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
	fill: currentColor;
}

.bp-cu-app__depth-left-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-inline-size: 0;
}

.bp-cu-app__depth-title {
	margin: 0;
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	line-height: 1.35;
}

.bp-cu-app__depth-text {
	margin: 0;
	color: var(--bp-cu-app-text);
	font-family: var(--bp-cu-app-font-body);
	font-size: 13px;
	line-height: 1.55;
}

.bp-cu-app__depth-why {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-inline-size: 0;
}

.bp-cu-app__depth-why-title {
	margin: 0;
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	line-height: 1.35;
}

.bp-cu-app__depth-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bp-cu-app__depth-check {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	column-gap: 10px;
	align-items: start;
}

.bp-cu-app__depth-check-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	color: var(--bp-cu-app-green);
	flex: 0 0 auto;
}

.bp-cu-app__depth-check-icon svg {
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
	fill: none;
	stroke: currentColor;
}

.bp-cu-app__depth-check-text {
	color: var(--bp-cu-app-text);
	font-family: var(--bp-cu-app-font-body);
	font-size: 13px;
	line-height: 1.55;
	min-inline-size: 0;
}

.bp-cu-app__depth-right {
	display: flex;
	align-items: stretch;
	gap: 14px;
	min-inline-size: 0;
}

.bp-cu-app__depth-image-wrap {
	position: relative;
	flex: 1 1 auto;
	block-size: 140px;
	overflow: hidden;
	border-radius: 12px;
	background-color: rgba(184, 178, 90, 0.10);
}

.bp-cu-app__depth-image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.bp-cu-app__depth-image-placeholder {
	inline-size: 100%;
	block-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-cu-app-olive);
	font-family: var(--bp-cu-app-font-body);
	font-size: 12px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

.bp-cu-app__depth-markers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-block: 2px;
	flex: 0 0 auto;
}

.bp-cu-app__depth-marker {
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-align: end;
	min-inline-size: 40px;
}

/* =========================================================
 * CONSEILS PRATIQUES STRIP
 * Title at top, 4 tips with icons separated by thin vertical
 * dividers on desktop.
 * ========================================================= */
.bp-cu-app__conseils {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 24px;
	background-color: var(--bp-cu-app-cream-tint);
	border: 1px solid var(--bp-cu-app-border);
	border-radius: 18px;
	box-shadow: var(--bp-cu-app-shadow);
}

.bp-cu-app__conseils-title {
	margin: 0;
	color: var(--bp-cu-app-green);
	font-family: var(--bp-cu-app-font-body);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-cu-app__conseils-tips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 12px;
}

.bp-cu-app__conseil {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-inline: 18px;
	min-inline-size: 0;
}

.bp-cu-app__conseil + .bp-cu-app__conseil {
	border-inline-start: 1px solid var(--bp-cu-app-olive);
}

.bp-cu-app__conseil-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-cu-app-conseil-icon);
	block-size: var(--bp-cu-app-conseil-icon);
	color: var(--bp-cu-app-green);
	flex: 0 0 auto;
}

.bp-cu-app__conseil-icon i,
.bp-cu-app__conseil-icon svg {
	inline-size: 100%;
	block-size: 100%;
	color: inherit;
	fill: currentColor;
}

.bp-cu-app__conseil-text {
	color: var(--bp-cu-app-text);
	font-family: var(--bp-cu-app-font-body);
	font-size: 12.5px;
	line-height: 1.5;
	flex: 1 1 auto;
	min-inline-size: 0;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* =========================================================
 * DESKTOP 3-COLUMN COMPOSITION (≥ 1025px)
 * Stack the 3 columns horizontally inside the inner wrapper.
 * ========================================================= */
@media (min-width: 1025px) {

	.bp-cu-app__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
		column-gap: 32px;
		row-gap: 32px;
	}

	/* Re-arrange so the bon-strip + image sit inside the center
	 * column and the depth + conseils strips span the full width. */
	.bp-cu-app__left  { grid-column: 1; grid-row: 1; }
	.bp-cu-app__center { grid-column: 2; grid-row: 1; }
	.bp-cu-app__right  { grid-column: 3; grid-row: 1; }

	.bp-cu-app__depth    { grid-column: 1 / -1; grid-row: 2; }
	.bp-cu-app__conseils { grid-column: 1 / -1; grid-row: 3; }
}

/* =========================================================
 * TABLET (769–1024)
 * ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

	.bp-cu-app { padding-block: 60px; }
	.bp-cu-app__inner {
		gap: 32px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		column-gap: 24px;
		row-gap: 32px;
	}

	.bp-cu-app__left  { grid-column: 1; grid-row: 1; }
	.bp-cu-app__center { grid-column: 2; grid-row: 1; }
	.bp-cu-app__right  { grid-column: 1 / -1; grid-row: 2; }

	.bp-cu-app__depth    { grid-column: 1 / -1; grid-row: 3; }
	.bp-cu-app__conseils { grid-column: 1 / -1; grid-row: 4; }

	.bp-cu-app__title { font-size: clamp(34px, 5vw, 52px); }
	.bp-cu-app__image-wrap { block-size: 460px; }

	.bp-cu-app__right {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
	}

	.bp-cu-app__ou-head {
		flex: 0 0 auto;
	}

	.bp-cu-app__cases {
		flex: 1 1 auto;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px;
	}

	.bp-cu-app__case {
		flex: 1 1 calc(50% - 12px);
		padding-block: 12px;
	}

	.bp-cu-app__case + .bp-cu-app__case {
		border-block-start: 0;
		border-inline-start: 1px solid var(--bp-cu-app-border);
		padding-inline-start: 16px;
	}

	.bp-cu-app__depth {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}

	.bp-cu-app__conseils-tips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 14px;
	}

	.bp-cu-app__conseil + .bp-cu-app__conseil {
		border-inline-start: 0;
	}
}

/* =========================================================
 * MOBILE (≤ 768)
 * Intentional single-column stack with the explicit order
 * required by the spec:
 *   intro → bon à savoir → main root-zone visual →
 *   principes clés → où et comment appliquer ? → 3 cases →
 *   depth strip → conseils pratiques
 * ========================================================= */
@media (max-width: 768px) {

	.bp-cu-app { padding-block: 48px; }
	.bp-cu-app__inner {
		display: flex;
		flex-direction: column;
		gap: 28px;
		padding-inline: 20px;
	}

	/* Force the source order via flex on the parent. */
	.bp-cu-app__left   { order: 1; }
	.bp-cu-app__center { order: 2; }
	.bp-cu-app__right  { order: 3; }
	.bp-cu-app__depth  { order: 4; }
	.bp-cu-app__conseils { order: 5; }

	.bp-cu-app__title { font-size: clamp(34px, 9vw, 48px); }
	.bp-cu-app__subtitle { font-size: 17px; max-inline-size: 100%; }
	.bp-cu-app__body { font-size: 14.5px; max-inline-size: 100%; }

	.bp-cu-app__principles {
		max-inline-size: 100%;
	}

	.bp-cu-app__image-wrap { block-size: 360px; }
	.bp-cu-app__oval { block-size: 44%; }
	.bp-cu-app__overlay { padding: 14px 16px; }
	.bp-cu-app__overlay-title { font-size: 12px; }
	.bp-cu-app__overlay-text { font-size: 12.5px; max-inline-size: 100%; }

	.bp-cu-app__bon {
		padding: 12px 14px;
		gap: 10px;
	}

	.bp-cu-app__bon-sep { display: none; }
	.bp-cu-app__bon-text { flex: 1 1 100%; }

	.bp-cu-app__cases {
		flex-direction: column;
	}

	.bp-cu-app__case {
		grid-template-columns: 64px minmax(0, 1fr);
		padding-block: 16px;
	}

	.bp-cu-app__case + .bp-cu-app__case {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.bp-cu-app__case-frame { inline-size: 60px; block-size: 60px; }
	.bp-cu-app__case-icon { inline-size: 30px; block-size: 30px; }

	.bp-cu-app__depth {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
		padding: 18px;
	}

	.bp-cu-app__depth-right {
		flex-direction: row;
		align-items: stretch;
	}

	.bp-cu-app__depth-image-wrap { block-size: 120px; }

	.bp-cu-app__conseils {
		padding: 18px;
	}

	.bp-cu-app__conseils-tips {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
	}

	.bp-cu-app__conseil {
		padding-inline: 0;
	}

	.bp-cu-app__conseil + .bp-cu-app__conseil {
		border-inline-start: 0;
		border-block-start: 1px solid var(--bp-cu-app-olive);
		padding-block-start: 12px;
	}

	/* Hide large side botanicals on small screens. */
	.bp-cu-app__botanical { display: none; }

	/* Prevent any horizontal overflow. */
	.elementor .elementor-widget.elementor-widget-bp-comment-utiliser-application,
	.elementor-widget.elementor-widget-bp-comment-utiliser-application {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 100% !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}
}

/* =========================================================
 * SMALL MOBILE (≤ 480) — MOBILE REBUILD
 * ========================================================= */
@media (max-width: 480px) {

	/* === ROOT: kill the width bug === */
	.elementor-widget.elementor-widget-bp-comment-utiliser-application,
	.elementor .elementor-widget.elementor-widget-bp-comment-utiliser-application {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		margin-inline: 0 !important;
		overflow-x: clip;
	}
	.bp-cu-app {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		margin-inline: 0 !important;
		padding-block: 40px;
		height: auto;
		min-height: 0;
	}

	/* === INNER: real content wrapper === */
	.bp-cu-app__inner {
		inline-size: calc(100% - 36px) !important;
		width: calc(100% - 36px) !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
		gap: 22px;
		display: flex;
		flex-direction: column;
	}

	.bp-cu-app__inner > * {
		width: 100% !important;
		max-width: none !important;
		min-inline-size: 0 !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		transform: none !important;
	}

	/* Hide botanicals */
	.bp-cu-app__botanical { display: none !important; }
	.bp-cu-app__decor { display: none !important; }

	/* Force source order */
	.bp-cu-app__left   { order: 1; }
	.bp-cu-app__center { order: 2; }
	.bp-cu-app__right  { order: 3; }
	.bp-cu-app__depth  { order: 4; }
	.bp-cu-app__conseils { order: 5; }

	.bp-cu-app__left, .bp-cu-app__center, .bp-cu-app__right {
		row-gap: 18px;
		min-inline-size: 0 !important;
		width: 100% !important;
	}

	.bp-cu-app__title { font-size: clamp(28px, 9vw, 38px); }
	.bp-cu-app__subtitle { font-size: 16px; max-inline-size: 100%; }
	.bp-cu-app__body { font-size: 14px; max-inline-size: 100%; }

	/* === PRINCIPLES CARD === */
	.bp-cu-app__principles {
		max-inline-size: 100% !important;
		padding: 14px 16px;
	}
	.bp-cu-app__principles-title { font-size: 12.5px; }
	.bp-cu-app__principle-title { font-size: 12.5px; }
	.bp-cu-app__principle-text { font-size: 12px; }

	/* === BON À SAVOIR === */
	.bp-cu-app__bon {
		flex-wrap: wrap;
		padding: 10px 12px;
		gap: 10px;
	}
	.bp-cu-app__bon-sep { display: none; }
	.bp-cu-app__bon-text { flex: 1 1 100%; font-size: 12.5px; }

	/* === MAIN IMAGE + OVAL + OVERLAY === */
	.bp-cu-app__image-wrap { block-size: 260px; }
	.bp-cu-app__oval { block-size: 40%; }
	.bp-cu-app__overlay { padding: 12px 14px; }
	.bp-cu-app__overlay-title { font-size: 11px; letter-spacing: 0.12em; }
	.bp-cu-app__overlay-text { font-size: 12px; max-inline-size: 100%; }

	/* === OÙ ET COMMENT APPLIQUER (right col → 1 col) === */
	.bp-cu-app__right { row-gap: 18px; }
	.bp-cu-app__cases {
		flex-direction: column !important;
	}
	.bp-cu-app__case {
		grid-template-columns: 52px minmax(0, 1fr) !important;
		padding-block: 16px;
		width: 100% !important;
	}
	.bp-cu-app__case + .bp-cu-app__case {
		border-inline-start: 0;
		padding-inline-start: 0;
	}
	.bp-cu-app__case-frame { inline-size: 52px; block-size: 52px; }
	.bp-cu-app__case-icon { inline-size: 24px; block-size: 24px; }
	.bp-cu-app__case-title { font-size: 12px; }
	.bp-cu-app__case-text { font-size: 12.5px; }

	/* === DEPTH STRIP → stacked === */
	.bp-cu-app__depth {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		row-gap: 16px;
		column-gap: 0;
		padding: 16px;
	}
	.bp-cu-app__depth > * {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-inline-size: 0 !important;
	}
	.bp-cu-app__depth-right { flex-direction: row; align-items: stretch; }
	.bp-cu-app__depth-image-wrap { block-size: 100px; }

	/* === CONSEILS PRATIQUES === */
	.bp-cu-app__conseils { padding: 16px; }
	.bp-cu-app__conseils-title { font-size: 12.5px; }
	.bp-cu-app__conseils-tips {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		row-gap: 12px;
		column-gap: 0;
	}
	.bp-cu-app__conseils-tips > * {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-inline-size: 0 !important;
	}
	.bp-cu-app__conseil {
		padding-inline: 0;
		width: 100% !important;
	}
	.bp-cu-app__conseil + .bp-cu-app__conseil {
		border-inline-start: 0;
		border-block-start: 1px solid var(--bp-cu-app-olive);
		padding-block-start: 12px;
	}
	.bp-cu-app__conseil-text { font-size: 12px; }
}

/* =========================================================
 * 390 / 375 / 360 (tighter gutters handled at root: 18px)
 * ========================================================= */

/* =========================================================
 * 430 / 390 / 375 / 360 (tighter gutters for narrow phones)
 * ========================================================= */
@media (max-width: 430px) {
	.bp-cu-app__inner {
		padding-inline: 18px;
	}
}
@media (max-width: 390px) {
	.bp-cu-app__inner {
		padding-inline: 16px;
	}
}
@media (max-width: 375px) {
	.bp-cu-app__inner {
		padding-inline: 16px;
	}
}
@media (max-width: 360px) {
	.bp-cu-app__inner {
		padding-inline: 16px;
	}
}

/* =========================================================
 * Safe-area insets (notched devices)
 * ========================================================= */
@supports (padding: max(0px)) {
	.bp-cu-app__inner {
		padding-inline-start: max(clamp(18px, 3vw, 24px), env(safe-area-inset-left));
		padding-inline-end:   max(clamp(18px, 3vw, 24px), env(safe-area-inset-right));
	}
	@media (max-width: 768px) {
		.bp-cu-app__inner {
			padding-inline-start: max(20px, env(safe-area-inset-left));
			padding-inline-end:   max(20px, env(safe-area-inset-right));
		}
	}
	@media (max-width: 480px) {
		.bp-cu-app__inner {
			padding-inline-start: max(16px, env(safe-area-inset-left));
			padding-inline-end:   max(16px, env(safe-area-inset-right));
		}
	}
}

/* =========================================================
 * ARABIC / RTL
 * Display family falls back to the Arabic family; the layout
 * mirrors automatically through logical properties. The root
 * image is NOT mirrored.
 * ========================================================= */
[lang="ar"] .bp-cu-app__title,
[dir="rtl"] .bp-cu-app__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
}

[lang="ar"] .bp-cu-app__subtitle,
[dir="rtl"] .bp-cu-app__subtitle {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 600;
	line-height: 1.5;
}

[lang="ar"] .bp-cu-app__principle-title,
[dir="rtl"] .bp-cu-app__principle-title,
[lang="ar"] .bp-cu-app__principles-title,
[dir="rtl"] .bp-cu-app__principles-title,
[lang="ar"] .bp-cu-app__ou-title,
[dir="rtl"] .bp-cu-app__ou-title,
[lang="ar"] .bp-cu-app__case-title,
[dir="rtl"] .bp-cu-app__case-title,
[lang="ar"] .bp-cu-app__depth-title,
[dir="rtl"] .bp-cu-app__depth-title,
[lang="ar"] .bp-cu-app__depth-why-title,
[dir="rtl"] .bp-cu-app__depth-why-title,
[lang="ar"] .bp-cu-app__conseils-title,
[dir="rtl"] .bp-cu-app__conseils-title,
[lang="ar"] .bp-cu-app__bon-label,
[dir="rtl"] .bp-cu-app__bon-label {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
}

[lang="ar"] .bp-cu-app__overlay-title,
[dir="rtl"] .bp-cu-app__overlay-title,
[lang="ar"] .bp-cu-app__depth-marker,
[dir="rtl"] .bp-cu-app__depth-marker {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
}

/* =========================================================
 * REDUCED MOTION
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.bp-cu-app [data-bp-reveal],
	.bp-cu-app [data-bp-stagger] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* =========================================================
 * ELEMENTOR WRAPPER SPACING
 * ========================================================= */
.e-con:has(> .elementor-widget-bp-comment-utiliser-application),
.e-con:has(> .e-con-inner > .elementor-widget-bp-comment-utiliser-application),
.e-con-inner:has(> .elementor-widget-bp-comment-utiliser-application) {
	--container-default-padding-top: 0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.elementor-widget.elementor-widget-bp-comment-utiliser-application {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* =========================================================
 * PRINT
 * ========================================================= */
@media print {
	.elementor .elementor-widget.elementor-widget-bp-comment-utiliser-application,
	.elementor-widget.elementor-widget-bp-comment-utiliser-application {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}
	.bp-cu-app { padding-block: 0; }
	.bp-cu-app__botanical { display: none; }
}