/* BP Domaines d'utilisation widget styles
 *
 * Tunisia product page "Domaines d'utilisation" section.
 *
 * Layout:
 *   - widget stays inside its own 1140px container (no full-bleed)
 *   - centered header: eyebrow + serif title + description
 *   - 3 equal cards in one row, ~24px gap (desktop)
 *   - each card: top image, curved-wave SVG divider, lower
 *     area with badge / number / title / paragraph / icon row /
 *     supporting sentence
 *   - card 1: dark-green overlay, white text
 *   - card 2: warm brown/gold overlay, white text
 *   - card 3: cream lower area, dark text + curved wave from
 *     the image down to the cream area
 *   - bottom strip: full-width rounded panel with small olive
 *     branches on each side, green circle badge, strong +
 *     secondary text on the left, 4 icon items on the right
 *   - decorative botanicals: top-left and top-right, fully
 *     responsive (width, X, Y, rotation, opacity) from Elementor
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #EDDBC3  cream
 *   #B8B25A  olive / gold
 *   #8C6A3A  warm brown/gold (overlay for card 2)
 *   #FFFFFF  white
 *   plus existing neutral tokens (#FBF6EC, #E4DCCB, #1F2A1F,
 *   #5C6A5C). No invented greens or browns.
 *
 * SCOPING:
 *   Every rule is scoped under `.bp-domaines-utilisation`
 *   (the widget's own root). There are NO global selector
 *   leaks: no rule targets `.elementor-section`,
 *   `.elementor-container`, `.e-con`, `.e-con-inner`,
 *   `.elementor-widget-wrap`, etc. unless the selector ALSO
 *   carries the `.bp-domaines-utilisation` class.
 *
 *   This keeps the widget's CSS from breaking sibling
 *   widgets or page-level containers.
 *
 *   Logical CSS properties (margin-inline, padding-inline,
 *   inset-inline, inline-size, block-size) are used so LTR
 *   and RTL share the same ruleset.
 */

/* =========================================================
 * ROOT (1140px container, centered)
 * ========================================================= */
.bp-domaines-utilisation {
	/* ---- Theme tokens (approved palette only) ---- */
	--bp-du-green:          #374F37;
	--bp-du-olive:          #B8B25A;
	--bp-du-cream:          #EDDBC3;
	--bp-du-warm:           #8C6A3A;
	--bp-du-white:          #FFFFFF;
	--bp-du-text:           #1F2A1F;
	--bp-du-text-muted:     #5C6A5C;
	--bp-du-border:         #E4DCCB;
	--bp-du-card-bg:        #FBF6EC;

	--bp-du-inner-max:      1140px;
	--bp-du-cards-gap:      24px;

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

	/* Per-card overlay / text / icon colors are set inline by
	 * the widget (Elementor color controls) so each card can
	 * have its own palette without re-defining the global
	 * variables. */
	--bp-du-overlay:        var(--bp-du-green);
	--bp-du-card-text:      var(--bp-du-white);
	--bp-du-icon-bg:        var(--bp-du-green);

	/* Decorative top-left / top-right botanicals. Every value
	 * is fully overridable from Elementor per-device. */
	--bp-du-tl-width:       230px;
	--bp-du-tl-x:           -10px;
	--bp-du-tl-y:           0px;
	--bp-du-tl-rotate:      0deg;
	--bp-du-tl-opacity:     100%;

	--bp-du-tr-width:       230px;
	--bp-du-tr-x:           -10px;
	--bp-du-tr-y:           0px;
	--bp-du-tr-rotate:      0deg;
	--bp-du-tr-opacity:     100%;

	--bp-du-card-image-h:   200px;
	--bp-du-strip-circle:   56px;
	--bp-du-strip-branch:   72px;
	--bp-du-strip-branch-tablet: 56px;

	position: relative;
	isolation: isolate;
	/* No overflow clipping on the root: the decorative
	 * top-left and top-right botanicals are absolutely
	 * positioned and must be free to extend beyond the
	 * 1140px section box so they look like they belong to
	 * the page, not to the widget. */
	overflow: visible;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--bp-du-inner-max);
	margin-inline: auto;
	padding-block: 72px;
	padding-inline: 0;
	background: transparent;
	color: var(--bp-du-text);
	font-family: var(--bp-du-font-body);
}

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

/* =========================================================
 * INNER (centers content inside the 1140px container)
 * ========================================================= */
.bp-du__inner {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-du-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* =========================================================
 * Decorative top botanicals
 * Absolutely positioned inside the widget's own root, never
 * affects layout, never targets global Elementor containers.
 * Each leaf uses its own CSS variables (--bp-du-{tl,tr}-*)
 * which are written inline by Elementor per-device.
 * ========================================================= */
.bp-domaines-utilisation .bp-du__botanical {
	position: absolute;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: var(--bp-du-olive);
	max-inline-size: 45%;
}

.bp-domaines-utilisation .bp-du__botanical img,
.bp-domaines-utilisation .bp-du__botanical svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
	color: inherit;
}

.bp-domaines-utilisation .bp-du__botanical--tl {
	inset-block-start: 0;
	left: 0;
	right: auto;
	inline-size: var(--bp-du-tl-width);
	transform: translate(
		var(--bp-du-tl-x, -10px),
		var(--bp-du-tl-y, 0px)
	) rotate(var(--bp-du-tl-rotate, 0deg));
	opacity: var(--bp-du-tl-opacity, 100%);
}

.bp-domaines-utilisation .bp-du__botanical--tr {
	inset-block-start: 0;
	right: 0;
	left: auto;
	inline-size: var(--bp-du-tr-width);
	transform: translate(
		var(--bp-du-tr-x, -10px),
		var(--bp-du-tr-y, 0px)
	) rotate(var(--bp-du-tr-rotate, 0deg));
	opacity: var(--bp-du-tr-opacity, 100%);
}

.bp-domaines-utilisation .bp-du__botanical-svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
	color: inherit;
	fill: none;
	stroke: currentColor;
}

/* =========================================================
 * HEADER
 * ========================================================= */
.bp-domaines-utilisation .bp-du__header {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	margin-block-end: 40px;
}

.bp-domaines-utilisation .bp-du__eyebrow {
	position: relative;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--bp-du-green);
	font-family: var(--bp-du-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
}

.bp-domaines-utilisation .bp-du__eyebrow-line {
	inline-size: 44px;
	block-size: 1px;
	background: var(--bp-du-olive);
	flex: 0 0 auto;
}

.bp-domaines-utilisation .bp-du__eyebrow-text {
	white-space: nowrap;
}

.bp-domaines-utilisation .bp-du__eyebrow-leaf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 16px;
	block-size: 16px;
	color: var(--bp-du-olive);
	flex: 0 0 auto;
}

.bp-domaines-utilisation .bp-du__eyebrow-mark {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-domaines-utilisation .bp-du__title {
	margin: 0;
	color: #374F3C;
	font-family: var(--bp-du-font-display);
	font-weight: 400;
	font-size: clamp(36px, 3.8vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	max-inline-size: 980px;
}

.bp-domaines-utilisation .bp-du__description {
	margin: 0;
	color: var(--bp-du-text);
	font-family: var(--bp-du-font-body);
	font-size: 16.5px;
	line-height: 1.55;
	max-inline-size: 720px;
}

/* =========================================================
 * 3 CARDS ROW
 * ========================================================= */
.bp-domaines-utilisation .bp-du__cards {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--bp-du-cards-gap, 24px);
	row-gap: 28px;
	align-items: stretch;
}

/* =========================================================
 * CARD
 * Each card has:
 *  - a top image (object-fit: cover, fixed block-size)
 *  - a curved SVG wave that creates a smooth transition into
 *    the lower (overlay) area
 *  - a lower area with the overlay color and text color
 *    (variables set inline by Elementor per card)
 *  - a round icon badge, a number, a title, a paragraph, an
 *    icon row, and a supporting sentence
 * ========================================================= */
.bp-domaines-utilisation .bp-du__card {
	position: relative;
	background: var(--bp-du-overlay);
	color: var(--bp-du-card-text);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	isolation: isolate;
}

.bp-domaines-utilisation .bp-du__card .bp-du__wave {
	position: absolute;
	inset-block-start: var(--bp-du-card-image-h, 200px);
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 60px;
	margin-block-start: -30px;
	z-index: 1;
	display: block;
	pointer-events: none;
}

.bp-domaines-utilisation .bp-du__card .bp-du__wave svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-domaines-utilisation .bp-du__card-image {
	position: relative;
	inline-size: 100%;
	block-size: var(--bp-du-card-image-h, 200px);
	overflow: hidden;
	z-index: 0;
	flex: 0 0 auto;
}

.bp-domaines-utilisation .bp-du__card-image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	object-fit: cover;
	object-position: center;
}

/* Hide the old curved-wave divider on every card. */
.bp-domaines-utilisation .bp-du__card .bp-du__wave {
	display: none;
}

.bp-domaines-utilisation .bp-du__card-image--empty {
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.18));
}

.bp-domaines-utilisation .bp-du__card-body {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	padding: 24px 22px 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	color: var(--bp-du-card-text);
}

.bp-domaines-utilisation .bp-du__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: var(--bp-du-icon-bg);
	color: var(--bp-du-card-text);
	flex: 0 0 auto;
	margin-block-end: 6px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.bp-domaines-utilisation .bp-du__badge i,
.bp-domaines-utilisation .bp-du__badge svg {
	inline-size: 18px;
	block-size: 18px;
	fill: currentColor;
}

.bp-domaines-utilisation .bp-du__card-number {
	margin: 0;
	color: var(--bp-du-card-text);
	font-family: var(--bp-du-font-display);
	font-weight: 400;
	font-size: 56px;
	line-height: 1;
	letter-spacing: -0.01em;
	opacity: 0.85;
}

.bp-domaines-utilisation .bp-du__card-title {
	margin: 2px 0 6px;
	color: var(--bp-du-card-text);
	font-family: var(--bp-du-font-body);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
}

.bp-domaines-utilisation .bp-du__card-description {
	margin: 0 0 16px;
	color: var(--bp-du-card-text);
	font-family: var(--bp-du-font-body);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.55;
}

/* Icon row (3 or 5 items) */
.bp-domaines-utilisation .bp-du__icon-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	inline-size: 100%;
}

.bp-domaines-utilisation .bp-du__card--c2 .bp-du__icon-row,
.bp-domaines-utilisation .bp-du__card--c3 .bp-du__icon-row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.bp-domaines-utilisation .bp-du__icon-row-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 4px 2px;
	min-inline-size: 0;
}

.bp-domaines-utilisation .bp-du__icon-row-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-du-card-text);
	flex: 0 0 auto;
	inline-size: 24px;
	block-size: 24px;
}

.bp-domaines-utilisation .bp-du__icon-row-icon i,
.bp-domaines-utilisation .bp-du__icon-row-icon svg {
	inline-size: 24px !important;
	block-size: 24px !important;
	min-inline-size: 24px;
	min-block-size: 24px;
	max-inline-size: 24px;
	max-block-size: 24px;
	fill: currentColor;
}

.bp-domaines-utilisation .bp-du__icon-row-text {
	display: flex;
	flex-direction: column;
	gap: 0;
	color: var(--bp-du-card-text);
	font-family: var(--bp-du-font-body);
	line-height: 1.3;
	min-inline-size: 0;
	max-inline-size: 100%;
}

.bp-domaines-utilisation .bp-du__icon-row-line {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bp-du-card-text);
	letter-spacing: 0.01em;
}

.bp-domaines-utilisation .bp-du__icon-row-line--alt {
	font-size: 11.5px;
	font-weight: 500;
	opacity: 0.85;
}

/* Thin separator between icon row and supporting sentence */
.bp-domaines-utilisation .bp-du__card-rule {
	margin: 14px 0 14px;
	inline-size: 100%;
	block-size: 1px;
	border: 0;
	background: rgba(255,255,255,0.22);
}

.bp-domaines-utilisation .bp-du__card-supporting {
	margin: 0;
	color: var(--bp-du-card-text);
	font-family: var(--bp-du-font-body);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.55;
	opacity: 0.95;
}

/* Card 3: cream area overrides the dark overlay so the lower
 * half is light instead of dark. */
.bp-domaines-utilisation .bp-du__card--c3 {
	--bp-du-overlay: var(--bp-du-cream);
	--bp-du-card-text: #1F2A1F;
	--bp-du-icon-bg: #8C6A3A;
}

.bp-domaines-utilisation .bp-du__card--c3 .bp-du__card-rule {
	background: #374F37;
}

/* =========================================================
 * BOTTOM STRIP
 * ========================================================= */
.bp-domaines-utilisation .bp-du__strip {
	position: relative;
	z-index: 2;
	margin-block-start: 28px;
}

.bp-domaines-utilisation .bp-du__strip-card {
	inline-size: 100%;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	background: var(--bp-du-card-bg);
	border: 1px solid var(--bp-du-border);
	border-radius: 18px;
}

.bp-domaines-utilisation .bp-du__strip-branch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-du-olive);
	flex: 0 0 auto;
	inline-size: var(--bp-du-strip-branch);
	block-size: var(--bp-du-strip-branch);
}

.bp-domaines-utilisation .bp-du__strip-branch img,
.bp-domaines-utilisation .bp-du__strip-branch svg {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	display: block;
	object-fit: contain;
	fill: none;
	stroke: currentColor;
}

.bp-domaines-utilisation .bp-du__strip-branch--left {
	margin-inline-end: 4px;
}

.bp-domaines-utilisation .bp-du__strip-branch--right {
	margin-inline-start: 4px;
}

.bp-domaines-utilisation .bp-du__strip-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-du-strip-circle);
	block-size: var(--bp-du-strip-circle);
	border-radius: 50%;
	background: var(--bp-du-green);
	color: var(--bp-du-white);
	flex: 0 0 auto;
}

.bp-domaines-utilisation .bp-du__strip-circle i,
.bp-domaines-utilisation .bp-du__strip-circle svg {
	inline-size: 25px;
	block-size: 25px;
	max-inline-size: 25px;
	max-block-size: 25px;
	fill: currentColor;
}

.bp-domaines-utilisation .bp-du__strip-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 1 auto;
	min-inline-size: 220px;
	max-inline-size: 360px;
	font-family: var(--bp-du-font-body);
	line-height: 1.45;
}

.bp-domaines-utilisation .bp-du__strip-text--strong {
	color: var(--bp-du-text);
	font-size: 15.5px;
	font-weight: 700;
}

.bp-domaines-utilisation .bp-du__strip-text--secondary {
	color: var(--bp-du-text-muted);
	font-size: 13.5px;
	font-weight: 500;
}

.bp-domaines-utilisation .bp-du__strip-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.bp-domaines-utilisation .bp-du__strip-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 4px 4px;
	min-inline-size: 0;
}

.bp-domaines-utilisation .bp-du__strip-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	color: var(--bp-du-green);
	flex: 0 0 auto;
}

.bp-domaines-utilisation .bp-du__strip-item-icon i,
.bp-domaines-utilisation .bp-du__strip-item-icon svg {
	inline-size: 24px;
	block-size: 24px;
	max-inline-size: 24px;
	max-block-size: 24px;
	fill: currentColor;
}

.bp-domaines-utilisation .bp-du__strip-item-text {
	display: flex;
	flex-direction: column;
	gap: 0;
	color: var(--bp-du-text);
	font-family: var(--bp-du-font-body);
	line-height: 1.3;
	min-inline-size: 0;
	max-inline-size: 100%;
}

.bp-domaines-utilisation .bp-du__strip-item-line {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bp-du-text);
	letter-spacing: 0.01em;
}

.bp-domaines-utilisation .bp-du__strip-item-line--alt {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--bp-du-text-muted);
}

/* =========================================================
 * TABLET (769–1024)
 * ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
	.bp-domaines-utilisation { padding-block: 56px; }
	.bp-domaines-utilisation .bp-du__header { margin-block-end: 32px; }
	.bp-domaines-utilisation .bp-du__title { font-size: clamp(30px, 4.2vw, 40px); }
	.bp-domaines-utilisation .bp-du__description { font-size: 15.5px; }
	.bp-domaines-utilisation .bp-du__cards { column-gap: 18px; }
	.bp-domaines-utilisation .bp-du__card-image { --bp-du-card-image-h: 180px; }
	.bp-domaines-utilisation .bp-du__card-body { padding: 22px 18px 20px; }
	.bp-domaines-utilisation .bp-du__card-number { font-size: 48px; }
	.bp-domaines-utilisation .bp-du__card-title { font-size: 17px; }
	.bp-domaines-utilisation .bp-du__card-description { font-size: 13px; }
	.bp-domaines-utilisation .bp-du__icon-row { gap: 6px; }
	.bp-domaines-utilisation .bp-du__card--c2 .bp-du__icon-row,
	.bp-domaines-utilisation .bp-du__card--c3 .bp-du__icon-row { gap: 10px; }
	.bp-domaines-utilisation .bp-du__icon-row-line { font-size: 12px; }
	.bp-domaines-utilisation .bp-du__icon-row-line--alt { font-size: 11px; }
	.bp-domaines-utilisation .bp-du__card-supporting { font-size: 12px; }
	.bp-domaines-utilisation .bp-du__strip-card { padding: 18px 18px; gap: 14px; }
	.bp-domaines-utilisation .bp-du__strip-circle { --bp-du-strip-circle: 48px; }
	.bp-domaines-utilisation .bp-du__strip-circle i,
	.bp-domaines-utilisation .bp-du__strip-circle svg { inline-size: 21px; block-size: 21px; }
	.bp-domaines-utilisation .bp-du__strip-text { min-inline-size: 180px; max-inline-size: 280px; }
	.bp-domaines-utilisation .bp-du__strip-text--strong { font-size: 14.5px; }
	.bp-domaines-utilisation .bp-du__strip-text--secondary { font-size: 12.5px; }
	.bp-domaines-utilisation .bp-du__strip-items { gap: 10px; }
	.bp-domaines-utilisation .bp-du__strip-item-line { font-size: 12px; }
	.bp-domaines-utilisation .bp-du__strip-item-line--alt { font-size: 11px; }
	.bp-domaines-utilisation .bp-du__strip-branch { --bp-du-strip-branch: 56px; }
}

/* =========================================================
 * MOBILE (≤ 768px)
 *
 * The 3 cards stack vertically in the original visual order
 * (CULTURES → TYPES DE SOLS → METHODES). The icon row
 * becomes a clean 2x2 layout when there are 5 items and
 * stays a single column when there are 3 items. The bottom
 * strip stacks each piece vertically so nothing collides.
 * ========================================================= */
@media (max-width: 768px) {

	.bp-domaines-utilisation { padding-block: 48px; }

	.bp-domaines-utilisation .bp-du__header { margin-block-end: 28px; gap: 12px; }
	.bp-domaines-utilisation .bp-du__eyebrow { font-size: 12px; letter-spacing: 0.18em; gap: 10px; }
	.bp-domaines-utilisation .bp-du__eyebrow-line { inline-size: 24px; }
	.bp-domaines-utilisation .bp-du__eyebrow-leaf { inline-size: 14px; block-size: 14px; }
	.bp-domaines-utilisation .bp-du__title { font-size: clamp( 28px, 7.5vw, 36px ); line-height: 1.1; }
	.bp-domaines-utilisation .bp-du__description { font-size: 15px; line-height: 1.55; max-inline-size: 540px; }

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

	.bp-domaines-utilisation .bp-du__card { border-radius: 16px; }
	.bp-domaines-utilisation .bp-du__card-image { --bp-du-card-image-h: 170px; }
	.bp-domaines-utilisation .bp-du__card-body { padding: 22px 20px 20px; }
	.bp-domaines-utilisation .bp-du__badge { inline-size: 40px; block-size: 40px; }
	.bp-domaines-utilisation .bp-du__badge i,
	.bp-domaines-utilisation .bp-du__badge svg { inline-size: 16px; block-size: 16px; }
	.bp-domaines-utilisation .bp-du__card-number { font-size: 44px; }
	.bp-domaines-utilisation .bp-du__card-title { font-size: 16px; }
	.bp-domaines-utilisation .bp-du__card-description { font-size: 13.5px; margin-block-end: 14px; }

	/* Card 1 icon row: 5 items → 2x2 + 1 full-width */
	.bp-domaines-utilisation .bp-du__card--c1 .bp-du__icon-row {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		row-gap: 12px;
		column-gap: 8px;
	}
	.bp-domaines-utilisation .bp-du__card--c1 .bp-du__icon-row-item:nth-child( 5 ) {
		grid-column: 1 / -1;
	}

	.bp-domaines-utilisation .bp-du__card--c2 .bp-du__icon-row,
	.bp-domaines-utilisation .bp-du__card--c3 .bp-du__icon-row {
		grid-template-columns: repeat( 1, minmax( 0, 1fr ) );
		row-gap: 10px;
		column-gap: 0;
	}
	.bp-domaines-utilisation .bp-du__card--c2 .bp-du__icon-row-item,
	.bp-domaines-utilisation .bp-du__card--c3 .bp-du__icon-row-item {
		flex-direction: row;
		align-items: center;
		text-align: start;
		gap: 10px;
		justify-content: flex-start;
	}
	.bp-domaines-utilisation .bp-du__card--c2 .bp-du__icon-row-text,
	.bp-domaines-utilisation .bp-du__card--c3 .bp-du__icon-row-text {
		text-align: start;
	}

	.bp-domaines-utilisation .bp-du__icon-row-icon { inline-size: 22px; block-size: 22px; }
	.bp-domaines-utilisation .bp-du__icon-row-icon i,
	.bp-domaines-utilisation .bp-du__icon-row-icon svg { inline-size: 22px; block-size: 22px; }
	.bp-domaines-utilisation .bp-du__icon-row-line { font-size: 12.5px; }
	.bp-domaines-utilisation .bp-du__icon-row-line--alt { font-size: 11.5px; }

	.bp-domaines-utilisation .bp-du__card-rule { margin-block: 12px; }
	.bp-domaines-utilisation .bp-du__card-supporting { font-size: 12.5px; }

	.bp-domaines-utilisation .bp-du__strip { margin-block-start: 24px; }
	.bp-domaines-utilisation .bp-du__strip-card {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 18px 16px;
	}
	.bp-domaines-utilisation .bp-du__strip-branch { display: none; }
	.bp-domaines-utilisation .bp-du__strip-circle { --bp-du-strip-circle: 46px; align-self: flex-start; }
	.bp-domaines-utilisation .bp-du__strip-circle i,
	.bp-domaines-utilisation .bp-du__strip-circle svg { inline-size: 20px; block-size: 20px; }
	.bp-domaines-utilisation .bp-du__strip-text {
		min-inline-size: 0;
		max-inline-size: 100%;
	}
	.bp-domaines-utilisation .bp-du__strip-text--strong { font-size: 14.5px; }
	.bp-domaines-utilisation .bp-du__strip-text--secondary { font-size: 13px; }
	.bp-domaines-utilisation .bp-du__strip-items {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		row-gap: 12px;
		column-gap: 8px;
	}
	.bp-domaines-utilisation .bp-du__strip-item-icon { inline-size: 22px; block-size: 22px; }
	.bp-domaines-utilisation .bp-du__strip-item-icon i,
	.bp-domaines-utilisation .bp-du__strip-item-icon svg { inline-size: 20px; block-size: 20px; }
	.bp-domaines-utilisation .bp-du__strip-item-line { font-size: 12px; }
	.bp-domaines-utilisation .bp-du__strip-item-line--alt { font-size: 11px; }
}

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

	.bp-domaines-utilisation { padding-block: 40px; }

	.bp-domaines-utilisation .bp-du__header { margin-block-end: 22px; }
	.bp-domaines-utilisation .bp-du__title { font-size: clamp( 24px, 7.5vw, 30px ); }
	.bp-domaines-utilisation .bp-du__description { font-size: 14.5px; }

	.bp-domaines-utilisation .bp-du__cards { row-gap: 16px; }
	.bp-domaines-utilisation .bp-du__card-image { --bp-du-card-image-h: 150px; }
	.bp-domaines-utilisation .bp-du__card-body { padding: 20px 18px 18px; }
	.bp-domaines-utilisation .bp-du__badge { inline-size: 36px; block-size: 36px; }
	.bp-domaines-utilisation .bp-du__badge i,
	.bp-domaines-utilisation .bp-du__badge svg { inline-size: 14px; block-size: 14px; }
	.bp-domaines-utilisation .bp-du__card-number { font-size: 38px; }
	.bp-domaines-utilisation .bp-du__card-title { font-size: 15px; letter-spacing: 0.06em; }
	.bp-domaines-utilisation .bp-du__card-description { font-size: 13px; }
	.bp-domaines-utilisation .bp-du__card-supporting { font-size: 12px; }

	.bp-domaines-utilisation .bp-du__strip-card { padding: 16px 14px; }
	.bp-domaines-utilisation .bp-du__strip-circle { --bp-du-strip-circle: 40px; }
	.bp-domaines-utilisation .bp-du__strip-circle i,
	.bp-domaines-utilisation .bp-du__strip-circle svg { inline-size: 18px; block-size: 18px; }
	.bp-domaines-utilisation .bp-du__strip-text--strong { font-size: 13.5px; }
	.bp-domaines-utilisation .bp-du__strip-text--secondary { font-size: 12px; }
	.bp-domaines-utilisation .bp-du__strip-item-line { font-size: 11.5px; }
	.bp-domaines-utilisation .bp-du__strip-item-line--alt { font-size: 10.5px; }
}

/* =========================================================
 * Safe-area insets (notched devices)
 * ========================================================= */
@supports (padding: max(0px)) {
	.bp-domaines-utilisation .bp-du__inner {
		padding-inline-start: max(clamp(16px, 3vw, 24px), env(safe-area-inset-left));
		padding-inline-end:   max(clamp(16px, 3vw, 24px), env(safe-area-inset-right));
	}
}

/* ---------------- SMALL MOBILE (≤ 480px) ----------------
 * Domaines cards: 1 card per row, image above body, full
 * width within the 18px page gutter. */
@media ( max-width: 480px ) {
	.bp-domaines-utilisation .bp-du__inner {
		inline-size: calc(100% - 36px) !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}
	.bp-domaines-utilisation .bp-du__cards {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		column-gap: 0 !important;
		row-gap: 16px !important;
		width: 100% !important;
	}
	.bp-domaines-utilisation .bp-du__card,
	.bp-domaines-utilisation .bp-du__card--c1,
	.bp-domaines-utilisation .bp-du__card--c2,
	.bp-domaines-utilisation .bp-du__card--c3 {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		margin: 0 !important;
	}
	.bp-domaines-utilisation .bp-du__icon-row,
	.bp-domaines-utilisation .bp-du__icon-row-item,
	.bp-domaines-utilisation .bp-du__icon-row-icon,
	.bp-domaines-utilisation .bp-du__icon-row-text {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}
	/* Force the icon-row grid (which is repeat(2,1fr) on c1 at 768px) to 1 col on mobile. */
	.bp-domaines-utilisation .bp-du__card--c1 .bp-du__icon-row,
	.bp-domaines-utilisation .bp-du__card--c2 .bp-du__icon-row,
	.bp-domaines-utilisation .bp-du__card--c3 .bp-du__icon-row {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-flow: row !important;
		column-gap: 0 !important;
		row-gap: 8px !important;
	}
	.bp-domaines-utilisation .bp-du__icon-row-item,
	.bp-domaines-utilisation .bp-du__icon-row-icon,
	.bp-domaines-utilisation .bp-du__icon-row-text {
		grid-column: 1 / -1 !important;
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
	}
	/* Decorative wave is absolutely positioned — contain it inside the card. */
	.bp-domaines-utilisation .bp-du__wave,
	.bp-domaines-utilisation .bp-du__wave svg,
	.bp-domaines-utilisation .bp-du__card-image,
	.bp-domaines-utilisation .bp-du__card-image img {
		position: static !important;
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		inset: auto !important;
		transform: none !important;
		pointer-events: none !important;
	}

	/* Reset restrictive min-inline-size across the whole widget on mobile. */
	.bp-du,
	.bp-domaines-utilisation,
	.bp-domaines-utilisation * {
		min-inline-size: 0 !important;
	}
}

/* =========================================================
 * ARABIC / RTL
 * Display family falls back to the Arabic family; the rest
 * of the layout mirrors automatically through logical
 * properties.
 * ========================================================= */
[lang="ar"] .bp-domaines-utilisation .bp-du__title,
[dir="rtl"] .bp-domaines-utilisation .bp-du__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-domaines-utilisation .bp-du__card-number,
[dir="rtl"] .bp-domaines-utilisation .bp-du__card-number {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
}

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

/* =========================================================
 * Print
 * ========================================================= */
@media print {
	.bp-domaines-utilisation { padding-block: 0; }
	.bp-domaines-utilisation .bp-du__botanical { display: none; }
}