/* ==========================================================================
   Völl Studio – main styles
   Tokens come from theme.json (--wp--preset--*, --wp--custom--*).
   Breakpoints: mobile < 768 · tablet 768–1199 · desktop ≥ 1200 (designed at 1440).
   Rules: square corners (pills only for buttons/tags/filters), no overflow:hidden
   on ancestors of shadowed elements, no shadow on full-bleed images.
   ========================================================================== */

:root {
	--lin: var(--wp--preset--color--lin);
	--pierre: var(--wp--preset--color--pierre);
	--olive: var(--wp--preset--color--olive);
	--noyer: var(--wp--preset--color--noyer);
	--cuivre: var(--wp--preset--color--cuivre);
	--brun-nuit: var(--wp--preset--color--brun-nuit);

	--marge: var(--wp--custom--marge);
	--gouttiere: var(--wp--custom--gouttiere);
	--contenu: 1280px;
	--bord: max(var(--marge), calc((100% - var(--contenu)) / 2));

	--ombre-douce: var(--wp--preset--shadow--douce);
	--ombre-vedette: var(--wp--preset--shadow--vedette);

	--fade-duration: var(--wp--custom--fade--duration);
	--fade-ease: var(--wp--custom--fade--ease);
	--fade-step: var(--wp--custom--fade--step);
	--fade-stagger: var(--wp--custom--fade--stagger);

	--serif: var(--wp--preset--font-family--cormorant);
	--sans: var(--wp--preset--font-family--jost);

	--section: var(--wp--preset--spacing--90);
	--section-l: var(--wp--preset--spacing--100);
	--item: var(--wp--preset--spacing--80);
	--entete-gap: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}

img { max-width: 100%; height: auto; }

/* Header, main and footer touch: sections carry their own spacing */
.wp-site-blocks > * { margin-block: 0; }
.voll-main > * + * { margin-block-start: 0; }

::selection { background: var(--cuivre); color: var(--lin); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.screen-reader-text,
.voll-visuellement-cache {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.voll-lien-evitement {
	position: absolute;
	left: var(--marge);
	top: 8px;
	z-index: 100;
	padding: 10px 20px;
	background: var(--brun-nuit);
	color: var(--lin);
	border-radius: 999px;
	transform: translateY(-200%);
}
.voll-lien-evitement:focus { transform: none; }

/* Headings never inherit link underline */
:where(h1, h2, h3, h4, h5, h6) a { text-decoration: none; }

/* Kicker – Cormorant Bold Italic, letter-spaced, sentence case */
.is-style-surtitre,
.voll-surtitre {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--surtitre);
	letter-spacing: 0.14em;
	line-height: 1.4;
}

.is-style-meta {
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.6;
}

/* Copper numbers (01, BE…) */
.voll-numero,
.is-style-numero {
	font-family: var(--serif);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--numero);
	line-height: 1.15;
	color: var(--cuivre);
	letter-spacing: 0;
}

/* Shadows */
.is-style-ombre img,
img.is-style-ombre,
.voll-ombre { box-shadow: var(--ombre-douce); }

.wp-block-image.is-style-ombre { overflow: visible; }

/* Tréma separator (two dots of the Ö) */
hr.is-style-trema,
.wp-block-separator.is-style-trema {
	border: 0 !important;
	height: 10px;
	width: 32px;
	max-width: none;
	margin-inline: auto;
	background: var(--cuivre);
	-webkit-mask: url(../img/trema-m-cuivre.svg) center / contain no-repeat;
	mask: url(../img/trema-m-cuivre.svg) center / contain no-repeat;
	opacity: 1;
}
hr.is-style-trema.voll-trema-s {
	height: 6px;
	width: 19px;
	margin-inline: 0;
}

/* Lists: tréma bullets, rules only between items */
.wp-block-list.is-style-trema { list-style: none; padding-left: 0; }
.wp-block-list.is-style-trema > li { position: relative; padding-left: 32px; }
.wp-block-list.is-style-trema > li + li { margin-top: 12px; }
.wp-block-list.is-style-trema > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 19px;
	height: 6px;
	background: var(--cuivre);
	-webkit-mask: url(../img/trema-s-cuivre.svg) center / contain no-repeat;
	mask: url(../img/trema-s-cuivre.svg) center / contain no-repeat;
}
.wp-block-list.is-style-filets { list-style: none; padding-left: 0; }
.wp-block-list.is-style-filets > li { padding-block: 14px; }
.wp-block-list.is-style-filets > li + li { border-top: 1px solid currentColor; }

/* Pierre sections: grain + soft inner shadow top/bottom */
.is-style-grain {
	position: relative;
	isolation: isolate;
	background-color: var(--pierre);
	box-shadow: inset 0 24px 77px rgba(35, 28, 23, 0.03), inset 0 -24px 77px rgba(35, 28, 23, 0.03), inset 0 -86px 76px rgba(35, 28, 23, 0.03);
}
.is-style-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url(../img/grain.webp) 0 0 / 180px 180px repeat;
	mix-blend-mode: overlay;
	opacity: 0.5;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Buttons – V/Bouton
   -------------------------------------------------------------------------- */

.wp-block-buttons { gap: 16px; }

/* Optical bleed: a button aligned under text sits 12 px left of the text edge */
.wp-block-buttons:not(.is-content-justification-center):not(.is-content-justification-right):not(.is-content-justification-space-between) {
	margin-inline-start: -12px;
}

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	min-height: 51px;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 4px 7px rgba(35, 28, 23, 0.1), 0 1px 1.5px rgba(35, 28, 23, 0.06);
	transition: background-color 250ms ease, box-shadow 250ms ease, color 250ms ease;
}

/* Secondaire (default): arrow larger than the label */
.wp-block-button:not(.is-style-primaire):not(.is-style-sombre):not(.is-style-noir) .wp-block-button__link::after {
	content: "→";
	font-family: var(--sans);
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0;
}
.wp-block-button:not(.is-style-primaire):not(.is-style-sombre):not(.is-style-noir) .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: #6a4830;
	box-shadow: 0 6px 12px rgba(35, 28, 23, 0.14), 0 1px 2px rgba(35, 28, 23, 0.08);
}

/* Primaires: phone icon instead of the arrow, inner relief */
:is(.is-style-primaire, .is-style-sombre, .is-style-noir) .wp-block-button__link {
	gap: 16px;
	box-shadow: inset 0 4px 4px rgba(244, 240, 233, 0.39), 0 4px 7px rgba(35, 28, 23, 0.3), 0 1px 1.5px rgba(35, 28, 23, 0.25);
}
:is(.is-style-primaire, .is-style-sombre, .is-style-noir) .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url(../img/icone-telephone.svg) center / contain no-repeat;
	mask: url(../img/icone-telephone.svg) center / contain no-repeat;
}
.is-style-primaire .wp-block-button__link {
	background-color: var(--brun-nuit);
	color: var(--lin);
	box-shadow: inset 0 4px 4px rgba(244, 240, 233, 0.12), 0 4px 7px rgba(35, 28, 23, 0.18), 0 1px 1.5px rgba(35, 28, 23, 0.12);
}
.is-style-primaire .wp-block-button__link:is(:hover, :focus-visible) { background-color: #3a2f27; }
:is(.is-style-sombre, .is-style-noir) .wp-block-button__link {
	background-color: var(--pierre);
	color: var(--brun-nuit);
}
:is(.is-style-sombre, .is-style-noir) .wp-block-button__link:is(:hover, :focus-visible) { background-color: var(--lin); }
.is-style-noir .wp-block-button__link {
	box-shadow: inset 0 4px 4px rgba(244, 240, 233, 0.39), 0 6px 14px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Mobile: secondary buttons show « Découvrir » only, full label kept for a11y/SEO */
.voll-btn__court { display: none; }

@media (max-width: 767px) {
	.wp-block-button__link,
	.wp-element-button {
		min-height: 39px;
		padding: 9px 18px 9px 20px !important;
		font-size: 13px !important;
		gap: 14px;
	}
	.wp-block-button:not(.is-style-primaire):not(.is-style-sombre):not(.is-style-noir) .wp-block-button__link::after { font-size: 18px; }
	:is(.is-style-primaire, .is-style-sombre, .is-style-noir) .wp-block-button__link::after { width: 15px; height: 15px; }
	.voll-btn__long {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	.voll-btn__court { display: inline; }
}

/* Tags / filters: pill, 1px outline */
.voll-tag,
.wp-block-post-terms a,
.voll-filtres a {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}
.wp-block-post-terms a:is(:hover, :focus-visible),
.voll-filtres a:is(:hover, :focus-visible, [aria-current]) {
	background: var(--brun-nuit);
	color: var(--lin);
}
.wp-block-post-terms__separator { display: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.voll-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gouttiere);
	padding: 40px var(--bord) 0;
	position: relative;
	z-index: 20;
}
.voll-entete--hero {
	position: absolute;
	inset: 0 0 auto 0;
	color: var(--lin);
}

.voll-logo {
	display: block;
	flex: none;
	width: 150px;
	aspect-ratio: 150 / 76;
	background: currentColor;
	color: inherit;
	-webkit-mask: url(../img/logo.svg) center / contain no-repeat;
	mask: url(../img/logo.svg) center / contain no-repeat;
}
.voll-logo--petit { width: 110px; }

/* Menu */
.voll-menu ul { list-style: none; margin: 0; padding: 0; }
.voll-menu a { color: inherit; text-decoration: none; }
.voll-menu a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.voll-menu a[aria-current] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.voll-menu--entete .voll-menu__liste {
	display: flex;
	align-items: center;
	gap: 40px;
	font-size: 17px;
	line-height: 1.6;
}
.voll-menu__langues { opacity: 0.85; }
.voll-menu__langues a[aria-current] { text-decoration: none; opacity: 1; }
.voll-menu__langues a:not([aria-current]) { opacity: 0.75; }

.voll-menu__bouton {
	display: none;
	font: 500 13px/1 var(--sans);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: inherit;
	background: none;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 10px 18px;
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.voll-menu__bouton-fermer { display: none; }

@media (max-width: 767px) {
	.voll-entete { padding-top: 20px; }
	.voll-logo { width: 96px; }
	.voll-logo--petit { width: 96px; }
	.voll-menu__bouton { display: inline-block; }
	.voll-menu--entete .voll-menu__panneau {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 96px var(--marge) 48px;
		background: var(--lin);
		color: var(--brun-nuit);
		opacity: 0;
		visibility: hidden;
		transition: opacity 250ms ease, visibility 0s linear 250ms;
	}
	.voll-menu--entete .voll-menu__liste {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		font-family: var(--serif);
		font-weight: 500;
		font-size: 40px;
		line-height: 1.1;
	}
	.voll-menu__langues { font-family: var(--sans); font-size: 17px; margin-top: 20px; }
	.voll-menu.is-open .voll-menu__panneau {
		opacity: 1;
		visibility: visible;
		transition: opacity 250ms ease;
	}
	.voll-menu.is-open .voll-menu__bouton { color: var(--brun-nuit); }
	.voll-menu.is-open .voll-menu__bouton-ouvrir { display: none; }
	.voll-menu.is-open .voll-menu__bouton-fermer { display: inline; }
	body.voll-menu-ouvert { overflow: hidden; }
	/* Logo stays visible above the open panel */
	.voll-menu-ouvert .voll-entete .voll-logo { position: relative; z-index: 2; color: var(--brun-nuit); }
}

@media (prefers-reduced-motion: reduce) {
	.voll-menu--entete .voll-menu__panneau { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Sections – shared
   -------------------------------------------------------------------------- */

.voll-pleine > :not(.voll-section):not(.voll-hero):not(.alignfull) {
	max-width: var(--contenu);
	margin-inline: auto;
	padding-inline: var(--marge);
	box-sizing: content-box;
}

.voll-section {
	padding-inline: var(--bord);
	padding-block: var(--section);
	margin-block: 0 !important;
}
.voll-section > * { margin-block: 0; }

/* Section header: kicker + H2 (+ optional side text) */
.voll-entete-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: var(--entete-gap) !important;
}
.voll-entete-section > * { margin: 0; }
.voll-entete-section h2 { max-width: 760px; }

.has-olive-background-color,
.has-brun-nuit-background-color { color: var(--lin); }

/* --------------------------------------------------------------------------
   Hero (homepage)
   -------------------------------------------------------------------------- */

.voll-hero.wp-block-cover {
	min-height: clamp(600px, 100svh, 860px);
	padding: 0 var(--bord) 80px;
	align-items: flex-end;
	color: var(--lin);
	margin-block: 0 !important;
}
.voll-hero .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(20, 17, 15, 0.5) 0%, rgba(20, 17, 15, 0.05) 30%, rgba(20, 17, 15, 0.35) 55%, rgba(20, 17, 15, 0.85) 100%) !important;
	opacity: 1 !important;
}
.voll-hero .wp-block-cover__inner-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	color: var(--lin);
}
.voll-hero .wp-block-cover__inner-container > * { margin: 0; }
.voll-hero h1 {
	font-size: var(--wp--preset--font-size--hero);
	line-height: 0.92;
	letter-spacing: -0.01em;
}

@media (max-width: 767px) {
	.voll-hero.wp-block-cover { padding-bottom: 48px; min-height: 640px; }
	.voll-hero .wp-block-cover__inner-container { gap: 20px; }
}

/* --------------------------------------------------------------------------
   Introduction – « Une vision. Une direction. »
   -------------------------------------------------------------------------- */

.voll-intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px var(--gouttiere);
	padding-top: var(--section);
	padding-bottom: clamp(56px, 5.33vw + 35px, 112px);
}
.voll-intro__titre { display: flex; flex-direction: column; gap: 20px; }
.voll-intro__titre h2 { max-width: 560px; }
.voll-intro__texte { display: flex; flex-direction: column; gap: 24px; max-width: 560px; }
.voll-intro__texte > * { margin: 0; }

@media (min-width: 1024px) {
	/* 627 | 24 | 560 | rest — on the 1280 grid */
	.voll-intro { grid-template-columns: minmax(0, 627fr) minmax(0, 560fr) minmax(0, 45fr); }
	.voll-intro__texte { padding-top: 40px; }
}

/* --------------------------------------------------------------------------
   Séparateur tréma
   -------------------------------------------------------------------------- */

.voll-separateur { padding-inline: var(--bord); margin-block: 0 !important; }

/* --------------------------------------------------------------------------
   Signature – planche
   -------------------------------------------------------------------------- */

.voll-signature {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
	padding-top: clamp(56px, 5.33vw + 35px, 112px);
	padding-bottom: var(--section-l);
}
.voll-signature .wp-block-image { margin: 0; }
.voll-signature .wp-block-image img { width: 100%; aspect-ratio: 737 / 553; object-fit: cover; display: block; }
.voll-signature__texte { display: flex; flex-direction: column; gap: 24px; }
.voll-signature__texte > * { margin: 0; }
.voll-signature h2 { font-size: clamp(36px, 1.9vw + 28.6px, 56px); }

@media (min-width: 1024px) {
	.voll-signature { grid-template-columns: minmax(0, 737fr) minmax(0, 410fr); gap: 133px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.voll-signature { gap: 64px; }
}

/* --------------------------------------------------------------------------
   Prestations – giant copper numbers cut by the row rule
   -------------------------------------------------------------------------- */

.voll-prestations {
	padding-top: 0;
	padding-bottom: var(--section);
}
.voll-prestations__entete {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px var(--gouttiere);
	align-items: end;
	margin-bottom: var(--entete-gap);
}
.voll-prestations__entete > * { margin: 0; }
.voll-prestations__entete .voll-entete-section { margin-bottom: 0 !important; }
.voll-prestations__entete .voll-entete-section h2 { max-width: 640px; }

@media (min-width: 1024px) {
	.voll-prestations__entete { grid-template-columns: minmax(0, 836fr) minmax(0, 420fr); }
}

.voll-prestations__liste { display: flex; flex-direction: column; }
.voll-prestations__liste > * { margin: 0; }

.voll-prestation {
	/* 523 px at 1440, 210 px at 390 (Figma) */
	--chiffre: clamp(210px, 29.81vw + 93.7px, 523px);
	--chiffre-h: calc(var(--chiffre) * 0.436);
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--brun-nuit);
	position: relative;
}
.voll-prestation > * { margin: 0; }

/*
 * The cut: the number is pulled up so the top of its tallest glyph meets the row top,
 * then clipped above the row and at the bottom rule. clip-path, not overflow:hidden.
 */
.voll-prestation .voll-chiffre {
	--haut: 0.325em; /* glyph top ≈ 28 px under the row top at 1440 (Figma) */
	font-family: var(--serif);
	font-weight: 300;
	font-size: var(--chiffre);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cuivre);
	white-space: nowrap;
	margin: calc(-1 * var(--haut)) 0 0 -0.022em;
	height: calc(var(--chiffre-h) + var(--haut));
	clip-path: inset(var(--haut) -100vw 0 -100vw);
	/* The cut always sits on the rule below, even when the text makes the row taller */
	align-self: end;
	position: relative;
}
/* Following row's rule is painted above the glyphs: the numbers pass behind the line */
.voll-prestation + .voll-prestation { border-top: 0; }
.voll-prestation + .voll-prestation::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0 0 auto 0;
	height: 1px;
	background: var(--brun-nuit);
}
/* « 04 »: the 4 is optically reduced (≈ 87 %) and raised so its crossbar stays above the cut */
.voll-chiffre__reduit {
	font-size: 0.87em;
	vertical-align: 0.17em;
	letter-spacing: 0;
}
.voll-prestation .voll-chiffre:has(.voll-chiffre__reduit) { --haut: 0.322em; }

.voll-prestation h3 { padding-top: 30px; }
.voll-prestation__texte { display: flex; flex-direction: column; gap: 20px; padding-top: 30px; padding-bottom: 40px; }
.voll-prestation__texte > * { margin: 0; }

@media (min-width: 768px) {
	.voll-prestation {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--gouttiere);
	}
	.voll-prestation .voll-chiffre { grid-row: 1 / span 2; }
}
@media (min-width: 1024px) {
	.voll-prestation {
		grid-template-columns: minmax(0, 410.67fr) minmax(0, 410.67fr) minmax(0, 362.67fr) minmax(0, 48fr);
		min-height: var(--chiffre-h);
	}
	.voll-prestation .voll-chiffre { grid-row: auto; }
}
@media (max-width: 767px) {
	/* Mobile: number first, cut by its own rule, then title and text */
	.voll-prestation { border-top: 0; padding-top: 40px; }
	.voll-prestation:first-child { padding-top: 0; }
	.voll-prestation + .voll-prestation::before { display: none; }
	.voll-prestation .voll-chiffre { align-self: start; }
	/* Rule drawn above the glyphs (a border would be painted under them) */
	.voll-prestation .voll-chiffre::after {
		content: "";
		position: absolute;
		left: 0.022em;
		right: 0;
		bottom: 0;
		height: 1px;
		background: var(--brun-nuit);
	}
	.voll-prestation h3 { padding-top: 20px; }
	.voll-prestation__texte { padding-top: 12px; padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   V/M12 · Projets (2 en décalé) – 7 + 5 columns, second card offset 128
   -------------------------------------------------------------------------- */

.voll-projets { padding-block: var(--section-l); }
.voll-projets .voll-entete-section h2 { max-width: 846px; }

.voll-projets__grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: 64px var(--gouttiere);
	align-items: start;
}
.voll-projets__grille > * { margin: 0; }

.voll-carte-projet { display: flex; flex-direction: column; gap: 20px; }
.voll-carte-projet > * { margin: 0; }
.voll-carte-projet .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.voll-carte-projet .wp-block-heading { line-height: 1.2; letter-spacing: 0; }
.voll-carte-projet .is-style-surtitre { font-size: clamp(14px, 0.57vw + 11.8px, 20px); }
.voll-carte-projet > p:not(.is-style-surtitre) { max-width: 520px; }

@media (min-width: 768px) {
	.voll-projets__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.voll-projets__grille > :nth-child(2) { padding-top: var(--item); }
	.voll-projets__grille .wp-block-image img { aspect-ratio: auto; height: clamp(300px, 32.7vw, 471px); }
	.voll-projets--inverse .voll-projets__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* --------------------------------------------------------------------------
   Projet vedette (pierre + grain)
   -------------------------------------------------------------------------- */

.voll-vedette {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
	padding-block: clamp(64px, 5.33vw + 43px, 120px);
}
.voll-vedette .wp-block-image { margin: 0; }
.voll-vedette .wp-block-image img { width: 100%; aspect-ratio: 680 / 560; object-fit: cover; display: block; box-shadow: var(--ombre-vedette); }
.voll-vedette__texte { display: flex; flex-direction: column; gap: 24px; }
.voll-vedette__texte > * { margin: 0; }
.voll-vedette__texte h2 { max-width: 520px; }
.voll-vedette__texte > p { max-width: 520px; }

@media (min-width: 1024px) {
	.voll-vedette { grid-template-columns: minmax(0, 680fr) minmax(0, 520fr); gap: 80px; }
}

/* Fiche projet: rules between and around rows, label left / value right */
.voll-fiche { margin: 0; }
.voll-fiche table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--meta); line-height: 1.6; }
.voll-fiche td { padding: 14px 0; border: 0; border-top: 1px solid var(--brun-nuit); border-bottom: 1px solid var(--brun-nuit); }
.voll-fiche td:last-child { text-align: right; }

/* --------------------------------------------------------------------------
   Méthode / Zones – three columns
   -------------------------------------------------------------------------- */

.voll-trois-colonnes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px var(--gouttiere);
}
.voll-trois-colonnes > * { margin: 0; }
@media (min-width: 768px) {
	.voll-trois-colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.voll-etape,
.voll-zone { display: flex; flex-direction: column; gap: 16px; }
.voll-etape > *,
.voll-zone > * { margin: 0; }
.voll-etape > p:last-child,
.voll-zone > p:last-child { max-width: 380px; }
.voll-etape .wp-block-heading,
.voll-zone .wp-block-heading { line-height: 1.2; letter-spacing: 0; }
.voll-zone hr.wp-block-separator { width: 100%; border: 0; border-top: 1px solid var(--brun-nuit); opacity: 1; margin: 0; }

.voll-methode .voll-entete-section h2,
.voll-zones .voll-entete-section h2 { max-width: 760px; }

/* --------------------------------------------------------------------------
   Respiration plein cadre
   -------------------------------------------------------------------------- */

.voll-respiration.wp-block-cover {
	min-height: clamp(480px, 54.2vw, 780px);
	padding: 0 var(--bord) clamp(40px, 5.6vw, 80px);
	align-items: flex-end;
	margin-block: 0 !important;
}
.voll-respiration .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(35, 28, 23, 0) 0%, rgba(35, 28, 23, 0.75) 100%) !important;
	opacity: 1 !important;
}
.voll-respiration .wp-block-cover__inner-container {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	align-items: end;
	gap: 24px;
	color: var(--lin);
}
@media (min-width: 1024px) {
	/* Caption sits on the right, on the title's last line (Figma x = 914) */
	.voll-respiration .wp-block-cover__inner-container { grid-template-columns: minmax(0, 834fr) minmax(0, 446fr); }
}
.voll-respiration .wp-block-cover__inner-container > * { margin: 0; }
.voll-respiration h2 {
	font-size: var(--wp--preset--font-size--respiration);
	line-height: 0.9;
	letter-spacing: 0;
}
.voll-legende {
	font-weight: 500;
	font-size: clamp(12px, 0.38vw + 10.5px, 16px);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding-bottom: 14px;
}

/* --------------------------------------------------------------------------
   La fondatrice – image bleeds to the right edge
   -------------------------------------------------------------------------- */

.voll-fondatrice {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
	padding-top: var(--section);
	padding-bottom: var(--section);
}
.voll-fondatrice__texte { display: flex; flex-direction: column; gap: 24px; }
.voll-fondatrice__texte > * { margin: 0; }
.voll-fondatrice__texte > p { max-width: 520px; }
.voll-fondatrice .wp-block-image { margin: 0; }
.voll-fondatrice .wp-block-image img { width: 100%; aspect-ratio: 623 / 760; object-fit: cover; display: block; }

@media (min-width: 1024px) {
	.voll-fondatrice {
		grid-template-columns: minmax(0, 1fr) min(623px, 43.3vw);
		gap: 120px;
		padding-right: 0;
		padding-top: 65px;
	}
}
@media (max-width: 767px) {
	/* Mobile: images full-bleed, text keeps the 20 px margin */
	.voll-fondatrice .wp-block-image { margin-inline: calc(-1 * var(--marge)); }
	.voll-fondatrice .wp-block-image img { box-shadow: none; aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   Call gratuit (olive band)
   -------------------------------------------------------------------------- */

.voll-call {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px 120px;
	align-items: start;
}
.voll-call__titre { display: flex; flex-direction: column; gap: 32px; }
.voll-call__titre > * { margin: 0; }
.voll-call__titre h2 { max-width: 560px; }
.voll-call__reassurance { opacity: 0.85; }
.voll-call__points { display: flex; flex-direction: column; }
.voll-call__points > * { margin: 0; }

.voll-point { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding-block: 24px; }
.voll-point + .voll-point { border-top: 1px solid var(--lin); }
.voll-point > * { margin: 0; }
.voll-point__num,
.voll-point .wp-block-heading {
	font-family: var(--serif);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--etape);
	line-height: 1.2;
	letter-spacing: 0;
}
.voll-point__texte { display: flex; flex-direction: column; gap: 6px; }
.voll-point__texte > * { margin: 0; }
.voll-point__texte > p { font-size: var(--wp--preset--font-size--meta); }

@media (min-width: 1024px) {
	.voll-call { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.voll-call__points { padding-top: 40px; }
}

/* --------------------------------------------------------------------------
   V/M30 · Monogramme (bandeau)
   -------------------------------------------------------------------------- */

.voll-monogramme.wp-block-image {
	margin: 0 !important;
	background: var(--olive);
}
.voll-monogramme.wp-block-image img {
	display: block;
	width: 100%;
	height: clamp(180px, 20.8vw, 300px);
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   Footer – V/Footer · SEO
   -------------------------------------------------------------------------- */

.voll-pied {
	background: var(--brun-nuit);
	color: var(--lin);
	padding: 96px var(--bord) 40px;
	display: flex;
	flex-direction: column;
	gap: 80px;
	margin-block: 0 !important;
	font-size: 15px;
	line-height: 1.5;
}
.voll-pied a { color: inherit; text-decoration: none; }
.voll-pied a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
.voll-pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.voll-pied__colonnes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px var(--gouttiere);
}
.voll-pied__studio { display: flex; flex-direction: column; gap: 20px; }
.voll-pied__studio > * { margin: 0; }
.voll-pied__accroche { font-size: var(--wp--preset--font-size--texte); line-height: 1.6; max-width: 411px; }
.voll-pied__nap { font-style: normal; display: flex; flex-direction: column; gap: 6px; }
.voll-pied__reseaux { display: flex; gap: 24px; }
.voll-pied__reseaux.voll-pied__reseaux { flex-direction: row; }
.voll-pied__colonne { display: flex; flex-direction: column; gap: 16px; }
.voll-pied__colonne > * { margin: 0; }
.voll-pied__titre { color: var(--lin); }

.voll-pied__legal {
	border-top: 1px solid var(--lin);
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
}
.voll-pied__legal > * { margin: 0; }
.voll-pied__legal .voll-menu--liste .voll-menu__liste { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.voll-pied__legal .voll-menu__langues { opacity: 1; }

@media (min-width: 768px) {
	.voll-pied__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Tablet: logo + NAP alone on the first row */
	.voll-pied__studio { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
	.voll-pied__colonnes { grid-template-columns: minmax(0, 410.67fr) minmax(0, 84.67fr) minmax(0, 302fr) minmax(0, 193.33fr) minmax(0, 193.33fr); }
	.voll-pied__studio { grid-column: 1; }
	.voll-pied__colonne--prestations { grid-column: 3; }
}
@media (max-width: 767px) {
	.voll-pied { padding-top: 64px; gap: 48px; }
	/* Mobile: Régions + Le studio side by side */
	.voll-pied__colonnes { grid-template-columns: 1fr 1fr; }
	.voll-pied__studio,
	.voll-pied__colonne--prestations { grid-column: 1 / -1; }
	.voll-pied__legal { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Interior pages: page header + content
   -------------------------------------------------------------------------- */

.voll-page-entete {
	padding: clamp(48px, 4.57vw + 30px, 96px) var(--bord) clamp(40px, 3vw + 28px, 64px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-block: 0 !important;
}
.voll-page-entete > * { margin: 0; }
.voll-page-entete .wp-block-post-title,
.voll-page-entete h1 { font-size: var(--wp--preset--font-size--titre-1); max-width: 980px; }
.voll-page-entete .wp-block-post-excerpt__excerpt,
.voll-page-entete .voll-intro-page { max-width: 640px; margin: 0; }

.voll-contenu {
	padding: 0 var(--bord) var(--section);
	margin-block: 0 !important;
}
.voll-contenu--etroit > * { max-width: 760px; }
.voll-contenu > * + * { margin-top: 24px; }
.voll-contenu :is(h2, h3) { margin-top: 64px; }
.voll-contenu h2 { font-size: clamp(32px, 1.52vw + 26px, 48px); }
.voll-contenu h3 { font-size: var(--wp--preset--font-size--etape); line-height: 1.2; }
.voll-contenu .wp-block-image { margin-block: 48px; }

/* --------------------------------------------------------------------------
   Fade-in (ANIMATIONS.md) – opacity only, block by block, once
   The selector below is mirrored in assets/js/fade.js (TEXT / EXCLUDE).
   -------------------------------------------------------------------------- */

.js-fade :is(.voll-section, .voll-hero, .voll-onload) :is(h1, h2, h3, h4, h5, h6, p, .wp-block-buttons, .wp-block-list, .wp-block-table, .wp-block-quote, .wp-block-post-excerpt, .wp-block-post-terms, .wp-block-post-title):not(:is(figure, .wp-block-buttons, .wp-block-list, .wp-block-table, .wp-block-quote, .wp-block-post-excerpt, .wp-block-post-terms, .voll-menu, .voll-sans-anim, .voll-pied) *):not(.voll-sans-anim):not(.is-in) {
	opacity: 0;
}
.js-fade .is-in {
	opacity: 1;
	transition: opacity var(--fade-duration) var(--fade-ease);
	transition-delay: var(--fade-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
	.js-fade :is(.voll-section, .voll-hero, .voll-onload) * { opacity: 1 !important; transition: none !important; }
}