/* =============================================================
   Editorial restyle for the Elementor Pro Form widget.
   Used in the home CTA (#contact / .home-cta-sec on marine) and
   the Prevhub CTA (.ph-cta-sec on cream-warm). The widget builder
   gives every form the .ph-form class (legacy name kept to avoid
   a data migration on both pages); body classes provide the
   accent-colour scope (gold by default, amber on prevhub).

   Loaded globally because the form may render on any page. Inputs
   default to the marine context (dark surface, cream text, gold
   hairline border) — a per-section override re-tints them when
   the form sits on a cream surface (Prevhub CTA).
   ============================================================= */

.ph-form {
	max-width: 840px;
	margin: 0 auto;
	text-align: left;
}

/* =============================================================
   Form promise — small italic reassurance line that sits just
   above every form on the site ("Une réponse humaine en 48 h,
   par David ou son équipe."). Injected as an HTML widget by the
   2026-05-08 copy pass; this class keeps the styling consistent
   regardless of section tone (marine or cream).
   ============================================================= */
.bz-form-promise {
	font-family: var(--font-d);
	font-size: clamp(13px, 0.95vw, 15px);
	font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 1.5;
	text-align: center;
	max-width: 480px;
	margin: 0 auto clamp(24px, 3vh, 36px);
	color: rgba(244, 241, 234, 0.72);
}
.bz-form-promise em {
	font-style: italic;
	color: var(--bz-or, #B89D64);
	font-weight: 300;
}
/* On cream sections, flip to marine-tinted text so the line stays
   discrete but readable. */
body.bz-contact .bz-form-promise,
body.bz-prevhub .bz-form-promise,
.ph-sec--cream .bz-form-promise {
	color: rgba(11, 30, 56, 0.72);
}
body.bz-contact .bz-form-promise em,
body.bz-prevhub .bz-form-promise em {
	color: var(--bz-or-deep, #8C6F3D);
}

/* Use grid so two col-50 fields plus gap don't overflow Elementor's
   default flex layout. col-100 fields and the submit button span both. */
.ph-form .elementor-form .elementor-form-fields-wrapper {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px clamp(20px, 2.4vw, 32px) !important;
}

.ph-form .elementor-form .elementor-field-group {
	margin-bottom: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex: unset !important;
	padding: 0 !important;
}

.ph-form .elementor-form .elementor-field-group.elementor-col-50 {
	grid-column: span 1 !important;
}

.ph-form .elementor-form .elementor-field-group.elementor-col-100,
.ph-form .elementor-form .e-form__buttons {
	grid-column: 1 / -1 !important;
}

.ph-form .elementor-form .elementor-field-label {
	font-family: var(--font-d) !important;
	/* Bumped 11 → 12.5 px on 2026-05-08 (audit I-005) for a11y +
	   editorial weight. Letter-spacing reduced slightly to compensate. */
	font-size: 12.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: rgba(244, 241, 234, 0.7) !important;
	margin-bottom: 8px !important;
	padding-bottom: 0 !important;
}

.ph-form .elementor-form input[type="text"],
.ph-form .elementor-form input[type="email"],
.ph-form .elementor-form input[type="tel"],
.ph-form .elementor-form input[type="url"],
.ph-form .elementor-form textarea,
.ph-form .elementor-form select {
	all: unset !important;
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	padding: 14px 16px !important;
	background: rgba(244, 241, 234, 0.04) !important;
	border: 1px solid rgba(184, 157, 100, 0.25) !important;
	border-radius: 0 !important;
	color: var(--bz-creme, #F4F1EA) !important;
	font-family: var(--font-b) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	transition:
		border-color 220ms cubic-bezier(0.3, 0, 0, 1),
		background-color 220ms cubic-bezier(0.3, 0, 0, 1) !important;
}

.ph-form .elementor-form textarea {
	min-height: 120px !important;
	resize: vertical !important;
}

.ph-form .elementor-form input:focus,
.ph-form .elementor-form input:focus-visible,
.ph-form .elementor-form textarea:focus,
.ph-form .elementor-form textarea:focus-visible,
.ph-form .elementor-form select:focus {
	border-color: var(--bz-or, #B89D64) !important;
	background: rgba(244, 241, 234, 0.06) !important;
	outline: none !important;
	/* Soft gold focus ring (the brand colour resonating around the
	   active field) + inset top highlight for a "lit from above"
	   read. Replaces the default browser blue ring. */
	box-shadow:
		0 0 0 3px rgba(184, 157, 100, 0.14),
		inset 0 1px 0 rgba(184, 157, 100, 0.18) !important;
}

.ph-form .elementor-form input::placeholder,
.ph-form .elementor-form textarea::placeholder {
	color: rgba(244, 241, 234, 0.62) !important;
}

/* Submit — hairline-arrow CTA, no button chrome. */
.ph-form .elementor-button-wrapper {
	margin-top: 16px;
	display: flex;
	justify-content: flex-start;
}

.ph-form .elementor-form .elementor-button {
	all: unset !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 6px 0 !important;
	font-family: var(--font-d) !important;
	font-size: clamp(12px, 0.9vw, 14px) !important;
	font-weight: 500 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--bz-or, #B89D64) !important;
	background: transparent !important;
	border: 0 !important;
	transition:
		color 320ms cubic-bezier(0.3, 0, 0, 1),
		gap   320ms cubic-bezier(0.3, 0, 0, 1) !important;
}

.ph-form .elementor-form .elementor-button::after {
	content: "";
	display: inline-block;
	width: clamp(42px, 3.4vw, 64px);
	height: 8px;
	background: var(--bz-or, #B89D64);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><line x1='0' y1='4' x2='93' y2='4' stroke='black' stroke-width='1'/><path d='M89 1L93 4L89 7' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 100% 100%;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><line x1='0' y1='4' x2='93' y2='4' stroke='black' stroke-width='1'/><path d='M89 1L93 4L89 7' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 100% 100%;
	transition: width 320ms cubic-bezier(0.3, 0, 0, 1) !important;
	flex-shrink: 0;
}

.ph-form .elementor-form .elementor-button:hover,
.ph-form .elementor-form .elementor-button:focus-visible {
	gap: 18px !important;
	outline: none;
}

.ph-form .elementor-form .elementor-button:focus-visible {
	outline: 2px solid var(--bz-or, #B89D64);
	outline-offset: 4px;
}

.ph-form .elementor-form .elementor-button:hover::after,
.ph-form .elementor-form .elementor-button:focus-visible::after {
	width: clamp(62px, 5vw, 92px);
}

/* Success / message — replace the form on submit. */
.ph-form .elementor-message-success,
.ph-form .e-form__message,
.ph-form .elementor-message {
	margin-top: 32px !important;
	padding: 28px 32px !important;
	background: rgba(184, 157, 100, 0.08) !important;
	border-left: 2px solid var(--bz-or, #B89D64) !important;
	border-right: 0 !important; border-top: 0 !important; border-bottom: 0 !important;
	border-radius: 0 !important;
	font-family: var(--font-d) !important;
	font-size: 17px !important;
	font-weight: 300 !important;
	font-style: italic !important;
	color: var(--bz-creme, #F4F1EA) !important;
	line-height: 1.5 !important;
	text-align: left !important;
}

@media (max-width: 720px) {
	.ph-form .elementor-form .elementor-form-fields-wrapper {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

/* =============================================================
   Prevhub-scoped accent swap — amber instead of gold.
   ============================================================= */
body.bz-prevhub .ph-form .elementor-form input,
body.bz-prevhub .ph-form .elementor-form textarea,
body.bz-prevhub .ph-form .elementor-form select {
	border-color: rgba(196, 130, 26, 0.25) !important;
}

body.bz-prevhub .ph-form .elementor-form input:focus,
body.bz-prevhub .ph-form .elementor-form input:focus-visible,
body.bz-prevhub .ph-form .elementor-form textarea:focus,
body.bz-prevhub .ph-form .elementor-form textarea:focus-visible {
	border-color: var(--ph-amber, #C4821A) !important;
}

body.bz-prevhub .ph-form .elementor-form .elementor-button {
	color: var(--ph-amber, #C4821A) !important;
}

body.bz-prevhub .ph-form .elementor-form .elementor-button::after {
	background: var(--ph-amber, #C4821A);
}

body.bz-prevhub .ph-form .elementor-form .elementor-button:hover {
	color: var(--ph-amber-soft, #E0A840) !important;
}

body.bz-prevhub .ph-form .elementor-form .elementor-button:hover::after {
	background: var(--ph-amber-soft, #E0A840);
}

body.bz-prevhub .ph-form .elementor-message-success,
body.bz-prevhub .ph-form .e-form__message,
body.bz-prevhub .ph-form .elementor-message {
	background: rgba(196, 130, 26, 0.08) !important;
	border-left-color: var(--ph-amber, #C4821A) !important;
}

/* =============================================================
   Prevhub CTA on cream-warm — flip to a light surface (soft white
   inputs, marine text, amber border, amber focus glow).
   ============================================================= */
body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form .elementor-field-label {
	color: var(--ph-grey-700, #4A4A4A) !important;
	font-weight: 600 !important;
}

body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input,
body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form textarea,
body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form select {
	background: rgba(255, 255, 255, 0.55) !important;
	border-color: rgba(196, 130, 26, 0.40) !important;
	color: var(--ph-navy, #0B1E38) !important;
}

body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input::placeholder,
body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form textarea::placeholder {
	color: rgba(74, 74, 74, 0.50) !important;
}

body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input:focus,
body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form textarea:focus {
	background: rgba(255, 255, 255, 0.85) !important;
	border-color: var(--ph-amber, #C4821A) !important;
}

body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-message-success,
body.bz-prevhub .ph-cta-sec.ph-sec--cream-warm .ph-form .e-form__message {
	background: rgba(196, 130, 26, 0.10) !important;
	color: var(--ph-navy, #0B1E38) !important;
}

/* =============================================================
   Audit page CTA on cream-warm — same light-surface pattern as
   PrevHub but with the Bazinet gold accent (audit doesn't use
   amber). Mirror of the block above so the audit form matches
   its cream-warm CTA section visually.
   ============================================================= */
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form .elementor-field-label {
	color: rgba(11, 30, 56, 0.78) !important;
	font-weight: 600 !important;
}

body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input[type="text"],
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input[type="email"],
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input[type="tel"],
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form textarea,
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form select {
	background: rgba(255, 252, 246, 0.96) !important;
	border-color: rgba(11, 30, 56, 0.22) !important;
	color: var(--ph-navy, #0B1E38) !important;
}

body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input::placeholder,
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form textarea::placeholder {
	color: rgba(74, 74, 74, 0.55) !important;
	font-style: italic;
}

body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input:focus,
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form textarea:focus {
	background: rgba(255, 255, 255, 0.92) !important;
	border-color: var(--bz-or, #B89D64) !important;
	box-shadow:
		0 0 0 3px rgba(184, 157, 100, 0.16),
		inset 0 1px 0 rgba(184, 157, 100, 0.18) !important;
}

body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-message-success,
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .e-form__message,
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-message {
	background: rgba(184, 157, 100, 0.12) !important;
	border-left-color: var(--bz-or, #B89D64) !important;
	color: var(--ph-navy, #0B1E38) !important;
}

/* Centre the submit button on the audit CTA — feels more "form
   complete" on a cream surface than the default left-aligned. */
body.bz-audit-et-optimisation .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-button-wrapper {
	justify-content: center;
	margin-top: 24px;
}

/* =============================================================
   Réputation en ligne CTA on cream-warm — same light-surface
   pattern as Audit. Same Bazinet gold accent. The default .ph-form
   styles target a marine surface (dark inputs, cream text, gold
   border) which is unreadable on the cream-warm CTA section, so
   this block flips inputs to a near-white surface with a thin
   navy border.
   ============================================================= */
body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form .elementor-field-label {
	color: rgba(11, 30, 56, 0.78) !important;
	font-weight: 600 !important;
}

body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input[type="text"],
body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input[type="email"],
body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input[type="tel"],
body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form textarea,
body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form select {
	background: rgba(255, 252, 246, 0.96) !important;
	border-color: rgba(11, 30, 56, 0.22) !important;
	color: var(--ph-navy, #0B1E38) !important;
}

body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input::placeholder,
body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form textarea::placeholder {
	color: rgba(74, 74, 74, 0.55) !important;
	font-style: italic;
}

body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form input:focus,
body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-form textarea:focus {
	background: rgba(255, 255, 255, 1) !important;
	border-color: var(--bz-or, #B89D64) !important;
	box-shadow:
		0 0 0 3px rgba(184, 157, 100, 0.16),
		inset 0 1px 0 rgba(184, 157, 100, 0.18) !important;
}

body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-message-success,
body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .e-form__message,
body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-message {
	background: rgba(184, 157, 100, 0.12) !important;
	border-left-color: var(--bz-or, #B89D64) !important;
	color: var(--ph-navy, #0B1E38) !important;
}

body.bz-reputation-en-ligne .ph-cta-sec.ph-sec--cream-warm .ph-form .elementor-button-wrapper {
	justify-content: center;
	margin-top: 24px;
}

/* =============================================================
   SHARED — Contact form template applied site-wide.
   These rules used to be scoped to body.bz-contact in contact-page.css,
   but the Contact form is now the canonical template for every form on
   the site (Audit, Réputation, Prevhub, Home). Any form widget that
   adds the `bz-contact-form` class + ships the matching success HTML
   gets the same editorial success state automatically. Same for the
   `bz-contact-disclaimer` paragraph (Loi 25 statement) — drop the
   widget after the form, anywhere on the site, and it picks up the
   right typography.

   Both selectors are intentionally body-class-free so they cascade on
   any page. Per-page colour adjustments (cream-warm vs marine) are
   handled by the existing form variant blocks above.
   ============================================================= */

/* Soft promise line — sits between submit button and the Loi 25
   disclaimer. Italic gold, restrained, signals the human intent
   without making a hard time commitment. */
.bz-contact-promise {
	margin: clamp(20px, 2.4vh, 28px) auto 6px;
	font-family: var(--font-d);
	font-size: clamp(13px, 0.95vw, 14.5px);
	font-weight: 400;
	color: var(--bz-or, #B89D64);
	text-align: center;
	max-width: 560px;
}
.bz-contact-promise em {
	font-style: italic;
	font-weight: 400;
}

/* Loi 25 disclaimer — sits below the promise line */
.bz-contact-disclaimer {
	margin: 0 auto;
	font-family: var(--font-b);
	font-size: 13px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(74, 74, 74, 0.85);
	text-align: center;
	max-width: 560px;
}
.bz-contact-disclaimer strong {
	color: var(--bz-marine, #0B1E38);
	font-weight: 500;
	font-style: normal;
}

/* On marine sections, flip the disclaimer text to cream so it stays
   readable. Service-specific pages put their CTA on cream-warm so the
   default marine-text rule above works there; the override here only
   activates on home/prevhub-style marine CTAs. */
body.bz-prevhub .ph-cta-sec.ph-sec--marine .bz-contact-disclaimer,
body.bz-home .home-cta-sec .bz-contact-disclaimer,
.ph-sec--marine .bz-contact-disclaimer,
.au-cta-sec.ph-sec--marine .bz-contact-disclaimer {
	color: var(--bz-creme-78);
}

/* Home CTA section sits inside the `.cta` marine block, whose
   `.cta p { font-size: 21px; ... }` rule wins by specificity over
   the canonical .bz-contact-promise / .bz-contact-disclaimer rules.
   Reassert the canonical typography here so the home form footer
   matches Prevhub / Audit / Réputation. */
body.bz-home .home-cta-sec .bz-contact-promise {
	font-family: var(--font-d);
	font-size: clamp(13px, 0.95vw, 14.5px);
	font-weight: 400;
	color: var(--bz-or, #B89D64);
	text-align: center;
	margin: clamp(20px, 2.4vh, 28px) auto 6px;
	max-width: 560px;
}
body.bz-home .home-cta-sec .bz-contact-disclaimer {
	font-family: var(--font-b);
	font-size: 13px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 560px;
}
.ph-sec--marine .bz-contact-disclaimer strong,
body.bz-prevhub .ph-cta-sec.ph-sec--marine .bz-contact-disclaimer strong,
body.bz-home .home-cta-sec .bz-contact-disclaimer strong {
	color: var(--ph-cream, #F4F1EA);
}

/* Success state — editorial replacement for Elementor's default green
   alert. The form HTML uses spans `bz-success__lead` (italic gold) +
   `bz-success__line` (body grey). Two short hairline gold rules frame
   the message above and below for an editorial close. */
.bz-contact-form .elementor-message-success,
.bz-contact-form .elementor-message.elementor-message-success,
.ph-form.bz-contact-form .elementor-message-success,
.ph-form.bz-contact-form .elementor-message.elementor-message-success {
	background: transparent !important;
	border: 0 !important;
	border-left: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--bz-marine, #0B1E38) !important;
	padding: clamp(40px, 6vh, 64px) clamp(20px, 3vw, 40px) !important;
	margin: 0 !important;
	text-align: center !important;
	font-family: var(--font-d) !important;
	font-size: clamp(18px, 1.6vw, 22px) !important;
	font-weight: 300 !important;
	line-height: 1.4 !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 1.2vh, 14px);
}

.bz-contact-form .elementor-message-success::before {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	background: var(--bz-or, #B89D64);
	margin: 0 0 clamp(12px, 1.6vh, 18px);
}

.bz-contact-form .elementor-message-success::after {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	background: var(--bz-or, #B89D64);
	margin: clamp(12px, 1.6vh, 18px) 0 0;
}

.bz-contact-form .elementor-message-success .bz-success__lead {
	font-style: italic;
	font-weight: 300;
	color: var(--bz-or, #B89D64);
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.1;
	display: block;
}

.bz-contact-form .elementor-message-success .bz-success__lead em {
	font-style: italic;
	font-weight: 300;
}

.bz-contact-form .elementor-message-success .bz-success__line {
	display: block;
	color: var(--bz-marine, #0B1E38);
	font-family: var(--font-b);
	font-size: clamp(15px, 1.05vw, 17px);
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* On marine surfaces, success state text needs cream + brighter accents */
.ph-sec--marine .bz-contact-form .elementor-message-success,
.ph-sec--marine .ph-form.bz-contact-form .elementor-message-success {
	color: var(--ph-cream, #F4F1EA) !important;
}

.ph-sec--marine .bz-contact-form .elementor-message-success .bz-success__line {
	color: rgba(244, 241, 234, 0.82);
}

/* =============================================================
   Submit button alignment — centred site-wide on bz-contact-form
   so it visually balances with the centred promise + disclaimer
   below. Targets `.e-form__buttons` (Elementor's actual wrapper
   for submit fields, not `.elementor-button-wrapper` which doesn't
   exist on submit fields). The form fields themselves stay
   left-aligned (their natural orientation) — only the submit row
   centres.
   ============================================================= */
.bz-contact-form .e-form__buttons,
.ph-form.bz-contact-form .e-form__buttons {
	display: flex !important;
	justify-content: center !important;
	margin-top: clamp(16px, 2vh, 24px) !important;
	text-align: center;
}

/* =============================================================
   Form submit button — FILLED variant (gold bg, marine text)
   The arrow-line CTA used elsewhere (.ph-cta-arrow, card CTAs,
   hero CTAs) is the "explore" register. Form submit is the
   "commit" register and deserves more visual weight. Same brand
   tokens, different variant.

   Intentionally targets only `.bz-contact-form button` so it
   doesn't bleed onto explore-style CTAs anywhere else on the site.
   Wins the cascade against the existing `.elementor-button` ghost
   style via specificity + `!important` (Elementor's own rules
   already use !important — we have to fight on the same level).
   ============================================================= */
.bz-contact-form .elementor-form button.elementor-button,
.ph-form.bz-contact-form .elementor-form button.elementor-button {
	/* layout */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	padding: clamp(16px, 2vh, 20px) clamp(32px, 4vw, 56px) !important;
	min-width: 240px;

	/* surface — filled gold (primary action) */
	background: var(--bz-or, #B89D64) !important;
	color: var(--bz-marine, #0B1E38) !important;
	border: 1px solid var(--bz-or, #B89D64) !important;
	border-radius: 0 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 1px 2px rgba(11, 30, 56, 0.12),
		0 8px 20px -8px rgba(11, 30, 56, 0.30) !important;

	/* type */
	font-family: var(--font-d) !important;
	font-size: clamp(13px, 0.95vw, 14.5px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;

	/* motion */
	transition:
		background 320ms cubic-bezier(0.3, 0, 0, 1),
		color 320ms cubic-bezier(0.3, 0, 0, 1),
		transform 320ms cubic-bezier(0.3, 0, 0, 1),
		box-shadow 320ms cubic-bezier(0.3, 0, 0, 1),
		border-color 320ms cubic-bezier(0.3, 0, 0, 1) !important;
}

/* Trailing arrow — marine to ride on the gold filled surface */
.bz-contact-form .elementor-form button.elementor-button::after,
.ph-form.bz-contact-form .elementor-form button.elementor-button::after {
	content: "" !important;
	display: inline-block !important;
	width: clamp(38px, 3vw, 52px) !important;
	height: 8px !important;
	background: var(--bz-marine, #0B1E38) !important;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><line x1='0' y1='4' x2='93' y2='4' stroke='black' stroke-width='1.4'/><path d='M89 1L93 4L89 7' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 100% 100% !important;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><line x1='0' y1='4' x2='93' y2='4' stroke='black' stroke-width='1.4'/><path d='M89 1L93 4L89 7' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 100% 100% !important;
	transition:
		width 320ms cubic-bezier(0.3, 0, 0, 1),
		background 320ms cubic-bezier(0.3, 0, 0, 1) !important;
	flex-shrink: 0 !important;
}

/* Hover — flip to cream surface (lighter gold tint), keeps marine
   text/arrow. Slight lift + stronger shadow for tactile feedback. */
.bz-contact-form .elementor-form button.elementor-button:hover,
.ph-form.bz-contact-form .elementor-form button.elementor-button:hover {
	background: var(--ph-cream, #F4F1EA) !important;
	color: var(--bz-marine, #0B1E38) !important;
	border-color: var(--bz-or, #B89D64) !important;
	transform: translateY(-1px) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 2px 4px rgba(11, 30, 56, 0.10),
		0 14px 32px -10px rgba(11, 30, 56, 0.40) !important;
}

.bz-contact-form .elementor-form button.elementor-button:hover::after,
.ph-form.bz-contact-form .elementor-form button.elementor-button:hover::after {
	width: clamp(54px, 4.4vw, 72px) !important;
}

/* Focus-visible — accessibility. Gold halo around the gold button
   would be invisible — use a marine outline instead. */
.bz-contact-form .elementor-form button.elementor-button:focus-visible,
.ph-form.bz-contact-form .elementor-form button.elementor-button:focus-visible {
	outline: 2px solid var(--bz-marine, #0B1E38) !important;
	outline-offset: 3px !important;
}

/* Loi 25 consent checkbox — the link in the acceptance text inherits the
   page's default link colour (which on cream pages can render as a default
   browser blue/magenta). Force the brand amber + underline-offset for
   editorial consistency.
   Checkbox itself is enlarged and styled (gold border, gold check) so it
   reads as an editorial element rather than a tiny browser default. */
.bz-contact-form .elementor-field-type-acceptance .elementor-field-subgroup {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.bz-contact-form .elementor-field-type-acceptance input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	flex-shrink: 0;
	border: 1.5px solid var(--bz-or, #B89D64);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
	transition: background-color 220ms cubic-bezier(0.3, 0, 0, 1), border-color 220ms cubic-bezier(0.3, 0, 0, 1);
}

.bz-contact-form .elementor-field-type-acceptance input[type="checkbox"]:hover,
.bz-contact-form .elementor-field-type-acceptance input[type="checkbox"]:focus-visible {
	border-color: var(--bz-marine, #0B1E38);
	outline: none;
	box-shadow: 0 0 0 3px rgba(184, 157, 100, 0.20);
}

.bz-contact-form .elementor-field-type-acceptance input[type="checkbox"]:checked {
	background: var(--bz-or, #B89D64);
	border-color: var(--bz-or, #B89D64);
}

/* Custom check glyph drawn via clip-path so we don't rely on default
   browser checkmarks (which are inconsistent + tiny). */
.bz-contact-form .elementor-field-type-acceptance input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--bz-marine, #0B1E38);
	border-bottom: 2px solid var(--bz-marine, #0B1E38);
	transform: translate(-50%, -65%) rotate(-45deg);
}

/* Marine-section variant: invert the check colour so the dark check
   reads on the gold-on-cream-form scenario when the form sits on
   marine. */
.ph-sec--marine .bz-contact-form .elementor-field-type-acceptance input[type="checkbox"],
body.bz-home .home-cta-sec .bz-contact-form .elementor-field-type-acceptance input[type="checkbox"],
body.bz-prevhub .ph-cta-sec.ph-sec--marine .bz-contact-form .elementor-field-type-acceptance input[type="checkbox"] {
	background: rgba(244, 241, 234, 0.04);
}

.bz-contact-form .elementor-field-type-acceptance label,
.bz-contact-form .elementor-field-type-acceptance .elementor-field-subgroup label {
	font-family: var(--font-b);
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	color: var(--bz-titane, #4A4A4A);
	cursor: pointer;
}

.bz-contact-form .elementor-field-type-acceptance a {
	color: var(--bz-or, #B89D64) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
	font-style: normal;
	transition: color 220ms cubic-bezier(0.3, 0, 0, 1);
}

.bz-contact-form .elementor-field-type-acceptance a:hover,
.bz-contact-form .elementor-field-type-acceptance a:focus-visible {
	color: var(--bz-marine, #0B1E38) !important;
	outline: none;
}

/* On marine sections (home, prevhub, audit, réputation) the consent text
   needs to flip to cream so it stays readable on the dark form. */
body.bz-home .home-cta-sec .bz-contact-form .elementor-field-type-acceptance label,
body.bz-prevhub .ph-cta-sec.ph-sec--marine .bz-contact-form .elementor-field-type-acceptance label,
.ph-sec--marine .bz-contact-form .elementor-field-type-acceptance label,
.au-cta-sec.ph-sec--marine .bz-contact-form .elementor-field-type-acceptance label,
.re-cta-sec.ph-sec--marine .bz-contact-form .elementor-field-type-acceptance label {
	color: var(--bz-creme-78);
}

/* Prevhub CTA button — marine deep filled with cream text and gold
   trailing arrow. Reads more refined than a flat gold rectangle on
   the cream page bg: the marine surface anchors the button visually,
   the cream text reads with high contrast, and the gold arrow is the
   single brand-coloured accent that signals "action". */
body.bz-prevhub .bz-contact-form .elementor-form button.elementor-button,
body.bz-prevhub .ph-form.bz-contact-form .elementor-form button.elementor-button {
	background: var(--bz-marine, #0B1E38) !important;
	color: var(--ph-cream, var(--bz-creme, #F4F1EA)) !important;
	border-color: var(--bz-marine, #0B1E38) !important;
	justify-content: center !important;
	gap: 14px !important;
	min-width: 220px;
}
body.bz-prevhub .bz-contact-form .elementor-form button.elementor-button:hover,
body.bz-prevhub .ph-form.bz-contact-form .elementor-form button.elementor-button:hover {
	background: rgba(11, 30, 56, 0.85) !important;
	border-color: var(--bz-marine, #0B1E38) !important;
}
/* Trailing arrow flips to gold on the marine surface */
body.bz-prevhub .bz-contact-form .elementor-form button.elementor-button::after,
body.bz-prevhub .ph-form.bz-contact-form .elementor-form button.elementor-button::after {
	background: var(--bz-or, #B89D64) !important;
}
/* Injected "Envoyer" label — cream colour to match the new marine bg */
body.bz-prevhub .bz-contact-form .elementor-form button.elementor-button .elementor-button-content-wrapper::after {
	color: var(--ph-cream, var(--bz-creme, #F4F1EA)) !important;
}

/* =============================================================
   CROSS-SELL — bz-cross-sell
   Section that appears at the bottom of service pages, between the
   CTA-form section and the footer. Two compact cards pointing to
   the OTHER two services, so a visitor who's not yet convinced by
   THIS service has a clear next step.
   ============================================================= */

/* Elementor wraps the section in a 1400 px boxed container by default,
   which leaves visible vertical bars around the marine band. Strip the
   Elementor max-width so the marine background bleeds full-bleed; the
   inner `.bz-cross-sell__inner` keeps the 1100 px reading constraint. */
.bz-cross-sell-sec > .elementor-container {
	max-width: none !important;
	padding: 0 !important;
}

.bz-cross-sell {
	padding: clamp(80px, 10vh, 130px) clamp(32px, 5vw, 88px);
	background: var(--bz-marine, #0B1E38);
	color: var(--ph-cream, #F4F1EA);
}

.bz-cross-sell__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.bz-cross-sell__eyebrow {
	font-family: var(--font-d);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--bz-or, #B89D64);
	margin: 0 auto clamp(20px, 2.4vh, 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	line-height: 1;
	/* T1 round 22 fix · letter-spacing 0.42em adds trailing space on
	   the LAST character which biases the visible text-block to the
	   LEFT inside the flex centerline. Adding a left text-indent of
	   the same amount visually re-centers the text + flanking rules. */
	text-indent: 0.42em;
}
.bz-cross-sell__eyebrow::before,
.bz-cross-sell__eyebrow::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--bz-or, #B89D64);
	flex-shrink: 0;
}

/* Mobile : on narrow phones (Galaxy S25 Ultra ~412 px et plus petits)
   "Découvrir nos services" + 0.42em letter-spacing + 32 px rules
   débordait la largeur disponible, le texte se coupait sur 2 lignes
   et basculait à gauche (text-align par défaut dans le flex item).
   Resserre la typo et raccourcit les filets pour garder une ligne. */
@media (max-width: 540px) {
	.bz-cross-sell__eyebrow {
		font-size: 10px;
		letter-spacing: 0.26em;
		text-indent: 0.26em;
		gap: 10px;
	}
	.bz-cross-sell__eyebrow::before,
	.bz-cross-sell__eyebrow::after {
		width: 20px;
	}
}

.bz-cross-sell__title,
.bz-cross-sell__title .elementor-heading-title {
	font-family: var(--font-d);
	font-size: clamp(24px, 2.6vw, 36px);
	font-weight: 300;
	line-height: 1.2;
	color: var(--ph-cream, #F4F1EA);
	text-align: center;
	margin: 0 auto clamp(36px, 5vh, 56px);
	max-width: 32ch;
	letter-spacing: -0.012em;
	/* text-wrap: balance distributes lines so neither one is awkwardly
	   short — was creating a visual off-center on mobile when the
	   first line was much wider than the second (round 24 fix). */
	text-wrap: balance;
	padding: 0 clamp(16px, 5vw, 24px);
}

.bz-cross-sell__title em,
.bz-cross-sell__title .elementor-heading-title em {
	font-style: italic;
	color: var(--bz-or, #B89D64);
}

.bz-cross-sell__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
	justify-content: center;
	max-width: 1280px;
	margin-inline: auto;
}

/* When only 2 cards are present (e.g. service pages cross-selling
   the 2 OTHER services), centre them with a max-width so they don't
   stretch to fill 3 columns. Uses :has() selector. */
.bz-cross-sell__cards:has(.bz-cross-sell__card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 460px));
}

/* When 4 cards are present (PrevHub + PrevGab + Audit + Réputation sur
   l'Accueil, Contact, À propos), passer en grille 2×2 plutôt qu'une
   seule rangée de 4 colonnes étroites. */
.bz-cross-sell__cards:has(.bz-cross-sell__card:nth-child(4):last-child) {
	grid-template-columns: repeat(2, minmax(0, 460px));
}

/* Cross-sell brand-accent override : dans les widgets cross-sell, le
   « Hub »/« Gab » des mentions PrevHub/PrevGab prend l'or Bazinet plutôt
   que l'orange/mauve de marque. Hex hardcodé (pas var(--bz-or)) parce
   que prevgab-page.css aliase --bz-or → --bz-mauve.
   Selecteur [class*="bz-cross-sell"] couvre à la fois .bz-cross-sell
   (wrapper section sur la majorité des pages) et .bz-cross-sell__cards
   (utilisé seul sur À propos sans section parent). */
[class*="bz-cross-sell"] .bz-brand-hub,
[class*="bz-cross-sell"] .bz-brand-gab,
.pg-crosssell-card .bz-brand-hub,
.pg-crosssell-card .bz-brand-gab {
	color: #B89D64;
}

/* Le CTA .bz-cross-sell__arrow est inline-flex avec gap: 14px (pour
   espacer le ::after icône). Quand .bz-brand-hub / .bz-brand-gab
   apparaissent dedans, ils deviennent des flex items et héritent
   du gap, créant un trou « Prev  Hub ». display: contents les
   sort du box tree, le texte « Hub » se recolle au « Prev »
   précédent. La couleur reste cascadée. Toutes pages. */
.bz-cross-sell__arrow .bz-brand-hub,
.bz-cross-sell__arrow .bz-brand-gab {
	display: contents;
}

.bz-cross-sell__card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(184, 157, 100, 0.22);
	padding: clamp(28px, 3.4vh, 44px) clamp(28px, 3.4vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	transition:
		background 320ms cubic-bezier(0.3, 0, 0, 1),
		border-color 320ms cubic-bezier(0.3, 0, 0, 1),
		transform 320ms cubic-bezier(0.3, 0, 0, 1);
}

.bz-cross-sell__card:hover,
.bz-cross-sell__card:focus-visible {
	background: rgba(184, 157, 100, 0.06);
	border-color: var(--bz-or-55);
	transform: translateY(-2px);
	outline: none;
}

.bz-cross-sell__num {
	display: none;
}

.bz-cross-sell__name {
	font-family: var(--font-d);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 300;
	color: var(--ph-cream, #F4F1EA);
	margin: 0 0 clamp(8px, 1vh, 14px);
	line-height: 1.15;
	letter-spacing: -0.012em;
	/* Reserve space for 2 lines so all 3 cards align their leads
	   ("Audit & optimisation" wraps to 2 lines, "Prevhub" stays on
	   1 — without min-height the leads under each card start at
	   different vertical positions). */
	min-height: calc(2 * 1.15em);
}

.bz-cross-sell__name em {
	font-style: italic;
	color: var(--bz-or, #B89D64);
}

.bz-cross-sell__lead {
	font-family: var(--font-d);
	font-size: clamp(13px, 0.95vw, 15px);
	font-weight: 400;
	font-style: italic;
	color: var(--bz-creme-78);
	margin: 0 0 clamp(14px, 1.6vh, 20px);
	line-height: 1.5;
}

.bz-cross-sell__arrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding: 4px 0 0;
	font-family: var(--font-d);
	font-size: clamp(12px, 0.9vw, 14px);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bz-or, #B89D64);
	transition: gap 320ms cubic-bezier(0.3, 0, 0, 1);
}

.bz-cross-sell__arrow::after {
	content: "";
	display: inline-block;
	width: clamp(40px, 3.4vw, 56px);
	height: 8px;
	background: var(--bz-or, #B89D64);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><line x1='0' y1='4' x2='93' y2='4' stroke='black' stroke-width='1'/><path d='M89 1L93 4L89 7' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 100% 100%;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><line x1='0' y1='4' x2='93' y2='4' stroke='black' stroke-width='1'/><path d='M89 1L93 4L89 7' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 100% 100%;
	transition: width 320ms cubic-bezier(0.3, 0, 0, 1);
	flex-shrink: 0;
}

.bz-cross-sell__card:hover .bz-cross-sell__arrow,
.bz-cross-sell__card:focus-visible .bz-cross-sell__arrow {
	gap: 18px;
}
/* Only the trailing arrow line (::after) extends on hover/focus.
   The previous version selected `.bz-cross-sell__arrow` itself,
   forcing a width on the whole wrapper and squeezing the label to
   3 lines (drift fix 2026-05-08). */
.bz-cross-sell__card:hover .bz-cross-sell__arrow::after,
.bz-cross-sell__card:focus-visible .bz-cross-sell__arrow::after {
	width: clamp(56px, 4.4vw, 72px);
}

@media (max-width: 720px) {
	/* T4 round 23 fix · double the body class (specificity bump)
	   so the mobile 1-col rule wins over the :has() 2-col rule
	   used when only 2 cards are present (service pages cross-sell). */
	.bz-cross-sell__cards,
	.bz-cross-sell__cards:has(.bz-cross-sell__card:nth-child(2):last-child),
	.bz-cross-sell__cards:has(.bz-cross-sell__card:nth-child(4):last-child) {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   Required-field marker — visible asterisk on labels of fields
   marked with `required="required"`. Without this, sighted users
   have no way to know which fields are mandatory until validation
   fires (WCAG 3.3.2 Labels or Instructions).
   ============================================================ */

.ph-form .elementor-field-required > .elementor-field-label::after,
.bz-contact-form .elementor-field-required > .elementor-field-label::after {
	content: " *";
	color: var(--bz-or, #B89D64);
	font-weight: 600;
	margin-left: 4px;
}

/* Marine-section variant — brighter gold so the asterisk reads
   against the cream-on-marine label colour. */
.ph-sec--marine .ph-form .elementor-field-required > .elementor-field-label::after,
.ph-sec--marine .bz-contact-form .elementor-field-required > .elementor-field-label::after {
	color: var(--bz-or-soft, #E5C68C);
}

/* Cream-section variant — use the deeper gold to keep contrast above
   AA on cream backgrounds. */
.ph-sec--cream .ph-form .elementor-field-required > .elementor-field-label::after,
.ph-sec--cream-warm .ph-form .elementor-field-required > .elementor-field-label::after,
.ph-sec--cream .bz-contact-form .elementor-field-required > .elementor-field-label::after,
.ph-sec--cream-warm .bz-contact-form .elementor-field-required > .elementor-field-label::after {
	color: var(--bz-or-deep, #8C6F3D);
}

/* ============================================================
   Form error state — Elementor's default red box was unstyled,
   breaking the editorial palette. Match the success state's
   editorial chrome with a danger accent.
   ============================================================ */

.ph-form .elementor-message-danger,
.ph-form .elementor-message.elementor-message-danger,
.bz-contact-form .elementor-message-danger,
.bz-contact-form .elementor-message.elementor-message-danger {
	background: rgba(196, 60, 50, 0.06) !important;
	border: 0 !important;
	border-left: 2px solid #C43C32 !important;
	color: var(--bz-marine, #0B1E38) !important;
	padding: 24px 28px !important;
	font-family: var(--font-d) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	margin-top: 24px !important;
}

/* On marine sections, lift to creme text. */
.ph-sec--marine .ph-form .elementor-message-danger,
.ph-sec--marine .bz-contact-form .elementor-message-danger {
	background: rgba(196, 60, 50, 0.16) !important;
	color: var(--ph-cream, #F4F1EA) !important;
}

/* Inline field-level error — red border + halo on the offending input. */
.ph-form .elementor-form .elementor-field.elementor-error,
.bz-contact-form .elementor-form .elementor-field.elementor-error {
	border-color: #C43C32 !important;
	box-shadow: 0 0 0 3px rgba(196, 60, 50, 0.10) !important;
}

/* JS-injected validation error (Courriel-OR-Cellulaire requirement, etc.).
   Was inline-styled in form-validation.js until 2026-05-08; now CSP-safe. */
.bz-contact-error {
	color: #C43C32;
	font-family: var(--font-d);
	font-size: 14px;
	margin: 8px 0 0;
	letter-spacing: 0.02em;
}