/* ATLASYN Barbary Plante - minimal site helpers.
 *
 * Only universal helpers that the project actually reuses.
 * No client component library. Elementor remains the layout
 * tool; this file only carries stable, reusable primitives.
 *
 * Uses logical properties (margin-inline, padding-inline,
 * inset-inline, text-align: start/end) so LTR and RTL work
 * from the same ruleset without mirroring.
 */

body {
	background: var(--bp-bg);
	color: var(--bp-fg);
	font-family: var(--bp-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Prevent any descendant (decorative images, full-bleed
   widgets using 100vw) from pushing the page horizontally.
   `clip` is preferred over `hidden` because it does not create
   a scroll container, so it does not interfere with sticky
   positioning or position: fixed children. */
html {
	overflow-x: clip;
}

/* Override parent theme's .site-main padding so the Hero sits flush
   against the header (no white space between header and hero). */
.site-main {
	padding-block: 0 !important;
}

/* Hide the WordPress page title on the front page so only
   the Elementor hero H1 is the document title. */
.home .entry-title,
.home .page-title,
.home header.entry-header h1 {
	display: none !important;
}

html[lang="ar"] body,
html[dir="rtl"] body,
body.translatepress-ar {
	font-family: var(--bp-font-arabic);
}

h1, h2, h3, h4, h5, h6,
.atlasyn-bp-display {
	font-family: var(--bp-font-display);
	font-weight: 400;
	letter-spacing: -0.005em;
}

/* Arabic must NOT inherit the Latin display family. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
body.translatepress-ar h1,
body.translatepress-ar h2,
body.translatepress-ar h3,
body.translatepress-ar h4,
body.translatepress-ar h5,
body.translatepress-ar h6 {
	font-family: var(--bp-font-arabic);
	font-weight: 700;
	line-height: 1.4;
}

/* Soft organic card surface reused by Elementor sections. */
.atlasyn-bp-card {
	background: var(--bp-bg);
	border: 1px solid var(--bp-border-soft);
	border-radius: 1rem;
	padding: 1.5rem;
}

/* Cream surface for alternating editorial sections. */
.atlasyn-bp-surface-cream {
	background: var(--bp-bg-cream);
	color: var(--bp-fg);
}

/* Deep-green surface for conversion / dark editorial blocks. */
.atlasyn-bp-surface-green {
	background: var(--bp-primary);
	color: var(--bp-fg-on-green);
}

/* Editorial hairline. */
.atlasyn-bp-hairline {
	border: 0;
	border-top: 1px solid var(--bp-border-soft);
	margin-block: 2rem;
}

/* Semantic error surface (non-brand). Used for form errors,
 * inline notices, and validation messages. Always pair color
 * with a message; the icon is added by the consuming Elementor
 * widget or by the form layer, not by this rule. */
.atlasyn-bp-error,
.atlasyn-bp-form-field--error .atlasyn-bp-field-message {
	color: var(--bp-error);
	border-inline-start: 2px solid var(--bp-error);
	padding-inline-start: 0.75rem;
}

.atlasyn-bp-error-bg {
	background: var(--bp-error-bg);
	color: var(--bp-error);
}

/* ----------------------------------------------------------------
 * Image container standard (temporary + future assets)
 * Use object-fit + aspect-ratio so the temporary placeholder
 * can be swapped for real assets without rebuilding layouts.
 * ---------------------------------------------------------------- */
.atlasyn-bp-media {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: var(--bp-bg-tint);
}

.atlasyn-bp-media--4-3   { aspect-ratio: 4 / 3; }
.atlasyn-bp-media--3-2   { aspect-ratio: 3 / 2; }
.atlasyn-bp-media--16-10 { aspect-ratio: 16 / 10; }
.atlasyn-bp-media--16-9  { aspect-ratio: 16 / 9; }
.atlasyn-bp-media--1-1   { aspect-ratio: 1 / 1; }

/* ----------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------- */

/* Visible, brand-aware focus ring. Never remove without
 * replacing. */
:focus-visible {
	outline: 2px solid var(--bp-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Honor reduced-motion. Sticky header transitions and any
 * decorative motion added later must respect this. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Ensure interactive elements stay above the 44 px touch
 * target where possible. Elementor buttons already set
 * min-height; this guards plain links. */
.atlasyn-bp-tap {
	min-block-size: 44px;
	min-inline-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ----------------------------------------------------------------
 * Sticky header foundation
 * The human developer attaches .atlasyn-bp-sticky to the
 * main header Elementor section. The JS below is the only
 * non-Elementor behavior the project adds: a 4-line
 * IntersectionObserver that adds .atlasyn-bp-sticky--scrolled
 * after a small scroll. No animation library, no jQuery.
 * ---------------------------------------------------------------- */
.atlasyn-bp-sticky {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bp-bg);
	transition: box-shadow 200ms ease, background-color 200ms ease;
}

.atlasyn-bp-sticky--scrolled {
	box-shadow: 0 2px 8px rgba( 31, 42, 31, 0.08 );
}

/* Skip link (utility). Elementor header may render its own. */
.atlasyn-bp-skip-link {
	position: absolute;
	inset-inline-start: 0.5rem;
	top: -3rem;
	background: var(--bp-primary);
	color: var(--bp-fg-on-green);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	z-index: 100;
	transition: top 200ms ease;
}
.atlasyn-bp-skip-link:focus {
	top: 0.5rem;
}

/* ----------------------------------------------------------------
 * Elementor Theme Builder wrappers
 *
 * Elementor's default .e-con ships with 10px padding on all four
 * sides. That padding is what produces the unwanted white strips
 * above the utility bar and below the footer. We zero it out on
 * the theme-builder location wrappers only — every other e-con
 * on the site keeps Elementor's default behaviour.
 * ---------------------------------------------------------------- */
.elementor-location-header,
.elementor-location-footer {
	margin: 0;
	padding: 0;
}

.elementor-location-header > .e-con,
.elementor-location-footer > .e-con {
	--container-default-padding-top:    0px;
	--container-default-padding-right:  0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left:   0px;
	padding: 0;
	margin: 0;
}

.elementor-location-header > .e-con > .e-con-inner,
.elementor-location-footer > .e-con > .e-con-inner {
	padding: 0;
	margin: 0;
}

/* ----------------------------------------------------------------
 * NOTE: Global `.e-con` / `.e-con-inner` padding resets and the
 * global `.elementor-column { min-inline-size: 0 }` rule were
 * removed (regression repair v0.1.184). Per-widget spacing now
 * lives inside each widget's own stylesheet. The default
 * Elementor container system is allowed to function normally on
 * all pages that don't need a custom inner wrapper.
 * ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
 * Temporary placeholder marker
 * The official development placeholder image URL is centralised
 * so the human can swap it in one place once real assets arrive.
 * ---------------------------------------------------------------- */
:root {
	--bp-temp-image: url('https://barbary-plante.atlasyn-test.com/wp-content/uploads/2026/08/images.png');
}

.atlasyn-bp-temp-image {
	background-image: var(--bp-temp-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--bp-bg-tint);
}

/* ----------------------------------------------------------------
 * Language switcher (text-only FR | AR)
 * Used by the [bp-language-switcher] shortcode in the utility
 * bar and the footer. Inherits color from parent (white in
 * the dark utility bar, cream in the dark footer).
 * ---------------------------------------------------------------- */
.bp-lang {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--bp-font-body);
	font-size: 12px;
	font-weight: 500;
}

.bp-lang__item,
.bp-lang__sep {
	display: inline-flex;
	align-items: center;
}

.bp-lang__link {
	color: inherit;
	text-decoration: none;
	padding: 4px 6px;
	border-radius: 4px;
	transition: color 150ms ease;
}

.bp-lang__link:hover,
.bp-lang__link:focus-visible {
	color: var(--bp-accent);
}

.bp-lang__item.is-active .bp-lang__link {
	color: var(--bp-cream);
	font-weight: 600;
	pointer-events: none;
}

.bp-lang[lang="ar"] .bp-lang__item.is-active .bp-lang__link,
html[dir="rtl"] .bp-lang__item.is-active .bp-lang__link,
body.translatepress-ar .bp-lang__item.is-active .bp-lang__link {
	color: var(--bp-white);
}

/* ----------------------------------------------------------------
 * Media safety net
 *
 * Elementor ships unconstrained <img> / <video> / <iframe> /
 * <svg> elements inside its sections. These clamps make sure
 * no edge media can ever push the column past the column box.
 * Scoped to `.elementor-section` so they do not affect the
 * rest of the site.
 * ---------------------------------------------------------------- */
.elementor-section img,
.elementor-section video,
.elementor-section iframe,
.elementor-section svg {
	max-inline-size: 100%;
	block-size: auto;
}

/* The header is sticky + z-index 50. Make sure the page
   content below it gets no orphan space from the sticky
   offset. */
body {
	scroll-padding-block-start: 80px;
}

/* ----------------------------------------------------------------
 * Small-viewport (≤ 480 px) global helpers
 *
 * Most widgets already ship 480 px and 360 px rules. These are
 * the safety net for any element that has none:
 *   - a touchable minimum font size for inline links so they
 *     never become "ant text" on small phones;
 *   - a reduction of decorative decorations so they stop
 *     obscuring text.
 *
 * NOTE: the previous global `.e-con` / `.e-con-inner` /
 * `.elementor-section > .elementor-container` mobile gutter
 * was removed (regression repair v0.1.184). Mobile gutters
 * now come from each section's own inner content wrapper so
 * the default Elementor container system keeps its own
 * responsive behaviour.
 * ---------------------------------------------------------------- */
@media ( max-width: 480px ) {

	/* Universal body-text floor so brand hierarchy stays
	   legible on a 360 px phone. */
	body,
	.atlasyn-bp-body {
		font-size: clamp(14px, 4vw, 16px);
	}
}

/* ----------------------------------------------------------------
 * Horizontal-overflow safety net (narrow)
 *
 * The body already has `overflow-x: clip`. We keep a narrow,
 * widget-level safety net so a stray 100 vw decorative layer
 * inside an Elementor column can never push the page wide.
 * The clip is scoped to .elementor-column so it does NOT
 * touch the widget container (which is where hover, sticky
 * and transform effects live) — only the column wrapper.
 *
 * NOTE: the previous global `.elementor-column { min-inline-size: 0 }`
 * was removed (regression repair v0.1.184). Widgets that genuinely
 * need the shrink-to-fit fix scope it on their own root.
 * ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
 * Mobile gutter fallback (v0.1.197)
 *
 * The authoritative mobile gutter is set on each widget's own
 * stylesheet (see bp-case-study-tomate.css, bp-resultats-
 * temoignages.css, bp-preuves-documents.css, bp-case-study-
 * anacardier.css, bp-comparison-anacardier.css, bp-preuves-
 * images.css, bp-resultats-tabs.css). The per-widget rules
 * win in the cascade because they enqueue AFTER site.css AND
 * they only target the specific `.bp-<name>__inner` element
 * without exposing a side effect on any other widget.
 *
 * This block is intentionally minimal. It does NOT try to
 * enumerate every widget. It only guards two things that are
 * easy to overlook and that have caused regressions before:
 *
 *   1. Any `[data-bp-mobile-gutter]` opt-in element (used by
 *      future widgets that want to inherit the standard scale
 *      without editing site.css).
 *   2. The page-level horizontal-overflow safety net so a
 *      single misbehaving widget cannot make the entire site
 *      scroll sideways on a phone.
 *
 * If a widget's content touches the viewport edge, the fix
 * goes in THAT widget's stylesheet — not here.
 * ---------------------------------------------------------------- */
@media ( max-width: 480px ) {
	[data-bp-mobile-gutter] {
		padding-inline: 18px;
	}
}

@media ( max-width: 390px ) {
	[data-bp-mobile-gutter] {
		padding-inline: 18px;
	}
}

@media ( max-width: 360px ) {
	[data-bp-mobile-gutter] {
		padding-inline: 16px;
	}
}

html,
body {
	overflow-x: clip;
}

/* =========================================================
 * MICRO PATCH — Homepage (page 16) cleanup (0.1.295)
 *
 * Loaded LATE (after bp-elementor-* and post-16.css would be
 * the natural winner). To beat the Elementor per-widget CSS
 * emitted in post-16.css (which uses selectors like
 * `.elementor-16 .elementor-element-{id} .selector` with
 * (0,3,0) specificity and sets section backgrounds, eyebrow
 * / title / divider colors, and CTA styles), every rule below
 * carries `!important`. This keeps the diff scoped to the
 * homepage (`.elementor-16`) and does not touch other pages.
 *
 *  1. UNIFY all 7 major section headers to the EXACT
 *     "POURQUOI CHOISIR" visual pattern. The reference
 *     Why Choose eyebrow is 13px/600/0.18em/uppercase/
 *     #374F37, title is DM Serif Display 400
 *     clamp(32px, 4.4vw, 52px)/1.1/0.01em/#374F37/uppercase,
 *     divider is a 56px line + 8px diamond in #B8B25A.
 *
 *  2. CENTER + slightly WIDEN the new home-section CTAs
 *     (`.bp-home-section-cta` + `.bp-home-section-cta__btn`)
 *     AND the fiche technique CTA
 *     (`.bp-product-solution__cta`) so they all use the
 *     same dark-green pill system with `min-inline-size:
 *     240px`.
 *
 *  3. REMOVE section-level backgrounds from all major
 *     homepage section roots. Only the page background
 *     shows between sections. Inner cards/buttons/panels
 *     keep their surfaces.
 * ========================================================= */
/* Eyebrow styling is now handled globally by
 * `bp-eyebrow-unify.css` (selector `[class$="__eyebrow"]`).
 * Do NOT re-pin the homepage eyebrows here — any per-page
 * override will win over the global rule via `.elementor-16`
 * specificity and break the site-wide unify. */

.elementor-16 .bp-cultures-applications__title,
.elementor-16 .bp-how-to-use__title,
.elementor-16 .bp-field-results__heading,
.elementor-16 .bp-faq__heading,
.elementor-16 .bp-advice-news__heading,
.elementor-16 .bp-cfg__title,
.elementor-16 .bp-devis-form__title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
}

/* Under-title divider: line + diamond + line. The Why
 * Choose pattern is 56px line + 8px diamond + 10px gap.
 * The other widgets already ship a divider container; we
 * just re-anchor the spacing so all dividers look identical. */
.elementor-16 .bp-cultures-applications__divider,
.elementor-16 .bp-how-to-use__divider,
.elementor-16 .bp-field-results__divider,
.elementor-16 .bp-faq__divider,
.elementor-16 .bp-advice-news__divider,
.elementor-16 .bp-cfg__divider,
.elementor-16 .bp-devis-form__divider {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	margin-block: 10px 22px !important;
	margin-inline: auto !important;
	max-inline-size: 100%;
}

/* Reuse override: the `.bp-field-results__divider` markup is
 * also rendered inside the product-solution block on the
 * homepage. Keep it left-aligned there (mirrors the existing
 * `.bp-product-solution .bp-field-results__divider` rule). */
.elementor-16 .bp-product-solution .bp-field-results__divider {
	justify-content: flex-start !important;
}

/* Reuse override: the same divider markup is rendered inside
 * the cultures-applications block on the homepage. Center it
 * there so it reads as the title flourish of the section. */
.elementor-16 .bp-cultures-applications .bp-field-results__divider {
	justify-content: center !important;
}

/* Home-section CTA wrapper: center horizontally. */
.elementor-16 .bp-home-section-cta {
	justify-content: center !important;
	margin-block-start: 20px !important;
}
.elementor-16 .elementor-element .bp-home-section-cta,
.elementor-16 [class*="elementor-element-"] .bp-home-section-cta,
.elementor-16 .elementor-element.elementor-element .bp-home-section-cta {
	margin-block-start: 20px !important;
}
.elementor-16 .bp-home-section-cta__btn {
	min-inline-size: 240px !important;
	justify-content: center !important;
}

/* "TÉLÉCHARGER LA FICHE TECHNIQUE" — navigation CTA,
 * dark-green pill system, arrow icon (not download). */
.elementor-16 .bp-product-solution__cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-inline-size: 240px !important;
	padding: 13px 28px !important;
	border-radius: 999px !important;
	border: 1.5px solid #374F37 !important;
	background: #374F37 !important;
	color: #FFFFFF !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
}
.elementor-16 .bp-product-solution__cta:hover,
.elementor-16 .bp-product-solution__cta:focus-visible {
	transform: translateY(-2px) !important;
	background: #374F37 !important;
	box-shadow: 0 8px 20px rgba(55, 79, 55, 0.22) !important;
	outline: none !important;
}

/* Section-level backgrounds: transparent. Only the SECTION
 * ROOT and the immediate Elementor parent container lose
 * their background. Inner cards/buttons/panels keep their
 * own backgrounds. The bp-cfg and bp-devis-form also need
 * their CSS variable (--bp-df-bg / cream tint) to be reset
 * so the variable itself does not paint the section. */
.elementor-16 .bp-cultures-applications,
.elementor-16 .bp-how-to-use,
.elementor-16 .bp-field-results,
.elementor-16 .bp-faq,
.elementor-16 .bp-advice-news,
.elementor-16 .bp-cfg,
.elementor-16 .bp-devis-form {
	background-color: transparent !important;
	background-image: none !important;
	background: transparent !important;
}
.elementor-16 .bp-devis-form {
	--bp-df-bg: transparent !important;
}

@media ( max-width: 768px ) {
	.elementor-16 .bp-product-solution__cta {
		min-inline-size: 0 !important;
		inline-size: 100% !important;
		max-inline-size: 360px !important;
	}
	.elementor-16 .bp-home-section-cta__btn {
		min-inline-size: 0 !important;
		inline-size: 100% !important;
		max-inline-size: 360px !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.elementor-16 .bp-product-solution__cta {
		transition: none !important;
	}
	.elementor-16 .bp-product-solution__cta:hover,
	.elementor-16 .bp-product-solution__cta:focus-visible {
		transform: none !important;
		box-shadow: none !important;
	}
}

/* =========================================================
 * MICRO PATCH 0.1.296 — Gold decor under 5 section titles +
 * Devis form header centering/typography
 *
 * The 5 section titles below currently render WITHOUT the
 * gold line + diamond decor that exists under the "Pourquoi
 * choisir" reference title (`.bp-why-choose__divider`,
 * 56px line + 8px rotated diamond in #B8B25A, 10px gap,
 * 8px/18px vertical margin). The pattern is re-applied
 * here via `:after` pseudo-elements so we do not have to
 * touch the widget PHP. All rules carry `!important` to
 * win against post-16.css.
 *
 * Also fixes the Devis form intro header so it matches the
 * unified major-section title system (centered, dark green,
 * DM Serif, clamp(32px,4.4vw,52px), 1.1, uppercase, gold
 * line under the title). The form panel itself is left
 * alone.
 * ========================================================= */

/* Gold line under each title that does not yet ship a
 * divider. The reference "Pourquoi choisir" divider is a
 * 56px line + 8px rotated diamond in #B8B25A. The
 * decorations for `bp-how-to-use__title`, `bp-faq__heading`,
 * `bp-advice-news__heading` and `bp-devis-form__title` are
 * now rendered as HTML `<div class="bp-field-results__divider">`
 * inside the widget PHP (0.1.407) so the design lives next
 * to the heading, not in a separate CSS patch. The base
 * title rule below is kept so the headings still center
 * themselves identically. */
.elementor-16 .bp-cultures-applications__title,
.elementor-16 .bp-how-to-use__title,
.elementor-16 .bp-faq__heading,
.elementor-16 .bp-advice-news__heading,
.elementor-16 .bp-devis-form__title {
	display: block !important;
	position: relative !important;
	text-align: center !important;
}

/* Devis form intro: center the header, force the unified
 * title typography, force `__title-2` to inherit the
 * dark-green color, and add a clean space between the
 * two halves so the heading reads "Quelques informations
 * pour mieux vous conseiller." naturally. */
.elementor-16 .bp-devis-form__intro {
	text-align: center !important;
	margin-inline: auto !important;
	max-inline-size: 720px !important;
}
.elementor-16 .bp-devis-form__title-1,
.elementor-16 .bp-devis-form__title-2 {
	display: block !important;
	color: #374F37 !important;
}
.elementor-16 .bp-devis-form__title-1::after {
	content: " " !important;
}

/* =========================================================
 * SITE-WIDE SECTION HEADER STANDARDIZATION (v0.1.302) —
 * FAILED GENERIC APPROACH REMOVED (v0.1.318).
 *
 * The previous implementation used broad attribute selectors:
 *   [class^="bp-"][class$="__title"] / [class$="__eyebrow"] / ...
 * That approach did NOT properly fix the site: it leaked into
 * hero widgets that happened to match the suffix, it could not
 * reliably win against per-widget CSS emitted later in the
 * cascade, and it did not allow per-page exceptions for the
 * Final CTA family.
 *
 * The active model is now STRICTLY per-page (`.elementor-N
 * .actual-class`) and is added below for every page that
 * contains major section headers: 16, 17, 18 (kept from
 * 0.1.310-0.1.316) + 11, 19, 21, 22, 23, 24, 25, 1969 (new
 * in 0.1.318). The homepage "POURQUOI CHOISIR" widget is
 * the SOLE visual reference:
 *   eyebrow  : Manrope 13px / 600 / 0.18em / uppercase / #374F37
 *   title    : DM Serif Display 400 / clamp(32px,4.4vw,52px) /
 *              1.1 / 0.01em / uppercase / #374F37
 *   divider  : 56px line + 8px rotated diamond in #B8B25A,
 *              10px gap, 8px/18px vertical margin
 *
 * Each per-page block uses !important to win against the
 * per-widget CSS enqueued after site.css. Hero widgets, card
 * titles, FAQ questions, form labels, article body H2/H3,
 * footer headings, menu items, buttons, and FINAL CTA
 * eyebrow/title/divider are intentionally excluded via
 * targeted selectors.
 * ========================================================= */

/* =========================================================
 * MICRO PATCH 0.1.310 — Homepage Final CTA title → cream
 *
 * The site-wide title standardization (v0.1.302) was forcing
 * `.bp-final-cta__title` into the dark-green section-title
 * style via `[class^="bp-"][class$="__title"]` (specificity
 * 0,5,0 with !important, beats a plain `.elementor-16
 * .bp-final-cta__title` override at 0,2,0). The title is
 * now excluded from that global rule (see the `:not(.bp-
 * final-cta__title)` filters above) and explicitly repainted
 * cream to match the dark overlay background. Scoped to
 * `.elementor-16` so other pages keep their section-title
 * treatment untouched.
 * ========================================================= */
.elementor-16 .bp-final-cta__title {
	color: #FBF6EC !important;
}

/* =========================================================
 * MICRO PATCH 0.1.310 — `.bp-advice-news__heading` center
 *
 * The widget default at bp-advice-news.css sets
 * `text-align: center; margin-inline: auto;
 * max-inline-size: 90%`, but Elementor's per-widget
 * post-16.css and any inline align="left" override push
 * the heading back to the left on the homepage. Force the
 * heading block to full width and the text to center with
 * sufficient specificity (0,2,0) + !important so it wins
 * over per-widget CSS. No other element touched.
 * ========================================================= */
.elementor-16 .bp-advice-news__heading {
	text-align: center !important;
	margin-inline: auto !important;
	max-inline-size: 100% !important;
}

/* =========================================================
 * MICRO PATCH 0.1.310 — About page (17) consistency
 *
 * Three concerns, all strictly scoped to .elementor-17:
 *
 *   1. ALL NORMAL major section headers on /a-propos/ must
 *      match the Homepage "POURQUOI CHOISIR" reference
 *      (eyebrow + title + gold line + diamond decor). The
 *      about-page widgets concerned are the 6 mid-page
 *      sections: bp-founder-section, bp-awards-recognition,
 *      bp-techniques, bp-production-quality,
 *      bp-global-presence, bp-commitments. The about hero
 *      is intentionally excluded (it uses hero-specific
 *      sizing); the about final-cta is explicitly excluded
 *      (its title/header must keep its own approved design).
 *
 *   2. ALL CTA buttons on /a-propos/ must match the Homepage
 *      CTA system (`.bp-home-section-cta__btn` — dark green
 *      pill, 13px/600, 0.04em, 13/28 padding, 999px radius,
 *      48px min-height, hover lift + shadow). The about page
 *      ships its CTAs inside the Final CTA widget
 *      (`.bp-about-final-cta__btn--primary` and
 *      `.bp-about-final-cta__btn--secondary`). The
 *      hierarchy is preserved (primary stays dark green,
 *      secondary stays cream with a green outline) but the
 *      dimensions, typography, radius, hover, and focus
 *      match the homepage system.
 *
 *   3. The About Final CTA image must fully cover the whole
 *      CTA block on every breakpoint, no empty cream/white
 *      space, no shrink-to-fit, no distortion. The scene
 *      wrapper is forced to `position: absolute; inset: 0`
 *      and the image inside is forced to fill the wrapper
 *      100% with cover, in !important so any Elementor
 *      inline styles on `.bp-about-final-cta__scene-img`
 *      cannot break the cover.
 *
 * All rules use !important to win over the per-widget CSS
 * files (bp-founder-section.css, bp-awards-recognition.css,
 * bp-techniques.css, bp-production-quality.css,
 * bp-global-presence.css, bp-commitments.css,
 * bp-about-final-cta.css) that enqueue AFTER site.css and
 * apply their own typography + button styling.
 * ========================================================= */

/* ---- 1a. EYEBROWS — normal section headers only ----
 * Eyebrow typography is now handled globally by the
 * `.bp-section-eyebrow` utility class (registered on every
 * non-hero eyebrow element via the per-widget PHP render).
 * This file no longer needs page-scoped eyebrow overrides —
 * the unified rule wins via its `!important` cascade because
 * it is enqueued AFTER site.css. */

/* ---- 1b. TITLES — normal section headers only ----
 * Reference values (.bp-why-choose__title):
 *   clamp(32px, 4.4vw, 52px) / 400 / 1.1 / 0.01em /
 *   uppercase / #374F37 / DM Serif Display.
 * The about-final-cta title is explicitly excluded so its
 * own 30-44px / 1.08 / -0.005em / two-line flex design is
 * preserved. */
.elementor-17 .bp-founder-section__title,
.elementor-17 .bp-awards-recognition__title,
.elementor-17 .bp-techniques__title,
.elementor-17 .bp-production-quality__title,
.elementor-17 .bp-global-presence__title,
.elementor-17 .bp-commitments__title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
	margin: 0 0 16px !important;
	padding-block-end: 24px !important;
	position: relative !important;
	display: block !important;
}

/* Gold line + diamond under each standardized title.
 * Same 56px line + 8px diamond in #B8B25A as the
 * Homepage reference. The pseudo-elements use !important
 * to win over any per-widget divider containers. */
.elementor-17 .bp-founder-section__title::after,
.elementor-17 .bp-awards-recognition__title::after,
.elementor-17 .bp-techniques__title::after,
.elementor-17 .bp-production-quality__title::after,
.elementor-17 .bp-global-presence__title::after,
.elementor-17 .bp-commitments__title::after {
	content: "" !important;
	position: absolute !important;
	inset-inline: 0 !important;
	inset-block-end: -10px !important;
	block-size: 1px !important;
	inline-size: 100% !important;
	background: linear-gradient(
		to right,
		transparent 0,
		transparent calc(50% - 32px),
		#B8B25A calc(50% - 32px),
		#B8B25A calc(50% + 32px),
		transparent calc(50% + 32px),
		transparent 100%
	) !important;
}
.elementor-17 .bp-founder-section__title::before,
.elementor-17 .bp-awards-recognition__title::before,
.elementor-17 .bp-techniques__title::before,
.elementor-17 .bp-production-quality__title::before,
.elementor-17 .bp-global-presence__title::before,
.elementor-17 .bp-commitments__title::before {
	content: "" !important;
	position: absolute !important;
	inset-inline-start: 50% !important;
	inset-block-end: -14px !important;
	inline-size: 8px !important;
	block-size: 8px !important;
	background-color: #B8B25A !important;
	transform: translateX(-50%) rotate(45deg) !important;
	z-index: 1 !important;
}

/* Hide any duplicate divider DOM (line / diamond / leaves)
 * each widget already ships so our pseudo-element line is
 * the only gold line under every major section title. */
.elementor-17 .bp-founder-section__divider,
.elementor-17 .bp-awards-recognition__divider,
.elementor-17 .bp-techniques__divider,
.elementor-17 .bp-production-quality__divider,
.elementor-17 .bp-global-presence__divider,
.elementor-17 .bp-commitments__divider {
	display: none !important;
}

/* ---- 1c. About Final CTA — RESTORE its own design ----
 * The site-wide `[class$="__title"]` / `[class$="__eyebrow"]`
 * rules (v0.1.302) DO match the about-final-cta because its
 * class string does not contain `-hero`. We have to undo
 * that leak here so the Final CTA keeps its approved
 * eyebrow (12px) + title (30-44px / 1.08 / -0.005em /
 * two-line flex) design and the pseudo-element gold line
 * is NOT rendered under its title. */
/* Eyebrow typography is now handled globally by the
 * `.bp-section-eyebrow` utility class (13px / 0.22em / 700 /
 * #B8B25A) on every non-hero eyebrow element, including
 * `.bp-about-final-cta__eyebrow`. The previous 12px / 0.18em
 * / 600 / #374F37 page-scoped override has been removed. */
.elementor-17 .bp-about-final-cta__title {
	font-size: clamp(30px, 3.8vw, 44px) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.005em !important;
	text-transform: none !important;
	font-family: var(--bp-afc-display, 'DM Serif Display', Georgia, serif) !important;
	color: var(--bp-afc-title, #374F37) !important;
	padding-block-end: 0 !important;
}
.elementor-17 .bp-about-final-cta__title::before,
.elementor-17 .bp-about-final-cta__title::after {
	content: none !important;
	display: none !important;
}

/* ---- 2. CTA BUTTONS — Homepage system (pill) ----
 * Apply the homepage `.bp-home-section-cta__btn` system to
 * both primary and secondary buttons on the about final
 * CTA. Primary stays dark green filled; secondary stays
 * cream + green outline (hierarchy preserved). Both pills
 * get the same dimensions / typography / radius / hover. */
.elementor-17 .bp-about-final-cta__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	min-block-size: 48px !important;
	padding-block: 12px !important;
	padding-inline: 28px !important;
	border: 1.5px solid #374F37 !important;
	border-radius: 999px !important;
	background: #374F37 !important;
	color: #FFFFFF !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
}

.elementor-17 .bp-about-final-cta__btn--primary {
	background: #374F37 !important;
	color: #FFFFFF !important;
	border-color: #374F37 !important;
}
.elementor-17 a.bp-about-final-cta__btn--primary:hover,
.elementor-17 a.bp-about-final-cta__btn--primary:focus-visible {
	transform: translateY(-2px) !important;
	background: #374F37 !important;
	color: #FFFFFF !important;
	box-shadow: 0 8px 20px rgba(55, 79, 55, 0.22) !important;
	outline: none !important;
}

.elementor-17 .bp-about-final-cta__btn--secondary {
	background: #FBF6EC !important;
	color: #374F37 !important;
	border-color: #374F37 !important;
}
.elementor-17 a.bp-about-final-cta__btn--secondary:hover,
.elementor-17 a.bp-about-final-cta__btn--secondary:focus-visible {
	transform: translateY(-2px) !important;
	background: #FBF6EC !important;
	color: #374F37 !important;
	border-color: #374F37 !important;
	box-shadow: 0 6px 16px rgba(55, 79, 55, 0.18) !important;
	outline: none !important;
}

/* ---- 3. Final CTA image — full cover (desktop + mobile) ----
 * Scene wrapper: position absolute + inset 0 so it spans the
 * full CTA block. Image: position absolute + inset 0 +
 * width / height 100% + object-fit cover so the photo
 * always fills the wrapper without distortion. !important
 * to win over any Elementor inline style for the image. */
.elementor-17 .bp-about-final-cta__scene {
	position: absolute !important;
	inset: 0 !important;
	inline-size: 100% !important;
	block-size: 100% !important;
	min-block-size: 100% !important;
	z-index: 0 !important;
	overflow: hidden !important;
	border-radius: inherit !important;
	pointer-events: none !important;
}
.elementor-17 .bp-about-final-cta__scene-img {
	position: absolute !important;
	inset: 0 !important;
	inline-size: 100% !important;
	block-size: 100% !important;
	min-block-size: 100% !important;
	max-inline-size: none !important;
	max-block-size: none !important;
	object-fit: cover !important;
	display: block !important;
}

/* ---- 4. Mobile refinements for the standardized titles ----
 * On small phones the line + diamond shrink a touch so the
 * decor stays inside the gutter without overflow. Same
 * spacing as the homepage block. */
@media ( max-width: 768px ) {
	.elementor-17 .bp-founder-section__title::after,
	.elementor-17 .bp-awards-recognition__title::after,
	.elementor-17 .bp-techniques__title::after,
	.elementor-17 .bp-production-quality__title::after,
	.elementor-17 .bp-global-presence__title::after,
	.elementor-17 .bp-commitments__title::after {
		inset-block-end: -8px !important;
	}
	.elementor-17 .bp-founder-section__title::before,
	.elementor-17 .bp-awards-recognition__title::before,
	.elementor-17 .bp-techniques__title::before,
	.elementor-17 .bp-production-quality__title::before,
	.elementor-17 .bp-global-presence__title::before,
	.elementor-17 .bp-commitments__title::before {
		inset-block-end: -12px !important;
	}
	.elementor-17 .bp-about-final-cta__btn {
		inline-size: 100% !important;
		max-inline-size: 360px !important;
		min-inline-size: 0 !important;
	}
}

/* ---- 5. Reduced motion — CTA hover lift neutralised ---- */
@media ( prefers-reduced-motion: reduce ) {
	.elementor-17 .bp-about-final-cta__btn {
		transition: none !important;
	}
	.elementor-17 .bp-about-final-cta__btn:hover,
	.elementor-17 .bp-about-final-cta__btn:focus-visible {
		transform: none !important;
		box-shadow: none !important;
	}
}

/* =========================================================
 * MICRO PATCH 0.1.311 — About page (17) Final CTA:
 * benefits removed + WhatsApp link restyled
 *
 * Two scoped changes, only on `.elementor-17`:
 *
 *   1. The 3-up benefits row inside the about Final CTA
 *      is removed entirely. The widget still emits the
 *      `bp-about-final-cta__benefits` markup from the
 *      Elementor template; this rule hides it on the
 *      about page so the Final CTA no longer shows the
 *      3-icon benefit strip. The about CTA therefore
 *      reads: eyebrow → title → divider → description →
 *      buttons → WhatsApp. No other widget on the site
 *      is affected (the class is unique to the about
 *      Final CTA).
 *
 *   2. The WhatsApp support link inside the about Final
 *      CTA is restyled to match the WhatsApp button on
 *      the Homepage Final CTA (`.bp-final-cta__btn--
 *      whatsapp`):
 *        - WhatsApp green pill (#25D366 → #1DA851 on hover)
 *        - 999px border-radius (pill)
 *        - 48px min-block-size, 12/26 padding
 *        - 13px / 700 / 0.06em uppercase typography
 *        - green box-shadow, white icon + text
 *        - hover lift (translateY(-1px)) + deeper shadow
 *        - focus ring matches the primary green family
 *      The link is still an `<a>` (CTA / outbound) so
 *      the hover + focus selectors target the anchor
 *      form, the same way `.bp-final-cta__btn--whatsapp`
 *      does on the homepage.
 *
 * All rules use !important to win over the per-widget
 * CSS (bp-about-final-cta.css) that enqueues AFTER
 * site.css.
 * ========================================================= */

/* ---- 1. Hide the benefits row on the about page ---- */
.elementor-17 .bp-about-final-cta__benefits {
	display: none !important;
}

/* ---- 2. WhatsApp link — Homepage WhatsApp button system ----
 * The about Final CTA ships the WhatsApp line as
 * `.bp-about-final-cta__whatsapp` (an `<a>`). The
 * homepage Final CTA uses `.bp-final-cta__btn--whatsapp`
 * with a WhatsApp-green pill. The values below are
 * copied 1:1 from that reference so the two CTAs
 * read as a single button system. */
.elementor-17 .bp-about-final-cta__whatsapp {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	min-block-size: 48px !important;
	padding-block: 12px !important;
	padding-inline: 26px !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	background-color: #25D366 !important;
	color: #FFFFFF !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.elementor-17 a.bp-about-final-cta__whatsapp:hover,
.elementor-17 a.bp-about-final-cta__whatsapp:focus-visible {
	background-color: #1DA851 !important;
	border-color: transparent !important;
	color: #FFFFFF !important;
	box-shadow: 0 6px 18px rgba(29, 168, 81, 0.45) !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

/* WhatsApp icon + text inside the button read white so
 * they match the homepage reference. The drop-shadow is
 * dropped here because the pill itself already casts its
 * own shadow. */
.elementor-17 .bp-about-final-cta__whatsapp-icon,
.elementor-17 .bp-about-final-cta__whatsapp-icon i,
.elementor-17 .bp-about-final-cta__whatsapp-icon svg {
	color: #FFFFFF !important;
	filter: none !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	fill: currentColor !important;
}
.elementor-17 .bp-about-final-cta__whatsapp-text {
	color: #FFFFFF !important;
	text-shadow: none !important;
	display: inline-block !important;
}

/* ---- 3. Mobile: full-width pill, no hover lift ---- */
@media ( max-width: 768px ) {
	.elementor-17 .bp-about-final-cta__whatsapp {
		inline-size: 100% !important;
		max-inline-size: 360px !important;
		min-inline-size: 0 !important;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.elementor-17 .bp-about-final-cta__whatsapp {
		transition: none !important;
	}
	.elementor-17 a.bp-about-final-cta__whatsapp:hover,
	.elementor-17 a.bp-about-final-cta__whatsapp:focus-visible {
		transform: none !important;
		box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
	}
}

/* =========================================================
 * MICRO PATCH 0.1.312 — About page (17) Final CTA:
 * primary + secondary + WhatsApp in a single row
 *
 * The WhatsApp link was previously rendered as a sibling
 * of the ctas div, which put it on a new line below the
 * primary + secondary buttons. The widget render was
 * updated so the WhatsApp link is now a 3rd child of
 * `.bp-about-final-cta__ctas`, putting all three pills
 * in the same flex row. The per-widget CSS keeps
 * `flex-direction: column` on mobile so the three pills
 * stack vertically below 768px (good for 360-390px
 * phones — the homepage CTA system is the same).
 *
 * On desktop the ctas wrapper has `flex-wrap: wrap; gap:
 * 12px` and lives inside a content column whose default
 * `max-inline-size` is 48% of the 1140px CTA = ~547px.
 * Three pills with the existing 12/28 + 12/26 padding
 * and the current French labels need ~700px to sit in a
 * single row without wrapping. The content column is
 * therefore widened to 62% (≈707px) on desktop so the
 * three buttons fit cleanly in one row, and the ctas
 * wrapper is forced to `flex-wrap: nowrap` so they
 * never break to a second line on desktop.
 *
 * The product image is anchored to the inline-end edge
 * at 32px offset with a 360px width, so its inline-start
 * edge sits at 1140 - 32 - 360 = 748px. Widening the
 * content to 62% (707px) leaves a 41px safety gap
 * between the buttons and the product, so they do not
 * overlap.
 *
 * All rules are !important + scoped to `.elementor-17`
 * so the per-widget CSS (bp-about-final-cta.css) and
 * any Elementor inline styles cannot win over the
 * about-page layout.
 * ========================================================= */

/* ---- Desktop (≥769px): widen the content column so
 * the 3 pills fit in a single row without colliding
 * with the product image on the right. ---- */
@media ( min-width: 769px ) {
	.elementor-17 .bp-about-final-cta__content {
		max-inline-size: 62% !important;
	}
	.elementor-17 .bp-about-final-cta__ctas {
		flex-wrap: nowrap !important;
		align-items: center !important;
		column-gap: 12px !important;
		row-gap: 12px !important;
	}
	/* The previous patch set the WhatsApp pill to
	 * max-inline-size: 360px on mobile — that cap
	 * must be released on desktop so all 3 pills
	 * can sit in a single row at their natural width. */
	.elementor-17 .bp-about-final-cta__whatsapp {
		inline-size: auto !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
	}
	/* The previous patch also set the secondary
	 * button to `inline-size: 100%` and the primary
	 * to `min-block-size: 48px` with a max-inline-size
	 * on mobile. Release those desktop-overrides so
	 * all three pills hug their text in a single row. */
	.elementor-17 .bp-about-final-cta__btn--primary,
	.elementor-17 .bp-about-final-cta__btn--secondary {
		inline-size: auto !important;
		max-inline-size: none !important;
		min-inline-size: 0 !important;
		flex: 0 0 auto !important;
	}
}

/* ---- Tablet (481-1024px): 3 pills in a row, no wrap,
 * with the content column still constrained so the
 * product image stays clear. ---- */
@media ( min-width: 481px ) and ( max-width: 1024px ) {
	.elementor-17 .bp-about-final-cta__content {
		max-inline-size: 70% !important;
	}
	.elementor-17 .bp-about-final-cta__ctas {
		flex-wrap: nowrap !important;
	}
}

/* ---- Mobile (≤768px): the per-widget CSS already
 * forces the ctas into a vertical stack with
 * full-width buttons. The previous patch's mobile
 * full-width WhatsApp pill remains in effect. The
 * only mobile override needed here is to release
 * the desktop `nowrap` so the stack is clean on
 * 360-390px phones. ---- */
@media ( max-width: 768px ) {
	.elementor-17 .bp-about-final-cta__ctas {
		flex-wrap: wrap !important;
	}
}

/* =========================================================
 * MICRO PATCH 0.1.316 — Product page (18) section headers
 * FORCED to match Homepage "POURQUOI CHOISIR" exactly.
 *
 * Every normal major Product section header (15 widgets
 * listed explicitly below) is now standardized with the
 * EXACT same eyebrow + title + divider as the homepage
 * reference, read directly from
 *   assets/css/elementor/bp-why-choose.css
 * and the live rendered DOM of the homepage
 *   /  .bp-why-choose__*  (POURQUOI CHOISIR BARBARY PLANTE ?)
 *
 * EYEBROW (Manrope, plain text, centered, no decoration):
 *   font-family: Manrope (var(--bp-font-body))
 *   font-size  : 13px
 *   font-weight: 600
 *   letter-spacing: 0.18em
 *   text-transform : uppercase
 *   color     : #374F37 (--bp-wc-fg)
 *   decoration: NONE (no gold lines, no leaf, no mark)
 *
 * TITLE (DM Serif Display, centered, dark green, uppercase):
 *   font-family: 'DM Serif Display' (var(--bp-font-display))
 *   font-size  : clamp(32px, 4.4vw, 52px)
 *   font-weight: 400
 *   line-height: 1.1
 *   letter-spacing: 0.01em
 *   text-transform : uppercase
 *   color     : #374F37
 *   text-align: center
 *
 * DIVIDER (line 56px - diamond 8px - line 56px, #B8B25A):
 *   color     : #B8B25A (--bp-wc-olive)
 *   line      : 56px wide, 1px tall
 *   diamond   : 8px x 8px, rotate(45deg)
 *   gap       : 10px between line and diamond
 *   pattern   : 56 + 10 + 8 + 10 + 56 = 140px, centered
 *   Implemented via title::after (linear-gradient with two
 *   56px gold stops + 28px transparent gap) + title::before
 *   (8px rotated diamond).
 *
 * Excluded by design (per user constraint):
 *   - .bp-product-hero__*   (page-level Hero H1)
 *   - .bp-pfc__*            (Final CTA eyebrow + title)
 *   - .bp-footer__*         (Footer column headings)
 *   - card titles, pricing titles, FAQ questions, accordion
 *     labels, form labels, calculator step labels, G3/G4
 *     names, button text, body H3/H4, component labels.
 *
 * ACTUAL product-page widget selectors (15):
 *   bp-product-versions, bp-cfg, bp-devis-form, bp-pc, bp-du,
 *   bp-hrt, bp-rd, bp-pu, bp-g4-preparation, bp-fnp, bp-ie,
 *   bp-sm, bp-pi, bp-pd, bp-product-faq
 * ========================================================= */
/* Non-hero eyebrow typography for product-page widgets is
 * fully owned by `.bp-section-eyebrow` in
 * `bp-eyebrow-unify.css` (enqueued last). Per-widget page-18
 * typography overrides are removed to avoid specificity
 * conflicts. */

/* Quick fix: center the Devis form intro block on the
 * product page. Matches the rest of the centered header
 * stack (eyebrow + title + divider). */
.elementor-18 .bp-devis-form__intro {
	text-align: center !important;
	margin-inline: auto !important;
}

/* Product page (elementor-18): zero the large top margin on
 * widget pcfge05495 (the inline Elementor widget container
 * was injecting `margin: 100px 0 0`). Reset to 0 so the
 * widget stacks with consistent 18px rhythm. Also zero any
 * similar widget containers that carry the same oversized
 * top margin pattern. */
.elementor-18 .elementor-element.elementor-element-pcfge05495 > .elementor-widget-container,
.elementor-18 .elementor-element > .elementor-widget-container {
	margin-block-start: 0 !important;
}

/* Per the user feedback: eyebrows are PURE TEXT — no gold
 * lines, no leaf, no diamond/mark around them. Hide every
 * decoration helper. */
.elementor-18 .bp-pc__eyebrow-line,
.elementor-18 .bp-pd__eyebrow-line,
.elementor-18 .bp-du__eyebrow-line,
.elementor-18 .bp-hrt__eyebrow-line,
.elementor-18 .bp-rd__eyebrow-line,
.elementor-18 .bp-pu__eyebrow-line,
.elementor-18 .bp-g4-preparation__eyebrow-line,
.elementor-18 .bp-fnp__eyebrow-line,
.elementor-18 .bp-ie__eyebrow-line,
.elementor-18 .bp-sm__eyebrow-line,
.elementor-18 .bp-pi__eyebrow-line,
.elementor-18 .bp-product-versions__eyebrow-line,
.elementor-18 .bp-pc__eyebrow-leaf,
.elementor-18 .bp-pd__eyebrow-leaf,
.elementor-18 .bp-du__eyebrow-leaf,
.elementor-18 .bp-hrt__eyebrow-leaf,
.elementor-18 .bp-rd__eyebrow-leaf,
.elementor-18 .bp-pu__eyebrow-leaf,
.elementor-18 .bp-g4-preparation__eyebrow-leaf,
.elementor-18 .bp-fnp__eyebrow-leaf,
.elementor-18 .bp-ie__eyebrow-leaf,
.elementor-18 .bp-sm__eyebrow-leaf,
.elementor-18 .bp-pi__eyebrow-leaf,
.elementor-18 .bp-product-versions__eyebrow-leaf,
.elementor-18 .bp-pc__eyebrow-mark,
.elementor-18 .bp-pd__eyebrow-mark,
.elementor-18 .bp-du__eyebrow-mark,
.elementor-18 .bp-hrt__eyebrow-mark,
.elementor-18 .bp-rd__eyebrow-mark,
.elementor-18 .bp-pu__eyebrow-mark,
.elementor-18 .bp-g4-preparation__eyebrow-mark,
.elementor-18 .bp-fnp__eyebrow-mark,
.elementor-18 .bp-ie__eyebrow-mark,
.elementor-18 .bp-sm__eyebrow-mark,
.elementor-18 .bp-pi__eyebrow-mark,
.elementor-18 .bp-product-versions__eyebrow-mark {
	display: none !important;
}

/* ---- All section titles on the product page use the
 * Homepage reference: DM Serif Display, 400, uppercase,
 * dark green, clamp(32px, 4.4vw, 52px). ---- */
.elementor-18 .bp-product-versions__title,
.elementor-18 .bp-pc__title,
.elementor-18 .bp-pd__title,
.elementor-18 .bp-du__title,
.elementor-18 .bp-cfg__title,
.elementor-18 .bp-devis-form__title,
.elementor-18 .bp-hrt__title,
.elementor-18 .bp-rd__title,
.elementor-18 .bp-pu__title,
.elementor-18 .bp-g4-preparation__title,
.elementor-18 .bp-fnp__title,
.elementor-18 .bp-ie__title,
.elementor-18 .bp-sm__title,
.elementor-18 .bp-pi__title,
.elementor-18 .bp-product-faq__title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
	margin: 0 0 16px !important;
	padding-block-end: 24px !important;
	text-align: center !important;
	position: relative !important;
	display: block !important;
}

/* ---- Gold divider under every product-page section title.
 * EXACTLY mirrors the homepage "POURQUOI CHOISIR" divider:
 *   <span.line 56px> <gap 10px> <span.diamond 8px rotated 45deg> <gap 10px> <span.line 56px>
 *   line    : 56px wide, 1px tall, #B8B25A
 *   diamond : 8px x 8px, #B8B25A, rotate(45deg)
 *   gap     : 10px
 *   color   : #B8B25A (--bp-wc-olive)
 *   total   : 56+10+8+10+56 = 140px pattern, centered
 * Implemented via ::after (two 56px gold lines with a
 * 28px transparent gap for the diamond) + ::before (8px
 * diamond). The two pseudo-elements share the same
 * vertical anchor (-10px / -14px). ---- */
.elementor-18 .bp-product-versions__title::after,
.elementor-18 .bp-pc__title::after,
.elementor-18 .bp-pd__title::after,
.elementor-18 .bp-du__title::after,
.elementor-18 .bp-cfg__title::after,
.elementor-18 .bp-devis-form__title::after,
.elementor-18 .bp-hrt__title::after,
.elementor-18 .bp-rd__title::after,
.elementor-18 .bp-pu__title::after,
.elementor-18 .bp-g4-preparation__title::after,
.elementor-18 .bp-fnp__title::after,
.elementor-18 .bp-ie__title::after,
.elementor-18 .bp-sm__title::after,
.elementor-18 .bp-pi__title::after,
.elementor-18 .bp-product-faq__title::after {
	content: "" !important;
	position: absolute !important;
	inset-inline-start: 0 !important;
	inset-block-end: -10px !important;
	inline-size: 100% !important;
	block-size: 1px !important;
	background: linear-gradient(
		to right,
		transparent 0,
		transparent calc(50% - 70px),
		#B8B25A calc(50% - 70px),
		#B8B25A calc(50% - 14px),
		transparent calc(50% - 14px),
		transparent calc(50% + 14px),
		#B8B25A calc(50% + 14px),
		#B8B25A calc(50% + 70px),
		transparent calc(50% + 70px),
		transparent 100%
	) !important;
}
.elementor-18 .bp-product-versions__title::before,
.elementor-18 .bp-pc__title::before,
.elementor-18 .bp-pd__title::before,
.elementor-18 .bp-du__title::before,
.elementor-18 .bp-cfg__title::before,
.elementor-18 .bp-devis-form__title::before,
.elementor-18 .bp-hrt__title::before,
.elementor-18 .bp-rd__title::before,
.elementor-18 .bp-pu__title::before,
.elementor-18 .bp-g4-preparation__title::before,
.elementor-18 .bp-fnp__title::before,
.elementor-18 .bp-ie__title::before,
.elementor-18 .bp-sm__title::before,
.elementor-18 .bp-pi__title::before,
.elementor-18 .bp-product-faq__title::before {
	content: "" !important;
	position: absolute !important;
	inset-inline-start: 50% !important;
	inset-block-end: -14px !important;
	inline-size: 8px !important;
	block-size: 8px !important;
	background-color: #B8B25A !important;
	transform: translateX(-50%) rotate(45deg) !important;
	z-index: 1 !important;
}

/* Hide the duplicate widget divider DOM that some widgets
 * ship (PU divider, G4 prep, SM title-rule, FN divider,
 * G4 prep eyebrow leaf, etc.) so our pseudo-element line
 * is the only gold line under every section title. */
.elementor-18 .bp-pu__divider,
.elementor-18 .bp-sm__title-rule,
.elementor-18 .bp-devis-form__title-2 {
	display: none !important;
}

/* Mobile: tighten the gold line spacing so it never
 * overflows the 18px gutter on a 360px phone. */
@media ( max-width: 768px ) {
	.elementor-18 .bp-product-versions__title,
	.elementor-18 .bp-pc__title,
	.elementor-18 .bp-pd__title,
	.elementor-18 .bp-du__title,
	.elementor-18 .bp-cfg__title,
	.elementor-18 .bp-devis-form__title,
	.elementor-18 .bp-hrt__title,
	.elementor-18 .bp-rd__title,
	.elementor-18 .bp-pu__title,
	.elementor-18 .bp-g4-preparation__title,
	.elementor-18 .bp-fnp__title,
	.elementor-18 .bp-ie__title,
	.elementor-18 .bp-sm__title,
	.elementor-18 .bp-pi__title,
	.elementor-18 .bp-product-faq__title {
		font-size: clamp(28px, 8vw, 38px) !important;
	}
	.elementor-18 .bp-product-versions__title::after,
	.elementor-18 .bp-pc__title::after,
	.elementor-18 .bp-pd__title::after,
	.elementor-18 .bp-du__title::after,
	.elementor-18 .bp-cfg__title::after,
	.elementor-18 .bp-devis-form__title::after,
	.elementor-18 .bp-hrt__title::after,
	.elementor-18 .bp-rd__title::after,
	.elementor-18 .bp-pu__title::after,
	.elementor-18 .bp-g4-preparation__title::after,
	.elementor-18 .bp-fnp__title::after,
	.elementor-18 .bp-ie__title::after,
	.elementor-18 .bp-sm__title::after,
	.elementor-18 .bp-pi__title::after,
	.elementor-18 .bp-product-faq__title::after {
		inset-block-end: -8px !important;
	}
	/* Non-hero eyebrow responsive typography is owned by
	 * `.bp-section-eyebrow` in `bp-eyebrow-unify.css`. */
}

/* =========================================================
 * MICRO PATCH 0.1.313 — Product page (18) multi-fix:
 *
 *  - `.bp-du__icon-row.is-revealed` -> 2 per row
 *  - `.bp-pi__pricing-block--g4.is-revealed` + `.bp-pi__contact-strip.is-revealed`
 *      -> match G3 reference card visual (#FBF6EC bg, #B8B25A 1px border,
 *         22px radius; contact strip also gets 28px top margin)
 *  - `.bp-product-faq__cta-icon` -> cream icon #FBF6EC
 *      (dark-green circle stays, only the icon is cream)
 * ========================================================= */

/* ---- 1. Icon row: 2 per row everywhere on the product
 * page. The user-asked selector is
 *   .bp-du__icon-row.is-revealed
 * which is the only one we touch. ---- */
.elementor-18 .bp-du__icon-row.is-revealed,
.elementor-18 .bp-domaines-utilisation .bp-du__icon-row.is-revealed {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	row-gap: 14px !important;
	column-gap: 12px !important;
}
@media ( max-width: 480px ) {
	.elementor-18 .bp-du__icon-row.is-revealed,
	.elementor-18 .bp-domaines-utilisation .bp-du__icon-row.is-revealed {
		grid-template-columns: repeat( 1, minmax( 0, 1fr ) ) !important;
		row-gap: 10px !important;
	}
}

/* ---- 2. Old forced cream/gold/22px overrides on the G4
 * pricing block and the contact strip have been removed
 * from site.css so the original component styling is
 * restored. The standard cream surface is now reserved
 * to the OUTER `.bp-pi__card--left` and `.bp-pi__card--right`
 * via the Page-18 inline block on `elementor-post-18`.
 * ---- */

/* ---- 3. Product FAQ CTA icon: cream #FBF6EC.
 * The dark-green circle stays (the icon is what should
 * render cream). The Elementor icon library uses <i> for
 * FA and inline <svg> for SVG icons — we hit both. ---- */
.elementor-18 .bp-product-faq__cta-icon,
.elementor-18 .bp-product-faq__cta-icon i,
.elementor-18 .bp-product-faq__cta-icon svg {
	color: #FBF6EC !important;
	fill: #FBF6EC !important;
	stroke: #FBF6EC !important;
}

/* =========================================================
 * MICRO PATCH 0.1.320 — HARD FIX: PER-PAGE EXPLICIT
 * SECTION HEADER STANDARDIZATION (pages 11, 19, 21, 22,
 * 23, 24, 25, 1969).
 *
 * The v0.1.318 generic approach using `::after` with a
 * centered linear-gradient (full-width line + transparent
 * gap) was wrong: it forced every divider to be centered,
 * ignoring the LEFT/RIGHT header alignment of the widget.
 * The user explicitly requires: "If the title/header is
 * CENTERED → centered LINE-DIAMOND-LINE. If LEFT → left-
 * aligned LINE-DIAMOND-LINE. If RIGHT → right-aligned."
 *
 * This patch removes v0.1.318 entirely and replaces it with
 * per-page, per-widget explicit blocks. Each widget's
 * divider is rebuilt as a proper flex/background pattern
 * that produces a real LINE + DIAMOND + LINE (3 elements)
 * with alignment that matches the widget's header layout.
 *
 * Reference values (.bp-why-choose):
 *   eyebrow  : Manrope 13px / 600 / 0.18em / uppercase /
 *              #374F37
 *   title    : DM Serif Display 400 / clamp(32px,4.4vw,
 *              52px) / 1.1 / 0.01em / uppercase / #374F37
 *   divider  : 56px line + 8px rotated diamond + 56px
 *              line, all in #B8B25A, 10px gaps,
 *              margin-block: 8px 18px
 *
 * Divider rebuild strategy:
 *   - When the widget ships a `__divider` DOM node, the
 *     node is converted into a flex container with
 *     `::before` (left line) + `::after` (right line) and
 *     a background diamond. Alignment is controlled by
 *     `justify-content` and the diamond's `background-
 *     position`. Width is 100% (centered) or 140px
 *     (left/right) to match the 56+10+8+10+56 = 140px
 *     footprint.
 *   - When the widget does NOT ship a `__divider` node
 *     (e.g. bp-cu-frequence uses `__eyebrow-text::after`
 *     as its line, bp-faq-theme has no divider DOM), the
 *     LINE + DIAMOND + LINE pattern is painted directly
 *     on the title as a single pseudo-element with a
 *     complex background (3 stacked gradients) so we do
 *     not depend on DOM changes.
 *
 * Every rule carries !important to win against the per-
 * widget CSS enqueued after site.css. Final CTA widgets
 * are explicitly excluded and re-pinned below.
 *
 * Pages covered:
 *   11   /comment-utiliser/    — 5 widgets (LEFT-aligned)
 *   19   /faq/                 — 3 widgets (LEFT-aligned)
 *   21   /cultures-applications/ — 9 widgets (mixed: cs,
 *                                  ct, ca, cc, cc-mara,
 *                                  cc-cer = CENTERED;
 *                                  mc, dsp, ra, th = LEFT)
 *   22   /resultats-etudes-de-cas/ — 7 widgets (mixed:
 *                                  rt-tabs, rt-tem =
 *                                  CENTERED; ca, ct, csa,
 *                                  pi, pd = LEFT)
 *   23   /demander-un-devis/   — 1 widget (CENTERED)
 *   24   /calculateur/         — 2 widgets (CENTERED)
 *   25   /contact/             — 1 widget (CENTERED)
 *   1969 /blog/                — 1 widget (LEFT, article
 *                                  card title)
 * ========================================================= */

/* =========================================================
 * PAGE 11 — /comment-utiliser/
 * All 5 widgets (bp-cu-before, bp-cu-prep, bp-cu-app,
 * bp-cu-dosage, bp-cu-frequence) ship a 2-column layout
 * with the header copy on the LEFT. Alignment = LEFT.
 * Each widget has a `__divider` DOM (line only, no
 * diamond). Rebuild as a left-aligned LINE-DIAMOND-LINE.
 * bp-cu-frequence uses `__eyebrow-text::after` as its
 * line, not a `__divider`; that pseudo is killed and the
 * pattern is painted on the title.
 * ========================================================= */

/* ---- 11a. EYEBROWS (LEFT-aligned) ----
 * Non-hero eyebrows on /comment-lutiliser/ are owned by
 * `.bp-section-eyebrow` in `bp-eyebrow-unify.css`. Only the
 * hero eyebrow typography override is kept here. */
.elementor-11 .bp-cu-hero__eyebrow {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: #374F37 !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	margin: 0 0 12px !important;
	text-align: start !important;
	display: block !important;
}
/* Hide the existing decorative leaves/marks so the
 * eyebrow reads as pure text. */
.elementor-11 .bp-cu-before__eyebrow-leaf,
.elementor-11 .bp-cu-prep__eyebrow-mark,
.elementor-11 .bp-cu-app__eyebrow-mark,
.elementor-11 .bp-cu-dosage__eyebrow-mark,
.elementor-11 .bp-cu-frequence__eyebrow-mark {
	display: none !important;
}

/* ---- 11b. TITLES (LEFT-aligned) ---- */
.elementor-11 .bp-cu-before__title,
.elementor-11 .bp-cu-prep__title,
.elementor-11 .bp-cu-app__title,
.elementor-11 .bp-cu-dosage__title,
.elementor-11 .bp-cu-frequence__title,
.elementor-11 .bp-cu-hero__title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
	margin: 0 0 16px !important;
	text-align: start !important;
}

/* ---- 11c. DIVIDERS — REAL line · diamond · line markup ----
 * The widget now ships real `.bp-cu-...__divider` containers
 * with three children (`.bp-cu-...__divider-line` x2 +
 * `.bp-cu-...__divider-diamond` x1). Sizing, gap, color and
 * alignment are now applied via the Page-11 inline CSS
 * attached to `elementor-post-11` in functions.php, so the
 * old fake title pseudo-element dividers and the
 * `display:none` overrides below are no longer required.
 * The selector list is kept as documentation of which
 * section dividers are managed by the inline block. */
.elementor-11 .bp-cu-before__divider,
.elementor-11 .bp-cu-prep__divider,
.elementor-11 .bp-cu-app__divider,
.elementor-11 .bp-cu-dosage__divider,
.elementor-11 .bp-cu-frequence__divider,
.elementor-11 .bp-cu-hero__divider,
.elementor-11 .bp-cu-fcta__divider {
	/* Sizing / alignment owned by `elementor-post-11` inline CSS. */
}

/* ---- 11c-bis. HERO title spans: force the approved single
 * color on both lines so the sage override in
 * bp-comment-utiliser-hero.css (`.bp-cu-hero__title-2`) does
 * not break visual parity with the other section headers. */
.elementor-11 .bp-cu-hero__title-1,
.elementor-11 .bp-cu-hero__title-2 {
	color: inherit !important;
}

@media ( max-width: 768px ) {
	.elementor-11 .bp-cu-before__title,
	.elementor-11 .bp-cu-prep__title,
	.elementor-11 .bp-cu-app__title,
	.elementor-11 .bp-cu-dosage__title,
	.elementor-11 .bp-cu-frequence__title {
		font-size: clamp(28px, 8vw, 38px) !important;
	}
	/* Non-hero eyebrow responsive typography is owned by
	 * `.bp-section-eyebrow` in `bp-eyebrow-unify.css`. */
}

/* =========================================================
 * PAGE 19 — /faq/
 * All FAQ page eyebrows + titles unified against the
 * calculator eyebrow (`.bp-cm__eyebrow-text`) and the
 * devis form title (`.bp-devis-form__title`) reference.
 * Covers: FAQ Hero, FAQ Theme, FAQ Content, FAQ Next
 * Steps, FAQ Final CTA.
 * ========================================================= */

/* ---- 19a. EYEBROWS — match `.bp-cm__eyebrow-text` ----
 * Non-hero eyebrows on /faq/ are owned by
 * `.bp-section-eyebrow` in `bp-eyebrow-unify.css`. Only the
 * hero eyebrow typography override is kept here so the
 * hero appearance is unchanged. */
.elementor-19 .bp-faq-hero__eyebrow {
	color: #374F37 !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	text-align: start !important;
	display: block !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}
.elementor-19 .bp-faq-hero__eyebrow,
.elementor-19 .bp-faq-hero__eyebrow::before,
.elementor-19 .elementor-element-19273bf .bp-faq-hero__eyebrow {
	color: #374F37 !important;
	background-color: transparent !important;
}
/* Hide every decorative accent line / leaf so the eyebrow
 * reads as pure text on every FAQ widget. */
.elementor-19 .bp-faq-theme__eyebrow-line,
.elementor-19 .bp-ft__eyebrow-line,
.elementor-19 .bp-faq-content__eyebrow-line,
.elementor-19 .bp-faq-next-steps__eyebrow-line,
.elementor-19 .bp-fns__eyebrow-line,
.elementor-19 .bp-faq-fcta__eyebrow-line {
	display: none !important;
}

/* ---- 19b. MAIN SECTION TITLES — match `.bp-du__title` ----
 * Reference: rendered `.bp-du__title` on page 18 (Product).
 * Captured computed style at 800x600:
 *   font-family:  DM Serif Display, Georgia, serif
 *   font-weight:  400
 *   font-size:    clamp(32px, 4.4vw, 52px)
 *   line-height:  1.1
 *   letter-spacing: 0.01em
 *   color:        #374F37
 *   text-transform: uppercase
 *   text-align:   center
 *   margin:       0 0 16px
 *   max-inline-size: 980px
 * All title parts (line1/line2/pre/accent/post/title-1/2/3)
 * collapse into the same computed style so the whole title
 * reads as a single unified unit. */
.elementor-19 .bp-faq-hero__title,
.elementor-19 .bp-faq-hero__title-1,
.elementor-19 .bp-faq-hero__title-2,
.elementor-19 .bp-faq-hero__title-3,
.elementor-19 .bp-ft__title,
.elementor-19 .bp-faq-content__title,
.elementor-19 .bp-faq-content__title-line1,
.elementor-19 .bp-faq-content__title-line2,
.elementor-19 .bp-faq-content__title em,
.elementor-19 .bp-fns__title,
.elementor-19 .bp-fns__title-1,
.elementor-19 .bp-fns__title-2,
.elementor-19 .bp-fns__title-accent,
.elementor-19 .bp-faq-fcta__title,
.elementor-19 .bp-faq-fcta__title-line,
.elementor-19 .bp-faq-fcta__title-row,
.elementor-19 .bp-faq-fcta__title-pre,
.elementor-19 .bp-faq-fcta__title-accent,
.elementor-19 .bp-faq-fcta__title-post {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
	font-style: normal !important;
	text-align: center !important;
	display: block !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	width: auto !important;
	max-width: 980px !important;
	margin-inline: auto !important;
}

/* Left-align the content + fcta titles (data-bp-stagger
 * sections). Hero / theme / next-steps stay centered because
 * their eyebrow + decorative botanicals expect a centered
 * title. */
.elementor-19 .bp-faq-content__title,
.elementor-19 .bp-faq-content__title-line1,
.elementor-19 .bp-faq-content__title-line2,
.elementor-19 .bp-faq-content__title em,
.elementor-19 .bp-faq-fcta__title,
.elementor-19 .bp-faq-fcta__title-line,
.elementor-19 .bp-faq-fcta__title-row,
.elementor-19 .bp-faq-fcta__title-pre,
.elementor-19 .bp-faq-fcta__title-accent,
.elementor-19 .bp-faq-fcta__title-post,
.elementor-19 .elementor-element-d340435 .bp-faq-content__title,
.elementor-19 .elementor-element-d340435 .bp-faq-content__title-line1,
.elementor-19 .elementor-element-d340435 .bp-faq-content__title-line2,
.elementor-19 .elementor-element-d340435 .bp-faq-content__title em,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title-line,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title-pre,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title-accent,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title-post {
	text-align: start !important;
	margin-inline: 0 !important;
	max-width: 980px !important;
}

/* Theme card eyebrow: centered, full width. */
.elementor-19 .bp-ft__eyebrow,
.elementor-19 .bp-ft__eyebrow-text {
	text-align: center !important;
	justify-content: center !important;
}

/* The actual `.bp-ft__card-btn` "En savoir plus" primary CTA
 * style lives in block `19e` further down (matches the
 * `.bp-pfc__btn--primary` rendered style: green pill, 48px
 * min-height, 999px radius, soft shadow, hover lift). */

/* ---- 19b-DIVIDER. Gold divider under every FAQ section title
 * Mirrors the product page "POURQUOI CHOISIR" pattern:
 *   line(56px) + gap(10px) + diamond(8px rotated 45deg) +
 *   gap(10px) + line(56px) = 140px pattern.
 *
 * Centered titles (hero / theme / next-steps) get the
 * CENTERED pattern (same as product page). Left-aligned
 * titles (content / fcta) get a LEFT-ANCHORED pattern that
 * visually starts at the title's left edge.
 *
 * Implementation:
 *   ::after = full-width 1px row whose linear-gradient draws
 *            the two gold lines + transparent diamond gap.
 *   ::before = 8x8 gold square rotated 45deg, positioned to
 *            sit on top of the gap.
 */
.elementor-19 .bp-faq-hero__title,
.elementor-19 .bp-ft__title,
.elementor-19 .bp-fns__title,
.elementor-19 .bp-faq-content__title,
.elementor-19 .bp-faq-fcta__title {
	position: relative !important;
	padding-block-end: 24px !important;
}

/* Centered divider (hero / theme / next-steps) */
.elementor-19 .bp-faq-hero__title::after,
.elementor-19 .bp-ft__title::after,
.elementor-19 .bp-fns__title::after {
	content: "" !important;
	position: absolute !important;
	inset-inline-start: 0 !important;
	inset-block-end: 0 !important;
	inline-size: 100% !important;
	block-size: 1px !important;
	background: linear-gradient(
		to right,
		transparent 0,
		transparent calc(50% - 70px),
		#B8B25A calc(50% - 70px),
		#B8B25A calc(50% - 14px),
		transparent calc(50% - 14px),
		transparent calc(50% + 14px),
		#B8B25A calc(50% + 14px),
		#B8B25A calc(50% + 70px),
		transparent calc(50% + 70px),
		transparent 100%
	) !important;
}
.elementor-19 .bp-faq-hero__title::before,
.elementor-19 .bp-ft__title::before,
.elementor-19 .bp-fns__title::before {
	content: "" !important;
	position: absolute !important;
	inset-inline-start: 50% !important;
	inset-block-end: -4px !important;
	inline-size: 8px !important;
	block-size: 8px !important;
	background-color: #B8B25A !important;
	transform: translateX(-50%) rotate(45deg) !important;
	z-index: 1 !important;
}

/* Left-anchored divider (content / fcta) */
.elementor-19 .bp-faq-content__title::after,
.elementor-19 .bp-faq-fcta__title::after {
	content: "" !important;
	position: absolute !important;
	inset-inline-start: 0 !important;
	inset-block-end: 0 !important;
	inline-size: 140px !important;
	block-size: 1px !important;
	background: linear-gradient(
		to right,
		#B8B25A 0,
		#B8B25A 56px,
		transparent 56px,
		transparent 66px,
		transparent 74px,
		transparent 84px,
		#B8B25A 84px,
		#B8B25A 140px,
		transparent 140px
	) !important;
}
.elementor-19 .bp-faq-content__title::before,
.elementor-19 .bp-faq-fcta__title::before {
	content: "" !important;
	position: absolute !important;
	inset-inline-start: 66px !important;
	inset-block-end: -4px !important;
	inline-size: 8px !important;
	block-size: 8px !important;
	background-color: #B8B25A !important;
	transform: rotate(45deg) !important;
	z-index: 1 !important;
}

@media ( max-width: 480px ) {
	.elementor-19 .bp-faq-content__title::after,
	.elementor-19 .bp-faq-fcta__title::after {
		inline-size: 100% !important;
		background: linear-gradient(
			to right,
			#B8B25A 0,
			#B8B25A 40px,
			transparent 40px,
			transparent 50px,
			transparent 58px,
			transparent 68px,
			#B8B25A 68px,
			#B8B25A 108px,
			transparent 108px
		) !important;
	}
	.elementor-19 .bp-faq-content__title::before,
	.elementor-19 .bp-faq-fcta__title::before {
		inset-inline-start: 50px !important;
	}
}

/* Title accent variants unify to the SAME dark-green tone
 * as the parent title; per the user spec the inner spans
 * must NOT create different typography/colors. The accent
 * is no longer an accent — it is part of the title.
 *
 * Selectors mirror the page-19 per-widget specificity
 * (`.elementor-19 .elementor-element-XXXX .target`) used
 * by post-19.css so the override is structurally aligned
 * with the cascade that originally won. */
.elementor-19 .bp-faq-content__title em,
.elementor-19 .bp-fns__title-accent,
.elementor-19 .bp-faq-fcta__title-accent,
.elementor-19 .bp-faq-hero__title-3,
.elementor-19 .bp-faq-content__title-line1,
.elementor-19 .bp-faq-content__title-line2,
.elementor-19 .bp-fns__title-1,
.elementor-19 .bp-fns__title-2,
.elementor-19 .bp-faq-fcta__title-pre,
.elementor-19 .bp-faq-fcta__title-post,
.elementor-19 .bp-faq-fcta__title-line,
.elementor-19 .bp-faq-hero__title-1,
.elementor-19 .bp-faq-hero__title-2,
.elementor-19 .elementor-element-19273bf .bp-faq-hero__title-3,
.elementor-19 .elementor-element-d340435 .bp-faq-content__title em,
.elementor-19 .elementor-element-d340435 .bp-faq-content__title-line1,
.elementor-19 .elementor-element-d340435 .bp-faq-content__title-line2,
.elementor-19 .elementor-element-3599807 .bp-fns__title-accent,
.elementor-19 .elementor-element-3599807 .bp-fns__title-1,
.elementor-19 .elementor-element-3599807 .bp-fns__title-2,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title-accent,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title-pre,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title-post,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title-line {
	color: #374F37 !important;
	font-style: normal !important;
}
/* Title decorative underline suppression — KEEPS `::after` and
 * `::before` enabled only for the title rules that own the
 * gold divider (hero / theme / next-steps / content / fcta).
 * The `-underline` span stays suppressed because it is a
 * separate DOM element. */
.elementor-19 .bp-faq-content__title-underline {
	content: none !important;
	display: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
@media ( max-width: 768px ) {
	.elementor-19 .bp-faq-hero__title,
	.elementor-19 .bp-faq-hero__title-1,
	.elementor-19 .bp-faq-hero__title-2,
	.elementor-19 .bp-faq-hero__title-3,
	.elementor-19 .bp-ft__title,
	.elementor-19 .bp-faq-content__title,
	.elementor-19 .bp-faq-content__title-line1,
	.elementor-19 .bp-faq-content__title-line2,
	.elementor-19 .bp-fns__title,
	.elementor-19 .bp-fns__title-1,
	.elementor-19 .bp-fns__title-2,
	.elementor-19 .bp-fns__title-accent,
	.elementor-19 .bp-faq-fcta__title,
	.elementor-19 .bp-faq-fcta__title-line,
	.elementor-19 .bp-faq-fcta__title-row,
	.elementor-19 .bp-faq-fcta__title-pre,
	.elementor-19 .bp-faq-fcta__title-accent,
	.elementor-19 .bp-faq-fcta__title-post {
		font-size: clamp(28px, 8vw, 38px) !important;
		line-height: 1.1 !important;
	}
}
@media ( max-width: 480px ) {
	.elementor-19 .bp-faq-hero__title,
	.elementor-19 .bp-faq-hero__title-1,
	.elementor-19 .bp-faq-hero__title-2,
	.elementor-19 .bp-faq-hero__title-3,
	.elementor-19 .bp-ft__title,
	.elementor-19 .bp-faq-content__title,
	.elementor-19 .bp-faq-content__title-line1,
	.elementor-19 .bp-faq-content__title-line2,
	.elementor-19 .bp-fns__title,
	.elementor-19 .bp-fns__title-1,
	.elementor-19 .bp-fns__title-2,
	.elementor-19 .bp-fns__title-accent,
	.elementor-19 .bp-faq-fcta__title,
	.elementor-19 .bp-faq-fcta__title-line,
	.elementor-19 .bp-faq-fcta__title-row,
	.elementor-19 .bp-faq-fcta__title-pre,
	.elementor-19 .bp-faq-fcta__title-accent,
	.elementor-19 .bp-faq-fcta__title-post {
		font-size: clamp(28px, 8vw, 38px) !important;
	}
}

/* ---- 19c. SIDEBAR NAV REMOVED + FULL-WIDTH PANELS ---- */
.elementor-19 .bp-faq-content__main {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
}
.elementor-19 .bp-faq-content__nav,
.elementor-19 .bp-faq-content__nav-head,
.elementor-19 .bp-faq-content__cats,
.elementor-19 .bp-faq-content__cat {
	display: none !important;
}
.elementor-19 .bp-faq-content__panels {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}
.elementor-19 .bp-faq-content__panel {
	display: block !important;
	margin-block-end: 28px !important;
	scroll-margin-top: calc(var(--bp-header-main-h, 60px) + 12px) !important;
}
.elementor-19 .bp-faq-content__panel[hidden] {
	display: block !important;
}
.elementor-19 .bp-faq-content__panel.is-hidden,
.elementor-19 .bp-faq-content__item.is-hidden {
	display: none !important;
}

/* ---- 19d. SIMPLE CHEVRON (no fancy arrows) ----
 * Clean CSS-only chevron: 10px square, dark-green, border-right
 * + border-bottom, rotated 45deg when closed, 225deg when open. */
.elementor-19 .bp-faq-content__chevron {
	inline-size: 10px !important;
	block-size: 10px !important;
	color: #374F37 !important;
	background: transparent !important;
	border: 0 !important;
	border-right: 2px solid currentColor !important;
	border-bottom: 2px solid currentColor !important;
	border-radius: 0 !important;
	transform: rotate(45deg) !important;
	transition: transform 0.25s ease, border-color 0.2s ease !important;
}
.elementor-19 .bp-faq-content__chevron::before,
.elementor-19 .bp-faq-content__chevron::after {
	content: none !important;
	display: none !important;
}
.elementor-19 .bp-faq-content__item.is-open .bp-faq-content__chevron {
	transform: rotate(225deg) !important;
}
/* The answer is visually expanded by the [aria-hidden=false]
 * state — keep the panel visible. */
.elementor-19 .bp-faq-content__answer-wrap {
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease !important;
	padding-block: 0 !important;
}
.elementor-19 .bp-faq-content__answer-wrap[aria-hidden="false"] {
	max-height: 2000px !important;
	opacity: 1 !important;
	padding-block: 12px !important;
}

/* ---- 19e. THEME CARD "En savoir plus" BUTTON ----
 * Matches the product primary CTA (`.bp-pfc__btn--primary.is-revealed`)
 * exact rendered style: green pill, cream text, 48px min-height, 999px
 * radius, soft green shadow, hover lift. The button lives INSIDE
 * `.bp-ft__card-inner` (sits as the last flex item, pushed to the
 * bottom via `margin-top:auto`) and is layered above the optional
 * `.bp-ft__card-link` click overlay (z-index 5) so a tap on the
 * button only triggers the button. */
.elementor-19 .bp-ft__card-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-block-start: auto !important;
	margin-top: auto !important;
	padding: 12px 20px !important;
	min-block-size: 48px !important;
	inline-size: 100% !important;
	background-color: #374F37 !important;
	color: #FFFFFF !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	position: relative !important;
	z-index: 6 !important;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	box-shadow: 0 4px 14px rgba(55, 79, 55, 0.35) !important;
}
.elementor-19 .bp-ft__card-btn:hover,
.elementor-19 .bp-ft__card-btn:focus-visible {
	background-color: #2A3D2A !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px rgba(42, 61, 42, 0.45) !important;
	outline: none !important;
}
/* Hide the icon + number pseudo-content inside the button if any
 * Elementor icon control was bound to it. Belt-and-suspenders. */
.elementor-19 .bp-ft__card-btn i,
.elementor-19 .bp-ft__card-btn svg {
	display: none !important;
}

/* ---- 19f. FAQ Final CTA — primary removed, secondary = product primary ---- */
.elementor-19 .bp-faq-fcta__btn--primary,
.elementor-19 .bp-faq-fcta__btn--primary-wrap {
	display: none !important;
}
.elementor-19 .bp-faq-fcta__buttons {
	justify-content: center !important;
	gap: 0 !important;
}
.elementor-19 .bp-faq-fcta__btn--secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	min-block-size: 48px !important;
	padding-block: 12px !important;
	padding-inline: 26px !important;
	background-color: #25D366 !important;
	color: #FFFFFF !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.elementor-19 .bp-faq-fcta__btn--secondary:hover,
.elementor-19 .bp-faq-fcta__btn--secondary:focus-visible {
	background-color: #1DA851 !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px rgba(29, 168, 81, 0.45) !important;
	outline: none !important;
}
.elementor-19 .bp-faq-fcta__btn--secondary svg,
.elementor-19 .bp-faq-fcta__btn--secondary i {
	color: inherit !important;
	fill: currentColor !important;
}

/* ---- 19g. NO-RESULTS MESSAGE ---- */
.elementor-19 .bp-faq-content__no-results {
	padding: 24px 26px;
	background-color: #FBF6EC;
	border: 1px solid #E4DCCB;
	border-radius: 14px;
	font-size: 15px;
	color: #5C6A5C;
	text-align: center;
	margin-block: 8px 0;
}
.elementor-19 .bp-faq-content__no-results[hidden] {
	display: none;
}

/* ---- 19h. HIDE OPEN ITEM CARDS' QUESTION HOVER BACKGROUND ---- */
.elementor-19 .bp-faq-content__item:hover {
	background-color: #FFFFFF !important;
	border-color: #E4DCCB !important;
}
.elementor-19 .bp-faq-content__item:hover .bp-faq-content__question {
	color: #1F2A1F !important;
}
.elementor-19 .bp-faq-content__item.is-open {
	background-color: #F4ECDD !important;
	border-color: #E4DCCB !important;
}
.elementor-19 .bp-faq-content__item.is-open .bp-faq-content__question {
	color: #1F2A1F !important;
}
.elementor-19 .bp-faq-content__item.is-open .bp-faq-content__chevron {
	color: #374F37 !important;
}

/* ---- 19i. PANEL HEAD TITLE (per category) ---- */
.elementor-19 .bp-faq-content__panel-title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(22px, 2.6vw, 28px) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.005em !important;
	color: #374F37 !important;
	text-transform: none !important;
}

/* ---- 19j. UNIFIED CARD BG/BORDER + HERO LEFT + FNS 2-LINE + 100PX GAPS ----
 *
 * Four scoped fixes for page 19 only:
 *   1. ALL FAQ cards (theme + accordion + next-step) share
 *      the exact rendered background + border of the
 *      Product card
 *      `.bp-product-versions__card--g3--image-left.is-revealed`:
 *        background-color : #FBF6EC
 *        border           : 1px solid #B8B25A
 *        border-radius    : 22px
 *      (no layout / size / padding / shadow copied.)
 *   2. `.bp-faq-hero__title` MUST be LEFT aligned
 *      (`text-align: start`).
 *   3. `.bp-fns__title` rendered as exactly 2 lines:
 *      "Trouvez l'outil" on line 1, "qu'il vous faut." on
 *      line 2. The accent is the last word of line 1; the
 *      second span is forced onto its own line via
 *      `display: block` so no third line can render.
 *   4. Main section spacing = exactly 100px between each
 *      top-level section on FAQ desktop. Implemented by
 *      turning the page root into a flex column with
 *      `gap: 100px` and zeroing the e-con-inner baseline
 *      padding-block. The last section gets
 *      `margin-bottom: 100px` so the final CTA → footer
 *      gap is also exactly 100px. The card internal
 *      paddings are left untouched. */
.elementor-19 .bp-ft__card,
.elementor-19 .bp-faq-content__item,
.elementor-19 .bp-fns__card {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
/* The .is-open state for the accordion item previously used
 * a different background/border; re-pin to the unified
 * treatment so an open item reads the same as a closed one
 * in the border layer (background can still vary per state). */
.elementor-19 .bp-faq-content__item.is-open {
	background-color: #FBF6EC !important;
	border-color: #B8B25A !important;
}
.elementor-19 .bp-faq-content__item:hover {
	background-color: #FBF6EC !important;
	border-color: #B8B25A !important;
}

/* 2. Hero title — LEFT aligned. The earlier 19b block
 * forced `text-align: center` on every FAQ title; override
 * for the hero only so the decorative line + diamond stay
 * positioned correctly. */
.elementor-19 .bp-faq-hero__title,
.elementor-19 .bp-faq-hero__title-1,
.elementor-19 .bp-faq-hero__title-2,
.elementor-19 .bp-faq-hero__title-3,
.elementor-19 .elementor-element-19273bf .bp-faq-hero__title {
	text-align: start !important;
	margin-inline: 0 !important;
	max-inline-size: 980px !important;
}
/* Hero decorative divider re-anchored to the title's
 * inline-start (left), not center, so the line+diamond
 * sit under the left-aligned title. */
.elementor-19 .bp-faq-hero__title::after {
	background: linear-gradient(
		to right,
		#B8B25A 0,
		#B8B25A 56px,
		transparent 56px,
		transparent 84px,
		#B8B25A 84px,
		#B8B25A 140px,
		transparent 140px
	) !important;
	inset-inline-start: 0 !important;
}
.elementor-19 .bp-faq-hero__title::before {
	inset-inline-start: 66px !important;
	transform: rotate(45deg) !important;
}

/* 3. FNS title — force exactly 2 lines.
 * The original markup is 3 inline spans
 * (title-1 + accent + title-2) in one h2. The 19b block
 * (line 2003) forces `display: block !important` on ALL
 * THREE spans, which is what was producing 3 rendered
 * lines. We override that here so title-1 + accent stay
 * inline on line 1 and only title-2 wraps to line 2.
 * Also restore the approved italic on the accent span
 * (the 19b block stripped it with `font-style: normal
 * !important`). */
.elementor-19 .bp-fns__title-1,
.elementor-19 .bp-fns__title-accent {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
}
.elementor-19 .bp-fns__title-2 {
	display: block !important;
	margin-block-start: 0.15em !important;
}
.elementor-19 .bp-fns__title-accent {
	font-style: italic !important;
}

/* 4. FCTA title — force exactly 2 lines.
 * The markup is:
 *   <span class="bp-faq-fcta__title-line">Vous n'avez pas trouvé</span>
 *   <span class="bp-faq-fcta__title-row">
 *     <span class="bp-faq-fcta__title-pre">votre </span>
 *     <span class="bp-faq-fcta__title-accent">réponse</span>
 *     <span class="bp-faq-fcta__title-post"> ?</span>
 *   </span>
 * The 19b block (line 2003) forces `display: block !important`
 * on EVERY child span, producing 4 rendered lines. We keep
 * `title-line` and `title-row` as blocks (so the title
 * itself is 2 lines) and force the three inner spans
 * `title-pre / title-accent / title-post` to inline so they
 * flow on line 2. Also restore the approved italic on the
 * accent (19b set `font-style: normal !important`). */
.elementor-19 .bp-faq-fcta__title-pre,
.elementor-19 .bp-faq-fcta__title-accent,
.elementor-19 .bp-faq-fcta__title-post {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
}
.elementor-19 .bp-faq-fcta__title-accent,
.elementor-19 .elementor-element-36ddd54 .bp-faq-fcta__title-accent {
	font-style: italic !important;
}

/* 1. Theme eyebrow "PAR THÈME" — visually centered in
 * its section. The parent `.bp-ft__header` is a flex
 * column with `align-items: flex-start` (from
 * bp-faq-theme.css), so the inline-flex eyebrow is
 * pushed to the start. We center the eyebrow itself
 * (both the wrapper and the text node) without touching
 * the title or any other header child. */
.elementor-19 .bp-ft__eyebrow {
	align-self: center !important;
	margin-inline: auto !important;
	text-align: center !important;
	justify-content: center !important;
}
.elementor-19 .bp-ft__eyebrow-text {
	text-align: center !important;
}

/* 4. Section spacing — exactly 100px between each
 * main section on FAQ desktop. The page root is the
 * `.elementor-19` Elementor container. Children are
 * e-con wrappers; we set `gap: 100px` on the root and
 * force the e-con-inner baseline padding-block to 0.
 * Crucially we ALSO force the section ROOT padding-block
 * to 0, because the per-widget stylesheets
 * (bp-faq-theme.css 72px, bp-faq-content.css 80px,
 * bp-faq-next-steps.css 80/88px, bp-faq-final-cta.css
 * 72/80px) were stacking ON TOP of the 100px flex gap,
 * producing 170–200px+ visible gaps. Each section's
 * own internal breathing room is already provided by
 * its `.bp-faq-*-inner` / `.bp-faq-fcta__card` (the
 * individual card padding inside the section is
 * untouched). */
.elementor-19 {
	display: flex !important;
	flex-direction: column !important;
	gap: 100px !important;
}
.elementor-19 > .e-con,
.elementor-19 > .elementor-section,
.elementor-19 > * {
	margin-block: 0 !important;
	padding-block: 0 !important;
}
.elementor-19 > * > .e-con-inner,
.elementor-19 > * > .elementor-container,
.elementor-19 > * > .elementor-row {
	padding-block: 0 !important;
}
.elementor-19 > *:last-child {
	margin-bottom: 0 !important;
}

/* 5. FCTA secondary button — dark green.
 * The 19f block (line 2386) set the FCTA secondary to
 * WhatsApp green (#25D366) with `!important` on
 * `.elementor-19 .bp-faq-fcta__btn--secondary`. We win
 * the cascade here by using the SAME selector + later
 * in the file + `!important` on the properties we want
 * to flip (bg, color, border). */
.elementor-19 .bp-faq-fcta__btn--secondary {
	background-color: #374F37 !important;
	color: #FBF6EC !important;
	border-color: #374F37 !important;
	box-shadow: 0 4px 14px rgba(55, 79, 55, 0.35) !important;
}
.elementor-19 .bp-faq-fcta__btn--secondary:hover,
.elementor-19 .bp-faq-fcta__btn--secondary:focus-visible {
	background-color: #2A3D2A !important;
	color: #FBF6EC !important;
	border-color: #2A3D2A !important;
	box-shadow: 0 6px 18px rgba(42, 61, 42, 0.45) !important;
}

/* =========================================================
 * PAGE 21 (/cultures-applications/) — typography, eyebrow
 * marks and fake title `::before/::after` dividers were
 * previously declared here. They are now owned by the
 * `wp_add_inline_style( 'elementor-post-21', ... )` block
 * in functions.php (priority 100) which owns:
 *   - page-level gap = 0
 *   - outer section padding-block = 0
 *   - main-title rhythm (bottom padding 0 + margin-bottom 28px)
 *   - real line/diamond/line dividers (40px / 6px / 10px gap)
 *     with per-section left/center alignment
 *   - neutralisation of any leftover `::before/::after` fake
 *     title dividers via the inline `content:none !important`
 *   - gap:0 on every section header wrapper
 *   - cream / gold / 22px surface on qualifying outer cards
 * Keeping a stub here so the page-comment block index in this
 * file still flows (PAGE 22 follows immediately below).
 * ========================================================= */

/* =========================================================
 * PAGE 22 — /resultats-etudes-de-cas/
 * The legacy eyebrow / title / fake-title-pseudo / 50px-section /
 * 100px-CTA / inner-card cream overrides previously declared
 * here have been moved to the
 * `wp_add_inline_style( 'elementor-post-22', ... )` block in
 * functions.php (priority 100) which now owns:
 *   - page-level gap = 0
 *   - outer section padding-block = 0
 *   - main-title rhythm (bottom padding 0 + margin-bottom 28px)
 *   - real line/diamond/line dividers (40px / 6px / 10px gap)
 *   - neutralisation of any leftover `::before/::after` fake
 *     title dividers via the inline `content:none !important`
 *   - gap:0 on every section header wrapper
 *   - cream / gold / 22px surface on the qualifying outer cards
 *   - restore native styling for inner Anacardier compare cards
 * Keeping a stub here so the page-comment block index in this
 * file still flows (PAGE 23 follows immediately below).
 * ========================================================= */

/* =========================================================
 * PAGE 23 — /demander-un-devis/
 * 1 widget: bp-devis-form. The form panel is excluded.
 * Header is centered. Alignment = CENTERED.
 * ========================================================= */
/* Non-hero eyebrow typography is owned by
 * `.bp-section-eyebrow` in `bp-eyebrow-unify.css`. The
 * centered header layout is preserved by centering the
 * `inline-block` eyebrow via the parent intro block. */
.elementor-23 .bp-devis-form__intro {
	text-align: center !important;
}
.elementor-23 .bp-devis-form__title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
	margin: 0 0 16px !important;
	text-align: center !important;
	position: relative !important;
	display: block !important;
	padding-block-end: 28px !important;
}
.elementor-23 .bp-devis-form__title::after {content: "" !important;
	position: absolute !important;
	inset-inline-start: 0 !important;
	inset-block-end: -10px !important;
	inline-size: 100% !important;
	block-size: 1px !important;
	background: linear-gradient(
		to right,
		transparent 0,
		transparent calc(50% - 70px),
		#B8B25A calc(50% - 70px),
		#B8B25A calc(50% - 14px),
		transparent calc(50% - 14px),
		transparent calc(50% + 14px),
		#B8B25A calc(50% + 14px),
		#B8B25A calc(50% + 70px),
		transparent calc(50% + 70px),
		transparent 100%
	) !important;}
.elementor-23 .bp-devis-form__title::before {
	content: "" !important;
	position: absolute !important;
	inset-block-end: -14px !important;
	inset-inline-start: 50% !important;
	inline-size: 8px !important;
	block-size: 8px !important;
	background-color: #B8B25A !important;
	transform: translateX(-50%) rotate(45deg) !important;
	z-index: 1 !important;
}
.elementor-23 .bp-devis-form__title-2,
.elementor-23 .bp-devis-form__divider {
	display: none !important;
}
@media ( max-width: 768px ) {
	.elementor-23 .bp-devis-form__title {
		font-size: clamp(28px, 8vw, 38px) !important;
	}
}

/* =========================================================
 * PAGE 24 — /calculateur/
 * 2 widgets (bp-cfg, bp-cm). Both have centered
 * headers (`text-align: center; margin: 0 auto`).
 * Alignment = CENTERED.
 *
 * MICRO PATCH 0.1.378 — Page 24 now owns its layout via
 * the `wp_add_inline_style( 'elementor-post-24', ... )`
 * block in functions.php (priority 100). site.css keeps
 * only the page-24 title typography / eyebrow / forced
 * hero eyebrow color. The 100px vertical rhythm, the
 * pseudo-element title dividers, the hidden
 * `.bp-cfg__divider` / `.bp-cm__divider` block, the
 * forced cream/gold on the INNER `.bp-cm__calc--1/--2`
 * equation cards and the per-section 100px margin are
 * all now owned by the page-24 inline block.
 * ========================================================= */
/* Non-hero eyebrow typography is owned by
 * `.bp-section-eyebrow` in `bp-eyebrow-unify.css`. */
.elementor-24 .bp-cm__header {
	max-inline-size: 100% !important;
	text-align: center !important;
	align-items: center !important;
}
.elementor-24 .bp-cfg__eyebrow-line,
.elementor-24 .bp-cfg__eyebrow-leaf,
.elementor-24 .bp-cm__eyebrow-line,
.elementor-24 .bp-cm__eyebrow-leaf {
	display: none !important;
}
.elementor-24 .bp-cfg__title,
.elementor-24 .bp-cfg__title.is-revealed {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
	margin: 0 0 16px !important;
	text-align: center !important;
	margin-inline: auto !important;
	position: relative !important;
	display: block !important;
	padding-block-end: 28px !important;
}
.elementor-24 .bp-cm__title,
.elementor-24 .bp-cm__title.is-revealed {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
	margin: 0 0 16px !important;
	text-align: start !important;
	margin-inline: 0 !important;
	position: relative !important;
	display: block !important;
	padding-block-end: 28px !important;
}
.elementor-24 .bp-calculateur-hero__eyebrow {
	color: #374F37 !important;
}
.elementor-24 .bp-cm__info-card--right {
	background-color: #FBF6EC !important;
}

/* ---- Page 24 calculator: no section background color.
 * Force every section to a fully transparent background
 * so only the page bg (#F8F4ED) shows through. The
 * .bp-cm__bg / .bp-cm__bg-tint / .bp-cm__bg-fade layers
 * are already display:none in the methode CSS, but we
 * belt-and-brace the rule here for page-24 stability. */
.elementor-24 .bp-calculateur-hero,
.elementor-24 .bp-cfg,
.elementor-24 .bp-cm,
.elementor-24 .bp-calc-fcta,
.elementor-24 .elementor-element-2bd6ff4,
.elementor-24 .elementor-element-c108d32,
.elementor-24 .elementor-element-3faf9db,
.elementor-24 .elementor-element-09501c6 {
	background-color: transparent !important;
	background-image: none !important;
}
@media ( max-width: 768px ) {
	.elementor-24 .bp-cfg__title,
	.elementor-24 .bp-cm__title {
		font-size: clamp(28px, 8vw, 38px) !important;
	}
}

/* =========================================================
 * PAGE 25 — /contact/
 * 2 widgets: bp-contact-form (form panel — no section
 * header), bp-contact-global-network (CENTERED).
 * ========================================================= */
.elementor-25 .bp-contact-global-network__eyebrow {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: #374F37 !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	margin: 0 0 12px !important;
	text-align: center !important;
	display: block !important;
}
.elementor-25 .bp-contact-global-network__eyebrow-line,
.elementor-25 .bp-contact-global-network__eyebrow-leaf {
	display: none !important;
}
.elementor-25 .bp-contact-global-network__title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
	margin: 0 0 16px !important;
	text-align: center !important;
	position: relative !important;
	display: block !important;
	padding-block-end: 28px !important;
}
.elementor-25 .bp-contact-global-network__title::after {content: "" !important;
	position: absolute !important;
	inset-inline-start: 0 !important;
	inset-block-end: -10px !important;
	inline-size: 100% !important;
	block-size: 1px !important;
	background: linear-gradient(
		to right,
		transparent 0,
		transparent calc(50% - 70px),
		#B8B25A calc(50% - 70px),
		#B8B25A calc(50% - 14px),
		transparent calc(50% - 14px),
		transparent calc(50% + 14px),
		#B8B25A calc(50% + 14px),
		#B8B25A calc(50% + 70px),
		transparent calc(50% + 70px),
		transparent 100%
	) !important;}
.elementor-25 .bp-contact-global-network__title::before {
	content: "" !important;
	position: absolute !important;
	inset-block-end: -14px !important;
	inset-inline-start: 50% !important;
	inline-size: 8px !important;
	block-size: 8px !important;
	background-color: #B8B25A !important;
	transform: translateX(-50%) rotate(45deg) !important;
	z-index: 1 !important;
}
.elementor-25 .bp-contact-global-network__divider,
.elementor-25 .bp-contact-global-network__underline {
	display: none !important;
}
@media ( max-width: 768px ) {
	.elementor-25 .bp-contact-global-network__title {
		font-size: clamp(28px, 8vw, 38px) !important;
	}
}

/* =========================================================
 * PAGE 25 — /contact/ — SECTION SPACING
 * Zero outer vertical space between contact sections. The
 * 100px gap has been removed; sections now stack tightly
 * while internal widget padding remains intact.
 * ========================================================= */
.elementor-25 .bp-contact-hero,
.elementor-25 .bp-contact-global-network,
.elementor-25 .bp-contact-form,
.elementor-25 .bp-contact-final-cta {
	padding-block-start: 0 !important;
	padding-block-end: 0 !important;
}
.elementor-25 .elementor-element-4906071,
.elementor-25 .elementor-element-cf8215b,
.elementor-25 .elementor-element-75e2a39 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-block: 0 !important;
}
/* Top-level contact containers: zero outer vertical space. */
.elementor-25 .elementor-element-64248c0,
.elementor-25 .elementor-element-4906071,
.elementor-25 .elementor-element-cf8215b {
	margin-block: 0 !important;
	padding-block: 0 !important;
}
/* Direct .e-con-inner of the top-level contact containers:
 * zero padding/margin so the section spacing collapses fully. */
.elementor-25 .elementor-element-64248c0 > .e-con-inner,
.elementor-25 .elementor-element-4906071 > .e-con-inner,
.elementor-25 .elementor-element-cf8215b > .e-con-inner {
	padding-block: 0 !important;
	margin-block: 0 !important;
}
/* Zero the form content row's default bottom margin. */
.elementor-25 .elementor-element-3782b81 {
	margin-bottom: 0 !important;
	margin-block-end: 0 !important;
}
/* cf8215b holds Global Network + Final CTA as siblings; zero
 * its flex gap so the two stack tightly. */
.elementor-25 .elementor-element-cf8215b > .e-con-inner {
	gap: 0 !important;
	row-gap: 0 !important;
	padding-block-end: 0 !important;
}
/* Final CTA: drop the forced 440px min-height so the panel
 * sizes to its content; preserve the natural ~40px bottom
 * padding from .bp-contact-final-cta__content. */
.elementor-25 .bp-contact-final-cta {
	min-block-size: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}
.elementor-25 .bp-contact-final-cta__content {
	min-block-size: 0 !important;
	min-height: 0 !important;
}
/* CTA button: cream surface, dark-green text (overrides
 * Elementor's per-page inline color controls, which set the
 * variables directly on the button). */
.elementor-25 .elementor-element-75e2a39 .bp-contact-final-cta__btn {
	--bp-cfcta-btn-bg:       #FBF6EC !important;
	--bp-cfcta-btn-hover-bg: #FBF6EC !important;
	--bp-cfcta-btn-fg:       #374F37 !important;
}

/* =========================================================
 * PAGE 1969 — /blog/
 * 1 widget: bp-blog-list. Article cards (LEFT-aligned
 * card titles). The widget ships a serif title; we keep
 * it but ensure it matches the reference.
 * ========================================================= */
.single-bp_article .bp-blog-list__eyebrow {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: #374F37 !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	margin: 0 0 12px !important;
}
.single-bp_article .bp-blog-list__title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
	margin: 0 0 16px !important;
	text-align: start !important;
	position: relative !important;
	display: block !important;
	padding-block-end: 28px !important;
}
.single-bp_article .bp-blog-list__title::after {content: "" !important;
	position: absolute !important;
	inset-inline-start: 0 !important;
	inset-block-end: -10px !important;
	inline-size: 140px !important;
	block-size: 1px !important;
	background: linear-gradient(
		to right,
		#B8B25A 0,
		#B8B25A 56px,
		transparent 56px,
		transparent 84px,
		#B8B25A 84px,
		#B8B25A 140px
	) !important;}
.single-bp_article .bp-blog-list__title::before {content: "" !important;
	position: absolute !important;
	inset-inline-start: 70px !important;
	inset-block-end: -14px !important;
	inline-size: 8px !important;
	block-size: 8px !important;
	background-color: #B8B25A !important;
	transform: translateX(-50%) rotate(45deg) !important;
	z-index: 1 !important;}

/* =========================================================
 * GLOBAL SAFEGUARD — Final CTA eyebrow/title/divider
 * MUST NOT be touched by any of the rules above.
 * Re-pin every Final CTA family with its own design.
 * ========================================================= */
.bp-final-cta__eyebrow,
.bp-devis-fcta__eyebrow,
.bp-faq-fcta__eyebrow,
.bp-blog-fcta__eyebrow,
.bp-about-final-cta__eyebrow,
.bp-contact-final-cta__eyebrow,
.bp-calc-fcta__eyebrow,
.bp-cu-fcta__eyebrow,
.bp-cult-cta__eyebrow,
.bp-resultats-final-cta__eyebrow,
.bp-pfc__eyebrow,
.bp-article-final-cta__eyebrow {
	font-size: var(--bp-fc-eyebrow, 13px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
}
.bp-final-cta__title,
.bp-devis-fcta__title,
.bp-faq-fcta__title,
.bp-blog-fcta__title,
.bp-about-final-cta__title,
.bp-contact-final-cta__title,
.bp-calc-fcta__title,
.bp-cu-fcta__title,
.bp-cult-cta__title,
.bp-resultats-final-cta__title,
.bp-pfc__title,
.bp-article-final-cta__title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.005em !important;
	text-transform: none !important;
	padding-block-end: 0 !important;
	position: static !important;
	display: block !important;
}
.bp-final-cta__title::before,
.bp-final-cta__title::after,
.bp-devis-fcta__title::before,
.bp-devis-fcta__title::after,
.bp-faq-fcta__title::before,
.bp-faq-fcta__title::after,
.bp-blog-fcta__title::before,
.bp-blog-fcta__title::after,
.bp-about-final-cta__title::before,
.bp-about-final-cta__title::after,
.bp-contact-final-cta__title::before,
.bp-contact-final-cta__title::after,
.bp-calc-fcta__title::before,
.bp-calc-fcta__title::after,
.bp-cu-fcta__title::before,
.bp-cu-fcta__title::after,
.bp-cult-cta__title::before,
.bp-cult-cta__title::after,
.bp-resultats-final-cta__title::before,
.bp-resultats-final-cta__title::after,
.bp-pfc__title::before,
.bp-pfc__title::after,
.bp-article-final-cta__title::before,
.bp-article-final-cta__title::after {
	content: none !important;
	display: none !important;
}

/* =========================================================
 * MICRO PATCH 0.1.321 — HOMEPAGE CALCULATOR DIVIDER +
 * DEVIS TITLE WRAP (page 16 only).
 *
 * 1) `.elementor-16 .bp-cfg__divider` is a single <span>
 *    with no children. The v0.1.320 shared flex rule did
 *    not produce a real LINE—DIAMOND—LINE because there are
 *    no flex items. Rebuild it as a 140px block (56 + 10 +
 *    8 + 10 + 56) with two pseudo-element lines and a
 *    background-painted diamond, identical to the
 *    `.bp-why-choose__divider` reference.
 *
 * 2) `.elementor-16 .bp-devis-form__title-2` currently
 *    wraps "POUR MIEUX VOUS CONSEILLER." into 2-3 lines
 *    because the intro max-width (720px) is too narrow for
 *    the standardized title size. Widen the title block to
 *    900px and force `white-space: nowrap` on title-2 at
 *    desktop only, so the heading reads as exactly two
 *    lines: "QUELQUES INFORMATIONS" / "POUR MIEUX VOUS
 *    CONSEILLER." Mobile falls back to natural wrapping. */

.elementor-16 .bp-cfg__divider {
	background: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	block-size: auto !important;
	margin-inline: auto !important;
}

/* Same fix on Page 18 (product): nullify the title-painted
 * `::after` line + `::before` diamond and reveal the real
 * `bp-cfg__divider` row (line / diamond / line), centered
 * under the title. Page 18 shares its title-pseudo-element
 * rule with 14+ other section titles, so we override
 * `.bp-cfg__title` only — no impact on the other 14
 * sections. Page 24 (calculator) now owns this concern
 * inside the `wp_add_inline_style('elementor-post-24', ...)`
 * block, so it is intentionally excluded here. */
.elementor-18 .bp-cfg__title::after,
.elementor-18 .bp-cfg__title::before {
	content: none !important;
	background: none !important;
	display: none !important;
}
.elementor-18 .bp-cfg__divider {
	background: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	block-size: auto !important;
	margin-inline: auto !important;
}

.elementor-16 .bp-devis-form__title {
	max-inline-size: 900px !important;
	margin-inline: auto !important;
}
@media ( min-width: 1025px ) {
	.elementor-16 .bp-devis-form__title-2 {
		white-space: nowrap !important;
	}
}

/* =========================================================
 * MICRO PATCH 0.1.322 — HOMEPAGE 100PX SECTION SPACING
 * (page 16 only).
 *
 * Every major Homepage section group must have exactly 100px
 * of visible vertical space between the end of one group
 * (content + CTA) and the start of the next group's content.
 *
 * The Hero (1st section) and Benefits strip (2nd section)
 * form ONE group. Every other section starts a new group.
 *
 * Sections have varying top padding (0/60/80px), so the
 * margin-block-start is set to (100px - padding-top) so the
 * FINAL visible gap is exactly 100px. The Final CTA also
 * gets 20px margin-block-end (100px - 80px padding-bottom)
 * for the footer transition. */

/* Sections with 0px top padding: 100px margin
 * (3=Why Choose, 5=Cultures, 9=Devis, 10=FAQ). */
.elementor-16 > section:nth-of-type(3),
.elementor-16 > section:nth-of-type(5),
.elementor-16 > section:nth-of-type(9),
.elementor-16 > section:nth-of-type(10) {
	margin-block-start: 100px !important;
}

/* Sections with 80px top padding: 20px margin (100 - 80)
 * (4=Product, 6=How, 7=Results, 8=Calc, 12=Final CTA). */
.elementor-16 > section:nth-of-type(4),
.elementor-16 > section:nth-of-type(6),
.elementor-16 > section:nth-of-type(7),
.elementor-16 > section:nth-of-type(8),
.elementor-16 > section:nth-of-type(12) {
	margin-block-start: 20px !important;
}

/* Section with 60px top padding: 40px margin (100 - 60)
 * (11=Advice News). */
.elementor-16 > section:nth-of-type(11) {
	margin-block-start: 40px !important;
}

/* Final CTA bottom: 20px margin (100 - 80 padding-bottom). */
.elementor-16 > section:nth-of-type(12) {
	margin-block-end: 20px !important;
}

/* =========================================================
 * MICRO PATCH 0.1.323 — About page (17) text-flow +
 * founder divider alignment.
 *
 * Three localized, non-redesign fixes, all strictly scoped
 * to `.elementor-17` (page 17 = /a-propos/):
 *
 *   1. `bp-founder-section` — the standardized gold line +
 *      diamond pseudo-elements under the title must be
 *      left-aligned, not centered, because the founder
 *      header sits in the LEFT column of a 2-column grid
 *      and the title is left-aligned. The other 5 about
 *      page sections keep their centered divider (no
 *      change). We only override the `::after` (line) and
 *      `::before` (diamond) for `.bp-founder-section__title`.
 *
 *   2. `bp-awards-recognition` — the saved title was stored
 *      with a literal `\n` between the two halves. The PHP
 *      render used `esc_html()` so the `\n` rendered as a
 *      space and the text flowed as one continuous line.
 *      The DB has been patched to remove the `\n` (now one
 *      continuous string: "Un parcours reconnu, des
 *      innovations primées"). To force the desktop wrap at
 *      the comma, we cap the title's `max-inline-size` to
 *      15em on viewports ≥ 1024px. At clamp 32–52px DM
 *      Serif Display uppercase, 15em is just wider than
 *      "UN PARCOURS RECONNU," but narrower than
 *      "UN PARCOURS RECONNU, DES", so the browser wraps
 *      at the natural space. Mobile (<1024px) keeps the
 *      full container width and wraps naturally.
 *
 *   3. `bp-techniques` step descriptions — the saved text
 *      was already continuous ("L'eau d'irrigation est
 *      absorbée" and "Les nutriments sont disponibles et
 *      ciblés"); no DB change was needed. We add a single
 *      defensive rule to neutralise any inherited
 *      `white-space: pre` / `pre-line` that could resurface
 *      a forced break in the source, and we ensure the
 *      step body has `min-inline-size: 0` so the grid
 *      never forces an awkward break.
 * ========================================================= */

/* ---- 1. Founder — left-aligned gold divider ----
 * Override the centered pseudo-element divider for the
 * founder title only. The gold line (::after) is anchored
 * to the inline-start at a fixed 140px width with the gold
 * section at the very start (0–64px). The diamond (::before)
 * is placed at 32px from inline-start, centered on the
 * 64px gold section via `translateX(-50%)`. */
.elementor-17 .bp-founder-section__title::after {
	inset-inline: 0 auto !important;
	inline-size: 140px !important;
	background: linear-gradient(
		to right,
		#B8B25A 0,
		#B8B25A 64px,
		transparent 64px,
		transparent 100%
	) !important;
}
.elementor-17 .bp-founder-section__title::before {
	inset-inline-start: 32px !important;
	transform: translateX(-50%) rotate(45deg) !important;
}

/* Mobile refinement for the founder divider: shrink the
 * line + diamond slightly so they stay inside the gutter
 * on narrow phones. */
@media ( max-width: 768px ) {
	.elementor-17 .bp-founder-section__title::after {
		inset-inline-end: auto !important;
		inline-size: 112px !important;
		background: linear-gradient(
			to right,
			#B8B25A 0,
			#B8B25A 56px,
			transparent 56px,
			transparent 100%
		) !important;
	}
	.elementor-17 .bp-founder-section__title::before {
		inset-inline-start: 28px !important;
	}
}

/* ---- 2. Awards — 2-line desktop wrap ----
 * Cap the title at 15em on desktop so the continuous text
 * "UN PARCOURS RECONNU, DES INNOVATIONS PRIMÉES" naturally
 * wraps at the space after the comma. No `<br>`, no `\n`,
 * no `white-space: nowrap`. Mobile keeps the full container
 * width and wraps naturally per the existing padding
 * rules in bp-awards-recognition.css. */
@media ( min-width: 1024px ) {
	.elementor-17 .bp-awards-recognition__title {
		max-inline-size: 15em !important;
	}
}

/* ---- 3. Techniques step layout — width fix (reinforced) ----
 * The 4 step descriptions were still wrapping to 3-4 lines on
 * desktop after patch 0.1.324. The 1fr/1.4fr ratio + 10px/2px
 * paddings + 11.5px Manrope left each step ~150px of usable
 * text width, which is still short of the ~170-180px the
 * longest line "Les nutriments sont disponibles" needs to
 * stay on a single line.
 *
 * Reinforced per-page-only adjustments:
 *   - bottom grid:        1.08fr/0.92fr  → 1fr/1.7fr
 *     (process gains more than 60% of the bottom area)
 *   - process padding:    24px           → 8px inline
 *   - step padding:       14px           → 0 inline
 *     (so each step column gets its full grid track)
 *   - step description:   11.5px         → 10.5px
 *     (slight, scoped reduction so "Les nutriments sont
 *      disponibles" fits the 4th step column on a single
 *      line, allowing the natural wrap to fall at the
 *      space before "et ciblés")
 *   - arrow inset-end:    -6px           → 4px
 *     (so the arrow pseudo-element sits inside the new
 *      zero-padding step edge instead of overlapping the
 *      neighbouring step)
 *   - step min-inline-size: 0  (explicit, prevents grid blowout)
 *
 * No `<br>`, no `\n`, no `white-space: nowrap`. The browser
 * still wraps naturally at the nearest space.
 *
 * The tablet (≤1024px) and mobile (≤768px) breakpoints in
 * bp-techniques.css override the grid + step padding back
 * to their own stacked layouts, so this patch only affects
 * the desktop ≥1025px view. */
.elementor-17 .bp-techniques__bottom {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) !important;
}
.elementor-17 .bp-techniques__process {
	padding-inline: 8px !important;
}
.elementor-17 .bp-techniques__step {
	padding-inline: 0 !important;
	min-inline-size: 0 !important;
}
.elementor-17 .bp-techniques__step-desc {
	font-size: 10.5px !important;
	max-inline-size: 100% !important;
	inline-size: 100% !important;
}
.elementor-17 .bp-techniques__step:nth-child(1)::after,
.elementor-17 .bp-techniques__step:nth-child(3)::after,
.elementor-17 .bp-techniques__step:nth-child(5)::after {
	inset-inline-end: 4px !important;
}

/* =========================================================
 * MICRO PATCH 0.1.376 — /cultures-applications/ ID21 was
 * previously declared here (page-level flex/gap:100px,
 * `padding-block: 0` on the page e-con-inner, `margin-bottom:
 * 100px` on the last e-con). It has been replaced by the
 * `wp_add_inline_style( 'elementor-post-21', ... )` block
 * in functions.php (priority 100) which now owns:
 *   - `.elementor-21 { gap:0 !important }` (no inter-section
 *     flex gap, the page is no longer in a 100px-pitch flex
 *     column)
 *   - `padding-block: 0 !important` on every outer section
 *     root + every top-level `.e-con-inner` for the page
 *   - `margin-block: 0 !important` on every top-level
 *     `elementor-element-{id}` container for the page
 * The matching CSS variables (`--container-default-padding
 * -top/-bottom`) and the `position: relative; top: 0`
 * neutraliser that used to live here are also no longer
 * needed because the per-section top/bottom spacing is now
 * fully owned by the page-21 inline block.
 * ========================================================= */

/* =========================================================
 * MICRO PATCH 0.1.374 — 100PX SECTION SPACING
 * Page 17 (about) only.
 *
 * Page 24 (calculator) was removed from this block in
 * 0.1.378 and now uses its own scoped inline block on
 * `elementor-post-24`.
 *
 * Same pattern as page 21: make the page root a flex column
 * with `gap: 100px` so every top-level section sits exactly
 * 100px below the previous one. Zero the e-con-inner's
 * baseline 10px padding-block so the gap is the only spacing
 * between sections. The last e-con gets `margin-bottom: 100px`
 * so the final CTA → footer gap is exactly 100px.
 *
 * Page 11 (comment-utiliser) is intentionally excluded and
 * now uses its own scoped inline block on `elementor-post-11`.
 * Page 18 (product) is intentionally excluded and uses its
 * own scoped inline block on `elementor-post-18`.
 *
 * Scoped to the remaining page roots so other pages keep
 * their own layout. Loaded at the end of the file so it
 * wins the cascade over any per-page section-spacing rules
 * above.
 * ========================================================= */
.elementor-17 {
	display: flex !important;
	flex-direction: column !important;
	gap: 100px !important;
}
.elementor-17 > * > .e-con-inner {
	padding-block: 0;
}
.elementor-17 > *:last-child {
	margin-bottom: 100px !important;
}

/* Homepage (ID 16) is intentionally excluded from the
 * automatic 100px section gap so its rhythm can be
 * controlled manually. The page-level flex / gap rule
 * above only targets 17.