/* The Créer composition follows Animer's scale, spacing and framed imagery. */
.creer-layout > * {
	margin-block: 0;
}

.creer-layout > * + * {
	margin-block-start: clamp(48px, 4.5vw, 88px);
}

.creer-page {
	--creer-section-gap: clamp(48px, 4.5vw, 88px);
	--creer-indent: clamp(24px, 4.2vw, 80px);
	--creer-accent: var(--wp--preset--color--light-blue, #00b1eb);
	color: var(--wp--preset--color--black, #111);
	font-size: var(--wp--preset--font-size--medium, 24px);
	font-weight: 300;
	line-height: 1.45;
}

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

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

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

/* Leave the existing tools block's typography and native details untouched. */
.creer-page :where(h1, h2, h3, figure, .wp-block-buttons) {
	margin-block: 0;
}

.creer-page :where(
	.creer-hero__copy,
	.creer-prose,
	.creer-testimonial,
	.creer-method-card,
	.creer-network__card,
	.creer-process__body,
	.creer-fact
) p {
	margin-block: 0;
	font-size: inherit;
	font-weight: 300;
	line-height: inherit;
}

.creer-page :where(
	.creer-hero__copy,
	.creer-prose,
	.creer-testimonial,
	.creer-method-card,
	.creer-network__card,
	.creer-process__body
) p + p {
	margin-block-start: 24px;
}

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

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

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

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

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

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

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

.creer-page .creer-button .wp-block-button__link {
	max-width: 100%;
	border-radius: 0;
}

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

.creer-photo::before {
	position: absolute;
	z-index: -1;
	inset: 0 5% 12% 12%;
	border-radius: 43% 57% 65% 35% / 55% 40% 60% 45%;
	background: var(--creer-accent);
	content: "";
	transform: rotate(12deg);
	pointer-events: none;
}

.creer-page .creer-photo__frame {
	width: 100%;
	margin: 0;
	border: 3px solid #111;
	background: #111;
	box-shadow: 9px 9px 0 #111;
	transform: rotate(2deg);
}

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

/* Use the photo badge treatment already shared by the homepage visuals. */
.creer-page .creer-photo__badge {
	position: absolute;
	right: 4%;
	bottom: -6px;
	z-index: 1;
	max-width: min(78%, 400px);
	margin: 0;
	padding: 14px 18px;
	border: 3px solid var(--wp--preset--color--black, #111);
	background: var(--wp--preset--color--yellow, #ffed00);
	box-shadow: 8px 9px 0 var(--wp--preset--color--black, #111);
	text-align: left;
	transform: rotate(-3deg);
}

.creer-page .creer-photo__badge > .lpd-key-figure__value {
	font-size: var(--wp--preset--font-size--figure, 40px);
}

.creer-page .creer-photo__badge > .lpd-key-figure__label {
	margin-block-start: 3px;
	font-weight: 900;
}

.creer-page .creer-method__intro {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: 40px;
	margin-block-start: 36px;
	margin-inline: var(--creer-indent) 20px;
}

.creer-method__intro .wp-block-debrouillards2026-svg-icon {
	width: 152px;
	max-width: 100%;
	margin: 0;
}

.creer-page .creer-testimonial {
	max-width: none;
	margin: 48px auto 0;
	padding: clamp(24px, 2.4vw, 40px);
	border: 2px solid var(--wp--preset--color--black, #111);
	background: var(--wp--preset--color--white, #eff1f2);
	box-shadow: 6px 7px 0 var(--wp--preset--color--black, #111);
}

.creer-testimonial > * + * {
	margin-block-start: 24px;
}

.creer-testimonial .wp-block-quote {
	margin-inline: 0;
	padding: 0;
	border: 0;
	color: #555;
	font-style: normal;
}

.creer-testimonial > p:first-child strong {
	color: var(--wp--preset--color--purple, #43358b);
}

.creer-page .creer-method__principles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 4.5vw, 88px);
	margin: 52px 0 0 var(--creer-indent);
}

.creer-page .creer-method-card > h3 + p {
	margin-block-start: 24px;
}

/* Match the editorial introduction without restyling the native tools plugin. */
.creer-original-tools > h2 {
	max-width: none;
	font-size: var(--wp--preset--font-size--xx-large, 48px);
	font-weight: 900;
	line-height: 1.08;
	margin-block: 0 28px;
}

.creer-original-tools > p {
	max-width: none;
	font-size: var(--wp--preset--font-size--medium, 24px);
	font-weight: 300;
	line-height: 1.45;
	margin-block: 20px;
}

.creer-original-tools > .expandable-project-list {
	margin-block: 32px;
}

.creer-page .creer-method__intro .creer-prose {
	max-width: none;
}

.creer-page .creer-button .wp-block-button__link {
	box-shadow: none;
}

.creer-page .creer-resource .news-test__aside {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 24px;
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-right: 60px;
}

.creer-page .creer-network__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: clamp(32px, 4vw, 80px);
	margin-block-start: 44px;
}

.creer-network__card::before {
	display: block;
	width: 54px;
	height: 12px;
	margin-block-end: 22px;
	background: var(--creer-accent);
	content: "";
	transform: rotate(-5deg);
}

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

.creer-page .creer-network > .wp-block-buttons {
	margin-block-start: 20px;
}

.creer-process__body {
	margin: 36px 0 0 var(--creer-indent);
	max-width: none;
}

.creer-process__body > :is(p, .creer-science, .creer-steps) { max-width: none; }

.creer-process__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: center;
	gap: clamp(36px, 5vw, 88px);
	margin-block-end: 56px;
}

.creer-page .creer-editorial-photo {
	position: relative;
	isolation: isolate;
	width: 100%;
	margin: 24px 0;
	padding: 12px;
}

.creer-editorial-photo::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -6% 4%;
	background: #ffed00;
	border-radius: 48% 52% 40% 60% / 58% 43% 57% 42%;
	transform: rotate(8deg);
}

.creer-editorial-photo img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid #111;
	box-shadow: 7px 8px 0 #111;
	transform: rotate(-2deg);
}

.creer-editorial-photo--process::before { background: #00b1eb; }
.creer-editorial-photo--process img { transform: rotate(2deg); }

.creer-page .creer-process__body > p + h3,
.creer-page .creer-process__body > .creer-science + h3 {
	margin-block-start: 44px;
}

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

.creer-page .creer-steps {
	display: grid;
	gap: 40px;
	max-width: none;
	margin-block: 36px 0;
	padding-inline-start: 96px;
	list-style: none;
	counter-reset: creer-step;
}

.creer-steps > li {
	position: relative;
	margin: 0;
	counter-increment: creer-step;
}

.creer-steps > li::before {
	position: absolute;
	top: 0;
	left: -64px;
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--yellow, #ffed00);
	content: counter(creer-step);
	display: grid;
	place-items: center;
	font-weight: 800;
	color: #111;
	transform: rotate(-4deg);
}

.creer-page .creer-science {
	margin-block-start: 48px;
	padding: 28px 32px;
	border-inline-start: 6px solid var(--creer-accent);
	background: #edf6fa;
}

.creer-page .creer-science > p:first-child {
	font-size: var(--wp--preset--font-size--x-large, 32px);
	font-weight: 800;
	line-height: 1.1;
}

.creer-page .creer-evidence__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 64px);
	width: 100%;
	max-width: 760px;
	margin: 36px auto 0;
}

.creer-fact {
	min-width: 0;
}

.creer-page .creer-fact.creer-thematiques-callout {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: none;
	margin: 28px 0 0;
	padding: 16px 20px;
	border: 0;
	border-inline-start: 3px solid var(--wp--preset--color--yellow, #ffed00);
	background: #fffdeb;
	box-shadow: none;
	text-align: left;
}

.creer-page .creer-thematiques-callout > .lpd-key-figure__value {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--figure, 40px);
	font-weight: 800;
	line-height: 1;
}

.creer-page .creer-thematiques-callout > .lpd-key-figure__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--figure-label, 20px);
	font-weight: 500;
	line-height: 1.3;
}

.creer-page .creer-thematiques-callout + p {
	margin-block-start: 24px;
}

.creer-page .creer-method-card > .creer-fact,
.creer-page .creer-network__card > .creer-fact {
	max-width: 320px;
	margin: 36px auto 0;
}

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

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

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

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

.wp-site-blocks .creer-page__decoration {
	display: none;
}

@media (max-width: 1100px) and (min-width: 782px) {
	.creer-page .creer-network__grid {
		gap: 32px;
	}

}

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

	.creer-page .creer-hero,
	.creer-page .creer-method__principles,
	.creer-page .creer-network__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

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

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

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

	.creer-photo {
		width: 90%;
		max-width: 560px;
		padding-block-start: 26px;
	}

	.creer-photo::before {
		border-radius: 43% 57% 65% 35% / 55% 40% 60% 45%;
	}

	.creer-page .creer-method__intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		align-items: start;
		margin-inline: 0;
	}

	.creer-process__intro { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.creer-page .creer-editorial-photo { max-width: 560px; margin-inline: auto; }

	.creer-page .creer-testimonial {
		padding: 24px 20px;
	}

	.creer-testimonial .wp-block-quote {
		padding-inline-start: 0;
	}

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

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

	.creer-page .creer-science {
		padding: 24px 20px;
	}

	.creer-page .creer-evidence__figures {
		gap: 28px 24px;
	}

	.creer-page .creer-photo__badge {
		padding: 10px 13px;
	}

	.creer-page .creer-photo__badge > .lpd-key-figure__value {
		font-size: var(--wp--preset--font-size--figure, 40px);
	}

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

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

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

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

@media (max-width: 420px) {
	.creer-page .creer-method__intro {
		grid-template-columns: minmax(0, 1fr);
	}

	.creer-method__intro .wp-block-debrouillards2026-svg-icon {
		width: 110px;
	}
}

@media (max-width: 600px) {
	.creer-page .creer-resource .news-test__aside {
		display: flex;
		gap: 18px;
		padding: 24px;
	}
}

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

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

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