/**
 * VU Page Detail Content (CONTENT-02)
 *
 * Layout glue for the structured "rich content" page renderer
 * (template-parts/content-page-detail.php). Reuses everything already
 * available: .vu-section/.vu-container/.vu-eyebrow/.vu-heading-section
 * (components.css), .vu-content incl. its blockquote treatment for the
 * one approved "highlight" statement and its link style (used for the
 * contextual "blocs moteurs" link), .vu-media/.vu-media--3-4/
 * .vu-media-split and .vu-cta-band (components.css/homepage.css). This
 * file only adds what none of those already cover: hero intro/CTA
 * spacing, a text+constrained-portrait-video split, a narrow-media
 * variant of .vu-media-split for portrait photos, and the FAQ block.
 */

/* ---------- Hero (intro paragraphs + CTA under the title) ---------- */

.vu-page-article__intro {
	margin-top: 18px;
	max-width: 62ch;
}
.vu-detail-cta-link {
	margin-top: 24px;
}

/* ---------- Text + portrait video split ---------- */
/* The approved video is portrait (720x1280). A 50/50 split like
   .vu-media-split would make it far too tall and let it dominate the
   section, so this constrains the video column to a fixed width instead
   of splitting evenly — the text column takes the remaining space. */

.vu-detail-media-split {
	display: grid;
	grid-template-columns: 1fr 240px;
	gap: 40px;
	align-items: start;
}
.vu-detail-video {
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--vu-radius);
}
.vu-detail-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 780px) {
	.vu-detail-media-split {
		grid-template-columns: 1fr;
	}
	.vu-detail-media-split .vu-detail-video {
		max-width: 220px;
		margin: 0 auto;
	}
}

/* ---------- Narrow-media split (portrait photo + text) ---------- */
/* .vu-media-split (homepage.css) is an even 1fr/1fr split, tuned for
   landscape photos. A portrait source in an even-width column runs very
   tall; this variant gives the media column a fixed, proportionate width
   instead and lets the text column take the rest — the design adapts to
   the image's own orientation rather than cropping the image to fit an
   assumed layout. Source aspect ratio should be set via a matching
   .vu-media--* utility (e.g. .vu-media--3-4) so no cropping occurs at
   all when the ratios already match. */

.vu-media-split--narrow {
	grid-template-columns: 340px 1fr;
}

@media (max-width: 960px) {
	.vu-media-split--narrow {
		grid-template-columns: 1fr;
	}
}

/* ---------- FAQ ---------- */

.vu-faq {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 28px;
}
.vu-faq__question {
	margin-bottom: 8px;
	font-family: var(--vu-font-ui);
	font-weight: 600;
	font-size: var(--vu-text-lg);
	color: var(--vu-color-white);
}

/* ---------- Contact page (WEB-CONTACT-01 / WEB-CONTACT-02) ---------- */
/* template-parts/content-page-contact.php only — content-page-detail.php
   and its existing consumers are untouched. Consolidated visual pass
   (2026-09-12): the phone numbers now live in the hero itself
   (.vu-contact-hero, right side, compact text) rather than a separate
   full-width card strip, and the unified two-column .vu-contact-stage
   (general contact form, 166, on the right; confirmed address/hours/
   exterior photo on the left, photo sticky on desktop) follows
   immediately after — both changes shorten the scroll to reach the
   two-column stage. */

.vu-contact-hero {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: start;
}
.vu-contact-hero__phones {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* The left column (eyebrow + H1 + intro sentence) is taller than
	   this column, so the grid row's own height follows the left
	   column. align-self: end anchors this column to the BOTTOM of
	   that row instead of the container's own align-items: start, so
	   the phone group lines up with the intro sentence rather than
	   floating up next to the eyebrow. */
	align-self: end;
}
.vu-contact-hero__phone {
	display: flex;
	align-items: baseline;
	gap: 8px;
	text-decoration: none;
	/* Comfortable tap target without a card/border treatment — this is
	   deliberately just text, per the "no oversized phone blocks"
	   requirement. */
	padding: 4px 0;
}
.vu-contact-hero__phone-label {
	font-family: var(--vu-font-ui);
	font-size: var(--vu-text-sm);
	font-weight: 500;
	color: var(--vu-color-gray);
	white-space: nowrap;
}
.vu-contact-hero__phone-number {
	font-family: var(--vu-font-ui);
	font-weight: 700;
	/* Increased from var(--vu-text-lg) (1rem/16px) for more visual
	   weight, while staying far below the old large-card treatment
	   (which ranged 28-40px). */
	font-size: 1.25rem;
	color: var(--vu-color-white);
	transition: color .2s;
	white-space: nowrap;
}
.vu-contact-hero__phone:hover .vu-contact-hero__phone-number,
.vu-contact-hero__phone:focus-visible .vu-contact-hero__phone-number {
	color: var(--vu-color-red);
}
.vu-contact-hero__phone:focus-visible {
	outline: 2px solid var(--vu-color-red);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.vu-contact-hero {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.vu-contact-hero__phones {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}
}

/* The header's own bottom padding (full generic .vu-section
   padding-bottom, 88px desktop) was the main source of the excessive
   gap before the divider — unlike the evaluation page, nothing reduces
   it here today, since that existing reduction rule
   (.vu-page-article__header:has(+ .vu-page-article__content .wpcf7))
   is scoped to the bare-fallback template, which this page doesn't
   use. :has(.vu-contact-hero) targets only this page's header (the
   only one containing that element), so About's header and any other
   .vu-page-article__header user are unaffected. */
.vu-page-article__header:has(.vu-contact-hero) {
	padding-bottom: 32px;
}

/* .vu-contact-stage-section's own padding-top must out-specificity the
   existing shared .vu-page-article__header + .vu-section rule (two
   classes via a combinator) further below in this file, which would
   otherwise silently win over a same-specificity same-property rule
   here — the extra .vu-section.vu-contact-stage-section combination
   makes this the one authoritative value for this page, rather than
   incidentally inheriting whatever that shared rule happens to
   produce. Combined with the header fix above: 32px + 24px = 56px
   total before the divider, down from 88px + 44px = 132px. */
.vu-page-article__header + .vu-section.vu-contact-stage-section {
	padding-top: 24px;
}

/* ---------- Unified contact stage: form (right) + find (left, sticky photo) ---------- */
/* Markup order is the mobile order (form block, then find block) —
   desktop uses `order` to place find on the left / form on the right
   without duplicating or physically reordering any markup; the
   mobile media query below resets `order` so the single-column stack
   follows plain DOM order again (form, then find — matching the
   required mobile sequence exactly). */
.vu-contact-stage {
	display: grid;
	grid-template-columns: 43fr 57fr;
	gap: 52px;
	align-items: start;
}
/* Subtle divider above each column — a thin, understated top border
   separating the whole stage from the hero above it, applied to each
   column individually (not one border spanning both) so the same
   treatment holds whether the two sit side by side (desktop) or
   stacked (mobile). padding-top keeps each heading from sitting flush
   against the line. */
.vu-contact-stage__form,
.vu-contact-stage__find {
	border-top: 1px solid var(--vu-color-border);
	padding-top: 28px;
}
.vu-contact-stage__form {
	order: 2;
}
.vu-contact-stage__find {
	order: 1;
	/* align-self overrides the container's align-items: start for this
	   one item only. That container-level align-items: start is what
	   keeps both H2s starting on the same line (neither column
	   stretches its CONTENT); align-self: stretch here instead affects
	   only the column's own BOX, expanding it to the grid row's full
	   height (set by the taller form column) so the sticky photo below
	   has real room to stick through as the visitor scrolls the form.
	   Without this, the box would be only as tall as its own short
	   content (heading + address block + photo), leaving the sticky
	   rule almost nothing to do. */
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.vu-contact-stage__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.vu-contact-address p {
	margin: 0;
}
.vu-contact-hours-block .vu-eyebrow {
	margin-bottom: 8px;
}
.vu-contact-hours p {
	margin: 0 0 4px;
}
.vu-contact-hours p:last-child {
	margin-bottom: 0;
}

/* Exterior photo is native 4:3 (1448x1086) — displayed at its own
   ratio on both desktop and mobile, no crop and no object-fit. Plain
   responsive image (not the shared .vu-media wrapper, which forces
   object-fit: cover via components.css) so the full building context
   stays visible rather than being cropped to fit a box. */
.vu-contact-stage__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vu-radius);
}

@media (min-width: 901px) {
	/* Desktop-only sticky: the workshop photo stays visible while the
	   (taller) form column keeps scrolling below it, stopping
	   naturally at the bottom of .vu-contact-stage__find's own box
	   (stretched to the full row height above) — not at the bottom of
	   the viewport or the whole page. top offset matches the confirmed
	   Kadence sticky header (WEB-04 Customizer config: 64px row height
	   + 6px top border + 1px bottom border = 71px), plus a little
	   breathing room. Checked every existing overflow rule across
	   tokens/base/components/homepage/page-content.css: none belongs
	   to an ancestor of this element — the only overflow:hidden rules
	   belong to unrelated components (.vu-card--service, .vu-media,
	   the homepage hero, .vu-detail-video), none of which wrap
	   .vu-site/.vu-page-article/.vu-container/.vu-section. */
	.vu-contact-stage__media {
		position: sticky;
		top: 72px;
	}
}

@media (max-width: 900px) {
	.vu-contact-stage {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.vu-contact-stage__form,
	.vu-contact-stage__find {
		order: initial;
	}
	.vu-contact-stage__find {
		align-self: auto;
	}
}

/* ---------- Evaluation request form (FORM-02) ---------- */
/* Contact Form 7 renders its own markup independently of this theme;
   the CF7 form itself ("Faire évaluer une pièce") is created and owned
   in wp-admin, not here. Every selector below keys off CF7's own
   documented classes (.wpcf7-form-control, .wpcf7-not-valid,
   .wpcf7-response-output, the .wpcf7 form.<status> state classes)
   rather than raw input/select/textarea tags, so nothing here depends
   on the exact field text/order entered in wp-admin, and nothing here
   can bleed onto unrelated front-end markup (a future Kadence widget,
   any other plugin's form) that doesn't carry CF7's classes. No
   upload-field styling — no upload tag exists yet (FORM-03 scope). The
   submit control itself uses class:vu-btn class:vu-btn--primary
   directly on the CF7 tag (components.css) — no separate button rule
   is defined here.

   The form's width/alignment is handled one level up, in
   page-templates.css, by constraining the same .vu-container that
   wraps H1/intro (scoped to a bare-fallback Standard Page that
   actually contains a CF7 form) — so the form shares their exact left
   edge and measure instead of centering independently inside a wider
   box. See that file for the full rationale. */

.wpcf7-form label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--vu-font-ui);
	font-size: var(--vu-text-sm);
	font-weight: 500;
	color: var(--vu-color-gray);
}
.wpcf7-form-control-wrap {
	display: block;
}

/* Intro copy -> form: a distinctly larger gap than the generic
   .vu-content > * + * paragraph rhythm (1.25em ≈ 20px). Scoped to the
   same "bare-fallback page that actually contains a CF7 form"
   condition as the width rule above, so this never applies to a
   future CF7 form embedded in a different page structure. */
.vu-page-article__content:has(.wpcf7) .wpcf7 {
	margin-top: 30px;
}

/*
 * Text color is set explicitly in the resting, :focus and :focus-visible
 * states (not left to inherit from the base rule alone) — on real DEV
 * preview, typed text rendered dark while a control was focused and only
 * turned light again after blur, most likely a Kadence parent-theme
 * form-focus rule with matching specificity winning on some focus path
 * this project's own CSS doesn't control. Repeating the same color/
 * caret-color value in all three states closes that gap regardless of
 * where it was coming from. caret-color is included so the text cursor
 * itself stays visible against the dark background too.
 */
.wpcf7-form .wpcf7-form-control,
.wpcf7-form .wpcf7-form-control:focus,
.wpcf7-form .wpcf7-form-control:focus-visible {
	color: var(--vu-color-white);
	caret-color: var(--vu-color-white);
}

.wpcf7-form .wpcf7-form-control {
	display: block;
	width: 100%;
	padding: 12px 14px;
	background: var(--vu-color-surface);
	border: 1px solid var(--vu-color-border);
	border-radius: var(--vu-radius);
	font-family: var(--vu-font-body);
	font-size: var(--vu-text-md);
	transition: border-color .2s, background-color .2s;
}
.wpcf7-form .wpcf7-form-control::placeholder {
	color: var(--vu-color-gray);
}
.wpcf7-form .wpcf7-form-control:focus-visible {
	background: var(--vu-color-surface-2);
	border-color: var(--vu-color-red);
	outline: 2px solid var(--vu-color-red);
	outline-offset: 2px;
}

/* Comfortably usable without dominating the page. An explicit height
   (not just min-height) is required here: CF7's default rows="10"
   attribute renders taller than any min-height floor, so min-height
   alone had no visible effect. resize:vertical still lets a visitor
   drag it taller by hand. */
.wpcf7-form textarea.wpcf7-form-control {
	height: 180px;
	resize: vertical;
}

/* Native appearance/arrow intentionally preserved — not replaced with
   a custom dropdown. Options are styled explicitly for contrast: real
   choices stay fully readable, while first_as_label's placeholder
   option (always first in source order) reads visually secondary. */
.wpcf7-form select.wpcf7-form-control {
	padding-right: 32px;
}
.wpcf7-form select.wpcf7-form-control option {
	color: var(--vu-color-white);
	background-color: var(--vu-color-surface);
}
.wpcf7-form select.wpcf7-form-control option:first-child {
	color: var(--vu-color-gray);
}

/* Optional two-column pairing for short fields (Nom complet/Courriel,
   Téléphone/Entreprise) — inert until wp-admin wraps the corresponding
   field pairs in <div class="vu-form-row">; see implementation report.
   Collapses to one column on mobile. */
.vu-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
}
@media (max-width: 640px) {
	.vu-form-row {
		grid-template-columns: 1fr;
	}
}

/* "* Champs obligatoires" legend — no ambient styling target existed
   for it (it would otherwise inherit full-size white body text from
   .vu-site); muted/compact only, no new component. Spacing itself is
   handled by the consolidated rule below, not here — it shares the
   same rhythm as every field block on the (documented) assumption that
   it is also rendered as a <p> in the CF7 form. */
.vu-form-note {
	display: block;
	font-size: var(--vu-text-sm);
	color: var(--vu-color-gray);
}

/* PRIVACY-01: privacy notice above the submit button of CF7 forms 166,
   159 and 174 (vu-core/inc/privacy.php). Reuses .vu-form-note for size, color and
   spacing; only the link needs its own rule, because two of the three
   forms sit outside .vu-content and would otherwise inherit an
   unmarked, same-color link from `.vu-site a`. */
.wpcf7-form .vu-privacy-notice a {
	color: inherit;
	text-decoration: underline;
}
.wpcf7-form .vu-privacy-notice a:hover,
.wpcf7-form .vu-privacy-notice a:focus-visible {
	color: var(--vu-color-white);
}

/*
 * Single, authoritative spacing rhythm for every field block and the
 * note together — the one source of truth for CF7 field-block spacing
 * (replaces the earlier margin-bottom-only base rule and the earlier
 * separate mobile :not(.vu-form-note)/.vu-form-note pair; neither
 * exists anymore). margin-top is reset explicitly at the base/desktop
 * level: on desktop specifically, each field <p>'s unreset browser-
 * default margin-top was stacking with our own margin-bottom rather
 * than collapsing, because .vu-form-row is a CSS Grid container and
 * grid-item margins never collapse with anything — that combined
 * total, not the margin-bottom value alone, was the actual cause of
 * the oversized desktop row gaps. Assumes CF7's classic per-field
 * <p>Label<br />[tag]</p> wrapping (matching its own stock "Contact
 * form 1", which Cristian confirmed reviewing) — still unverified
 * against the live DOM: the Draft page isn't reachable without
 * wp-admin credentials, and no other live page on the site embeds a
 * CF7 form to cross-check against. If the actual field wrapper turns
 * out not to be a <p>, this selector needs to target whatever it
 * actually is instead.
 */
.wpcf7-form p,
.wpcf7-form .vu-form-note {
	margin-top: 0;
	margin-bottom: 24px;
}
@media (max-width: 640px) {
	.wpcf7-form p,
	.wpcf7-form .vu-form-note {
		margin-bottom: 19px;
	}
}

/* ---------- Validation / error states ---------- */
/* .wpcf7-not-valid / .wpcf7-not-valid-tip are CF7's own long-stable
   per-field hooks, applied regardless of form content. */

.wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--vu-color-red);
}
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: var(--vu-text-sm);
	color: var(--vu-color-red);
}

/* ---------- FORM-03 visual refinement (photo/video controls + submit) ---------- */
/* Scoped to CF7 form ID 159 ("Faire évaluer une pièce") specifically —
   not to .wpcf7-form generally, and not to the page-composition
   condition used above for width/spacing (:has(.wpcf7) would still
   match any future CF7 form embedded on the same bare-fallback page
   structure, e.g. CAREERS-03's own application form). CF7 renders its
   root wrapper as <div class="wpcf7" id="wpcf7-f{form_id}-p{post_id}-
   o{instance}" data-wpcf7-id="{form_id}" ...> — confirmed directly
   against the live DEV markup for this form (id="wpcf7-f159-p160-o1").
   [id^="wpcf7-f159-"] matches only this specific form, regardless of
   which page embeds it or how many times, so this can never reach any
   other current or future CF7 form on the site. */

/* Native file inputs keep their own browser-drawn "Browse…"/"No file
   chosen" strings — not overridable via CSS, and deliberately left
   untouched. Only the ::file-selector-button portion is restyled, to
   match the dark form design instead of the browser's default light
   system button. */
.wpcf7[id^="wpcf7-f159-"] input[type="file"].wpcf7-form-control {
	padding: 10px 14px;
	color: var(--vu-color-gray);
}
.wpcf7[id^="wpcf7-f159-"] input[type="file"].wpcf7-form-control::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	background: var(--vu-color-surface-2);
	color: var(--vu-color-white);
	border: 1px solid var(--vu-color-border);
	border-radius: var(--vu-radius);
	font-family: var(--vu-font-ui);
	font-size: var(--vu-text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.wpcf7[id^="wpcf7-f159-"] input[type="file"].wpcf7-form-control::file-selector-button:hover {
	background: var(--vu-color-surface);
	border-color: var(--vu-color-red);
}

/* Submit: explicit auto-width, left-aligned, brand red — overriding
   whatever is currently stretching the shared .vu-btn--primary submit
   to render full-width on this specific form (exact cause unconfirmed
   without live DOM access; every relevant property is set explicitly
   here instead of depending on diagnosing it). Keys off CF7's own
   stable .wpcf7-submit class (always present regardless of custom
   class: tag options) rather than .vu-btn--primary itself, so this
   never touches that shared class or any other button using it
   elsewhere on the site — and the form-159 wrapper scope above means
   it never reaches any other CF7 form either. max-width keeps it from
   ever overflowing a narrow mobile viewport. */
.wpcf7[id^="wpcf7-f159-"] .wpcf7-submit {
	display: inline-block;
	width: auto;
	max-width: 100%;
	padding: 14px 32px;
	background: var(--vu-color-red);
	color: var(--vu-color-white);
	font-family: var(--vu-font-ui);
	font-size: var(--vu-text-md);
	font-weight: 600;
	letter-spacing: .02em;
	text-align: center;
	border: none;
	border-radius: var(--vu-radius);
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.wpcf7[id^="wpcf7-f159-"] .wpcf7-submit:hover {
	background: var(--vu-color-red-dark);
}
.wpcf7[id^="wpcf7-f159-"] .wpcf7-submit:focus-visible {
	outline: 2px solid var(--vu-color-red);
	outline-offset: 2px;
}

/* ---------- CAREERS-03: Careers application form visual pass ---------- */
/* Scoped to CF7 form ID 174 ("Candidature — Carrières") specifically —
   same [id^="wpcf7-f174-"] wrapper-ID scoping already proven on the
   form-159 rules above, so this can never reach form 159, form 166, or
   any other current/future CF7 form. Layout width/rhythm for this page
   needed no new CSS at all (see content-page-careers-application.php's
   own docblock: it reuses the existing bare-fallback
   `.vu-page-article__header`/`.vu-page-article__content` + `:has(.wpcf7)`
   rules in page-templates.css). Only the two per-form visual gaps the
   evaluation form (159) already solved the same way are repeated here,
   verbatim in approach: native file-input decoration, and an explicit
   auto-width submit button (CF7's own always-present .wpcf7-submit/
   .wpcf7-form-control classes are present regardless of whether the
   Form-tab tag also carries custom class: options, so this applies
   correctly even before any wp-admin Form-tab text edit). */

.wpcf7[id^="wpcf7-f174-"] input[type="file"].wpcf7-form-control {
	padding: 10px 14px;
	color: var(--vu-color-gray);
}
.wpcf7[id^="wpcf7-f174-"] input[type="file"].wpcf7-form-control::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	background: var(--vu-color-surface-2);
	color: var(--vu-color-white);
	border: 1px solid var(--vu-color-border);
	border-radius: var(--vu-radius);
	font-family: var(--vu-font-ui);
	font-size: var(--vu-text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.wpcf7[id^="wpcf7-f174-"] input[type="file"].wpcf7-form-control::file-selector-button:hover {
	background: var(--vu-color-surface);
	border-color: var(--vu-color-red);
}

.wpcf7[id^="wpcf7-f174-"] .wpcf7-submit {
	display: inline-block;
	width: auto;
	max-width: 100%;
	padding: 14px 32px;
	background: var(--vu-color-red);
	color: var(--vu-color-white);
	font-family: var(--vu-font-ui);
	font-size: var(--vu-text-md);
	font-weight: 600;
	letter-spacing: .02em;
	text-align: center;
	border: none;
	border-radius: var(--vu-radius);
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.wpcf7[id^="wpcf7-f174-"] .wpcf7-submit:hover {
	background: var(--vu-color-red-dark);
}
.wpcf7[id^="wpcf7-f174-"] .wpcf7-submit:focus-visible {
	outline: 2px solid var(--vu-color-red);
	outline-offset: 2px;
}

/* Contextual "Voir les postes ouverts →"/"Voir les autres postes ouverts →"
   link: without this, the arrow could wrap onto its own line separately
   from the preceding word at narrow widths, reading as a stray glyph.
   nowrap keeps the whole link atomic — if it doesn't fit, the entire
   link moves to the next line instead, never just the arrow. Scoped to
   this one class (applied only in
   template-parts/content-page-careers-application.php), not to inline
   links generally, so no other page's in-copy links are affected. */
.vu-careers-nav-link {
	white-space: nowrap;
}

/* Tightens the gap between that contextual line and "* Champs
   obligatoires"/the form specifically for this page. The shared rule
   this overrides (.vu-page-article__header + .vu-section, page-
   templates.css) already halves the generic section padding-top for
   any Standard Page whose header is immediately followed by a section
   — including form 159's own page — so this could not be tightened
   further there without also affecting the evaluation form. Scoped via
   :has() to a .wpcf7 whose id starts with "wpcf7-f174-" specifically
   (the same wrapper-ID pattern already used above), so form 159's page
   is structurally unable to match this rule at all. */
.vu-page-article__content:has(.wpcf7[id^="wpcf7-f174-"]) {
	padding-top: 16px;
}

/* ---------- WEB-CONTACT-02: general "Nous écrire" contact form ---------- */
/* Scoped to this project's own wrapper class, not the CF7 form's
   numeric ID (unlike the form-159 rules above) — a self-owned class
   avoids any ID dependency entirely. Generic field/validation/response
   styling already applies site-wide from the rules above (.wpcf7-form
   label, .wpcf7-form-control, .wpcf7-not-valid-tip,
   .wpcf7-response-output, etc.). No width constraint is set here: the
   form now lives inside .vu-contact-stage__form (see above), whose own
   ~57%-of-container grid column already gives it a comfortable,
   page-appropriate width — each field uses that column's full width,
   per the final composition pass. Only the submit-button treatment
   remains here, matching the same explicit auto-width/brand-red
   pattern already needed on the evaluation form (form-159 rules
   above) rather than depending on .vu-btn--primary alone. */
.vu-contact-form .wpcf7-submit {
	display: inline-block;
	width: auto;
	max-width: 100%;
	padding: 14px 32px;
	background: var(--vu-color-red);
	color: var(--vu-color-white);
	font-family: var(--vu-font-ui);
	font-size: var(--vu-text-md);
	font-weight: 600;
	letter-spacing: .02em;
	text-align: center;
	border: none;
	border-radius: var(--vu-radius);
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.vu-contact-form .wpcf7-submit:hover {
	background: var(--vu-color-red-dark);
}
.vu-contact-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--vu-color-red);
	outline-offset: 2px;
}
/* Turnstile auto-injects immediately after the submit paragraph
   (confirmed on the live rendered form: <p><input ...wpcf7-submit.../>
   </p><div class="wpcf7-turnstile cf-turnstile" ...>) — the submit
   paragraph's own generic 24px .wpcf7-form p bottom margin otherwise
   reads as an oversized gap before the widget; tightened here without
   touching the shared .wpcf7-form p rule used everywhere else. */
.vu-contact-form .wpcf7-form p:has(+ .wpcf7-turnstile) {
	margin-bottom: 12px;
}

/* Slightly tighter field rhythm and a shorter textarea than the shared
   FORM-02/03 defaults (24px / 180px) — this form sits in a narrower
   column with its own divider treatment, so a bit more compactness
   reads better here. Scoped to .vu-contact-form specifically: the
   shared rules themselves are untouched, so form 159 (evaluation page)
   and any future CF7 form are unaffected. */
.vu-contact-form .wpcf7-form p {
	margin-bottom: 18px;
}
.vu-contact-form textarea.wpcf7-form-control {
	height: 140px;
}

.wpcf7-response-output {
	margin-top: 20px;
	padding: 14px 18px;
	background: var(--vu-color-surface);
	border: 1px solid var(--vu-color-border);
	border-radius: var(--vu-radius);
	font-size: var(--vu-text-base);
	color: var(--vu-color-white);
}
/* .sent is left on the neutral base treatment above — the remaining
   documented CF7 form status classes (failed, aborted, spam, invalid,
   unaccepted) all get the red attention treatment. */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: var(--vu-color-red);
	background: var(--vu-color-red-alpha);
	color: var(--vu-color-red);
}

/* Cloudflare Turnstile resets and re-shows "Verify you are human"
   after a successful submission, which reads as if verification failed
   or must be redone. Hides only the widget itself on the documented
   .sent success state — CF7's own class for it (.wpcf7-turnstile,
   confirmed against CF7's turnstile.php form-tag handler source), not
   the generic third-party .cf-turnstile class, so this can never match
   an unrelated Turnstile embed elsewhere on the site. The success
   message (.wpcf7-response-output) and every other status state are
   untouched — same .wpcf7 form.<status> pattern already used above. */
.wpcf7 form.sent .wpcf7-turnstile {
	display: none;
}