/* ==========================================================================
   Völl Studio – Prestation pages 01–04 (Figma 202:1044 · 202:1243 · 202:1441 · 202:1648)
   Markup: inc/pages/prestation.php · patterns/page-*.php · patterns/prestation-*.php
   Mobile first. Tablet ≥ 768, desktop layouts ≥ 1024 (12-column 1280 grid).
   Square corners, no overflow:hidden (button shadows), tokens only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: title column (kicker + H2) | text column
   Desktop: title on 5 columns, one empty column, text on 6 (FAQ: 3 | 1 | 8)
   -------------------------------------------------------------------------- */

:is(.voll-prestation-mots, .voll-prestation-comprend, .voll-prestation-bon, .voll-prestation-faq) {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.voll-prestation__titre { display: flex; flex-direction: column; gap: 16px; }
.voll-prestation__titre > * { margin: 0; }
.voll-prestation__texte { display: flex; flex-direction: column; gap: 20px; }
.voll-prestation__texte > * { margin: 0; }

/* H2 48 (« En quelques mots », « La prestation comprend ») */
:is(.voll-prestation-mots, .voll-prestation-comprend) h2 {
	font-size: var(--wp--preset--font-size--titre-3);
	line-height: 1.1;
}
/* H2 40 (« Bon à savoir », FAQ, « Les prestations ») */
:is(.voll-prestation-bon, .voll-prestation-faq, .voll-prestation-cartes) h2 {
	font-size: clamp(30px, 0.95vw + 26.3px, 40px);
	line-height: 1.1;
}

@media (min-width: 1024px) {
	:is(.voll-prestation-mots, .voll-prestation-comprend, .voll-prestation-bon, .voll-prestation-faq) {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gouttiere);
		row-gap: 0;
		align-items: start;
	}
	:is(.voll-prestation-mots, .voll-prestation-comprend, .voll-prestation-bon) > .voll-prestation__titre { grid-column: 1 / span 5; }
	:is(.voll-prestation-mots, .voll-prestation-comprend, .voll-prestation-bon) > .voll-prestation__texte { grid-column: 7 / -1; }
	.voll-prestation-faq > .voll-prestation__titre { grid-column: 1 / span 3; }
	.voll-prestation-faq > .voll-prestation__texte { grid-column: 5 / -1; }
}

/* --------------------------------------------------------------------------
   Hero – kicker, H1, subtitle | intro + CTA (fades on load)
   -------------------------------------------------------------------------- */

.voll-prestation-hero {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-block: var(--wp--preset--spacing--70);
}
.voll-prestation-hero__titre { display: flex; flex-direction: column; gap: 20px; }
.voll-prestation-hero__titre > * { margin: 0; }
.voll-prestation-hero h1 {
	font-size: var(--wp--preset--font-size--titre-1);
	line-height: 1;
}
.voll-prestation-hero__sous-titre {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(22px, 0.57vw + 19.8px, 28px);
	line-height: 1.3;
	color: var(--noyer);
}
.voll-prestation-hero__intro { display: flex; flex-direction: column; gap: 28px; }
.voll-prestation-hero__intro > * { margin: 0; }
.voll-prestation-hero__intro > p {
	font-size: clamp(18px, 0.19vw + 17.3px, 20px);
	line-height: 1.5;
	max-width: 640px;
}

@media (min-width: 1024px) {
	.voll-prestation-hero {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gouttiere);
		align-items: end;
	}
	.voll-prestation-hero__titre { grid-column: 1 / span 7; }
	.voll-prestation-hero__intro { grid-column: 9 / -1; }
}

/* --------------------------------------------------------------------------
   Visuel – full-bleed banner (no shadow, never faded)
   -------------------------------------------------------------------------- */

.voll-prestation-visuel.wp-block-image { margin: 0 !important; }
.voll-prestation-visuel.wp-block-image img {
	display: block;
	width: 100%;
	height: clamp(173px, 44.44vw, 760px);
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   En quelques mots
   -------------------------------------------------------------------------- */

.voll-prestation-mots {
	padding-top: var(--section-l);
	padding-bottom: var(--item);
}

/* --------------------------------------------------------------------------
   La prestation comprend – tréma bullets, rules between items only
   -------------------------------------------------------------------------- */

.voll-prestation-comprend {
	padding-top: 0;
	padding-bottom: var(--item);
}
.voll-prestation-comprend .wp-block-list.is-style-trema {
	display: block;
	margin: 0;
	font-size: clamp(18px, 0.19vw + 17.3px, 20px);
	line-height: 1.5;
}
.voll-prestation-comprend .wp-block-list.is-style-trema > li {
	padding: 18px 0 18px 39px;
}
.voll-prestation-comprend .wp-block-list.is-style-trema > li + li {
	margin-top: 0;
	border-top: 1px solid var(--brun-nuit);
}
.voll-prestation-comprend .wp-block-list.is-style-trema > li::before {
	top: 50%;
	margin-top: -3px;
}
@media (min-width: 1024px) {
	.voll-prestation-comprend .wp-block-list.is-style-trema { line-height: 1.4; }
}

/* --------------------------------------------------------------------------
   Bon à savoir – pierre + grain band (is-style-grain, main.css)
   -------------------------------------------------------------------------- */

.voll-prestation-bon { padding-block: var(--wp--preset--spacing--70); }
.voll-prestation-bon .voll-prestation__texte {
	display: block;
	font-size: clamp(18px, 0.19vw + 17.3px, 20px);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   FAQ – section layout only. The V/FAQ item accordion itself
   (core/details.voll-faq-item) is styled in faq.css / inc/pages/faq.php
   -------------------------------------------------------------------------- */

.voll-prestation-faq { padding-block: var(--section-l); }
.voll-prestation-faq .voll-faq-liste { gap: 0; }


/* --------------------------------------------------------------------------
   Les prestations – four cards, current page in copper without button
   -------------------------------------------------------------------------- */

.voll-prestation-cartes {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 0.76vw + 29px, 40px);
	padding-top: 0;
	padding-bottom: var(--section-l);
}
.voll-prestation-cartes__grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px var(--gouttiere);
}
.voll-prestation-cartes__grille > * { margin: 0; }

.voll-prestation-carte {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--brun-nuit);
}
.voll-prestation-carte > * { margin: 0; }
.voll-prestation-carte.is-actuelle {
	border-top: 2px solid var(--cuivre);
	padding-top: 23px;
}
.voll-prestation-carte .voll-prestation-carte__numero {
	font-weight: 300;
	font-size: clamp(38px, 2.48vw + 28.3px, 64px);
	line-height: 1;
	color: var(--cuivre);
}
.voll-prestation-carte h3 {
	font-size: clamp(24px, 0.38vw + 22.5px, 28px);
	line-height: 1.2;
	letter-spacing: 0;
}
/* Buttons sit on the same line across the row, at least 32 px under the title */
.voll-prestation-carte .wp-block-buttons {
	margin-top: auto;
	padding-top: 16px;
}

@media (min-width: 768px) {
	.voll-prestation-cartes__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (min-width: 1024px) {
	.voll-prestation-cartes__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.voll-prestation-carte { min-height: 257px; }
}