/*
 * Pages internes à sections (pilier Entreprises, puis offres et univers).
 *
 * Déclinaison du langage de l'Accueil : League Gothic, Manrope, ink / papier /
 * blanc / doré sable, filets d'un pixel, liens éditoriaux. Les fonds de section
 * viennent des couleurs natives de Gutenberg (has-ink-background-color…) :
 * les jetons de liens de style.css s'appliquent donc automatiquement.
 * Règles imbriquées sous le cadre de page (et l'éditeur).
 */

:is(.yohann-sections-frame, .editor-styles-wrapper) {
	--yh-pad: var(--wp--custom--layout--page-gutter, clamp(1.1rem, 2.6vw, 2.75rem));
	--yh-section-y: clamp(5rem, 10vw, 9rem);
	--yh-ink: #0b0a08;
	--yh-paper: #f3f0e8;
	--yh-white: #ffffff;
	--yh-muted: #aaa49a;
	--yh-muted-on-light: #6f6a62;
	--yh-text-on-dark: #ded8cd;
	--yh-signal: #c7a675;
	--yh-signal-strong: #755d3a;
	--yh-line-dark: rgba(222, 216, 205, 0.24);
	--yh-line-light: rgba(11, 10, 8, 0.24);
	--yh-display: var(--wp--preset--font-family--display, "League Gothic", sans-serif);
	--yh-body: var(--wp--preset--font-family--body, "Manrope", sans-serif);
	--yh-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M3 13 13 3M5 3h8v8'/%3E%3C/svg%3E");

	.wp-block-post-content > *,
	.wp-block-post-content :where(.wp-block-group, .wp-block-image, .wp-block-buttons, .wp-block-button, .wp-block-heading, p, ol, ul) {
		margin-block: 0;
	}

	.wp-block-post-content > .wp-block-group {
		max-width: none;
	}

	/* ---------- Gabarit commun des sections ---------- */
	.yohann-page-section {
		padding: var(--yh-section-y) var(--yh-pad);
	}

	.yohann-page-section.has-white-color :where(p) {
		color: var(--yh-text-on-dark);
	}

	.yohann-page-label {
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.yohann-page-title {
		max-width: 13ch;
		font-family: var(--yh-display);
		font-size: clamp(3.4rem, 6vw, 5.2rem);
		font-weight: 400;
		line-height: 0.92;
		letter-spacing: -0.02em;
		text-transform: uppercase;
	}

	.yohann-page-title--wide {
		max-width: none;
	}

	.yohann-page-title--small {
		max-width: 14ch;
		font-size: clamp(2.6rem, 4.4vw, 4rem);
	}

	.yohann-page-lead > p,
	p.yohann-page-lead {
		max-width: 60ch;
		font-size: clamp(1rem, 1.2vw, 1.15rem);
	}

	/* ---------- Actions textuelles (couleurs : jetons de style.css) ---------- */
	.wp-block-buttons {
		gap: 0.85rem 2.25rem;
		align-items: center;
	}

	.wp-block-button.is-style-text-link .wp-block-button__link {
		display: inline-flex;
		gap: 1rem;
		align-items: center;
		min-height: 2.75rem;
		padding: 0;
		background: transparent;
		border: 0;
		border-bottom: 1px solid currentColor;
		border-radius: 0;
		font-family: var(--yh-body);
		font-size: 0.82rem;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
	}

	.yohann-page-link--arrow .wp-block-button__link::after {
		flex: 0 0 auto;
		width: 1em;
		height: 1em;
		content: "";
		background: currentColor;
		mask: var(--yh-arrow) center / contain no-repeat;
	}

	/* Lien souligné, sans filet. */
	.wp-block-button.yohann-page-link--underline .wp-block-button__link {
		border-bottom-color: transparent;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.28em;
	}

	/* ---------- 1. Hero de page ---------- */
	.yohann-page-hero {
		display: grid;
		padding: 0;
		grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
		min-height: min(calc(100svh - 5.25rem), 48rem);
		overflow: hidden;
		border-bottom: 1px solid var(--yh-line-dark);
	}

	.yohann-page-hero__main {
		display: flex;
		flex-direction: column;
		padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem) var(--yh-pad);
	}

	.yohann-page-breadcrumb {
		color: var(--yh-muted);
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;

		a {
			color: inherit;
			text-decoration: none;
		}

		a:is(:hover, :focus-visible) {
			color: var(--yh-white);
		}
	}

	.yohann-page-hero__title {
		margin-top: clamp(2.5rem, 7vh, 4.5rem);
		font-family: var(--yh-display);
		font-size: clamp(3.8rem, 6.8vw, 5.6rem);
		font-weight: 400;
		line-height: 0.84;
		letter-spacing: -0.025em;
		text-transform: uppercase;
	}

	.yohann-page-hero__line {
		display: block;
		width: max-content;
		max-width: 100%;
		position: relative;
		color: var(--yh-white);
	}

	.yohann-page-hero__line--tail {
		margin-top: -0.02em;
		margin-left: clamp(2rem, 7vw, 6rem);
		color: var(--yh-paper);
		font-family: Georgia, serif;
		font-size: 0.57em;
		font-style: italic;
		line-height: 1;
		letter-spacing: -0.025em;
		text-transform: none;

		&::after {
			position: absolute;
			top: 62%;
			left: calc(100% + 1.25rem);
			width: clamp(3rem, 8vw, 7rem);
			height: 2px;
			content: "";
			background: var(--yh-signal);
		}
	}

	.yohann-page-hero__intro {
		max-width: 46ch;
		margin-top: clamp(2rem, 4vh, 3rem);
		color: var(--yh-text-on-dark);
		font-size: clamp(0.98rem, 1.15vw, 1.1rem);
	}

	.yohann-page-hero__actions {
		margin-top: auto;
		padding-top: clamp(1.75rem, 4vh, 2.75rem);
	}

	.yohann-page-hero__media {
		position: relative;
		min-height: 24rem;
		overflow: hidden;
		border-left: 1px solid var(--yh-line-dark);

		img {
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		figcaption {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			margin: 0;
			padding: 0.85rem 1rem;
			color: var(--yh-white);
			background: var(--yh-ink);
			border-top: 1px solid var(--yh-line-dark);
			font-size: 0.75rem;
			text-align: left;
		}
	}

	/* ---------- 2. Promesse et public ---------- */
	.yohann-page-intro {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 0 clamp(1rem, 2.2vw, 2.5rem);
		align-items: start;

		> .yohann-page-title {
			grid-column: 1 / 7;
		}

		> .yohann-page-intro__copy {
			grid-column: 8 / 13;
		}

		> .yohann-page-intro__media {
			grid-column: 4 / 13;
			height: clamp(20rem, 36vw, 34rem);
			margin-top: clamp(3rem, 6vw, 6rem);
			overflow: hidden;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			figcaption {
				display: none;
			}
		}
	}

	.yohann-page-who {
		padding: 0;
		margin-top: 2.25rem;
		list-style: none;
		border-top: 1px solid var(--yh-line-light);

		li {
			padding: 0.9rem 0;
			border-bottom: 1px solid var(--yh-line-light);
			font-size: clamp(1.05rem, 1.5vw, 1.3rem);
			font-weight: 500;
		}
	}

	.yohann-page-who-label {
		margin-top: 2.25rem;
		color: var(--yh-muted-on-light);
	}

	/* ---------- 3. Les quatre offres ---------- */
	.yohann-page-section-intro {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
		gap: clamp(2rem, 7vw, 8rem);
		align-items: end;
		padding-bottom: clamp(3rem, 6vw, 6rem);

		> p {
			max-width: 60ch;
		}
	}

	.yohann-page-offers {
		display: grid;
		grid-template-columns: minmax(22rem, 0.85fr) minmax(0, 1.15fr);
		gap: clamp(2rem, 6vw, 7rem);
		align-items: stretch;
	}

	.yohann-page-offers__preview {
		/* Reste visible pendant le défilement des offres (colonne de lignes plus haute que l'écran). */
		position: sticky;
		top: calc(2rem + var(--yh-header-offset, 0px));
		transition: top 0.3s ease;
		align-self: start;
		height: min(70vh, 46rem);
		min-height: 32rem;
		overflow: hidden;
		background: #171511;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		figcaption {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			margin: 0;
			padding: 0.8rem 1rem;
			color: var(--yh-white);
			background: var(--yh-ink);
			border-top: 1px solid var(--yh-line-dark);
			font-size: 0.7rem;
			text-align: left;
		}
	}

	.yohann-page-offers__list {
		border-top: 1px solid var(--yh-line-dark);
	}

	.yohann-page-offer {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		gap: 0.5rem 1rem;
		align-items: start;
		padding: 1.75rem 0;
		color: var(--yh-muted);
		border-bottom: 1px solid var(--yh-line-dark);
		transition: color 160ms ease-out;

		&:hover,
		&:focus-within,
		&.is-active {
			color: var(--yh-white);
		}

		&:hover .yohann-page-offer__number,
		&:focus-within .yohann-page-offer__number,
		&.is-active .yohann-page-offer__number {
			color: var(--yh-signal);
		}

		&:hover .yohann-page-offer__body > p,
		&:focus-within .yohann-page-offer__body > p,
		&.is-active .yohann-page-offer__body > p {
			color: var(--yh-text-on-dark);
		}
	}

	.yohann-page-offers__list:not(.is-enhanced) .yohann-page-offer:first-child {
		color: var(--yh-white);

		.yohann-page-offer__number {
			color: var(--yh-signal);
		}
	}

	.yohann-page-offer__number {
		padding-top: 0.55rem;
		font-size: 0.72rem;
		font-variant-numeric: tabular-nums;
		transition: color 160ms ease-out;
	}

	.yohann-page-offer__title {
		max-width: 14ch;
		font-family: var(--yh-display);
		font-size: clamp(2.5rem, 4vw, 4.2rem);
		font-weight: 400;
		line-height: 0.92;
		text-transform: uppercase;
	}

	.yohann-page-offer__body > p {
		max-width: 52ch;
		margin-top: 0.85rem;
		color: var(--yh-muted);
		font-size: 0.92rem;
		transition: color 160ms ease-out;
	}

	.yohann-page-offer__body .wp-block-buttons {
		margin-top: 0.75rem;
	}

	.yohann-page-offer__image {
		display: none;
	}

	.yohann-page-offers__note {
		max-width: 60ch;
		margin-top: 2rem;
		color: var(--yh-muted);
		font-size: 0.86rem;
	}

	/* ---------- 4. Immobilier et architecture ---------- */
	.yohann-page-secondary {
		padding-block: clamp(4rem, 8vw, 7rem);
		border-top: 1px solid var(--yh-line-light);
	}

	.yohann-page-secondary__grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 1rem clamp(1rem, 2.2vw, 2.5rem);
		align-items: end;

		> .yohann-page-label {
			grid-column: 1 / 13;
			color: var(--yh-muted-on-light);
		}

		> .yohann-page-title {
			grid-column: 1 / 7;
		}

		> .yohann-page-secondary__copy {
			grid-column: 8 / 13;
			padding-bottom: 0.35rem;
		}
	}

	.yohann-page-secondary__copy > p {
		max-width: 48ch;
		margin-bottom: 1.25rem;
	}

	/* Variante avec une petite photographie à droite du texte. */
	.yohann-page-secondary__grid--media {
		> .yohann-page-title { grid-column: 1 / 6; grid-row: 2; }
		> .yohann-page-secondary__copy { grid-column: 6 / 10; grid-row: 2; }
		> .yohann-page-secondary__media {
			grid-column: 10 / 13;
			grid-row: 2;
			align-self: end;
			margin: 0;
		}
		> .yohann-page-secondary__media img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}
	}

	/* ---------- 5. Usages ---------- */
	.yohann-page-usages {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 0 clamp(1rem, 2.2vw, 2.5rem);
		align-items: start;

		> .yohann-page-usages__copy {
			grid-column: 1 / 7;
		}

		> .yohann-page-usages__media {
			grid-column: 8 / 13;
			height: clamp(24rem, 36vw, 36rem);
			overflow: hidden;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			figcaption {
				display: none;
			}
		}

		> .yohann-page-usages__index {
			grid-column: 1 / 13;
			grid-row: 2;
			margin-top: clamp(3rem, 6vw, 6rem);
		}
	}

	.yohann-page-usages__copy > p {
		max-width: 52ch;
		margin-top: 2rem;
	}

	.yohann-page-usages__copy .wp-block-buttons {
		margin-top: 2rem;
	}

	.yohann-page-index {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 0;
		list-style: none;
		counter-reset: usage;
		column-gap: clamp(1rem, 2.2vw, 2.5rem);

		li {
			display: grid;
			grid-template-columns: 2.5rem 1fr;
			align-items: baseline;
			padding: 1.1rem 0;
			border-top: 1px solid var(--yh-line-light);
			font-size: clamp(1.05rem, 1.5vw, 1.35rem);
			font-weight: 500;
			counter-increment: usage;

			&::before {
				content: counter(usage, decimal-leading-zero);
				color: var(--yh-signal-strong);
				font-size: 0.72rem;
				font-variant-numeric: tabular-nums;
			}
		}
	}

	/* ---------- 6. Réalisations ---------- */
	.yohann-page-plates {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(10, minmax(3.2rem, 5.3vw));
		gap: clamp(0.65rem, 1.2vw, 1.25rem);
	}

	.yohann-page-plate {
		position: relative;
		overflow: hidden;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		figcaption {
			position: absolute;
			right: 0;
			bottom: 0;
			margin: 0;
			padding: 0.55rem 0.75rem;
			color: var(--yh-white);
			background: var(--yh-ink);
			font-size: 0.75rem;
			text-align: left;
		}
	}

	.yohann-page-plate--a { grid-column: 1 / 8; grid-row: 1 / 7; }
	.yohann-page-plate--b { grid-column: 8 / 13; grid-row: 2 / 6; }
	.yohann-page-plate--c { grid-column: 6 / 13; grid-row: 7 / 11; }

	.yohann-page-plates + .wp-block-buttons {
		margin-top: clamp(3rem, 6vw, 6rem);
	}

	/* ---------- 7. Du brief à la livraison ---------- */
	.yohann-page-steps {
		display: grid;
		grid-template-columns: 1.15fr 1fr 0.85fr;
		margin-top: clamp(3rem, 6vw, 5rem);
		border-top: 1px solid var(--yh-line-light);
	}

	.yohann-page-step {
		padding: 1.5rem clamp(1rem, 2.4vw, 2.5rem) 0;

		+ .yohann-page-step {
			border-left: 1px solid var(--yh-line-light);
		}

		&:first-child {
			padding-left: 0;
		}

		> p:last-child {
			max-width: 36ch;
			font-size: 0.95rem;
		}
	}

	.yohann-page-step__number {
		margin-bottom: 1.5rem;
		color: var(--yh-signal-strong);
		font-family: var(--yh-display);
		font-size: clamp(3rem, 5vw, 4.5rem);
		line-height: 0.9;
	}

	.yohann-page-step__title {
		margin-bottom: 0.9rem;
		font-family: var(--yh-display);
		font-size: clamp(1.9rem, 2.6vw, 2.5rem);
		font-weight: 400;
		line-height: 0.95;
		text-transform: uppercase;
	}

	/* ---------- 8. Zone d'intervention ---------- */
	.yohann-page-zone {
		padding-block: clamp(4rem, 8vw, 7rem);
		border-top: 1px solid var(--yh-line-light);

		> .yohann-page-zone__grid {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: 1.5rem clamp(1rem, 2.2vw, 2.5rem);
			align-items: start;
		}

		.yohann-page-zone__grid > .yohann-page-title {
			grid-column: 1 / 6;
		}

		.yohann-page-zone__grid > p {
			grid-column: 7 / 13;
			max-width: 52ch;
			font-size: clamp(1.1rem, 1.5vw, 1.35rem);
		}
	}

	/* ---------- 9. Yohann ---------- */
	.yohann-page-about {
		display: grid;
		grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
		min-height: 34rem;
		padding: 0;
		border-top: 1px solid var(--yh-line-dark);
	}

	.yohann-page-about__portrait {
		min-height: 34rem;
		overflow: hidden;
		border-right: 1px solid var(--yh-line-dark);

		img {
			display: block;
			width: 100%;
			height: 100%;
			min-height: inherit;
			object-fit: cover;
			object-position: center top;
		}

		figcaption {
			display: none;
		}
	}

	.yohann-page-about__copy {
		align-self: center;
		max-width: 48rem;
		padding: clamp(3rem, 7vw, 6rem) var(--yh-pad);

		> p {
			max-width: 56ch;
			margin-top: 1.75rem;
		}

		.wp-block-buttons {
			margin-top: 2rem;
		}
	}

	/* ---------- 10. Conclusion ---------- */
	.yohann-page-closing {
		border-top: 1px solid var(--yh-line-light);

		> .yohann-page-lead {
			margin-top: 2.5rem;
			font-weight: 500;
		}
	}

	.yohann-page-brief {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(1rem, 2.2vw, 2.5rem);
		margin-top: clamp(3rem, 5vw, 4.5rem);

		> div {
			padding-top: 1rem;
			border-top: 1px solid var(--yh-line-light);
		}

		strong {
			display: block;
			margin-bottom: 0.35rem;
			font-size: 0.72rem;
			letter-spacing: 0.08em;
			text-transform: uppercase;
		}

		p {
			font-size: 0.9rem;
		}
	}

	.yohann-page-closing__actions {
		margin-top: clamp(2.5rem, 4vw, 3.5rem);
	}

	/* Éditeur : les listes et aperçus restent lisibles sans JavaScript. */
}

@media (max-width: 1120px) {
	:is(.yohann-sections-frame, .editor-styles-wrapper) {
		.yohann-page-hero {
			grid-template-columns: 1fr 1fr;
		}

		.yohann-page-offers {
			grid-template-columns: 0.85fr 1.15fr;
			gap: 2rem;
		}

		.yohann-page-offer__title {
			font-size: clamp(2.3rem, 4vw, 3.4rem);
		}
	}
}

@media (max-width: 960px) {
	:is(.yohann-sections-frame, .editor-styles-wrapper) {
		.yohann-page-index {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.yohann-page-brief {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

@media (max-width: 760px) {
	:is(.yohann-sections-frame, .editor-styles-wrapper) {
		--yh-section-y: 5rem;

		.yohann-page-hero {
			display: flex;
			flex-direction: column;
			min-height: auto;
		}

		.yohann-page-hero__main {
			padding: 1.5rem var(--yh-pad) 2rem;
		}

		.yohann-page-hero__title {
			margin-top: 2.5rem;
			font-size: clamp(3.6rem, 19vw, 5.4rem);
		}

		.yohann-page-hero__line--tail {
			margin-left: clamp(2rem, 14vw, 3.5rem);
			font-size: 0.5em;

			&::after {
				width: 3rem;
			}
		}

		.yohann-page-hero__actions {
			margin-top: 0;
			padding-top: 2rem;
		}

		.yohann-page-hero__actions.wp-block-buttons {
			align-items: flex-start;
			flex-direction: column;
		}

		.yohann-page-hero__media {
			order: 2;
			min-height: 26rem;
			border-top: 1px solid var(--yh-line-dark);
			border-left: 0;
		}

		.yohann-page-title {
			font-size: clamp(3.2rem, 16vw, 4.6rem);
		}

		.yohann-page-title--small {
			font-size: clamp(2.6rem, 13vw, 3.4rem);
		}

		.yohann-page-intro,
		.yohann-page-secondary__grid,
		.yohann-page-usages,
		.yohann-page-zone .yohann-page-zone__grid {
			display: flex;
			flex-direction: column;
			gap: 1.75rem;
		}

		.yohann-page-secondary__grid--media > .yohann-page-secondary__media { order: 3; }
		.yohann-page-secondary__grid--media > .yohann-page-secondary__media img { width: 100%; max-height: 22rem; aspect-ratio: 4 / 3; }

		.yohann-page-intro > .yohann-page-intro__media {
			width: 100%;
			height: 22rem;
			margin-top: 1.5rem;
		}

		.yohann-page-section-intro {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		.yohann-page-offers {
			display: block;
		}

		.yohann-page-offers__preview {
			display: none;
		}

		.yohann-page-offer {
			grid-template-columns: 2rem minmax(0, 1fr);
			color: var(--yh-white);

			.yohann-page-offer__number {
				color: var(--yh-signal);
			}

			.yohann-page-offer__body > p {
				color: var(--yh-text-on-dark);
			}
		}

		.yohann-page-offer__image {
			display: block;
			grid-column: 2;
			width: 100%;
			height: 15rem;
			margin-top: 1rem;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			figcaption {
				display: none;
			}
		}

		.yohann-page-usages > .yohann-page-usages__media {
			width: 88%;
			margin-left: auto;
			height: 26rem;
		}

		.yohann-page-index {
			display: block;
		}

		.yohann-page-plates {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}

		.yohann-page-plate {
			height: 24rem;
		}

		.yohann-page-plate--b {
			width: 72%;
			margin-left: auto;
		}

		.yohann-page-steps {
			display: block;
			border-top: 0;
		}

		.yohann-page-step,
		.yohann-page-step:first-child {
			padding: 1.5rem 0 0;
			margin-bottom: 1.5rem;
			border-top: 1px solid var(--yh-line-light);

			+ .yohann-page-step {
				border-left: 0;
			}
		}

		.yohann-page-about {
			grid-template-columns: 1fr;
		}

		.yohann-page-about__portrait {
			min-height: 26rem;
			border-right: 0;
			border-bottom: 1px solid var(--yh-line-dark);
		}

		.yohann-page-brief {
			grid-template-columns: 1fr;
		}

		.yohann-page-closing__actions {
			align-items: flex-start;
			flex-direction: column;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.yohann-sections-frame, .editor-styles-wrapper) {
		.yohann-page-offer,
		.yohann-page-offer__number {
			transition-duration: 0.01ms;
		}
	}
}