/* BP /comment-utiliser/ — final page polish
 *
 * Two surgical passes scoped to .elementor-11:
 *   1) CARD / STRIP SURFACE NORMALISATION
 *      Every card or horizontal strip on this page adopts the
 *      EXACT surface treatment of the rendered reference
 *      `.bp-product-versions__card.bp-product-versions__card--g3
 *       .bp-product-versions__card--image-left`:
 *         background-color : #FBF6EC
 *         border           : 1px solid #B8B25A
 *         border-radius    : 22px
 *      Only the three surface properties are touched. Internal
 *      typography, icons, shadows, spacing, images and layout
 *      remain untouched. Hero (.bp-cu-hero) and Final-CTA outer
 *      box (.bp-cu-fcta__box) are deliberately excluded so the
 *      page background / hero / final-CTA keep their own look.
 *
 *   2) 100PX SECTION SPACING (desktop)
 *      Exactly 100px visible gap from the BOTTOM of each major
 *      section to the EYEBROW / top of the next section, so the
 *      rhythm does not stack. The Final CTA gets an extra 100px
 *      margin-block-end so the page/footer is 100px below the
 *      card. Mobile keeps its own responsive spacing.
 *
 * Approved palette ONLY (no invented colours):
 *   #FBF6EC  cream (card bg)
 *   #B8B25A  olive / gold (card border)
 *   #374F37  deep green (text/accent)
 *   + existing neutral tokens.
 *
 * The single constraint is enforced with ONE rule per surface
 * (longhand `background-color` / `border` / `border-radius`) so
 * the override beats the per-widget shorthand without touching
 * any other visual property.
 */

/* =========================================================
 * 1) CARD / STRIP SURFACES — single canonical surface
 *
 * Per-target !important override. The 8 targets each lose
 * against a same-name per-widget rule (specificity 0,0,1,0)
 * that sets `background-color: var(--bp-cub-cream-soft)` /
 * `background-color: var(--bp-cu-prep-cream-tint)` /
 * `background-color: var(--bp-cu-app-cream-tint)`,
 * `border: 1px solid var(--bp-cub-border)` /
 * `var(--bp-cu-prep-border)` / `var(--bp-cu-app-border)` and
 * `border-radius: 14px / 16px / 18px`. The page-scoped rule
 * below is wrapped in `.elementor-11` (specificity 0,0,2,0)
 * AND uses !important so it cannot be beaten by any
 * per-widget shorthand, animation state class
 * (`.is-revealed`) or hover style.
 *
 * No child / pseudo-element has its own background, so the
 * surface shows through. Internal typography, icons,
 * shadows, spacing, images and layout are NOT touched.
 * ========================================================= */
.elementor-11 .bp-cu-before__retenir {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-before__strip {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-prep__saviez {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-prep__conseil {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-app__bon {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-app__principles {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-app__depth {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-app__conseils {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-dosage__top-strip {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-dosage__retenir {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}
.elementor-11 .bp-cu-dosage__conseils {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}

/* PILL — per-widget elementor ID, reverts the earlier cream
 * change for this single pill. Selector carries specificity
 * 0,0,4,0 so it wins over both the per-widget .bp-cu-before__pill
 * rule and the cream variable. Internal padding/border-width/
 * shadow are left untouched. */
.elementor-11 .elementor-element.elementor-element-e4800c2 .bp-cu-before__pill {
	border-radius: 999px;
}

/* STANDARD SURFACE — bp-cu-frequence__summary
 * Cream rounded card matching the rest of the page. Inner
 * content / icons / dividers / visuals are NOT touched. */
.elementor-11 .bp-cu-frequence__summary {
	background-color: #FBF6EC !important;
	border: 1px solid #B8B25A !important;
	border-radius: 22px !important;
}

/* Defence: no child / background pseudo-element visually
 * covers the new surface. The per-widget CSS for these 8
 * targets has no child or ::before/::after rule that paints
 * a covering background — only icons / text / lists inside.
 * Verified against bp-comment-utiliser-before.css,
 * bp-comment-utiliser-preparation.css and
 * bp-comment-utiliser-application.css (no background-image
 * or position:absolute inset:0 child on any of the 8).
 * The `!important` rules above therefore cannot be hidden
 * by anything inside the card. No additional override
 * needed — adding one would touch `position`/`z-index`
 * and alter layout, which is forbidden. */