/* Native Gutenberg compositions for the Animer page and its editor canvas. */
.animer-page .animer-photo__badge {
	position: absolute;
	right: 4%;
	bottom: 0;
	z-index: 1;
	display: block;
	width: fit-content;
	max-width: min(78%, 400px);
	margin: 0;
	padding: 14px 18px;
	border: 3px solid #111;
	background: var(--wp--preset--color--yellow, #ffed00);
	box-shadow: 8px 9px 0 #111;
	text-align: left;
	transform: rotate(-3deg);
}
.animer-page .animer-photo__badge > .animer-stat__value {
	margin: 0;
	font-size: var(--wp--preset--font-size--figure, 40px) !important;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
}
.animer-page .animer-photo__badge > .animer-stat__label {
	margin: 3px 0 0;
	font-size: var(--wp--preset--font-size--figure-label, 20px) !important;
	font-weight: 900;
	line-height: 1.2;
}
@media(max-width:781px){
	.animer-page .animer-photo__badge { padding: 10px 13px; }
	.animer-page .animer-photo__badge > .animer-stat__value { font-size: var(--wp--preset--font-size--figure, 40px) !important; }
	.animer-page .animer-photo__badge > .animer-stat__label { font-size: var(--wp--preset--font-size--figure-label, 20px) !important; }
}
.animer-page {
	--animer-section-gap: clamp(48px, 4.5vw, 88px);
	--animer-indent: clamp(24px, 4.2vw, 80px);
	color: var(--wp--preset--color--black, #111);
	font-size: var(--wp--preset--font-size--medium, 24px);
	font-weight: 300;
	line-height: 1.3;
}

.animer-page,
.animer-page * {
	box-sizing: border-box;
}

.animer-page > * {
	margin-block: 0;
}

.animer-page > * + * {
	margin-block-start: var(--animer-section-gap);
}

.animer-page :where(p, h1, h2, h3, figure, .wp-block-columns, .wp-block-buttons) {
	margin-block: 0;
}

.animer-page p,
.animer-page .has-medium-font-size {
	font-size: inherit !important;
	font-weight: 300;
	line-height: inherit;
}

.animer-page p + p {
	margin-block-start: 24px;
}

.animer-page h1 {
	max-width: 12.2em;
	font-size: var(--wp--preset--font-size--xxx-large, 72px);
	font-weight: 900;
	line-height: 1.04;
}

.animer-page h2 {
	font-size: var(--wp--preset--font-size--xx-large, 48px);
	font-weight: 900;
	line-height: 1.08;
}

.animer-page h3 {
	font-size: var(--wp--preset--font-size--x-large, 32px);
	font-weight: 800;
	line-height: 1.1;
}

.animer-page :where(h2, h3) + p {
	margin-block-start: 24px;
}

.animer-page .animer-hero,
.animer-page .animer-nomade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 3.5vw, 72px);
}

.animer-hero__copy > h1 + p {
	margin-block-start: 36px;
}

.animer-hero__copy > p:nth-of-type(3) {
	margin-block-start: 0;
}

.animer-page .animer-button {
	margin-block-start: 24px;
}

.animer-page .animer-button .wp-block-button__link {
	padding: 18px 30px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--pink, #e6007e);
	color: #fff;
	font-size: var(--wp--preset--font-size--button, 24px);
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
}

.animer-photo {
	position: relative;
	isolation: isolate;
	min-width: 0;
	width: 100%;
	max-width: 900px;
	justify-self: center;
	margin-inline: auto;
	padding: 40px min(12%, 108px) 64px 0;
}

.animer-photo::before,
.animer-photo--nomade::after {
	position: absolute;
	z-index: -1;
	content: "";
	pointer-events: none;
}

.animer-photo::before {
	inset: -5% 4% 25% 35%;
	border-radius: 100px;
	background: var(--wp--preset--color--green, #3aaa35);
	transform: rotate(12deg);
}

.animer-page .animer-photo__frame {
	width: 100%;
	margin: 0;
	border: 3px solid var(--wp--preset--color--black, #111);
	background: #111;
	box-shadow: 9px 9px 0 #111;
	transform: rotate(2deg);
}

.animer-page .animer-photo__frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.animer-method__body {
	margin-block-start: 48px;
	margin-inline-start: calc(var(--animer-indent) * .85);
}

.animer-method__body > p:nth-of-type(4) {
	margin-block-start: 52px;
}

.animer-page .animer-method__diagram {
	display: grid;
	grid-template-columns: clamp(220px, 18.75vw, 360px) minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	max-width: min(1280px, 70vw);
	margin: 28px auto 0;
}

.animer-method__diagram .wp-block-debrouillards2026-svg-icon {
	width: 100%;
	max-width: 360px;
	margin: 0;
}

.animer-method__diagram .wp-block-debrouillards2026-svg-icon svg {
	display: block;
	width: 100%;
	height: auto;
}

.animer-formats > h2 {
	max-width: 24em;
}

.animer-page .animer-formats__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: clamp(36px, 5vw, 100px);
	margin-block-start: 60px;
}

.animer-format {
	max-width: 440px;
}

.animer-format::before {
	display: block;
	width: 54px;
	height: 12px;
	margin-block-end: 22px;
	background: var(--wp--preset--color--green, #3aaa35);
	content: "";
	transform: rotate(-5deg);
}

.animer-page .animer-format > h3 + p {
	margin-block-start: 24px;
}

.animer-formats__links {
	margin-block-start: 88px;
}

.animer-projects > .lpd-selected-projects {
	margin-block-start: 36px;
}

.animer-page .animer-nomade {
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);
	gap: clamp(48px, 6vw, 120px);
	margin-block-start: calc(var(--animer-section-gap) * 1.15);
}

.animer-nomade__copy h2 {
	width: 100%;
	max-width: none;
}

.animer-photo--nomade {
	max-width: 760px;
	padding: 65px min(6%, 45px) 64px min(8%, 60px);
}

.animer-photo--nomade::before {
	inset: 25% 26% 0 0;
	transform: rotate(-22deg);
}

.animer-photo--nomade::after {
	top: 0;
	right: 0;
	width: 48%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--yellow, #ffed00);
}

.animer-photo--nomade .animer-photo__frame {
	transform: rotate(-2deg);
}

.animer-project__body {
	margin-block-start: 36px;
	margin-inline-start: var(--animer-indent);
}

.animer-page .animer-project__body h3 + p {
	margin-block-start: 18px;
}

.animer-project__body > p + h3,
.animer-project__body > ol + h3 {
	margin-block-start: 42px;
}

.animer-project__body .animer-project__principle {
	text-align: center;
}

.animer-page .animer-steps {
	display: grid;
	gap: 48px;
	max-width: 940px;
	margin-block: 36px 0;
	padding-inline-start: 96px;
	list-style: none;
}

.animer-steps > li {
	position: relative;
	margin: 0;
}

.animer-steps > li::before {
	position: absolute;
	top: 0;
	left: -64px;
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--yellow, #ffed00);
	content: "";
	transform: rotate(-4deg);
}

.animer-page .animer-faq {
	margin-block-start: calc(var(--animer-section-gap) * 1.4);
}

.animer-faq > .wp-block-columns {
	align-items: start;
	gap: 4%;
	margin-block-start: 48px;
}

.animer-faq > .wp-block-columns > .wp-block-column:first-child {
	flex-basis: 22% !important;
}

.animer-faq > .wp-block-columns > .wp-block-column:last-child {
	flex-basis: 74% !important;
	min-width: 0;
}

/* Retain the source blocks in the editor when omitted from the composition. */
.wp-site-blocks .animer-page__archive {
	display: none;
}

@media (max-width: 781px) {
	.animer-page {
		--animer-section-gap: 52px;
		--animer-indent: 0px;
		font-size: var(--wp--preset--font-size--medium, 24px);
		line-height: 1.35;
	}

	.animer-page .animer-hero,
	.animer-page .animer-nomade,
	.animer-page .animer-formats__grid,
	.animer-page .animer-method__diagram {
		grid-template-columns: minmax(0, 1fr);
	}

	.animer-page h1 {
		font-size: var(--wp--preset--font-size--xxx-large, 72px);
	}

	.animer-page h2 {
		font-size: var(--wp--preset--font-size--xx-large, 48px);
	}

	.animer-page h3 {
		font-size: var(--wp--preset--font-size--x-large, 32px);
	}

	.animer-page .animer-hero {
		gap: 44px;
	}

	.animer-photo {
		width: 90%;
		max-width: 560px;
		margin-inline: auto;
		padding-block-start: 26px;
	}

	.animer-photo::before {
		border-radius: 60px;
	}

	.animer-photo--nomade {
		padding-block-start: 48px;
	}

	.animer-method__body {
		margin-block-start: 28px;
	}

	.animer-method__body > p:nth-of-type(4) {
		margin-block-start: 32px;
	}

	.animer-page .animer-method__diagram {
		gap: 24px;
		max-width: none;
		margin-block-start: 32px;
	}

	.animer-method__diagram .wp-block-debrouillards2026-svg-icon {
		width: min(260px, 85%);
		margin-inline: auto;
	}

	.animer-page .animer-formats__grid {
		gap: 36px;
		margin-block-start: 36px;
	}

	.animer-format {
		max-width: none;
	}

	.animer-format::before {
		width: 44px;
		height: 9px;
		margin-block-end: 18px;
	}

	.animer-formats__links {
		margin-block-start: 40px;
	}

	.animer-nomade__copy h2 {
		width: auto;
		max-width: none;
	}

	.animer-project__body {
		margin-block-start: 28px;
	}

	.animer-page .animer-steps {
		gap: 32px;
		padding-inline-start: 46px;
	}

	.animer-steps > li::before {
		left: -42px;
		width: 28px;
		height: 28px;
	}

	.animer-page .animer-faq {
		margin-block-start: 64px;
	}

	.animer-faq > .wp-block-columns {
		gap: 28px;
		margin-block-start: 32px;
	}

	.animer-faq > .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}

	.animer-faq > .wp-block-columns .wp-block-debrouillards2026-svg-icon {
		max-width: 140px;
		margin-inline: auto;
	}
}

/* Align the introduction with the home hero inside the shared page gutter. */

.animer-page .animer-hero {
    padding-inline: calc(var(--debrouillards-page-hero-padding) - var(--debrouillards-page-content-padding));
}

.animer-page .animer-hero + * { margin-block-start: var(--debrouillards-page-hero-bottom); }