/* =========================================================
   Mama Luna — design tokens
   ========================================================= */
:root {
	--miel: #F2CA7E;
	--sable: #F2D6A2;
	--terre: #D98C5F;
	--brique: #8C4D3F;
	--brique-encre: #7A3F33;
	--lin: #F2F2F2;
	--blanc: #FFFFFF;
	--encre: #3D2A24;
	--encre-chaud: #4A2B23;
	--hero-scrim: linear-gradient(180deg, rgba(26,14,10,.62) 0%, rgba(26,14,10,.42) 38%, rgba(26,14,10,.5) 100%);
	--hero-scrim-strong: linear-gradient(180deg, rgba(26,14,10,.6) 0%, rgba(26,14,10,.35) 38%, rgba(26,14,10,.72) 100%);

	--gutter: 48px;
	--gutter-narrow: 44px;
	--rhythm: 94px;
	--font-serif: 'Playfair Display', Georgia, serif;
	--font-sans: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--lin);
	color: var(--encre);
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.95;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; }
p, figure { margin: 0; }

/*
 * Base heading scale — the fallback for any h1–h6 typed into block-editor
 * content (the biography page body, any future WYSIWYG field) that isn't
 * wrapped in one of the theme's own heading classes. Every purpose-built
 * heading elsewhere (.hero__title, .section-title, .page-title-band__title,
 * card titles, etc.) is class-scoped and so out-specifies these bare
 * element selectors — this only ever shows up where nothing more specific
 * is set.
 */
h1 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
	color: var(--encre);
	margin: 0 0 .5em;
}
h2 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--terre);
	margin: 1.2em 0 .5em;
}
h3 {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--miel);
	margin: 1.1em 0 .4em;
}
h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.3;
	color: var(--brique-encre);
	margin: 1em 0 .4em;
}
h5 {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brique-encre);
	margin: 1.4em 0 .5em;
}
h6 {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--miel);
	margin: 1.4em 0 .5em;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }

:focus-visible {
	outline: 2px solid var(--brique-encre);
	outline-offset: 3px;
}
.is-on-dark :focus-visible,
.curtain :focus-visible {
	outline-color: #F7F2EA;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--brique);
	color: #fff;
	padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

.container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.container--narrow { padding-left: var(--gutter-narrow); padding-right: var(--gutter-narrow); }
.measure-1100 { max-width: 1100px; margin: 0 auto; }
.measure-900 { max-width: 900px; margin: 0 auto; }
.measure-760 { max-width: 760px; margin: 0 auto; }

/* =========================================================
   Typography
   ========================================================= */
.eyebrow {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 10px;
	line-height: 1;
	letter-spacing: .34em;
	text-transform: uppercase;
}
.eyebrow--hero { letter-spacing: .42em; color: var(--miel); }

.moon-eyebrow { display: inline-block; vertical-align: -2px; overflow: visible; }

.section-title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: inherit;
	margin: 10px 0 0;
}

.first-italic em,
.first-italic i { font-style: italic; }

.pull-quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 23px;
	line-height: 1.55;
}

.body-copy p { margin: 0 0 1.4em; }
.body-copy p:last-child { margin-bottom: 0; }

/* Block-editor bulleted lists in real content (À propos, Biographie, Avec
   les publics, Mentions légales, création synopsis) — a small solid square
   marker, echoing the offset-rectangle accent used elsewhere on the site,
   rather than the browser default disc. */
.body-copy ul,
.publics-page-body__content ul,
.bio-layout__body ul {
	margin: 0 0 1.4em;
	padding: 0;
	list-style: none;
}
.body-copy ul:last-child,
.publics-page-body__content ul:last-child,
.bio-layout__body ul:last-child { margin-bottom: 0; }
.body-copy ul li,
.publics-page-body__content ul li,
.bio-layout__body ul li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 6px;
}
.body-copy ul li::before,
.publics-page-body__content ul li::before,
.bio-layout__body ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.7em;
	width: 7px;
	height: 7px;
	background: var(--terre);
}

.btn {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 17px 30px;
	text-align: center;
	border: 1px solid transparent;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn--solid {
	background: var(--brique);
	color: #FBF3E7;
}
.btn--solid:hover,
.btn--solid:focus-visible { background: var(--brique-encre); }

.btn--outline {
	background: transparent;
	border-color: var(--brique);
	color: var(--brique-encre);
}
.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--brique);
	color: #FBF3E7;
}

.text-link {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--brique-encre);
	border-bottom: 1px solid rgba(122,63,51,.4);
	padding-bottom: 4px;
	transition: border-color 200ms ease;
}
.text-link:hover,
.text-link:focus-visible { border-color: rgba(122,63,51,1); }

.caption {
	font-family: var(--font-sans);
	font-style: italic;
	font-weight: 300;
	font-size: 12.5px;
	line-height: 1.7;
	color: rgba(61,42,36,.55);
}

.field-label {
	display: block;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(61,42,36,.7);
	margin-bottom: 10px;
}

/* =========================================================
   Header / navigation (nav 1c — curtain menu)
   ========================================================= */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	padding: 28px 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	transition: background-color 200ms ease, border-color 200ms ease;
}
.site-header,
.site-header__wordmark,
.lang-switch,
.menu-toggle {
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.is-front-page .site-header { background: transparent; }
.is-inner-page .site-header,
.is-scrolled .site-header {
	background: var(--blanc);
	border-bottom: 1px solid rgba(61,42,36,.1);
}
/* Inner pages that open on a dark-enough hero/title-band photo — création
   pages (.hero--creation always has its own dark scrim) and pages whose
   title band picked "Texte clair" for its own photo — get the same
   transparent-over-photo treatment as the homepage instead of a solid bar
   from the very top. Pages with no photo, or a light-styled one, keep the
   safer solid header (light text wouldn't read against that background). */
.is-inner-page:has(.hero--creation, .page-title-band--text-light):not(.is-scrolled):not(.menu-open) .site-header {
	background: transparent;
	border-bottom-color: transparent;
}

.site-header__wordmark {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #F2F2F2;
}
.is-inner-page .site-header__wordmark,
.is-scrolled .site-header__wordmark,
.menu-open .site-header__wordmark { color: var(--brique); }
.is-inner-page:has(.hero--creation, .page-title-band--text-light):not(.is-scrolled):not(.menu-open) .site-header__wordmark { color: #F2F2F2; }

.site-header__icon {
	flex: none;
	display: inline-block;
	width: 21px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-image: url(../images/mama-luna-logo-white.png);
	mask-image: url(../images/mama-luna-logo-white.png);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: 22px;
}

.lang-switch {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .1em;
	color: #F2F2F2;
}
.is-inner-page .lang-switch,
.is-scrolled .lang-switch,
.menu-open .lang-switch { color: var(--brique-encre); }
.is-inner-page:has(.hero--creation, .page-title-band--text-light):not(.is-scrolled):not(.menu-open) .lang-switch { color: #F2F2F2; }
.lang-switch a { opacity: .55; transition: opacity 150ms ease; }
.lang-switch a.is-active,
.lang-switch a:hover,
.lang-switch a:focus-visible { opacity: 1; }
.lang-switch span { opacity: .4; }

.menu-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(242,242,242,.55);
	border-radius: 100px;
	padding: 9px 16px;
	color: #F2F2F2;
	min-height: 44px;
}
.is-inner-page .menu-toggle,
.is-scrolled .menu-toggle,
.menu-open .menu-toggle {
	border-color: rgba(140,77,63,.4);
	color: var(--brique-encre);
}
.is-inner-page:has(.hero--creation, .page-title-band--text-light):not(.is-scrolled):not(.menu-open) .menu-toggle {
	border-color: rgba(242,242,242,.55);
	color: #F2F2F2;
}
.menu-toggle__bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 16px;
}
.menu-toggle__bars span {
	display: block;
	width: 16px;
	height: 1px;
	background: currentColor;
	transition: transform 200ms ease, opacity 200ms ease;
}
.menu-toggle__label {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.menu-toggle__close { display: none; width: 14px; height: 14px; position: relative; }
.menu-toggle__close span {
	position: absolute;
	top: 50%; left: 0;
	width: 14px;
	height: 1px;
	background: currentColor;
}
.menu-toggle__close span:first-child { transform: rotate(45deg); }
.menu-toggle__close span:last-child { transform: rotate(-45deg); }

.menu-open .menu-toggle__bars,
.menu-open .menu-toggle__open-label { display: none; }
.menu-open .menu-toggle__close { display: block; }
.menu-open .menu-toggle__close-label { display: inline; }
.menu-toggle__close-label { display: none; }

.curtain {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: linear-gradient(180deg, #F2D6A2 0%, #F2CA7E 72%, #F2CA7E 100%);
	box-shadow: 0 24px 60px rgba(26,14,10,.35);
	transform: translateY(-100%);
	transition: transform 520ms cubic-bezier(.22,1,.36,1);
	overflow-y: auto;
	padding: 120px 44px 60px;
}
.menu-open .curtain { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.curtain { transition: opacity 220ms ease; opacity: 0; transform: none; visibility: hidden; }
	.menu-open .curtain { opacity: 1; visibility: visible; }
}

.curtain__grid {
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 330px;
	gap: 60px;
}

.curtain__list { list-style: none; }
.curtain__list-item {
	padding: 14px 0;
	border-bottom: 1px solid rgba(140,77,63,.22);
	display: flex;
	align-items: baseline;
	gap: 18px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 360ms ease, transform 360ms ease;
}
.menu-open .curtain__list-item { opacity: 1; transform: translateY(0); }
.menu-open .curtain__list-item:nth-child(1) { transition-delay: 40ms; }
.menu-open .curtain__list-item:nth-child(2) { transition-delay: 80ms; }
.menu-open .curtain__list-item:nth-child(3) { transition-delay: 120ms; }
.menu-open .curtain__list-item:nth-child(4) { transition-delay: 160ms; }

.curtain__list-number {
	width: 26px;
	flex: none;
	align-self: center;
	display: flex;
	color: rgba(107,52,41,.9);
}
.curtain__list-link {
	display: block;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.08;
}
/*
 * Roman and italic are stacked in the same grid cell and cross-fade on
 * hover, rather than switching font-style directly — italic glyphs are a
 * different width than roman ones, so toggling font-style on the single
 * line visibly grows/shifts the text. Stacking both (grid sizes the cell to
 * the wider of the two, up front) keeps the row width constant.
 */
.curtain__list-link-stack {
	display: grid;
}
.curtain__list-link-roman,
.curtain__list-link-italic {
	grid-area: 1 / 1;
	transition: opacity 200ms ease, color 200ms ease;
}
.curtain__list-link-roman { color: rgba(74,43,35,.72); }
.curtain__list-link-italic {
	font-style: italic;
	color: #4A2B23;
	opacity: 0;
}
.curtain__list-item:hover .curtain__list-link-roman,
.curtain__list-item:focus-within .curtain__list-link-roman,
.curtain__list-item.is-active .curtain__list-link-roman {
	opacity: 0;
}
.curtain__list-item:hover .curtain__list-link-italic,
.curtain__list-item:focus-within .curtain__list-link-italic,
.curtain__list-item.is-active .curtain__list-link-italic {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.curtain__list-link-roman,
	.curtain__list-link-italic { transition: none; }
}

.curtain__secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 26px;
}
.curtain__secondary li { list-style: none; }
.curtain__secondary a {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(74,43,35,.6);
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease, letter-spacing 200ms ease;
}
.curtain__secondary a:hover,
.curtain__secondary a:focus-visible {
	color: #2A1810;
	border-bottom-color: rgba(42,24,16,.55);
	letter-spacing: .26em;
}
@media (prefers-reduced-motion: reduce) {
	.curtain__secondary a { transition: color 150ms ease; }
	.curtain__secondary a:hover,
	.curtain__secondary a:focus-visible { letter-spacing: .2em; }
}

.curtain__preview {
	width: 330px;
}
.curtain__preview-image {
	background: rgba(140,77,63,.1);
	border: 1px solid rgba(140,77,63,.2);
	height: 250px;
	background-size: cover;
	background-position: center;
	transition: opacity 200ms ease;
}
.curtain__preview-caption {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 13px;
	color: rgba(74,43,35,.85);
	margin-top: 16px;
}

.curtain__lang {
	display: none;
}

body.menu-open { overflow: hidden; }

@media (max-width: 860px) {
	.curtain { padding: 110px 22px 40px; }
	.curtain__grid { grid-template-columns: 1fr; }
	.curtain__preview { display: none; }
	.curtain__list-link { font-size: 32px; }
	.curtain__secondary { flex-direction: column; gap: 14px; position: absolute; left: 22px; bottom: 70px; }
	.curtain__lang {
		display: flex;
		gap: 8px;
		position: absolute;
		left: 22px;
		bottom: 30px;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 10px;
	}
	.curtain__lang a { opacity: .55; }
	.curtain__lang a.is-active { opacity: 1; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
	position: relative;
	height: 100vh;
	height: 100dvh;
	min-height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #F7F2EA;
}
.hero--creation { align-items: flex-end; }
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 40%;
}
.hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--hero-scrim);
}
.hero--creation .hero__media::after { background: var(--hero-scrim-strong); }

.hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 900px;
}
.hero--creation .hero__content {
	text-align: center;
	max-width: 900px;
	padding-bottom: 60px;
}

.hero__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 82px;
	line-height: 1.02;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: inherit;
	margin: 18px 0 0;
}
.hero--creation .hero__title {
	font-size: 68px;
	line-height: 1.04;
	text-transform: none;
	max-width: 28ch;
	margin: 14px auto 0;
}

.hero__title-accent { color: var(--miel); }
.hero__title-sub {
	display: inline-block;
	font-size: .72em;
	letter-spacing: .02em;
	line-height: 1.25;
}

.hero__rule {
	width: 1px;
	height: 46px;
	margin: 40px auto 0;
	background: linear-gradient(180deg, var(--miel), transparent);
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 34px;
	margin-top: 22px;
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(247,242,234,.85);
}

/* =========================================================
   Section shell + heading row
   ========================================================= */
.section {
	padding: var(--rhythm) 0;
}
.section--white { background: var(--blanc); }
.section--lin { background: var(--lin); }
.section--sable { background: var(--sable); color: var(--encre-chaud); }
.section--miel { background: var(--miel); color: var(--encre-chaud); }
.section--encre { background: var(--encre); color: #F2F2F2; }

.section__heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 56px;
	flex-wrap: wrap;
}
.section__heading-intro {
	max-width: 66ch;
	font-size: 16.5px;
	line-height: 1.85;
	text-wrap: pretty;
}
/* Carousel variant: the arrows take the heading row's right side, so the
   intro drops below it and tucks back up under the title. */
.section__heading-intro--below { margin: -40px 0 40px; }

/* =========================================================
   Créations
   ========================================================= */
.creations-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.creation-card {
	display: block;
	color: inherit;
}
.creation-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--sable);
}
.creation-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
}
.creation-card:hover .creation-card__media img,
.creation-card:focus-visible .creation-card__media img {
	transform: scale(1.03);
}
.creation-card__placeholder-label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(61,42,36,.6);
}

.creation-card__title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
}
.creation-card__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
}
/* Roman and italic stacked in the same grid cell, cross-fading on hover —
   same technique as .curtain__list-link-stack, so the title doesn't
   grow/shift when italic glyphs run a different width than roman. */
.creation-card__title-stack { display: grid; }
.creation-card__title-roman,
.creation-card__title-italic {
	grid-area: 1 / 1;
	transition: opacity 200ms ease;
}
.creation-card__title-italic {
	font-style: italic;
	opacity: 0;
}
.creation-card:hover .creation-card__title-roman,
.creation-card:focus-visible .creation-card__title-roman {
	opacity: 0;
}
.creation-card:hover .creation-card__title-italic,
.creation-card:focus-visible .creation-card__title-italic {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.creation-card__title-roman,
	.creation-card__title-italic { transition: none; }
}
.creation-card__year {
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--brique-encre);
	white-space: nowrap;
}
.creation-card__desc {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 13.5px;
	line-height: 1.8;
	margin-top: 10px;
	color: rgba(61,42,36,.85);
}
.creation-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 14px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--brique-encre);
}
.creation-card__cta-arrow { transition: transform 200ms ease; display: inline-block; }
.creation-card:hover .creation-card__cta-arrow,
.creation-card:focus-visible .creation-card__cta-arrow { transform: translateX(4px); }

/* Carousel (4+ créations, or always <=860px) */
.creations-scroller-wrap { position: relative; }
.creations-arrows { display: flex; gap: 12px; }
.creations-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(61,42,36,.25);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--encre);
	opacity: .35;
	transition: opacity 200ms ease, border-color 200ms ease;
}
.creations-arrow[data-active="true"] {
	border-color: var(--brique);
	opacity: 1;
}
.creations-arrow:disabled { cursor: default; }

.creations-scroller {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	margin: 0 calc(var(--gutter) * -1);
	padding: 0 var(--gutter) 4px;
}
.creations-scroller::-webkit-scrollbar { display: none; }
.creations-scroller .creation-card {
	flex: 0 0 318px;
	scroll-snap-align: start;
}

.creations-progress {
	position: relative;
	height: 2px;
	background: rgba(61,42,36,.14);
	margin-top: 40px;
}
.creations-progress__thumb {
	position: absolute;
	top: 0; left: 0;
	height: 2px;
	background: var(--brique);
	width: 30%;
	transition: transform 150ms ease, width 150ms ease;
}

.creations-scroller-wrap { display: none; }
.is-carousel .creations-grid { display: none; }
.is-carousel .creations-scroller-wrap { display: block; }

@media (max-width: 860px) {
	.creations-grid { display: none; }
	.creations-scroller-wrap { display: block; }
	.creations-scroller { gap: 16px; }
	.creations-scroller .creation-card { flex-basis: 250px; }
	.creations-arrows { display: none; }
}

/* =========================================================
   Image accent frame — thin offset outline behind a photo, colour
   tuned per background. Used on À propos, Fondatrice and Avec les
   publics (not the créations cards).
   ========================================================= */
.accent-frame { position: relative; align-self: start; }
.accent-frame::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 18px;
	width: 100%;
	height: 100%;
	border: 1.5px solid var(--accent-color, var(--terre));
	pointer-events: none;
}
.accent-frame img { position: relative; z-index: 1; }
.accent-frame--terre { --accent-color: var(--terre); }
.accent-frame--brique { --accent-color: var(--brique); }
.accent-frame--brique-encre { --accent-color: var(--brique-encre); }

/* =========================================================
   À propos
   ========================================================= */
.a-propos {
	display: grid;
	grid-template-columns: minmax(0,1fr) 380px;
	gap: 70px;
	align-items: start;
}
.a-propos__text { max-width: 700px; font-size: 16px; line-height: 1.95; }
.a-propos__text + .btn { margin-top: 30px; }
.a-propos__image img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; }
.a-propos__image .caption { margin-top: 14px; }

.fondatrice {
	display: grid;
	grid-template-columns: 420px minmax(0,1fr);
	gap: 70px;
	align-items: start;
}
.fondatrice__portrait { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.fondatrice__name {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 44px;
	color: var(--encre-chaud);
	margin: 22px 0 26px;
}
.fondatrice__text p { font-size: 16px; line-height: 1.9; color: rgba(61,42,36,.85); }
.fondatrice__link { margin-top: 28px; display: inline-block; }

/* =========================================================
   Avec les publics (home section)
   ========================================================= */
.publics-home {
	display: grid;
	grid-template-columns: 520px minmax(0,1fr);
	gap: 110px;
	align-items: center;
}
.publics-home__images {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.publics-home__images img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }
.publics-home__images > *:nth-child(2) { margin-top: 38px; }
.publics-home__text { max-width: 48ch; font-size: 16px; line-height: 1.95; }
.publics-home__text .btn { margin-top: 26px; }

/* =========================================================
   Contact
   ========================================================= */
.contact-split {
	display: flex;
	align-items: stretch;
	background: var(--lin);
}
.contact-split__media {
	flex: 0 0 460px;
	position: relative;
	overflow: hidden;
}
.contact-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.contact-split__panel {
	flex: 1;
	box-sizing: border-box;
	padding: var(--rhythm) var(--gutter);
	min-width: 0;
	display: flex;
	justify-content: center;
}
.contact-split__inner { width: 100%; max-width: 640px; }
.contact-form { max-width: 640px; }
.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.contact-form .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}
.contact-form .wpforms-field { flex: 1 1 100%; padding: 0 0 22px; margin: 0 0 4px; }
.contact-form .wpforms-field:nth-child(1),
.contact-form .wpforms-field:nth-child(2) { flex: 1 1 calc(50% - 12px); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(61,42,36,.28) !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	padding: 6px 0 10px !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	color: var(--encre) !important;
}
.contact-form textarea { height: 96px !important; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none !important; border-color: var(--brique-encre) !important; }
.contact-form .wpforms-error { border-color: var(--brique-encre) !important; }
.contact-form .wpforms-error-container { color: var(--brique-encre); font-size: 12px; margin-top: 6px; }
.contact-form .wpforms-submit-container { margin-top: 12px; }
.contact-form button[type="submit"],
.contact-form .wpforms-submit {
	display: inline-block !important;
	font-family: var(--font-sans) !important;
	font-weight: 600 !important;
	font-size: 10.5px !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	padding: 17px 30px !important;
	background: var(--brique) !important;
	color: #FBF3E7 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: background-color 200ms ease;
}
.contact-form button[type="submit"]:hover,
.contact-form .wpforms-submit:hover { background: var(--brique-encre) !important; }
.contact-form .wpforms-field-label { font-family: var(--font-sans) !important; font-weight: 400 !important; font-size: 9.5px !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: rgba(61,42,36,.7) !important; margin-bottom: 10px !important; }
.contact-form .wpforms-required-label { display: none !important; }
.wpforms-confirmation-container-full {
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--encre);
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

.contact-side {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	margin-top: 48px;
	padding-top: 34px;
	border-top: 1px solid rgba(61,42,36,.14);
}
.contact-side__value { font-family: var(--font-serif); font-size: 18px; margin-top: 8px; }
.contact-side__lines { font-size: 14px; line-height: 1.8; margin-top: 8px; }
.contact-side__socials { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.contact-side__socials a,
.contact-side__socials a:visited {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--encre);
}
.contact-side__socials a:hover,
.contact-side__socials a:focus-visible { color: var(--brique-encre); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
	background: var(--encre);
	color: rgba(247,242,234,.75);
	padding: 64px 44px 32px;
}
.site-footer__inner {
	max-width: 1360px;
	margin: 0 auto;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 40px;
}
.site-footer__brand {
	display: flex;
	align-items: center;
	justify-content: center;
}
.site-footer__wordmark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 23px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--miel);
	text-align: center;
}
.site-footer__icon {
	flex: none;
	display: inline-block;
	width: 112px;
	height: 95px;
	background-color: var(--miel);
	-webkit-mask-image: url(../images/mama-luna-logo-white.png);
	mask-image: url(../images/mama-luna-logo-white.png);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.site-footer__head {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--miel);
	margin: 0 0 20px;
}
.site-footer__link {
	display: block;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: .01em;
	color: rgba(247,242,234,.8);
	margin-bottom: 13px;
	transition: color 200ms ease;
}
.site-footer__link:hover,
.site-footer__link:focus-visible { color: var(--miel); font-style: italic; }
.site-footer__bottom {
	max-width: 1360px;
	margin: 36px auto 0;
	border-top: 1px solid rgba(247,242,234,.14);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(247,242,234,.75);
}
.site-footer__credit { color: rgba(247,242,234,.5); }

@media (max-width: 640px) {
	.site-footer { padding: 56px 24px 28px; }
	.site-footer__grid {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 30px;
	}
	.site-footer__wordmark { font-size: 17px; gap: 14px; }
	.site-footer__icon { width: 64px; height: 54px; }
	.site-footer__head { display: none; }
	.site-footer__col {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.site-footer__link {
		display: inline-flex;
		position: relative;
		margin: 0;
		padding: 0 12px;
		font-size: 13px;
	}
	.site-footer__link:not(:last-child)::after {
		content: "·";
		position: absolute;
		right: -1px;
		opacity: .35;
	}
	.site-footer__col--suivre .site-footer__link {
		font-family: var(--font-sans);
		font-size: 11px;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: rgba(247,242,234,.5);
	}
	.site-footer__col--suivre .site-footer__link::after { display: none; }
	.site-footer__bottom { text-align: center; }
}

/* =========================================================
   Création single
   ========================================================= */
.creation-intro { padding: var(--rhythm) 0 0; }
.creation-intro .pull-quote { max-width: 34ch; }
/* No accroche to fill that top padding's worth of breathing room — the
   synopsis can start noticeably sooner below the hero. */
.creation-intro--no-quote { padding-top: 64px; }
.creation-intro--no-quote .creation-body { padding-top: 0; }
/* .creation-intro's top padding assumes it's opening the page right below
   the hero — right when a Gallery block comes first instead, .gallery-band
   already supplies its own bottom padding, so stack a small gap here
   instead of doubling up on hero-sized spacing (matches the ~56px gap
   .creation-intro + .gallery-band already gets in the reverse order). */
.gallery-band:has(+ .creation-intro) { padding-bottom: 0; }
.gallery-band + .creation-intro { padding-top: 56px; }
/* A trailing .creation-body__extra (no distribution-panel, so no need for
   the fuller 56px breathing room the synopsis+aside row gets) sits closer
   to the gallery above it than the synopsis normally does. */
.gallery-band + .creation-intro:has(.creation-body__extra) { padding-top: 24px; }
.gallery-band + .creation-intro .creation-body,
.gallery-band + .creation-intro .creation-body__extra { padding-top: 0; }

.creation-body {
	display: grid;
	grid-template-columns: minmax(0,1fr) 300px;
	gap: 60px;
	padding-top: 56px;
	align-items: start;
}
.creation-body__synopsis { font-size: 16px; line-height: 1.95; }

/* A second text segment — editor placed content after a Gallery block that
   already broke out full-width above, so there's no distribution-panel to
   sit next to here. The column itself runs the full container width (so a
   separator or embed can span/center properly); prose children get their
   own narrower measure so paragraphs and headings stay readable. */
.creation-body__extra {
	padding: 0 0 56px;
	font-size: 16px;
	line-height: 1.95;
}
.creation-body__extra > p,
.creation-body__extra > h2,
.creation-body__extra > h3,
.creation-body__extra > h4,
.creation-body__extra > ul,
.creation-body__extra > ol {
	max-width: 68ch;
}
.creation-body__extra > .wp-block-separator {
	height: 1px;
	border-top-width: 1px;
	margin: 16px 0 32px;
}
.creation-body__extra > .wp-block-embed {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.distribution-panel {
	background: var(--blanc);
	border: 1px solid rgba(61,42,36,.1);
	padding: 28px 30px;
}
.distribution-panel__row { padding-top: 18px; margin-top: 18px; }
.distribution-panel__row:first-of-type { padding-top: 0; margin-top: 18px; }
.distribution-panel__row--production { border-top: 1px solid rgba(61,42,36,.1); }
.distribution-panel__label {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(61,42,36,.5);
}
.distribution-panel__value {
	font-family: var(--font-serif);
	font-size: 15px;
	margin-top: 6px;
}
.distribution-panel__value--list {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 13.5px;
	line-height: 1.7;
}
.distribution-panel .btn { margin-top: 22px; width: 100%; }

.gallery-band { padding: 56px 0 var(--rhythm); }
.gallery-band__caption { margin-top: 16px; }

.presse-band {
	display: grid;
	grid-template-columns: minmax(0,1fr) 400px;
	gap: 40px;
	align-items: center;
}
.presse-band blockquote {
	margin: 18px 0 0;
	max-width: 36ch;
}
.presse-band cite {
	display: block;
	margin-top: 16px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-style: normal;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.presse-band__aside { display: flex; flex-direction: column; gap: 20px; }

.tour-dates { display: flex; flex-direction: column; }
.tour-dates__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(61,42,36,.14);
	font-size: 14px;
}

.next-creation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 44px 0;
	border-top: 1px solid rgba(61,42,36,.14);
}
.next-creation__back {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--brique-encre);
}
.next-creation__next { text-align: right; }
.next-creation__label {
	display: block;
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(61,42,36,.6);
	margin-bottom: 6px;
}
.next-creation__title {
	font-family: var(--font-serif);
	font-size: 27px;
}

/* =========================================================
   Page title bands (bio, publics, mentions)
   ========================================================= */
.page-title-band { padding: 160px 0 60px; background: var(--lin); position: relative; overflow: hidden; }
.page-title-band--sable { background: var(--sable); color: var(--encre-chaud); }
.page-title-band > .container { position: relative; z-index: 1; }

/* Optional background photo — editor picks "Texte sombre" (warm tint, dark
   text, matches the rest of the site) or "Texte clair" (dark scrim, white
   text, same recipe as the homepage hero). No image: unchanged flat colour. */
.page-title-band--image { background: var(--sable); color: var(--encre-chaud); }
.page-title-band__media { position: absolute; inset: 0; }
.page-title-band__media img { width: 100%; height: 100%; object-fit: cover; }
.page-title-band__media::after { content: ""; position: absolute; inset: 0; }
.page-title-band--text-dark .page-title-band__media::after {
	background: linear-gradient(180deg, rgba(242,214,162,.82) 0%, rgba(242,202,126,.72) 45%, rgba(242,214,162,.85) 100%);
}
.page-title-band--text-light {
	color: #FFFFFF;
}
.page-title-band--text-light .page-title-band__media::after {
	background: var(--hero-scrim);
}
.page-title-band__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 58px;
	line-height: 1.1;
	color: inherit;
	margin-top: 14px;
}
.page-title-band__title--upper { text-transform: uppercase; }
.page-title-band__standfirst {
	margin-top: 22px;
	font-size: 17px;
	line-height: 1.7;
	max-width: 46ch;
}

/* Biographie */
.bio-layout {
	display: grid;
	grid-template-columns: 300px minmax(0,1fr);
	gap: 70px;
	padding: var(--rhythm) 0;
	align-items: start;
}
.bio-layout__portrait { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; }
.bio-layout__media { margin: 0; }
.bio-layout__media .caption { margin-top: 14px; }
/* À propos: text left, photo right, with room above the photo for the
   accent frame's -18px offset. */
.bio-layout--a-propos { grid-template-columns: minmax(0,1fr) 300px; }
.bio-layout--a-propos .bio-layout__media { padding-top: 18px; }
.bio-layout__facts { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(61,42,36,.16); }
.bio-layout__fact + .bio-layout__fact { margin-top: 20px; }
.bio-layout__fact-label {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(61,42,36,.55);
}
.bio-layout__fact-value { font-size: 14.5px; margin-top: 6px; }
.bio-layout__body { font-size: 15.5px; line-height: 1.95; }
.bio-layout__body p { margin: 0 0 1.6em; }
.bio-layout__body blockquote,
.pull-quote-block {
	background: var(--blanc);
	padding: 24px 28px;
	border-left: 2px solid var(--terre);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 21px;
	line-height: 1.6;
	margin: 1.8em 0;
}
.bio-layout__back { margin-top: 30px; display: inline-block; }

/* Avec les publics page */
.publics-page-images {
	display: grid;
	grid-template-columns: minmax(0,2fr) minmax(0,3fr);
	gap: 16px;
	transform: translateY(-32px);
}
.publics-page-images img:first-child { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }
.publics-page-images img:last-child { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: auto; }

.publics-page-body__content {
	font-size: 16px;
	line-height: 1.9;
	max-width: 700px;
	padding-bottom: var(--rhythm);
}
.publics-page-body__content h2 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 26px;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
	margin: 1.4em 0 .6em;
}
.publics-page-body__content h2:first-child { margin-top: 0; }
.publics-page-body__content p { margin: 0 0 1.6em; }

/* Each action is just typed normally (h3 title, then a paragraph naming
   the audience, then body copy, then an optional Objectifs list) — CSS
   turns that pattern into clearly separated blocks, the same trick
   .legal-card already uses for its auto-numbered h2+p pairs. */
.publics-page-body__content h3 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
	color: var(--terre);
	margin: 56px 0 0;
	padding-top: 40px;
	border-top: 1px solid rgba(122,63,51,.25);
}
.publics-page-body__content h3 + p {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brique-encre);
	margin: 10px 0 1.6em;
}
/* Image/Gallery blocks in ANY block-editor content area site-wide — À
   propos, Biographie, Avec les publics, Mentions légales, création
   synopsis and the full-width création gallery band (".body-copy" covers
   À propos/Mentions légales/création; ".publics-page-body__content",
   ".bio-layout__body" and ".gallery-band" aren't tagged body-copy, so
   they're listed too). Same asymmetric-friendly grid throughout. */
.body-copy figure.wp-block-image,
.body-copy .wp-block-image,
.publics-page-body__content figure.wp-block-image,
.publics-page-body__content .wp-block-image,
.bio-layout__body figure.wp-block-image,
.bio-layout__body .wp-block-image,
.gallery-band figure.wp-block-image,
.gallery-band .wp-block-image {
	margin: 0 0 1.6em;
}
.body-copy .wp-block-image img,
.publics-page-body__content .wp-block-image img,
.bio-layout__body .wp-block-image img,
.gallery-band .wp-block-image img { width: 100%; height: auto; display: block; }
.body-copy .wp-block-gallery.has-nested-images,
.publics-page-body__content .wp-block-gallery.has-nested-images,
.bio-layout__body .wp-block-gallery.has-nested-images,
.gallery-band .wp-block-gallery.has-nested-images {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0,1fr)) !important;
	gap: 16px !important;
	margin: 0 0 1.6em;
}
/* Row width depends on photo count, so nothing leaves a gap or an
   under-filled last row: 1 photo fills the row, 2 split 50/50 (also the
   4+ default above, wrapping two per row), and exactly 3 gets its own
   row of three — three is the largest a single row ever gets. ":has()"
   checking "the Nth child is also the last child" is the standard CSS
   trick for "exactly N children" without a count() function. */
.body-copy .wp-block-gallery.has-nested-images:has(> figure:only-child),
.publics-page-body__content .wp-block-gallery.has-nested-images:has(> figure:only-child),
.bio-layout__body .wp-block-gallery.has-nested-images:has(> figure:only-child),
.gallery-band .wp-block-gallery.has-nested-images:has(> figure:only-child) {
	grid-template-columns: minmax(0,1fr) !important;
}
.body-copy .wp-block-gallery.has-nested-images:has(> figure:nth-child(3):last-child),
.publics-page-body__content .wp-block-gallery.has-nested-images:has(> figure:nth-child(3):last-child),
.bio-layout__body .wp-block-gallery.has-nested-images:has(> figure:nth-child(3):last-child),
.gallery-band .wp-block-gallery.has-nested-images:has(> figure:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
/* WordPress's own gallery-layout CSS sizes each figure to its image's
   intrinsic dimensions (meant for its default flex-wrap layout) — with
   display:grid forced above, that leaves the figure shrink-wrapped inside
   its grid cell instead of filling it, however wide the track is. Force
   the figure itself to fill the cell so the crop below actually works. */
.body-copy .wp-block-gallery figure.wp-block-image,
.publics-page-body__content .wp-block-gallery figure.wp-block-image,
.bio-layout__body .wp-block-gallery figure.wp-block-image,
.gallery-band .wp-block-gallery figure.wp-block-image {
	margin: 0 !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
}
.body-copy .wp-block-gallery figure.wp-block-image img,
.publics-page-body__content .wp-block-gallery figure.wp-block-image img,
.bio-layout__body .wp-block-gallery figure.wp-block-image img,
.gallery-band .wp-block-gallery figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	/* Most full-body/portrait source photos squeezed into a landscape 4:3
	   box lose less this way — centering the crop cuts off heads as often
	   as feet. Biasing toward the top keeps faces/action in frame and
	   crops from the legs first, which is right more often than
	   dead-center. Still wrong sometimes — see .crop-* below. */
	object-position: 50% 20%;
}
/* Per-photo crop override — in the block editor, select the photo (in a
   gallery or on its own), open Advanced in the sidebar, and add one of
   these to "Additional CSS class(es)" when the default top-biased crop
   still isn't right for that particular image. Works anywhere the block
   editor is used, not just the areas above. */
.wp-block-image.crop-top img,
.wp-block-gallery figure.wp-block-image.crop-top img { object-position: 50% 0% !important; }
.wp-block-image.crop-center img,
.wp-block-gallery figure.wp-block-image.crop-center img { object-position: 50% 50% !important; }
.wp-block-image.crop-bottom img,
.wp-block-gallery figure.wp-block-image.crop-bottom img { object-position: 50% 100% !important; }
.wp-block-image.crop-left img,
.wp-block-gallery figure.wp-block-image.crop-left img { object-position: 0% 50% !important; }
.wp-block-image.crop-right img,
.wp-block-gallery figure.wp-block-image.crop-right img { object-position: 100% 50% !important; }

.publics-closing {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 60px;
}
.publics-panel__text { font-size: 16px; line-height: 1.8; margin-top: 10px; max-width: 46ch; }
.publics-panel__email {
	display: inline-block;
	font-family: var(--font-serif);
	font-size: 15px;
	margin-top: 16px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(74,43,35,.4);
	color: inherit;
}
.publics-panel__logos { display: flex; gap: 8px; margin-top: 16px; }
.publics-panel__logos img {
	width: 72px;
	height: 30px;
	object-fit: contain;
	background: rgba(61,42,36,.06);
}

/* Créations archive — pagination */
.pagination { margin-top: 56px; }
.pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 20px;
}
.pagination .page-numbers {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(61,42,36,.55);
}
.pagination a.page-numbers:hover,
.pagination .page-numbers.current { color: var(--brique-encre); }
.pagination .page-numbers.dots { color: rgba(61,42,36,.35); }

/* Mentions légales */
.legal-card {
	background: var(--blanc);
	max-width: 760px;
	margin: -40px auto 0;
	padding: 50px 60px var(--rhythm);
	position: relative;
	counter-reset: legal-clause;
}
.legal-card > * + h2 { margin-top: 30px; }
.legal-card h2 {
	counter-increment: legal-clause;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 20px;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
	margin: 0;
}
.legal-card h2::before {
	content: counter(legal-clause, decimal-leading-zero);
	display: block;
	width: 22px;
	font-family: var(--font-sans);
	font-size: 10px;
	color: var(--brique-encre);
	margin-bottom: 6px;
}
.legal-card p {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 14.5px;
	line-height: 1.9;
	max-width: 60ch;
	margin-top: 10px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
	:root { --gutter: 36px; }
	.hero__title { font-size: 64px; }
	.creation-body,
	.a-propos,
	.publics-home,
	.fondatrice,
	.bio-layout { gap: 44px; }
	.contact-split__media { flex-basis: 360px; }
}

@media (max-width: 860px) {
	.section { padding: 72px 0; }
	.section__heading { flex-direction: column; align-items: flex-start; gap: 16px; }
	.a-propos,
	.publics-home,
	.fondatrice,
	.bio-layout,
	.creation-body,
	.presse-band { grid-template-columns: 1fr; }
	.a-propos__image { order: -1; }
	.bio-layout--a-propos .bio-layout__media { order: -1; }
	.publics-home__images { order: -1; }
	.publics-home__images > *:nth-child(2) { margin-top: 0; }
	.gallery-band .wp-block-gallery.has-nested-images,
	.body-copy .wp-block-gallery.has-nested-images,
	.publics-page-body__content .wp-block-gallery.has-nested-images,
	.bio-layout__body .wp-block-gallery.has-nested-images { grid-template-columns: 1fr 1fr; }
	.publics-page-images { grid-template-columns: 1fr; transform: none; }
	.legal-card { padding: 36px 28px; margin-top: 0; }
	.contact-split { flex-direction: column; }
	.contact-split__media { flex-basis: auto; height: 280px; }
}

@media (max-width: 640px) {
	:root { --gutter: 22px; --gutter-narrow: 22px; --rhythm: 64px; }
	.hero__title { font-size: 44px; }
	.hero--creation .hero__title { font-size: 40px; }
	.section-title { font-size: 30px; }
	.section__heading-intro { font-size: 15px; line-height: 1.8; }
	body { font-size: 14px; line-height: 1.85; }
	.site-header { padding: 18px 22px; }
	.gallery-band .wp-block-gallery.has-nested-images,
	.body-copy .wp-block-gallery.has-nested-images,
	.publics-page-body__content .wp-block-gallery.has-nested-images,
	.bio-layout__body .wp-block-gallery.has-nested-images { grid-template-columns: 1fr; }
	.contact-form__row { grid-template-columns: 1fr; }
	.page-title-band__title { font-size: 40px; }
	.legal-card { margin-top: 0; }
	.next-creation { flex-direction: column; align-items: flex-start; }
	.next-creation__next { text-align: left; }
}