/* Louves: block styles shared by the public site and the editor ("Très grand", "Portes", "Étapes"). */

/* --- Heading "Très grand" ---------------------------------------------------------------------- */
.wp-block-heading.is-style-louves-giant {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 11vw, 11rem);
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: .9;
	text-transform: uppercase;
}

/* --- Columns "Portes": large images that zoom softly on hover, title below ---------------------- */
.is-style-louves-doors .wp-block-image { overflow: hidden; margin-bottom: .75rem; }
.is-style-louves-doors .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 1s var(--wp--custom--transition);
}
.is-style-louves-doors .wp-block-column:hover .wp-block-image img { transform: scale(1.06); }
.is-style-louves-doors .wp-block-heading { margin: 0; }
.is-style-louves-doors .wp-block-heading a { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
	.is-style-louves-doors .wp-block-image img { transition: none; }
}

/* --- Columns "Étapes" ------------------------------------------------------------------------------ */
/* No numbers (Laurent, 2026-10-08): the order of the columns is enough. */

/* Headings inside a page's reading column: same shape, smaller, with room above. */
.wp-block-post-content > h2:not(.is-style-louves-giant) { margin-top: var(--wp--preset--spacing--60); }
.wp-block-post-content > .wp-block-spacer + h2 { margin-top: 0; } /* the spacer already gives the room */
.wp-block-post-content h2:not(.is-style-louves-giant),
.folio-project-others h2 {
	font-size: clamp(1.75rem, 4.5vw, 3.25rem);
	letter-spacing: -.03em;
	line-height: .95;
	text-transform: uppercase;
}

/* --- Home introduction: across the page like the titles, with tight lines. --- */
.louves-intro { line-height: 1.25; letter-spacing: -.01em; }

/* --- Touches drawn by Clarisse Jeghers (assets/motifs, cut from her sheets). Used sparingly. --- */
/* List "Astérisques": her outlined asterisk as bullet, each one turned a little differently. */
.wp-block-list.is-style-louves-asterisks { list-style: none; padding-left: 0; }
.is-style-louves-asterisks > li { position: relative; padding-left: 1.9em; }
.is-style-louves-asterisks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.2em;
	height: 1.2em;
	background: currentColor;
	-webkit-mask: url(motifs/asterisque.svg) center / contain no-repeat;
	mask: url(motifs/asterisque.svg) center / contain no-repeat;
}
.is-style-louves-asterisks > li:nth-child(3n+2)::before { transform: rotate(24deg); }
.is-style-louves-asterisks > li:nth-child(3n)::before { transform: rotate(-16deg); }
/* Heading "Avec étoile": her burst star, small and tilted, stuck like a sticker against the top
   left of the first letter (it follows the title whatever the line breaks). */
.wp-block-heading.is-style-louves-star { position: relative; }
.wp-block-heading.is-style-louves-star::before {
	content: "";
	position: absolute;
	top: -.42em;
	left: -.3em;
	width: .5em;
	height: .42em;
	background: currentColor;
	-webkit-mask: url(motifs/etoile.svg) center / contain no-repeat;
	mask: url(motifs/etoile.svg) center / contain no-repeat;
	transform: rotate(-14deg);
}
/* Buttons: on hover, her burst star slides in before the label with a small turn. At rest, nothing.
   (The form's submit button is an <input>: no pseudo-element, so no star there.) */
.wp-element-button { display: inline-flex; align-items: center; }
.wp-element-button::before {
	content: "";
	width: 0;
	height: 1em;
	margin-right: 0;
	background: currentColor;
	-webkit-mask: url(motifs/etoile.svg) center / contain no-repeat;
	mask: url(motifs/etoile.svg) center / contain no-repeat;
	transform: rotate(-60deg);
	transition: width .35s var(--wp--custom--transition), margin .35s var(--wp--custom--transition), transform .5s var(--wp--custom--transition);
}
.wp-element-button:is(:hover, :focus-visible)::before { width: 1.2em; margin-right: .5em; transform: rotate(0); }
@media (prefers-reduced-motion: reduce) { .wp-element-button::before { transition: none; } }

/* --- The two artists (L'atelier): drawn portrait at the same height, name, short background. --- */
.louves-artists { margin-bottom: var(--wp--preset--spacing--60) !important; }
.wp-block-image.louves-portrait { margin: 0; }
.wp-block-image.louves-portrait img { display: block; width: auto; height: 13rem; }
.louves-artist h3 { margin: 1rem 0 .35rem; }
.louves-artist p { margin: 0; max-width: 30rem; }

/* --- Middle of L'atelier: three short texts, each under a small label and over a photo of their
   work in situ, all photos cut to the same portrait format; Clarisse's eye posed like a sticker. --- */
.louves-trio { margin-top: var(--wp--preset--spacing--70) !important; gap: var(--wp--preset--spacing--40); }
.louves-trio-item { position: relative; }
.wp-block-post-content h2.louves-trio-title { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--small); letter-spacing: .08em; }
.wp-block-image.louves-trio-photo { margin: 0; }
.louves-trio-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.louves-trio-item > p { margin: 1rem 0 0; max-width: 26rem; }
.louves-trio-item .wp-block-image.louves-motif-eye { position: absolute; z-index: 1; top: .75rem; right: -1.25rem; margin: 0; }
.louves-motif-eye img { width: 3.5rem; padding: .35rem; background: var(--wp--preset--color--base); border-radius: 50%; transform: rotate(14deg); }
@media (max-width: 781px) {
	.louves-trio { gap: var(--wp--preset--spacing--50); }
	.louves-trio-item .wp-block-image.louves-motif-eye { right: -.5rem; }
	.louves-motif-eye img { width: 2.75rem; }
}

/* --- End of L'atelier: title in a narrow left column, content on the right ("louves-split"). --- */
.louves-split { margin-top: var(--wp--preset--spacing--60) !important; }
.wp-block-post-content .louves-split h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
/* Services as rows: the name larger, its description quieter, a thin rule between rows. */
.louves-rows-lead { margin: 0 0 var(--wp--preset--spacing--40); max-width: 30rem; line-height: 1.35; }
.wp-block-list.louves-rows { list-style: none; padding-left: 0; }
.louves-rows > li { padding-block: 1rem; border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted); }
.louves-rows > li:first-child { border-top: 0; padding-top: 0; }
.louves-rows > li + li { margin-top: 0; }
.louves-rows > li strong { display: block; margin-bottom: .2rem; color: var(--wp--preset--color--contrast); font-size: 1.375rem; font-weight: 500; line-height: 1.2; }
/* Clients: a paper band across the page, the names as one large line of text, the heart by the title. */
.louves-band { margin-top: var(--wp--preset--spacing--70) !important; padding-block: var(--wp--preset--spacing--60); }
.louves-band-title { gap: 1rem; }
.louves-band-title h2 { margin: 0 !important; font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.louves-band-title .wp-block-image.louves-motif { margin: 0; flex: none; }
.wp-block-list.louves-names { display: flex; flex-wrap: wrap; gap: .1em .9em; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--x-large); line-height: 1.15; }
.louves-names > li, .louves-names > li + li { margin: 0; }
/* Contact: a framed card, the lit match overlapping its top right corner. */
.louves-contact { position: relative; margin-top: var(--wp--preset--spacing--70) !important; padding: var(--wp--preset--spacing--50); border: 1px solid var(--wp--preset--color--contrast); }
.louves-contact h2 { margin: 0 0 var(--wp--preset--spacing--20); font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.louves-contact-grid { gap: var(--wp--preset--spacing--50); margin: 0; }
.louves-contact-grid p { max-width: 28rem; }
.louves-contact-ways { padding-top: .5rem; }
.louves-contact-ways p { margin: 0; }
.louves-contact-ways .louves-label + p { margin-bottom: var(--wp--preset--spacing--30); }
.louves-label { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: .08em; }
.louves-email { overflow-wrap: anywhere; }
.louves-contact .wp-block-image.louves-motif-xl { position: absolute; top: -3.5rem; right: 2rem; margin: 0; }
/* Clarisse's drawings under the titles: each its own size, slightly offset, like pinned up. */
.wp-block-image.louves-motif { margin: var(--wp--preset--spacing--40) 0 0; }
.louves-motif img { display: block; height: auto; }
.louves-motif-l img { width: min(100%, 17rem); }
.louves-motif-m img { width: min(100%, 9rem); margin-left: 2.5rem; transform: rotate(-8deg); }
.louves-motif-s img { width: min(100%, 6.5rem); margin-left: 1rem; transform: rotate(6deg); }
.louves-band-title .louves-motif-s img { width: 5rem; margin: 0; transform: rotate(145deg); }
.louves-motif-xl img { width: 7.5rem; padding: .25rem; background: var(--wp--preset--color--base); transform: rotate(-12deg); }
@media (max-width: 781px) {
	.louves-motif-l img { width: 11rem; }
	.louves-motif-m img { width: 6rem; }
	.louves-motif-s img { width: 4.5rem; }
	.louves-band-title .louves-motif-s img { width: 3.25rem; }
	.louves-motif-xl img { width: 5rem; }
	.louves-contact .wp-block-image.louves-motif-xl { top: -2.5rem; right: 1rem; }
}

/* --- Home: final call "Vous avez un mur ?" (Louves admin): paper band, photo with Clarisse's star
   posed on its corner, the phrase at a reasonable size, a short text and the button. --- */
.louves-cta { padding-block: var(--wp--preset--spacing--70); }
.louves-cta .wp-block-columns { gap: var(--wp--preset--spacing--60); margin: 0; }
.wp-block-post-content h2.louves-cta-title { margin: 0 0 var(--wp--preset--spacing--30); font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: .95; }
.louves-cta p { max-width: 30rem; margin: 0 0 var(--wp--preset--spacing--40); }
.wp-block-image.louves-cta-photo { position: relative; margin: 0; max-width: 26rem; }
.louves-cta .wp-block-buttons { margin: 0; }
.louves-cta-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.louves-cta-photo::after {
	content: ""; position: absolute; top: -2rem; right: -2rem; width: 5.5rem; height: 5.5rem;
	background: var(--wp--preset--color--contrast);
	-webkit-mask: url(motifs/etoile.svg) center / contain no-repeat; mask: url(motifs/etoile.svg) center / contain no-repeat;
	transform: rotate(12deg);
}
@media (max-width: 781px) {
	.wp-block-image.louves-cta-photo { max-width: 15rem; }
	.louves-cta-photo::after { width: 3.5rem; height: 3.5rem; top: -1.25rem; right: -1.25rem; }
}

/* --- Columns "Étapes": each step under a black rule, with one of Clarisse's drawings posed at its
   top right like a sticker (no numbers: Laurent's rule). --- */
.is-style-louves-steps { gap: var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--50) !important; }
.is-style-louves-steps > .wp-block-column { position: relative; padding-top: var(--wp--preset--spacing--30); border-top: 2px solid var(--wp--preset--color--contrast); }
.is-style-louves-steps h3 { margin: 0 3.5rem .5rem 0; font-size: 1.375rem; font-weight: 500; line-height: 1.2; }
.is-style-louves-steps p { margin: 0; max-width: 24rem; color: var(--wp--preset--color--muted); }
.is-style-louves-steps > .wp-block-column::after {
	content: ""; position: absolute; top: -1.6rem; right: .5rem; width: 3.25rem; height: 3.25rem;
	background: var(--wp--preset--color--contrast);
	-webkit-mask: var(--louves-step-motif) center / contain no-repeat; mask: var(--louves-step-motif) center / contain no-repeat;
	transform: rotate(var(--louves-step-tilt));
}
.is-style-louves-steps > .wp-block-column:nth-child(3n+1) { --louves-step-motif: url(motifs/coeur.svg); --louves-step-tilt: 145deg; }
.is-style-louves-steps > .wp-block-column:nth-child(3n+2) { --louves-step-motif: url(motifs/oeil.svg); --louves-step-tilt: -8deg; }
.is-style-louves-steps > .wp-block-column:nth-child(3n) { --louves-step-motif: url(motifs/etoile.svg); --louves-step-tilt: 10deg; }
/* A second row of steps (Comment ça marche) gets three other drawings. */
.is-style-louves-steps + .is-style-louves-steps > .wp-block-column:nth-child(1) { --louves-step-motif: url(motifs/asterisque.svg); --louves-step-tilt: 12deg; }
.is-style-louves-steps + .is-style-louves-steps > .wp-block-column:nth-child(2) { --louves-step-motif: url(motifs/allumette.svg); --louves-step-tilt: -10deg; }
.is-style-louves-steps + .is-style-louves-steps > .wp-block-column:nth-child(3) { --louves-step-motif: url(motifs/branche.svg); --louves-step-tilt: -6deg; }
.is-style-louves-steps + .is-style-louves-steps { margin-top: var(--wp--preset--spacing--60) !important; }
@media (max-width: 781px) {
	.is-style-louves-steps { gap: var(--wp--preset--spacing--60); }
}
/* The final band touches the footer: no blank strip between them. */
main:has(> .wp-block-post-content > .louves-cta:last-child) { margin-bottom: 0 !important; }
.wp-block-post-content > .louves-cta:last-child { margin-bottom: 0; }
main:has(> .wp-block-post-content > .louves-cta:last-child) + * { margin-top: 0 !important; }

/* --- Comment ça marche: the artists at work, beside a line from their interview. --- */
.louves-onsite { margin-top: var(--wp--preset--spacing--70) !important; gap: var(--wp--preset--spacing--60); }
.louves-onsite figure { margin: 0; max-width: 34rem; }
.louves-onsite figcaption { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); text-align: left; }
.louves-onsite p { max-width: 32rem; }
.louves-onsite p.has-large-font-size { margin: 0 0 .75rem; line-height: 1.3; }
.louves-onsite p:not(.has-large-font-size) { margin: 0; color: var(--wp--preset--color--muted); }
.louves-split .wp-block-details:first-child { margin-top: 0; }