/* BP How To Use Hero V2 widget styles
*
* Premium full-width hero for the "Comment l'utiliser"
* page. A soft cream → transparent gradient veil sits
* on the inline-start side and bleeds into a large
* root-zone photograph on the inline-end. The photograph
* is loaded from the `hero_background` Elementor MEDIA
* control; when empty, the hero renders as a clean cream
* gradient with no image.
*
* The hero is a SINGLE composition — there is no hard
* vertical split. The veil is the seam.
*
* Visual stack (lowest to highest):
* 0. Section fallback (cream) when no image is set
* 1. .bp-htu-hero__bg — root-zone photograph
* 2. .bp-htu-hero__veil — 90deg cream → transparent gradient
* 3. .bp-htu-hero__inner — left content + right media slot
*
* Desktop: ~58% cream content / ~42% image. Content is
* vertically centered. The H1 is a single elegant serif
* that wraps naturally to ~3 lines via `max-inline-size`.
*
* The 3-step process row sits below the intro: circular
* pale-gold icon holder + uppercase title + smaller
* supporting line, separated by soft vertical dividers.
* No cards. No shadows.
*
* Mobile: the desktop split collapses. The image stays
* behind a stronger cream veil so the text remains
* readable; the process row stacks vertically.
*
* All rules are scoped under `.bp-htu-hero` and use
* logical CSS properties so LTR and RTL share the same
* stylesheet.
*/
.bp-htu-hero {
/* Theme tokens. */
--bp-htu-cream: #F7F4EC;
--bp-htu-green: #374F37;
--bp-htu-text: #1F2A1F;
--bp-htu-text-muted: #5C6A5C;
--bp-htu-olive: #B8B25A;
--bp-htu-gold: #D8C47C;
--bp-htu-cream-soft: #F4ECDD;
--bp-htu-border-soft: rgba(181, 153, 72, 0.22);
--bp-htu-inner-max: 1200px;
--bp-htu-pad-x: clamp(24px, 5vw, 64px);
--bp-htu-pad-y-top: clamp(28px, 4vw, 56px);
--bp-htu-pad-y-bot: clamp(20px, 3vw, 36px);
--bp-htu-font-body: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
--bp-htu-font-display: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
position: relative;
isolation: isolate;
overflow: hidden;
inline-size: 100%;
max-inline-size: none;
min-block-size: 520px;
background-color: var(--bp-htu-cream);
color: var(--bp-htu-text);
font-family: var(--bp-htu-font-body);
}
/* ---------------- Full-bleed breakout ----------------
* Force the surrounding Elementor wrappers to 100% width,
* then break out of any boxed container via the standard
* `100vw + calc(50% - 50vw)` negative margin trick. Every
* override is anchored to a parent that actually contains
* the `.elementor-widget-bp-how-to-use-hero-v2` widget, so
* no global Elementor rule leaks onto other pages. */
.elementor-section:has(> .elementor-container .elementor-widget-bp-how-to-use-hero-v2) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-how-to-use-hero-v2) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-how-to-use-hero-v2) > .e-con,
.elementor-section:has(> .elementor-container .elementor-widget-bp-how-to-use-hero-v2) > .e-con > .e-con-inner,
.elementor-section:has(> .elementor-container .elementor-widget-bp-how-to-use-hero-v2) > .elementor-container > .elementor-column,
.elementor-section:has(> .elementor-container .elementor-widget-bp-how-to-use-hero-v2) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section:has(> .elementor-container .elementor-widget-bp-how-to-use-hero-v2) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor-section:has(> .elementor-container .elementor-widget-bp-how-to-use-hero-v2) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-htu-hero {
inline-size: 100% !important;
max-inline-size: 100% !important;
}
.elementor-element.bp-htu-hero,
.elementor .bp-htu-hero,
.e-con.bp-htu-hero,
.bp-htu-hero {
padding: 0;
margin: 0;
inline-size: 100%;
max-inline-size: 100%;
}
.elementor-inner section.elementor-section:has(.elementor-widget-bp-how-to-use-hero-v2) > .elementor-container,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-how-to-use-hero-v2) > .elementor-row,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-how-to-use-hero-v2) > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section:has(.elementor-widget-bp-how-to-use-hero-v2) > .elementor-row > .elementor-column > .elementor-widget-wrap {
inline-size: 100% !important;
max-inline-size: 100% !important;
padding-inline: 0 !important;
}
.elementor .elementor-widget.elementor-widget-bp-how-to-use-hero-v2,
.elementor-widget.elementor-widget-bp-how-to-use-hero-v2 {
inline-size: 100vw !important;
max-inline-size: 100vw !important;
margin-inline-start: calc(50% - 50vw) !important;
margin-inline-end: calc(50% - 50vw) !important;
position: relative;
z-index: 1;
}
/* Zero default Elementor container padding + inter-widget
* spacing so the hero sits flush with the page header. */
.e-con:has(> .elementor-widget-bp-how-to-use-hero-v2),
.e-con:has(> .e-con-inner > .elementor-widget-bp-how-to-use-hero-v2),
.e-con-inner:has(> .elementor-widget-bp-how-to-use-hero-v2) {
--container-default-padding-top: 0px !important;
--container-default-padding-bottom: 0px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.elementor-widget.elementor-widget-bp-how-to-use-hero-v2 {
margin-block-end: 0 !important;
--kit-widget-spacing: 0px !important;
}
/* ---------------- Background photograph ----------------
* Absolute-positioned layer that fills the entire hero.
* Image is positioned 58% horizontally so the root-zone
* subject sits on the right ~55–60% of the hero. */
.bp-htu-hero__bg {
position: absolute;
inset: 0;
z-index: 1;
background-color: transparent;
background-repeat: no-repeat;
background-position-x: 58%;
background-position-y: 50%;
background-size: cover;
pointer-events: none;
}
/* ---------------- Cream veil ----------------
* Soft cream → transparent horizontal gradient that blends
* the cream content zone into the photograph. Reaches fully
* transparent at ~76% so the right side of the image is
* clearly visible. */
.bp-htu-hero__veil {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(247, 244, 236, 1) 0%,
rgba(247, 244, 236, 1) 30%,
rgba(247, 244, 236, 0.96) 40%,
rgba(247, 244, 236, 0.78) 49%,
rgba(247, 244, 236, 0.38) 58%,
rgba(247, 244, 236, 0.08) 68%,
rgba(247, 244, 236, 0) 76%
);
}
/* RTL: mirror the veil so cream anchors to the inline-end. */
[dir="rtl"] .bp-htu-hero__veil,
[lang="ar"] .bp-htu-hero__veil {
background: linear-gradient(
270deg,
rgba(247, 244, 236, 1) 0%,
rgba(247, 244, 236, 1) 30%,
rgba(247, 244, 236, 0.96) 40%,
rgba(247, 244, 236, 0.78) 49%,
rgba(247, 244, 236, 0.38) 58%,
rgba(247, 244, 236, 0.08) 68%,
rgba(247, 244, 236, 0) 76%
);
}
/* ---------------- Inner layout ----------------
* Centered max-width container. Two columns: content (left)
* and a transparent media slot (right) — the photograph is
* already drawn in the right slot by the bg layer. The
* 58/42 split gives the left block enough room for the
* natural H1 wrap, the intro, and the 3-step process row. */
.bp-htu-hero__inner {
position: relative;
z-index: 3;
inline-size: 100%;
max-inline-size: var(--bp-htu-inner-max);
margin-inline: auto;
padding-block: var(--bp-htu-pad-y-top) var(--bp-htu-pad-y-bot);
display: grid;
grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
gap: clamp(16px, 3vw, 40px);
align-items: center;
min-block-size: inherit;
}
.bp-htu-hero__content {
display: flex;
flex-direction: column;
gap: 18px;
max-inline-size: 600px;
justify-self: start;
inline-size: 100%;
padding-block: 0;
padding-inline: 0;
position: relative;
z-index: 4;
}
.bp-htu-hero__media-slot {
align-self: stretch;
pointer-events: none;
}
/* ---------------- Eyebrow ---------------- */
.bp-htu-hero__eyebrow {
margin: 0;
font-family: var(--bp-htu-font-body);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--bp-htu-green);
line-height: 1;
}
/* ---------------- Title ----------------
* Single elegant serif. Dark green. `max-inline-size`
* produces a natural ~3-line wrap without forced
. */
.bp-htu-hero__title {
margin: 0;
font-family: var(--bp-htu-font-display);
font-weight: 400;
color: #374F3C;
font-size: clamp(38px, 4.2vw, 64px);
line-height: 1.08;
letter-spacing: -0.005em;
}
/* ---------------- Divider (gold) ----------------
* Reuses the standard Barbary line / diamond / line
* motif. */
.bp-htu-hero__divider {
display: inline-flex;
align-items: center;
gap: 10px;
margin-block: 2px 0;
}
.bp-htu-hero__divider-line {
inline-size: 36px;
block-size: 1px;
background-color: var(--bp-htu-olive);
}
.bp-htu-hero__divider-diamond {
inline-size: 5px;
block-size: 5px;
background-color: var(--bp-htu-olive);
transform: rotate(45deg);
}
/* ---------------- Intro ---------------- */
.bp-htu-hero__intro {
margin: 0;
font-family: var(--bp-htu-font-body);
font-size: 17px;
line-height: 1.55;
color: var(--bp-htu-text-muted);
max-inline-size: 600px;
}
/* ---------------- Process items ----------------
* Horizontal list of 3 items on desktop with soft vertical
* dividers. On mobile the list stacks vertically and the
* dividers become horizontal. No cards, no shadows. */
.bp-htu-hero__process {
list-style: none;
margin: 4px 0 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
max-inline-size: 600px;
inline-size: 100%;
}
.bp-htu-hero__process-item {
display: flex;
align-items: center;
gap: 12px;
padding-inline: 14px;
padding-block: 6px;
min-inline-size: 0;
}
.bp-htu-hero__process-item:first-child {
padding-inline-start: 0;
}
.bp-htu-hero__process-item + .bp-htu-hero__process-item {
border-inline-start: 1px solid var(--bp-htu-border-soft);
}
.bp-htu-hero__process-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
inline-size: 40px;
block-size: 40px;
border-radius: 50%;
background-color: rgba(216, 196, 124, 0.22);
color: var(--bp-htu-green);
}
.bp-htu-hero__process-icon i,
.bp-htu-hero__process-icon svg {
inline-size: 16px;
block-size: 16px;
font-size: 16px;
color: inherit;
fill: currentColor;
}
.bp-htu-hero__process-text {
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--bp-htu-font-body);
line-height: 1.2;
min-inline-size: 0;
}
.bp-htu-hero__process-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bp-htu-text);
}
.bp-htu-hero__process-sub {
font-size: 12.5px;
font-weight: 500;
color: var(--bp-htu-text-muted);
}
/* High-specificity icon color enforcement — Elementor's icon
* manager / global stylesheets sometimes apply `fill: #000`
* or `color: #000` to SVG children or tags. */
.bp-htu-hero .bp-htu-hero__process-icon,
.bp-htu-hero .bp-htu-hero__process-icon svg,
.bp-htu-hero .bp-htu-hero__process-icon i,
.bp-htu-hero .bp-htu-hero__process-icon svg * {
color: var(--bp-htu-green);
fill: currentColor;
stroke: currentColor;
}
/* ---------------- Tablet ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
.bp-htu-hero { min-block-size: 480px; }
.bp-htu-hero__inner {
grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
gap: 18px;
padding-block: 40px 24px;
}
.bp-htu-hero__title { font-size: clamp(36px, 5vw, 54px); max-inline-size: none; }
.bp-htu-hero__content { max-inline-size: 100%; gap: 14px; }
.bp-htu-hero__intro { font-size: 15.5px; max-inline-size: 100%; }
.bp-htu-hero__process { max-inline-size: 100%; }
.bp-htu-hero__process-item { padding-inline: 10px; }
}
/* ---------------- Mobile ---------------- */
@media ( max-width: 768px ) {
.bp-htu-hero {
min-block-size: auto;
}
.bp-htu-hero__bg {
/* Reposition the photograph so the root-zone subject
* stays visible at the top behind the cream veil. */
background-position-x: 60% !important;
background-position-y: 30% !important;
}
/* Stronger cream veil on mobile so the text is readable
* while the image still reads at the top. */
.bp-htu-hero__veil {
background: linear-gradient(
to bottom,
rgba(247, 244, 236, 0.85) 0%,
rgba(247, 244, 236, 0.95) 30%,
rgba(247, 244, 236, 1) 55%,
rgba(247, 244, 236, 1) 100%
);
}
[dir="rtl"] .bp-htu-hero__veil,
[lang="ar"] .bp-htu-hero__veil {
background: linear-gradient(
to bottom,
rgba(247, 244, 236, 0.85) 0%,
rgba(247, 244, 236, 0.95) 30%,
rgba(247, 244, 236, 1) 55%,
rgba(247, 244, 236, 1) 100%
);
}
.bp-htu-hero__inner {
grid-template-columns: minmax(0, 1fr);
padding-block: 56px 28px;
padding-inline: 22px;
gap: 22px;
align-items: stretch;
}
.bp-htu-hero__content {
max-inline-size: 100%;
min-inline-size: 0;
gap: 16px;
align-items: flex-start;
}
.bp-htu-hero__title {
font-size: 40px;
line-height: 1.06;
max-inline-size: none;
}
.bp-htu-hero__intro {
max-inline-size: 100%;
min-inline-size: 0;
font-size: 16px;
line-height: 1.6;
}
.bp-htu-hero__process {
grid-template-columns: 1fr;
max-inline-size: 100%;
gap: 0;
margin-block-start: 4px;
}
.bp-htu-hero__process-item {
padding-block: 14px;
padding-inline: 0;
}
.bp-htu-hero__process-item:first-child {
padding-block-start: 6px;
}
.bp-htu-hero__process-item + .bp-htu-hero__process-item {
border-inline-start: 0;
border-block-start: 1px solid var(--bp-htu-border-soft);
}
.bp-htu-hero__media-slot { display: none; }
}
/* ---------------- Small phones ---------------- */
@media ( max-width: 480px ) {
.bp-htu-hero__inner { padding-inline: 18px; padding-block: 44px 22px; }
.bp-htu-hero__title { font-size: 34px; }
.bp-htu-hero__content { gap: 14px; }
.bp-htu-hero__intro { font-size: 15px; }
}
@media ( max-width: 390px ) {
.bp-htu-hero__inner { padding-inline: 16px; padding-block: 36px 20px; }
.bp-htu-hero__title { font-size: 30px; }
.bp-htu-hero__eyebrow { font-size: 11px; letter-spacing: 0.2em; }
.bp-htu-hero__process-icon { inline-size: 36px; block-size: 36px; }
}
/* ---------------- Arabic / RTL ---------------- */
[lang="ar"] .bp-htu-hero__title,
[dir="rtl"] .bp-htu-hero__title {
font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
font-weight: 700;
line-height: 1.22;
letter-spacing: 0;
}
[dir="rtl"] .bp-htu-hero__content { justify-self: end; }
/* ---------------- Reduced motion ---------------- */
@media ( prefers-reduced-motion: reduce ) {
.bp-htu-hero [data-bp-stagger] {
transform: none !important;
animation: none !important;
transition: none !important;
}
}