/* BP Comment Utiliser Dosage widget styles
 *
 * Full-bleed "GUIDE D'UTILISATION — Dosage" section for the
 * "Comment utiliser" page. Same full-viewport breakout pattern
 * as the other Comment Utiliser widgets: 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.
 *
 * Layout (desktop, top → bottom):
 *   1. Editorial 2-column row
 *        LEFT  — eyebrow / large serif title / subtitle / gold
 *                divider / body paragraph / large grounded
 *                product visual on a soft pedestal
 *        RIGHT — dosage information stack:
 *                  A) Top 3-item info strip (G3 / G4 / Application)
 *                  B) Main dosage table card (header + 5 rows)
 *                  C) "À retenir" strip with subtle right-side
 *                     line-art landscape decoration
 *                  D) "Conseils d'utilisation" strip (4 tips)
 *                  E) Fine-print note
 *
 * Mobile (≤ 768px):
 *   - Whole section collapses to a single-column flow.
 *   - The 3-item info strip stacks into a clean vertical list
 *     with horizontal separators between items.
 *   - The dosage table becomes a STACKED CARD layout (each row
 *     becomes its own card with the crop name as a header and
 *     Culture / Stade / Dose par / Appl. key-value rows below)
 *     so it never overflows the viewport.
 *   - The "À retenir" and "Conseils d'utilisation" strips
 *     stack their inner items cleanly with no crowded edges.
 *   - Botanicals hide on small screens so they never crowd the
 *     content; content padding stays comfortable.
 *
 * Approved palette ONLY:
 *   #374F37  dark green
 *   #FBF6EC  cream
 *   #B8B25A  olive / gold
 *   #F4ECDC  light cream tint
 *   #FFFFFF  white
 *   plus existing neutral tokens (#1F2A1F, #E4DCCB).
 *
 * All rules are scoped under `.bp-cu-dosage` 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-dosage {
	/* Theme tokens (approved palette only). */
	--bp-cu-dosage-bg:           #FBF6EC;
	--bp-cu-dosage-green:        #374F37;
	--bp-cu-dosage-cream:        #FBF6EC;
	--bp-cu-dosage-cream-tint:   #F4ECDC;
	--bp-cu-dosage-olive:        #B8B25A;
	--bp-cu-dosage-text:         #1F2A1F;
	--bp-cu-dosage-border:       #E4DCCB;
	--bp-cu-dosage-shadow:       0 6px 18px rgba(55, 79, 55, 0.07);

	--bp-cu-dosage-inner-max:    1140px;
	--bp-cu-dosage-visual-h:     480px;
	--bp-cu-dosage-top-icon:     40px;
	--bp-cu-dosage-retenir-icon: 40px;
	--bp-cu-dosage-conseil-icon: 24px;

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

	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-dosage-bg);
	color: var(--bp-cu-dosage-text);
	font-family: var(--bp-cu-dosage-font-body);
}

.bp-cu-dosage *,
.bp-cu-dosage *::before,
.bp-cu-dosage *::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-dosage) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-dosage) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-dosage) > .e-con,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-dosage) > .e-con > .e-con-inner,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-dosage) > .elementor-container > .elementor-column,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-dosage) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-dosage) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor-section:has(> .elementor-container .elementor-widget-bp-comment-utiliser-dosage) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-cu-dosage {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
}

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

.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-dosage) > .elementor-container,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-dosage) > .elementor-row,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-dosage) > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-comment-utiliser-dosage) > .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-dosage,
.elementor-widget.elementor-widget-bp-comment-utiliser-dosage {
	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-dosage__decor {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.bp-cu-dosage__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-dosage-olive);
	inline-size: 180px;
	max-block-size: 360px;
}

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

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

/* Each slot is anchored to a screen edge and may be nudged
 * inward / outward via per-device CSS variables. */
.bp-cu-dosage__botanical--tl {
	inset-block-start: 0;
	left: 0;
	right: auto;
	inline-size: 320px;
	block-size: 140px;
}
.bp-cu-dosage__botanical--le {
	inset-block-start: 30%;
	left: 0;
	right: auto;
	inline-size: 80px;
	block-size: 320px;
}
.bp-cu-dosage__botanical--bl {
	inset-block-end: 0;
	left: 0;
	right: auto;
	inline-size: 320px;
	block-size: 220px;
}
.bp-cu-dosage__botanical--tr {
	inset-block-start: 0;
	right: 0;
	left: auto;
	inline-size: 320px;
	block-size: 160px;
}
.bp-cu-dosage__botanical--re {
	inset-block-start: 20%;
	right: 0;
	left: auto;
	inline-size: 80px;
	block-size: 320px;
}
.bp-cu-dosage__botanical--br {
	inset-block-end: 0;
	right: 0;
	left: auto;
	inline-size: 320px;
	block-size: 220px;
}

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

/* =========================================================
 * TOP ROW (intro+visual | right column)
 * Desktop: 2 columns (≈ 5/12 left + 7/12 right). Mobile: 1 column.
 * ========================================================= */
.bp-cu-dosage__top {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: 40px;
	row-gap: 32px;
	align-items: start;
	position: relative;
	z-index: 2;
}

.bp-cu-dosage__left {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-inline-size: 0;
}

.bp-cu-dosage__right {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-inline-size: 0;
}

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

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

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

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

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

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

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

/* =========================================================
 * LEFT PRODUCT VISUAL
 * Soft cream pedestal with a large premium composition (bag +
 * bowl + beaker + leaves). Rounded, soft shadow.
 * ========================================================= */
.bp-cu-dosage__visual {
	position: relative;
	isolation: isolate;
	margin-block-start: 22px;
	block-size: var(--bp-cu-dosage-visual-h);
	overflow: hidden;
	border-radius: 24px;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.bp-cu-dosage__visual::after {
	display: none;
}

.bp-cu-dosage__visual-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	position: relative;
	z-index: 1;
}

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

/* =========================================================
 * TOP 3-ITEM INFO STRIP
 * Rounded cream card. 3 equal items, each: small line icon +
 * title + short description. Vertical olive separators between
 * items on desktop. On mobile the strip stacks into a vertical
 * list with horizontal separators.
 * ========================================================= */
.bp-cu-dosage__top-strip {
	list-style: none;
	margin: 0;
	padding: 18px 22px;
	background-color: var(--bp-cu-dosage-cream-tint);
	border: 1px solid var(--bp-cu-dosage-border);
	border-radius: 16px;
	box-shadow: var(--bp-cu-dosage-shadow);
	display: flex;
	align-items: stretch;
	gap: 0;
}

.bp-cu-dosage__top-item {
	flex: 1 1 0;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-inline: 18px;
	min-inline-size: 0;
}

.bp-cu-dosage__top-item:first-child { padding-inline-start: 0; }
.bp-cu-dosage__top-item:last-child  { padding-inline-end: 0; }

/* Vertical olive separator between items (desktop only). */
.bp-cu-dosage__top-item + .bp-cu-dosage__top-item {
	border-inline-start: 1px solid var(--bp-cu-dosage-olive);
}

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

.bp-cu-dosage__top-item-icon i,
.bp-cu-dosage__top-item-icon svg {
	color: inherit;
	fill: currentColor;
	inline-size: calc(var(--bp-cu-dosage-top-icon) * 0.48);
	block-size: calc(var(--bp-cu-dosage-top-icon) * 0.48);
}

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

.bp-cu-dosage__top-item-title {
	color: var(--bp-cu-dosage-green);
	font-family: var(--bp-cu-dosage-font-body);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.bp-cu-dosage__top-item-desc {
	color: var(--bp-cu-dosage-text);
	font-family: var(--bp-cu-dosage-font-body);
	font-size: 12.5px;
	line-height: 1.45;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* =========================================================
 * MAIN DOSAGE TABLE CARD
 * Large rounded surface. Top header bar (dark green / olive
 * gradient) holds the table title on the inline-start and the
 * "Par application" label on the inline-end. Then the actual
 * table.
 * ========================================================= */
.bp-cu-dosage__table-card {
	background-color: var(--bp-cu-dosage-cream);
	border: 1px solid var(--bp-cu-dosage-border);
	border-radius: 18px;
	box-shadow: var(--bp-cu-dosage-shadow);
	overflow: hidden;
}

.bp-cu-dosage__table-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 22px;
	background: linear-gradient(
		90deg,
		var(--bp-cu-dosage-green) 0%,
		#4a6448 60%,
		var(--bp-cu-dosage-olive) 130%
	);
	color: var(--bp-cu-dosage-cream);
}

.bp-cu-dosage__table-title {
	font-family: var(--bp-cu-dosage-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	line-height: 1.3;
	color: inherit;
}

.bp-cu-dosage__table-label {
	font-family: var(--bp-cu-dosage-font-body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--bp-cu-dosage-cream);
	opacity: 0.85;
	white-space: nowrap;
}

.bp-cu-dosage__table-wrap {
	inline-size: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bp-cu-dosage__table-wrap:focus { outline: 2px solid var(--bp-cu-dosage-olive); outline-offset: 2px; }

.bp-cu-dosage__table {
	inline-size: 100%;
	min-inline-size: 640px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--bp-cu-dosage-cream);
	color: var(--bp-cu-dosage-text);
	font-family: var(--bp-cu-dosage-font-body);
}

.bp-cu-dosage__th {
	text-align: start;
	vertical-align: bottom;
	padding: 14px 14px;
	background-color: rgba(244, 236, 220, 0.55);
	border-block-end: 1px solid var(--bp-cu-dosage-border);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bp-cu-dosage-green);
	line-height: 1.25;
}

.bp-cu-dosage__th--culture { inline-size: 22%; }
.bp-cu-dosage__th--stage   { inline-size: 24%; }
.bp-cu-dosage__th--dose    { inline-size: 38%; text-align: center; }
.bp-cu-dosage__th--apps    { inline-size: 16%; text-align: center; }

.bp-cu-dosage__th--dose .bp-cu-dosage__th-main { display: block; margin-block-end: 6px; }

.bp-cu-dosage__th-sub {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--bp-cu-dosage-text);
	opacity: 0.85;
	text-transform: none;
}

.bp-cu-dosage__th-sub > span { text-align: center; }

.bp-cu-dosage__td {
	padding: 16px 14px;
	border-block-end: 1px solid var(--bp-cu-dosage-border);
	vertical-align: middle;
	font-size: 13px;
	line-height: 1.45;
	color: var(--bp-cu-dosage-text);
}

.bp-cu-dosage__row:last-child .bp-cu-dosage__td { border-block-end: 0; }

.bp-cu-dosage__td--culture {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bp-cu-dosage__row-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 8px;
	background-color: rgba(184, 178, 90, 0.18);
	color: var(--bp-cu-dosage-green);
	flex: 0 0 auto;
}

.bp-cu-dosage__row-icon i,
.bp-cu-dosage__row-icon svg {
	inline-size: 16px;
	block-size: 16px;
	color: inherit;
	fill: currentColor;
}

.bp-cu-dosage__row-culture {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-inline-size: 0;
}

.bp-cu-dosage__row-culture-main {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--bp-cu-dosage-green);
}

.bp-cu-dosage__row-culture-sub {
	font-size: 11.5px;
	color: var(--bp-cu-dosage-text);
	opacity: 0.75;
}

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

.bp-cu-dosage__stages li {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--bp-cu-dosage-text);
}

.bp-cu-dosage__td--dose { text-align: center; font-weight: 600; font-size: 12.5px; color: var(--bp-cu-dosage-text); }
.bp-cu-dosage__td--apps { text-align: center; font-weight: 700; font-size: 13px; color: var(--bp-cu-dosage-green); }

/* =========================================================
 * STACKED CARD (mobile only) — the .bp-cu-dosage__table-cards
 * element is hidden on desktop and shown on mobile. It renders
 * each row as its own card with the crop name as a header and
 * Culture / Stade / Dose par / Appl. key-value rows below.
 * We render a single canonical element from the same data: the
 * .bp-cu-dosage__table is used on desktop; on mobile the CSS
 * visibility flips via the data-bp-dosage-table attribute.
 * ========================================================= */

/* =========================================================
 * "À RETENIR" STRIP
 * Soft cream rounded card. Circular info icon on the
 * inline-start, then title + body, then a subtle agricultural
 * line-art landscape decoration on the inline-end.
 * ========================================================= */
.bp-cu-dosage__retenir {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 22px;
	background-color: var(--bp-cu-dosage-cream-tint);
	border: 1px solid var(--bp-cu-dosage-border);
	border-radius: 16px;
	box-shadow: var(--bp-cu-dosage-shadow);
	overflow: hidden;
}

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

.bp-cu-dosage__retenir-icon i,
.bp-cu-dosage__retenir-icon svg {
	color: inherit;
	fill: currentColor;
	inline-size: calc(var(--bp-cu-dosage-retenir-icon) * 0.48);
	block-size: calc(var(--bp-cu-dosage-retenir-icon) * 0.48);
}

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

.bp-cu-dosage__retenir-title {
	margin: 0;
	color: var(--bp-cu-dosage-green);
	font-family: var(--bp-cu-dosage-font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
}

.bp-cu-dosage__retenir-text {
	margin: 0;
	color: var(--bp-cu-dosage-text);
	font-family: var(--bp-cu-dosage-font-body);
	font-size: 13px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.bp-cu-dosage__retenir-decor-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	inline-size: 200px;
	block-size: 56px;
	color: var(--bp-cu-dosage-olive);
	opacity: 0.7;
	margin-inline-start: 16px;
}

.bp-cu-dosage__retenir-decor {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	fill: none;
	stroke: currentColor;
}

/* =========================================================
 * "CONSEILS D'UTILISATION" STRIP
 * Soft cream rounded card. Eyebrow at the top with a small
 * leaf mark, then 4 horizontally-aligned tips with thin
 * inline-start dividers on desktop. On mobile the tips stack
 * with a 2-column tablet grid.
 * ========================================================= */
.bp-cu-dosage__conseils {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 22px;
	background-color: var(--bp-cu-dosage-cream-tint);
	border: 1px solid var(--bp-cu-dosage-border);
	border-radius: 16px;
	box-shadow: var(--bp-cu-dosage-shadow);
}

.bp-cu-dosage__conseils-eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--bp-cu-dosage-green);
	font-family: var(--bp-cu-dosage-font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-cu-dosage__conseils-eyebrow-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 18px;
	block-size: 18px;
	color: var(--bp-cu-dosage-green);
}

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

.bp-cu-dosage__conseils-tips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.bp-cu-dosage__conseils-tip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-inline: 16px;
	flex: 1 1 0;
	min-inline-size: 0;
}

.bp-cu-dosage__conseils-tip:first-child { padding-inline-start: 0; }
.bp-cu-dosage__conseils-tip:last-child  { padding-inline-end: 0; }

.bp-cu-dosage__conseils-tip + .bp-cu-dosage__conseils-tip {
	border-inline-start: 1px solid var(--bp-cu-dosage-olive);
}

.bp-cu-dosage__conseils-tip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-cu-dosage-conseil-icon);
	block-size: var(--bp-cu-dosage-conseil-icon);
	color: var(--bp-cu-dosage-green);
	flex: 0 0 auto;
	margin-block-start: 2px;
}

.bp-cu-dosage__conseils-tip-icon i,
.bp-cu-dosage__conseils-tip-icon svg {
	inline-size: var(--bp-cu-dosage-conseil-icon);
	block-size: var(--bp-cu-dosage-conseil-icon);
	color: inherit;
	fill: currentColor;
}

.bp-cu-dosage__conseils-tip-text {
	color: var(--bp-cu-dosage-text);
	font-family: var(--bp-cu-dosage-font-body);
	font-size: 12.5px;
	line-height: 1.45;
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

/* =========================================================
 * FINE-PRINT
 * ========================================================= */
.bp-cu-dosage__fineprint {
	margin: 0;
	color: var(--bp-cu-dosage-text);
	font-family: var(--bp-cu-dosage-font-body);
	font-size: 11.5px;
	font-style: italic;
	line-height: 1.55;
	opacity: 0.75;
	text-align: start;
	max-inline-size: 80ch;
}

/* =========================================================
 * MOBILE DOSAGE TABLE → STACKED CARDS
 * On ≤768px the .bp-cu-dosage__table-wrap is hidden and the
 * .bp-cu-dosage__cards block is shown. Each card carries the
 * crop name as a header and the column labels as dt/dd rows
 * so the same data reads cleanly on a phone.
 * ========================================================= */
.bp-cu-dosage__cards { display: none; }

.bp-cu-dosage__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background-color: var(--bp-cu-dosage-cream);
	border: 1px solid var(--bp-cu-dosage-border);
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(55, 79, 55, 0.05);
}

.bp-cu-dosage__card + .bp-cu-dosage__card { margin-block-start: 12px; }

.bp-cu-dosage__card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block-end: 8px;
	border-block-end: 1px solid var(--bp-cu-dosage-border);
}

.bp-cu-dosage__card-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

.bp-cu-dosage__card-row dt {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bp-cu-dosage-olive);
}

.bp-cu-dosage__card-row dd {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bp-cu-dosage-text);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bp-cu-dosage__card-row dd > span {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
}

.bp-cu-dosage__card-key {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--bp-cu-dosage-olive);
	text-transform: uppercase;
	margin-inline-end: 4px;
}

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

	.bp-cu-dosage { padding-block: 60px; }
	.bp-cu-dosage__inner { gap: 32px; }
	.bp-cu-dosage__top { column-gap: 28px; }

	.bp-cu-dosage__title { font-size: clamp(34px, 5vw, 52px); }
	.bp-cu-dosage__visual { block-size: 420px; }

	.bp-cu-dosage__top-strip { padding: 16px 18px; }
	.bp-cu-dosage__top-item { padding-inline: 14px; }

	.bp-cu-dosage__th--culture { inline-size: 24%; }
	.bp-cu-dosage__th--stage   { inline-size: 26%; }
	.bp-cu-dosage__th--dose    { inline-size: 34%; }
	.bp-cu-dosage__th--apps    { inline-size: 16%; }

	.bp-cu-dosage__retenir-decor-wrap { inline-size: 150px; }

	.bp-cu-dosage__conseils { padding: 16px 18px; }
	.bp-cu-dosage__conseils-tip { padding-inline: 12px; }
	.bp-cu-dosage__conseils-tip-text { font-size: 12px; }
}

/* =========================================================
 * MOBILE (≤ 768)
 * Intentional single-column stack. The table becomes stacked
 * cards; the 3-item strip stacks vertically; the right column
 * keeps generous left/right padding so nothing touches the
 * viewport edges. Botanicals hide so they never crowd content.
 * ========================================================= */
@media (max-width: 768px) {

	.bp-cu-dosage { padding-block: 48px; }
	.bp-cu-dosage__inner {
		gap: 28px;
		padding-inline: 18px;
	}

	/* Editorial row: stack to one column. */
	.bp-cu-dosage__top {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

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

	.bp-cu-dosage__visual { block-size: 320px; }

	/* Top 3-item strip: stack vertically. */
	.bp-cu-dosage__top-strip {
		flex-direction: column;
		align-items: stretch;
		padding: 8px 18px;
		gap: 0;
	}
	.bp-cu-dosage__top-item {
		padding-block: 14px;
		padding-inline: 0;
	}
	.bp-cu-dosage__top-item + .bp-cu-dosage__top-item {
		border-inline-start: 0;
		border-block-start: 1px solid var(--bp-cu-dosage-olive);
	}

	/* Hide the horizontal table; show the stacked cards. */
	.bp-cu-dosage__table-wrap { display: none; }
	.bp-cu-dosage__cards { display: flex; }

	.bp-cu-dosage__retenir {
		padding: 16px 18px;
		gap: 12px;
	}
	.bp-cu-dosage__retenir-decor-wrap {
		display: none;
	}

	.bp-cu-dosage__conseils {
		padding: 16px 18px;
	}
	.bp-cu-dosage__conseils-tips {
		flex-direction: column;
		gap: 0;
	}
	.bp-cu-dosage__conseils-tip {
		padding-block: 12px;
		padding-inline: 0;
	}
	.bp-cu-dosage__conseils-tip + .bp-cu-dosage__conseils-tip {
		border-inline-start: 0;
		border-block-start: 1px solid var(--bp-cu-dosage-olive);
	}

	.bp-cu-dosage__fineprint { font-size: 11px; }

	/* All side botanicals hide so they never crowd the content. */
	.bp-cu-dosage__botanical { display: none; }
}

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

	/* === ROOT: kill the width bug === */
	.elementor-widget.elementor-widget-bp-comment-utiliser-dosage,
	.elementor .elementor-widget.elementor-widget-bp-comment-utiliser-dosage {
		inline-size: 100% !important;
		max-inline-size: 100% !important;
		min-inline-size: 0 !important;
		margin-inline: 0 !important;
		overflow-x: clip;
	}
	.bp-cu-dosage {
		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-dosage__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-dosage__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-dosage__botanical { display: none !important; }
	.bp-cu-dosage__decor { display: none !important; }

	/* === TOP GRID → 1 column === */
	.bp-cu-dosage__top {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: 1fr !important;
		grid-auto-flow: row !important;
		row-gap: 18px;
		column-gap: 0;
	}
	.bp-cu-dosage__top > * {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: none !important;
		min-inline-size: 0 !important;
	}

	.bp-cu-dosage__left, .bp-cu-dosage__right {
		min-inline-size: 0 !important;
		width: 100% !important;
	}

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

	.bp-cu-dosage__visual { block-size: 240px; margin-block-start: 12px; }

	/* === TOP 3-ITEM STRIP → vertical === */
	.bp-cu-dosage__top-strip {
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 8px 16px;
		gap: 0;
	}
	.bp-cu-dosage__top-item {
		flex: 0 0 auto !important;
		width: 100% !important;
		padding-block: 12px;
		padding-inline: 0;
	}
	.bp-cu-dosage__top-item + .bp-cu-dosage__top-item {
		border-inline-start: 0;
		border-block-start: 1px solid var(--bp-cu-dosage-olive);
	}

	/* === TABLE CARDS (mobile) === */
	.bp-cu-dosage__table-wrap { display: none; }
	.bp-cu-dosage__cards {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px;
		width: 100% !important;
	}
	.bp-cu-dosage__card { width: 100% !important; max-width: none !important; min-inline-size: 0 !important; }

	/* === RETENIR === */
	.bp-cu-dosage__retenir {
		padding: 16px;
		gap: 12px;
	}
	.bp-cu-dosage__retenir-decor-wrap { display: none; }
	.bp-cu-dosage__retenir-text,
	.bp-cu-dosage__body { font-size: 13.5px; }

	/* === CONSEILS === */
	.bp-cu-dosage__conseils { padding: 16px; }
	.bp-cu-dosage__conseils-tips {
		flex-direction: column !important;
		gap: 0;
	}
	.bp-cu-dosage__conseils-tip {
		flex: 0 0 auto !important;
		width: 100% !important;
		padding-block: 12px;
		padding-inline: 0;
	}
	.bp-cu-dosage__conseils-tip + .bp-cu-dosage__conseils-tip {
		border-inline-start: 0;
		border-block-start: 1px solid var(--bp-cu-dosage-olive);
	}

	.bp-cu-dosage__fineprint { font-size: 11px; }
}