/* BP Comment Utiliser — "FRÉQUENCE & CONDITIONS" widget styles
 *
 * Full-bleed premium section on the "Comment utiliser" page.
 * Explains WHEN Barbary Plante should be applied and under which
 * irrigation / soil / crop-stage / weather conditions for the
 * best results.
 *
 * Width architecture (HARD CONSTRAINT):
 *   .bp-cu-frequence                   <-- FULL viewport width
 *     .bp-cu-frequence__decor-layer    <-- absolute, full-bleed
 *       .bp-cu-frequence__decor--left     anchored to SCREEN EDGE
 *       .bp-cu-frequence__decor--right    anchored to SCREEN EDGE
 *     .bp-cu-frequence__hero           <-- full-bleed agricultural
 *                                          hero band with image +
 *                                          left-side cream/green fade
 *       .bp-cu-frequence__hero-img
 *       .bp-cu-frequence__hero-fade
 *       .bp-cu-frequence__badge         circular cream badge
 *       .bp-cu-frequence__hero-inner    1140px header copy on the
 *                                        left of the hero
 *     .bp-cu-frequence__wave-wrap      <-- full-bleed organic wave
 *                                          transition into cream
 *     .bp-cu-frequence__inner          <-- max 1140px centered
 *       .bp-cu-frequence__columns       5 equal columns (desktop)
 *         .bp-cu-frequence__column
 *           .bp-cu-frequence__column-icon
 *           .bp-cu-frequence__column-title
 *           .bp-cu-frequence__column-underline (small gold)
 *           .bp-cu-frequence__column-image
 *           .bp-cu-frequence__column-text
 *           .bp-cu-frequence__column-badge (optional "OPTIMAL")
 *       .bp-cu-frequence__summary      <-- bottom rounded cream strip
 *         .bp-cu-frequence__summary-main-icon
 *         .bp-cu-frequence__summary-statement
 *         .bp-cu-frequence__summary-tips (3 supporting mini-points)
 *         .bp-cu-frequence__summary-visual (granule + leaves on
 *                                            the far right)
 *
 * Decoration layer sits OUTSIDE the 1140px inner wrapper so the
 * botanicals can reach the actual screen edges. Inner content is
 * centered with proper 18-20px mobile gutters.
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #FBF6EC  cream
 *   #B8B25A  olive / gold
 *   #F4ECDC  light cream tint
 *   + existing neutrals (#1F2A1F, #5C6A5C, #E4DCCB).
 *
 * All visual rules use logical CSS properties (padding-inline,
 * inset-inline, border-inline-start, text-align start/end) so the
 * same stylesheet covers /ar/ without a separate RTL file.
 */

/* =========================================================
 * ROOT SECTION (full-width, breakout)
 * ========================================================= */
.bp-cu-frequence {
	--bp-cufr-green:        #374F37;
	--bp-cufr-olive:        #B8B25A;
	--bp-cufr-cream:        #FBF6EC;
	--bp-cufr-cream-tint:   #F4ECDC;
	--bp-cufr-text:         #1F2A1F;
	--bp-cufr-text-muted:   #5C6A5C;
	--bp-cufr-border:       #E4DCCB;
	--bp-cufr-white:        #FFFFFF;

	--bp-cufr-inner-max:    1140px;
	--bp-cufr-column-icon:  56px;
	--bp-cufr-summary-icon: 56px;

	--bp-cufr-decor-x:      0px;
	--bp-cufr-decor-y:      0px;
	--bp-cufr-badge-x:      0px;
	--bp-cufr-badge-y:      0px;

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

	--bp-cufr-gradient-green:  linear-gradient(145deg, #4d6b4d 0%, #374F37 45%, #2a3d2a 100%);
	--bp-cufr-gradient-olive:  linear-gradient(140deg, #d4c678 0%, #B8B25A 50%, #8e8a45 100%);
	--bp-cufr-gradient-mixed:  linear-gradient(140deg, #4d6b4d 0%, #B8B25A 100%);
	--bp-cufr-gradient-cream:  linear-gradient(140deg, #F4ECDC 0%, #FBF6EC 55%, #f0e6d0 100%);
	--bp-cufr-gradient-warm:   linear-gradient(135deg, #FBF6EC 0%, #f5ead0 50%, #ead7a6 100%);

	position: relative;
	isolation: isolate;
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: 0 72px;
	padding-inline: 0;
	background:
		radial-gradient(1200px 600px at 50% -10%, rgba(184, 178, 90, 0.18) 0%, rgba(184, 178, 90, 0) 70%),
		linear-gradient(180deg, #FBF6EC 0%, #f6ecd6 100%);
	color: var(--bp-cufr-text);
	font-family: var(--bp-cufr-font-body);
	overflow: hidden;
}

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

/* =========================================================
 * ELEMENTOR FULL-BLEED BREAKOUT
 * Same :has()-anchored pattern as the other BP widgets: 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-frequence) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-frequence) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-frequence) > .e-con,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-frequence) > .e-con > .e-con-inner,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-frequence) > .elementor-container > .elementor-column,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-frequence) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-frequence) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-frequence) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-cu-frequence {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}

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

.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-frequence) > .elementor-container,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-frequence) > .elementor-row,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-frequence) > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-frequence) > .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-frequence,
.elementor-widget.elementor-widget-bp-comment-utiliser-frequence {
	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;
}

/* =========================================================
 * BOTANICAL DECORATIONS — anchored to SCREEN EDGE
 * (never to the 1140px inner)
 * ========================================================= */
.bp-cu-frequence__decor-layer {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.bp-cu-frequence__decor {
	--bp-cufr-decor-x:   0px;
	--bp-cufr-decor-y:   0px;

	position: absolute;
	z-index: 1;
	pointer-events: none;
	display: none;
	color: var(--bp-cufr-green);
	inline-size: 280px;
	block-size: auto;
	transform: translate(var(--bp-cufr-decor-x), var(--bp-cufr-decor-y));
	transform-origin: center center;
}

.bp-cu-frequence__decor.is-on {
	display: block;
}

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

.bp-cu-frequence__decor--left {
	inset-block-start: 40px;
	/* Physical anchor: same FR side in /ar/ (no RTL mirror). */
	left: 0;
	right: auto;
}

.bp-cu-frequence__decor--right {
	inset-block-end: 200px;
	right: 0;
	left: auto;
}

/* =========================================================
 * HERO BAND — full-bleed agricultural scene
 * ========================================================= */
.bp-cu-frequence__hero {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	overflow: hidden;
	/* Hero height is fully controlled by the Elementor
	 * "Hauteur de l'image" responsive control (px / vh). */
	min-block-size: 250px;
	/* Breathing room between the photo band and the columns /
	 * summary below. Tuned per breakpoint further down. */
	margin-block-end: 56px;
	/* Photo is applied as background-image inline so the
	 * wrapper itself owns the full-height image. No child
	 * <img> can clip the photo to its intrinsic height. */
	background-color: #2d3a2a;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	color: var(--bp-cufr-cream);
	isolation: isolate;
}

/* (Legacy <img> child removed in render. Kept as a no-op
 * rule so any cached CSS or 3rd-party selectors that still
 * target the class don't visually break.) */
.bp-cu-frequence__hero-img {
	display: none !important;
}

.bp-cu-frequence__hero-placeholder {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(ellipse 60% 80% at 20% 40%, rgba(184, 178, 90, 0.35) 0%, rgba(184, 178, 90, 0) 60%),
		linear-gradient(120deg, #2d3a2a 0%, #4a6448 40%, #c1a85a 80%, #f4d685 100%);
	background-size: 100% 100%, 200% 200%;
	animation: bp-cufr-hero-shift 18s ease-in-out infinite;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--bp-cufr-font-display);
	font-size: clamp(20px, 3vw, 36px);
	letter-spacing: 0.02em;
	text-align: center;
	padding-inline: 24px;
}

@keyframes bp-cufr-hero-shift {
	0%, 100% { background-position: 0% 50%, 0% 50%; }
	50%      { background-position: 0% 50%, 100% 50%; }
}

/* Soft cream/green fade on the LEFT so the header text is
 * always perfectly readable on top of the photo. */
.bp-cu-frequence__hero-fade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--bp-cufr-cream-tint) 0%,
		var(--bp-cufr-cream-tint) 35%,
		rgba(244, 236, 220, 0.6) 60%,
		rgba(244, 236, 220, 0) 100%
	);
}

[dir="rtl"] .bp-cu-frequence__hero-fade {
	background: linear-gradient(
		270deg,
		var(--bp-cufr-cream-tint) 0%,
		var(--bp-cufr-cream-tint) 35%,
		rgba(244, 236, 220, 0.6) 60%,
		rgba(244, 236, 220, 0) 100%
	);
}

/* Header copy sits on the LEFT of the hero band, constrained
 * to the same 1140px max so it never overflows on small
 * desktops. On mobile it falls into the 20px gutter. */
.bp-cu-frequence__hero-inner {
	position: relative;
	z-index: 3;
	inline-size: 100%;
	max-inline-size: var(--bp-cufr-inner-max);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 24px);
	padding-block-start: clamp(28px, 5vw, 56px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-inline-size: min(var(--bp-cufr-inner-max), calc(100% - 40px));
	/* Solid text layer — never inherit opacity / blend / filter. */
	opacity: 1;
	mix-blend-mode: normal;
}

.bp-cu-frequence__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--bp-cufr-green);
	font-family: var(--bp-cufr-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	line-height: 1.3;
	opacity: 1;
}

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

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

.bp-cu-frequence__eyebrow-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	opacity: 1;
}

.bp-cu-frequence__eyebrow-text::after {
	content: "";
	display: inline-block;
	inline-size: 56px;
	block-size: 1.5px;
	background: var(--bp-cufr-olive);
	opacity: 0.9;
}

.bp-cu-frequence__title {
	margin: 0;
	color: var(--bp-cufr-green);
	font-family: var(--bp-cufr-font-display);
	font-weight: 400;
	font-size: clamp(38px, 4.4vw, 60px);
	line-height: 1.06;
	letter-spacing: 0.005em;
	max-inline-size: 14ch;
	/* Solid dark green — no gradient fill, no transparency. */
	-webkit-text-fill-color: var(--bp-cufr-green);
	background: none;
	opacity: 1;
	mix-blend-mode: normal;
}

.bp-cu-frequence__paragraph {
	margin: 0;
	color: var(--bp-cufr-text);
	font-family: var(--bp-cufr-font-body);
	font-size: 15px;
	line-height: 1.6;
	max-inline-size: 42ch;
	opacity: 1;
	mix-blend-mode: normal;
}

/* =========================================================
 * PREMIUM BADGE (over the plant, on the right of the hero)
 * Cream circular surface, olive border, dark-green icon + text.
 * ========================================================= */
.bp-cu-frequence__badge {
	--bp-cufr-badge-x: 0px;
	--bp-cufr-badge-y: 0px;

	position: absolute;
	z-index: 4;
	inset-block-end: clamp(40px, 12%, 110px);
	inset-inline-end: clamp(40px, 8%, 140px);
	inline-size: 200px;
	block-size: 200px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9) 0%, rgba(244, 236, 220, 0.6) 35%, var(--bp-cufr-cream) 70%);
	color: var(--bp-cufr-green);
	border: 1.5px solid transparent;
	background-clip: padding-box;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.8) inset,
		0 -2px 6px rgba(55, 79, 55, 0.12) inset,
		0 18px 40px -18px rgba(31, 42, 31, 0.45),
		0 0 0 2px var(--bp-cufr-olive),
		0 0 24px -4px rgba(184, 178, 90, 0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px;
	text-align: center;
	transform: translate(var(--bp-cufr-badge-x), var(--bp-cufr-badge-y));
}

.bp-cu-frequence__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	color: var(--bp-cufr-green);
}

.bp-cu-frequence__badge-icon i,
.bp-cu-frequence__badge-icon svg {
	color: var(--bp-cufr-green) !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-cu-frequence__badge-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--bp-cufr-green);
	font-family: var(--bp-cufr-font-body);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.25;
	letter-spacing: 0.02em;
}

.bp-cu-frequence__badge-line1 { color: inherit; }
.bp-cu-frequence__badge-line2 { color: inherit; opacity: 0.85; font-weight: 600; }

/* =========================================================
 * HERO BOTTOM FADE
 * Soft transparent → cream vertical gradient that lets the
 * agricultural photo gently dissolve into the section
 * background near the bottom of the band. Applied as a
 * pseudo-element on the hero so no extra DOM is needed.
 * Sits BELOW the existing left fade and BELOW the header
 * copy, ABOVE the photo.
 * ========================================================= */
.bp-cu-frequence__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Quiet, photographic bottom fade. The image stays
	 * untouched for the top 75% of the band, then a very
	 * short, low-alpha climb in the last 25% dissolves
	 * into the exact page cream. No bright stop, no halo,
	 * no misty white strip — the photo simply disappears
	 * into the section background. */
	background: linear-gradient(
		180deg,
		rgba(251, 246, 236, 0)    0%,
		rgba(251, 246, 236, 0)    75%,
		rgba(251, 246, 236, 0.10) 85%,
		rgba(251, 246, 236, 0.35) 94%,
		var(--bp-cufr-cream)       100%
	);
}

/* =========================================================
 * INNER WRAPPER (1140px content)
 * ========================================================= */
.bp-cu-frequence__inner {
	position: relative;
	z-index: 3;
	inline-size: 100%;
	max-inline-size: var(--bp-cufr-inner-max);
	margin-inline: auto;
	padding-inline: clamp(20px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 56px;
}

/* =========================================================
 * 5 CONDITION COLUMNS
 * Equal width on desktop with thin vertical separators. On
 * mobile they stack into 1 column with horizontal spacing.
 * ========================================================= */
.bp-cu-frequence__columns {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 32px;
	align-items: stretch;
}

.bp-cu-frequence__column {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-inline: 18px;
	padding-block: 8px 4px;
	text-align: center;
	min-inline-size: 0;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bp-cu-frequence__column:hover {
	transform: translateY(-4px);
}

/* Vertical olive separator between columns on desktop. The
 * first column has no inline-start border, the last has no
 * inline-end border. */
.bp-cu-frequence__column + .bp-cu-frequence__column {
	border-inline-start: 1px solid var(--bp-cufr-olive);
}

.bp-cu-frequence__column-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-cufr-column-icon);
	block-size: var(--bp-cufr-column-icon);
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(145deg, #4d6b4d 0%, #374F37 50%, #243524 100%);
	color: var(--bp-cufr-cream);
	flex: 0 0 auto;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.15) inset,
		0 -2px 4px rgba(0, 0, 0, 0.18) inset,
		0 8px 18px -10px rgba(31, 42, 31, 0.4),
		0 0 0 2px rgba(184, 178, 90, 0.35);
}

.bp-cu-frequence__column-icon i,
.bp-cu-frequence__column-icon svg {
	color: var(--bp-cufr-cream) !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	inline-size: calc(var(--bp-cufr-column-icon) * 0.46);
	block-size: calc(var(--bp-cufr-column-icon) * 0.46);
	display: block;
}

.bp-cu-frequence__column-title {
	margin: 0;
	color: var(--bp-cufr-green);
	font-family: var(--bp-cufr-font-body);
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	max-inline-size: 16ch;
}

.bp-cu-frequence__column-underline {
	display: block;
	inline-size: 38px;
	block-size: 2.5px;
	background: linear-gradient(90deg, rgba(184, 178, 90, 0) 0%, #B8B25A 35%, #d4c678 65%, rgba(184, 178, 90, 0) 100%);
	margin-block: 4px 6px;
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(184, 178, 90, 0.4);
}

.bp-cu-frequence__column-image {
	position: relative;
	inline-size: 100%;
	max-inline-size: 180px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 25%, #F4ECDC 0%, #e8dcb8 70%, #d4c896 100%);
	margin-block: 4px 8px;
	padding: 4px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 8px 20px -10px rgba(55, 79, 55, 0.35),
		0 0 0 1.5px rgba(184, 178, 90, 0.5);
}

.bp-cu-frequence__column-image > img,
.bp-cu-frequence__column-image--placeholder {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

.bp-cu-frequence__column-image > .bp-cu-frequence__column-image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-cufr-olive);
	font-family: var(--bp-cufr-font-display);
	font-size: 13px;
	opacity: 0.55;
}

.bp-cu-frequence__column-text {
	margin: 0;
	color: var(--bp-cufr-text);
	font-family: var(--bp-cufr-font-body);
	font-size: 13px;
	line-height: 1.55;
	max-inline-size: 24ch;
}

.bp-cu-frequence__column-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 12px;
	border-radius: 999px;
	background:
		linear-gradient(145deg, #4d6b4d 0%, #374F37 55%, #243524 100%);
	color: var(--bp-cufr-cream);
	font-family: var(--bp-cufr-font-body);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-block-start: 2px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.15) inset,
		0 -1px 2px rgba(0, 0, 0, 0.2) inset,
		0 4px 10px -4px rgba(31, 42, 31, 0.4);
}

/* =========================================================
 * BOTTOM SUMMARY STRIP
 * Large horizontal rounded cream surface. The dark-green
 * main icon on the left, then the statement, then 3 tips,
 * then a small premium visual on the far right.
 * ========================================================= */
.bp-cu-frequence__summary {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1.2fr) auto minmax(0, 1.4fr) auto;
	align-items: center;
	column-gap: 24px;
	padding: 22px 28px;
	background:
		radial-gradient(ellipse 60% 100% at 0% 50%, rgba(184, 178, 90, 0.12) 0%, rgba(184, 178, 90, 0) 70%),
		linear-gradient(140deg, #F4ECDC 0%, #FBF6EC 50%, #f0e6d0 100%);
	border: 1px solid var(--bp-cufr-border);
	border-radius: 22px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.7) inset,
		0 -2px 6px rgba(184, 178, 90, 0.12) inset,
		0 14px 30px -22px rgba(55, 79, 55, 0.45),
		0 0 0 1px rgba(184, 178, 90, 0.2);
}

.bp-cu-frequence__summary-main-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-cufr-summary-icon);
	block-size: var(--bp-cufr-summary-icon);
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(145deg, #4d6b4d 0%, #374F37 50%, #243524 100%);
	color: var(--bp-cufr-cream);
	flex: 0 0 auto;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.18) inset,
		0 -2px 4px rgba(0, 0, 0, 0.2) inset,
		0 6px 14px -8px rgba(31, 42, 31, 0.45),
		0 0 0 2px rgba(184, 178, 90, 0.3);
}

.bp-cu-frequence__summary-main-icon i,
.bp-cu-frequence__summary-main-icon svg {
	color: var(--bp-cufr-cream) !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	inline-size: calc(var(--bp-cufr-summary-icon) * 0.46);
	block-size: calc(var(--bp-cufr-summary-icon) * 0.46);
	display: block;
}

.bp-cu-frequence__summary-statement {
	margin: 0;
	color: var(--bp-cufr-green);
	font-family: var(--bp-cufr-font-display);
	font-weight: 400;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.25;
	max-inline-size: 22ch;
}

.bp-cu-frequence__summary-divider {
	display: block;
	inline-size: 1px;
	block-size: 56px;
	background-color: var(--bp-cufr-olive);
	opacity: 0.6;
}

.bp-cu-frequence__summary-tips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-inline-size: 0;
}

.bp-cu-frequence__summary-tip {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--bp-cufr-text);
	font-family: var(--bp-cufr-font-body);
	font-size: 13.5px;
	line-height: 1.4;
}

.bp-cu-frequence__summary-tip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(140deg, rgba(184, 178, 90, 0.35) 0%, rgba(184, 178, 90, 0.18) 100%);
	color: var(--bp-cufr-green);
	flex: 0 0 auto;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.bp-cu-frequence__summary-tip-icon i,
.bp-cu-frequence__summary-tip-icon svg {
	color: var(--bp-cufr-green) !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	inline-size: 16px;
	block-size: 16px;
	display: block;
}

.bp-cu-frequence__summary-tip-text {
	color: var(--bp-cufr-text);
	font-weight: 500;
}

.bp-cu-frequence__summary-visual {
	flex: 0 0 auto;
	inline-size: 140px;
	block-size: 100px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	color: var(--bp-cufr-olive);
	overflow: hidden;
}

.bp-cu-frequence__summary-visual-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	object-position: right bottom;
}

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

/* =========================================================
 * TABLET (769 – 1024)
 * Hero scales a touch; columns get a bit more breathing room
 * but stay 5-across; the summary strip still fits on one row.
 * ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

	.bp-cu-frequence { padding-block-end: 60px; }
	.bp-cu-frequence__inner { gap: 40px; }

	.bp-cu-frequence__hero { margin-block-end: 40px; }
	.bp-cu-frequence__title { font-size: clamp(32px, 5vw, 48px); }
	.bp-cu-frequence__paragraph { font-size: 14px; max-inline-size: 36ch; }

	.bp-cu-frequence__badge {
		inline-size: 170px;
		block-size: 170px;
		padding: 14px;
	}
	.bp-cu-frequence__badge-body { font-size: 12px; }

	.bp-cu-frequence__column { padding-inline: 12px; gap: 8px; }
	.bp-cu-frequence__column-title { font-size: 14.5px; }
	.bp-cu-frequence__column-text { font-size: 12.5px; }
	.bp-cu-frequence__column-image { max-inline-size: 150px; }

	.bp-cu-frequence__summary {
		column-gap: 18px;
		padding: 18px 22px;
	}
	.bp-cu-frequence__summary-statement { font-size: 17px; }
	.bp-cu-frequence__summary-divider { block-size: 48px; }
	.bp-cu-frequence__summary-visual { inline-size: 110px; block-size: 86px; }
}

/* =========================================================
 * MOBILE (≤ 768)
 * Intentional single-column flow. Hero becomes a much shorter
 * band with a repositioned object-position so the plant does
 * NOT cover the title. Badge floats below the header. The 5
 * condition items stack into 1 column. The summary strip
 * stacks: statement first, then 3 tips, then the granule
 * visual. All side botanicals hide so they never crowd the
 * content. Actual content respects ~20px mobile gutters.
 * ========================================================= */
@media (max-width: 768px) {

	.bp-cu-frequence { padding-block-end: 48px; }
	.bp-cu-frequence__inner {
		gap: 36px;
		padding-inline: 20px;
	}

	/* Hero: shorter, smart-cropped. Height is controlled by
	 * the Elementor responsive control. */
	.bp-cu-frequence__hero { background-position: right top; margin-block-end: 32px; }
	.bp-cu-frequence__hero-fade {
		background: linear-gradient(
			180deg,
			rgba(244, 236, 220, 0.6) 0%,
			var(--bp-cufr-cream-tint) 55%,
			var(--bp-cufr-cream-tint) 100%
		);
	}
	[dir="rtl"] .bp-cu-frequence__hero-fade {
		background: linear-gradient(
			180deg,
			rgba(244, 236, 220, 0.6) 0%,
			var(--bp-cufr-cream-tint) 55%,
			var(--bp-cufr-cream-tint) 100%
		);
	}

	.bp-cu-frequence__hero-inner {
		padding-block-start: 28px;
		gap: 14px;
	}
	.bp-cu-frequence__title {
		font-size: clamp(30px, 8vw, 42px);
		max-inline-size: 100%;
	}
	.bp-cu-frequence__paragraph { font-size: 14px; max-inline-size: 100%; }

	/* Badge drops under the header copy, becomes a horizontal
	 * compact pill so it never breaks the rhythm. */
	.bp-cu-frequence__badge {
		position: static;
		inline-size: auto;
		block-size: auto;
		flex-direction: row;
		border-radius: 999px;
		padding: 10px 18px;
		gap: 10px;
		margin-block-start: 18px;
		transform: none;
	}
	.bp-cu-frequence__badge-icon { inline-size: 24px; block-size: 24px; }
	.bp-cu-frequence__badge-icon i,
	.bp-cu-frequence__badge-icon svg { inline-size: 100%; block-size: 100%; }
	.bp-cu-frequence__badge-body {
		flex-direction: row;
		gap: 6px;
		font-size: 12px;
	}
	.bp-cu-frequence__badge-line2 { opacity: 1; }

	/* Condition columns: stack to 1 column with comfortable
	 * vertical rhythm. No more vertical separators. */
	.bp-cu-frequence__columns {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}
	.bp-cu-frequence__column {
		flex-direction: column;
		gap: 10px;
		padding: 18px 16px;
		background:
			radial-gradient(ellipse 80% 100% at 50% 0%, rgba(184, 178, 90, 0.10) 0%, rgba(184, 178, 90, 0) 70%),
			linear-gradient(140deg, #FBF6EC 0%, #F4ECDC 100%);
		border: 1px solid var(--bp-cufr-border);
		border-radius: 16px;
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.6) inset,
			0 6px 16px -10px rgba(55, 79, 55, 0.18);
	}
	.bp-cu-frequence__column + .bp-cu-frequence__column {
		border-inline-start: 1px solid var(--bp-cufr-border);
	}
	.bp-cu-frequence__column-image { max-inline-size: 160px; }

	/* Summary strip: stack to 1 column. Statement first, then
	 * the 3 tips, then the granule visual. */
	.bp-cu-frequence__summary {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
		padding: 20px 18px;
	}
	.bp-cu-frequence__summary-main-icon { margin-inline: auto; }
	.bp-cu-frequence__summary-statement { text-align: center; max-inline-size: 100%; font-size: 18px; }
	.bp-cu-frequence__summary-divider { display: none; }
	.bp-cu-frequence__summary-tips { gap: 10px; }
	.bp-cu-frequence__summary-visual {
		inline-size: 100%;
		block-size: 110px;
		justify-content: center;
	}
	.bp-cu-frequence__summary-visual-img { object-position: center bottom; }

	/* Botanicals hide on small screens. */
	.bp-cu-frequence__decor { display: none !important; }
}

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

	/* === ROOT: kill the width bug === */
	.elementor-widget.elementor-widget-bp-comment-utiliser-frequence,
	.elementor .elementor-widget.elementor-widget-bp-comment-utiliser-frequence {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		margin-inline: 0 !important;
		overflow-x: clip;
	}
	.bp-cu-frequence {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		margin-inline: 0 !important;
		padding-block-end: 40px;
		height: auto;
		min-height: 0;
		/* Remove overall section bg color on mobile; keep the
		 * hero's own background image intact (see rule below). */
		background-color: transparent !important;
		background: none !important;
	}

	/* === HERO: full-viewport-width breakout on mobile === */
	.bp-cu-frequence__hero {
		inline-size: 100vw !important;
		width: 100vw !important;
		max-inline-size: 100vw !important;
		margin-inline-start: calc(50% - 50vw) !important;
		margin-inline-end: calc(50% - 50vw) !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		/* Strip ALL backgrounds so the text sits directly on the
		 * page background on mobile. */
		background-image: none !important;
		background-color: transparent !important;
		background: none !important;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		margin-block-end: 24px;
	}
	/* Hide the cream ::before fade overlay on mobile so the
	 * page background (not a cream layer) shows through. */
	.bp-cu-frequence__hero::before { display: none !important; }

	/* Hide the hero fade + bottom gradient so they never paint
	 * a cream/olive layer over the page background. */
	.bp-cu-frequence__hero-fade,
	.bp-cu-frequence__hero-placeholder {
		background: none !important;
		background-image: none !important;
		background-color: transparent !important;
		opacity: 0 !important;
	}
	.bp-cu-frequence__hero::after {
		content: none !important;
		display: none !important;
	}

	/* === HERO INNER: real content wrapper (safe 18px gutters) === */
	.bp-cu-frequence__hero-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;
	}

	/* === INNER: real content wrapper === */
	.bp-cu-frequence__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: 28px;
		display: flex;
		flex-direction: column;
	}

	.bp-cu-frequence__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-frequence__decor { display: none !important; }

	/* === HERO === */
	.bp-cu-frequence__hero { margin-block-end: 24px; }
	.bp-cu-frequence__title { font-size: clamp(28px, 9vw, 38px); }
	.bp-cu-frequence__paragraph { font-size: 13.5px; max-inline-size: 100%; }

	/* === 5 CONDITION COLUMNS → 1 col === */
	.bp-cu-frequence__columns {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		row-gap: 16px;
		column-gap: 0;
	}
	.bp-cu-frequence__columns > * {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-inline-size: 0 !important;
	}
	.bp-cu-frequence__column { padding: 16px 14px; }
	.bp-cu-frequence__column + .bp-cu-frequence__column {
		border-inline-start: 1px solid var(--bp-cufr-border);
	}
	.bp-cu-frequence__column-image { max-inline-size: 140px; }

	/* === SUMMARY STRIP → 1 col === */
	.bp-cu-frequence__summary {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		row-gap: 14px;
		column-gap: 0;
		padding: 16px;
	}
	.bp-cu-frequence__summary > * {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-inline-size: 0 !important;
	}
	.bp-cu-frequence__summary-main-icon { margin-inline: auto; }
	.bp-cu-frequence__summary-statement { text-align: center; max-inline-size: 100%; font-size: 17px; }
	.bp-cu-frequence__summary-divider { display: none; }
	.bp-cu-frequence__summary-tips { gap: 10px; }
	/* Hide the summary visual image + collapse its wrapper so
	 * it leaves ZERO empty gap on mobile. */
	.bp-cu-frequence__summary-visual,
	.bp-cu-frequence__summary-visual-img {
		display: none !important;
	}
}

/* =========================================================
 * MICRO PATCH 0.1.284 — TRANSPARENT SECTION BG + FADED HERO
 * - Section root color removed (page bg shows through)
 * - Hero `background-image` (inline) kept intact, but masked
 *   by a `::before` cream overlay at 0.88 opacity so the
 *   image's effective opacity is ~0.12 (matches the
 *   "0.10–0.16" target). Opacity is NOT applied to the
 *   hero itself.
 * - Mobile (≤480): ::before is hidden so the existing
 *   "image off" decision stays intact.
 * ========================================================= */
.bp-cu-frequence {
	background: transparent !important;
	background-color: transparent !important;
}

.bp-cu-frequence__hero {
	background-color: transparent !important;
}

.bp-cu-frequence__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--bp-cufr-cream);
	opacity: 0.88;
	pointer-events: none;
}

/* =========================================================
 * TINIEST PHONES (≤ 360)
 * Minimum 16px gutters so content never touches the edges.
 * ========================================================= */
@media (max-width: 360px) {
	.bp-cu-frequence__inner { padding-inline: 16px; }
	.bp-cu-frequence__hero-inner { padding-inline: 16px; }
}