/* Grouped service landings: preserve Ecopub's photographic, flat visual language. */
.ep-landing { max-width: 1440px; margin-inline: auto; padding: 0 clamp(1.25rem, 4vw, 4rem); color: var(--ep-dark, #171613); }
.ep-landing *, .ep-landing *::before, .ep-landing *::after { box-sizing: border-box; }
.ep-landing :where(h1,h2,h3) { text-wrap: balance; letter-spacing: -.025em; }
.ep-landing h1 { margin: 0 0 1.5rem; font-size: clamp(2.35rem, 4.4vw, 4.65rem); line-height: 1.04; }
.ep-landing h2 { font-size: clamp(1.65rem, 2.8vw, 2.75rem); line-height: 1.12; margin: 0 0 1.1rem; }
.ep-landing h3 { font-size: clamp(1.12rem, 1.4vw, 1.35rem); line-height: 1.25; margin: 0 0 .65rem; }
.ep-landing p { max-width: 68ch; line-height: 1.7; margin: 0 0 1.1rem; color: #52514b; }
.ep-landing a { text-underline-offset: .22em; }
.site .ep-landing a:not(.ep-btn), .site .ep-services-tree a { color: #3f3e39 !important; }
.site .ep-landing :is(h2,h3) a { color: #171613 !important; }
.site .ep-landing a.ep-landing-more { color: #a65300 !important; }
.site .ep-landing a:not(.ep-btn):hover, .site .ep-services-tree a:hover { color: #a65300 !important; }
.site .ep-landing-cta .ep-landing-actions a:not(.ep-btn) { color: #fff !important; }
.ep-landing :where(h2,h3) a { color: inherit; text-decoration: none; }
.ep-landing a:hover { color: #a65300; }
.ep-landing a:focus-visible, .ep-landing summary:focus-visible { outline: 3px solid #a65300; outline-offset: 4px; }
.ep-landing-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem .65rem; padding-block: 1.5rem; font-size: .82rem; }
.ep-landing-breadcrumb a { color: #52514b; }
.ep-landing-breadcrumb [aria-current] { color: #171613; }
.ep-landing-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: 2.5rem 0 4rem; }
.ep-landing-hero--text { grid-template-columns: 1fr; max-width: 64rem; }
.ep-landing .ep-landing-lead { font-size: clamp(1.05rem, 1.3vw, 1.22rem); }
.ep-landing-hero__image { margin: 0; }
.ep-landing-hero__image img { width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover; border-radius: 2px; display: block; }
.ep-landing-actions { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin: 1.75rem 0 1.1rem; }
.ep-landing-actions > a:not(.ep-btn) { color: #171613; font-weight: 700; padding-block: .65rem; }
.ep-landing-project-link { display: inline-block; padding-block: .5rem; font-size: .9rem; color: #52514b; }
.ep-landing-toc { border-block: 1px solid #d9dad4; padding: 1.25rem 0 1.5rem; margin-bottom: 1rem; }
.ep-landing-toc p { font-weight: 700; color: #171613; font-size: .88rem; margin-bottom: .75rem; }
.ep-landing-toc ul, .ep-landing-related ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; padding: 0; margin: 0; max-width: none; }
.ep-landing-toc li, .ep-landing-related li { margin: 0; padding: 0; }
.ep-landing-toc a { display: block; padding-block: .45rem; color: #3f3e39; font-size: .93rem; }
.ep-landing-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); padding: clamp(2.75rem, 5vw, 5rem) 0; border-bottom: 1px solid #d9dad4; }
.ep-landing-section :where(h2,h3), .ep-landing-advice { scroll-margin-top: 9rem; }
.ep-landing-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; align-content: start; }
.ep-landing-details p { font-size: .95rem; margin-bottom: 0; }
.ep-landing-more { display: inline-block; margin-top: .75rem; padding-block: .45rem; color: #a65300; font-weight: 700; }
.ep-landing-advice { margin-block: clamp(3rem, 6vw, 5rem); padding: clamp(1.75rem, 4vw, 3.5rem); background: #f5f6f7; border-radius: var(--ep-radius-card, 12px); }
.ep-landing-advice p { max-width: 75ch; }
/* Two ways to answer the same need (made to measure vs. modular system). */
.ep-landing-choice { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); padding: clamp(2.75rem, 5vw, 5rem) 0; border-bottom: 1px solid #d9dad4; scroll-margin-top: 9rem; }
.ep-landing-choice__options { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; align-content: start; }
.ep-landing-choice__options > div { display: flex; flex-direction: column; padding-top: 1.1rem; border-top: 2px solid #171613; }
.ep-landing-choice__options > div:last-child { border-top-color: #ef7d00; }
.ep-landing-choice__options p { font-size: .95rem; margin-bottom: 0; }
.ep-landing-choice__options .ep-landing-more { margin-top: auto; padding-top: 1rem; }
.ep-landing-process, .ep-landing-projects, .ep-landing-faq, .ep-landing-related { padding-block: 2rem 4rem; }
.ep-landing-process ol { counter-reset: ep-step; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; gap: 2rem; margin: 2rem 0 0; padding: 0; max-width: none; }
.ep-landing-process li { counter-increment: ep-step; padding-top: 1rem; border-top: 1px solid #d9dad4; }
.ep-landing-process li::before { content: counter(ep-step, decimal-leading-zero); display: block; color: #a65300; margin-bottom: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ep-landing-faq details { border-bottom: 1px solid #d9dad4; padding: 1.2rem 0; }
.ep-landing-faq summary { cursor: pointer; font-size: 1.05rem; font-weight: 650; line-height: 1.5; }
.ep-landing-faq details p { margin: 1rem 0 .25rem; }
.ep-landing-project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.ep-landing-project-grid img { aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; margin-bottom: 1rem; border-radius: var(--ep-radius-media, 12px); }
.ep-landing-project-grid a { text-decoration: none; color: inherit; }
/* Category page: each service card is topped by its latest real project. */
.ep-landing-detail--proof { display: flex; flex-direction: column; min-width: 0; }
.ep-landing-detail__media { display: block; margin-bottom: 1rem; overflow: hidden; border-radius: var(--ep-radius-media, 12px); background: #f5f6f7; }
.ep-landing-detail__media img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .2s ease-out; }
.ep-landing-detail--proof:has(.ep-landing-detail__media:hover, .ep-landing-detail__count:hover) .ep-landing-detail__media img { transform: scale(1.03); opacity: .92; }
.site .ep-landing a.ep-landing-detail__count { align-self: flex-start; margin-top: .6rem; padding-block: .45rem; color: #a65300 !important; font-size: .9rem; font-weight: 700; }
.ep-landing-details:has(.ep-landing-detail--proof) { row-gap: 2.5rem; }
/* Page de groupe : le projet montré sous chaque H3, nommé et localisé. */
.site .ep-landing a.ep-landing-detail__source { align-self: flex-start; margin-top: .75rem; padding-block: .2rem; color: #171613 !important; font-size: .86rem; font-weight: 650; line-height: 1.35; text-decoration: none; }
.ep-landing-detail__source span { display: block; color: #52514b; font-weight: 400; }
.site .ep-landing a.ep-landing-detail__source:hover { text-decoration: underline; }
.ep-landing-detail--proof:has(.ep-landing-detail__source:hover) .ep-landing-detail__media img { transform: scale(1.03); opacity: .92; }
@media (prefers-reduced-motion: reduce) { .ep-landing-detail__media img { transition: none; } }
.ep-landing-related { border-top: 1px solid #d9dad4; }
.ep-landing-related a { display: inline-block; padding-block: .5rem; color: #3f3e39; }
.ep-landing-related > a { margin-top: 1rem; }
.ep-landing-cta { background: #171613; padding: clamp(2rem,5vw,4rem); margin-block: 1rem 4rem; }
.ep-landing-cta h2, .ep-landing-cta .ep-landing-actions > a:not(.ep-btn) { color: white; }
.ep-landing-cta p { color: #deded8; }
.ep-landing-cta .ep-landing-actions { margin-bottom: 0; }
.ep-landing-cta a:focus-visible { outline-color: #ef7d00; }
/* Six categories, one panel. Keep every service reachable on shorter screens. */
.ep-services-tree { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3rem; max-width: 1440px; margin: 0 auto; padding: 2rem clamp(1.25rem,4vw,4rem) 5rem; }
.ep-services-tree h2 { border-bottom: 1px solid #d9dad4; padding-bottom: 1rem; font-size: 1.55rem; }
.ep-services-tree h3 { margin: 0; font-size: 1rem; line-height: 1.45; }
.ep-services-tree ul { list-style: none; padding: 0; margin: 0; }
.ep-services-tree li { margin: 0; }
.ep-services-tree a { display: block; padding-block: .5rem; color: #171613; text-decoration: none; }
.ep-services-tree a:hover { color: #a65300; }
@media (min-width:1025px) {
 .header-navigation .header-menu-container li.ep-mega > ul.sub-menu { max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; }
 .header-navigation .header-menu-container li.ep-mega > ul.sub-menu > li > a { letter-spacing: .04em; font-size: .79rem; }
}
@media (max-width:900px) {
 .ep-landing-hero { gap: 2rem; }
 .ep-landing-section, .ep-landing-choice { grid-template-columns: 1fr; gap: 1.5rem; }
 .ep-landing-section__intro { max-width: 70ch; }
}
@media (max-width:760px) {
 .ep-services-tree { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 3rem; }
 .ep-landing-hero { grid-template-columns: 1fr; padding-top: 1rem; padding-bottom: 2rem; }
 .ep-landing-hero__image img { aspect-ratio: 16/10; }
 .ep-landing-toc ul { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; }
 .ep-landing-process ol, .ep-landing-project-grid { grid-template-columns: 1fr; }
 .ep-landing-process, .ep-landing-projects, .ep-landing-faq, .ep-landing-related { padding-block: 1rem 2.5rem; }
 .ep-landing-advice { margin-block: 2.5rem; }
 .ep-landing-breadcrumb { font-size: .76rem; }
}
@media (max-width:440px) {
 .ep-landing-details, .ep-landing-choice__options { grid-template-columns: 1fr; gap: 1.35rem; }
 .ep-landing-actions { align-items: flex-start; gap: .4rem 1rem; }
 .ep-landing-toc ul { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Héros photographique pleine largeur et bande finale : la photo ouvre la
   page, la bande sombre la referme. Le corps reste sur la colonne du site.
   Pleine largeur par `cqw` (main.wrap est le conteneur), jamais par `vw`.
   ========================================================================== */
.ep-landing {
	--ep-landing-gutter: clamp(1.25rem, 4vw, 4rem);
	/* Bord gauche de la colonne de contenu, mesuré depuis le bord de l'écran. */
	--ep-landing-edge: calc(max(0px, (100cqw - 1440px) / 2) + var(--ep-landing-gutter));
	position: relative;
}

.ep-landing:has(> .ep-landing-hero:not(.ep-landing-hero--text)) > .ep-landing-breadcrumb {
	position: absolute;
	z-index: 2;
	inset: 0 var(--ep-landing-gutter) auto;
}
.site .ep-landing:has(> .ep-landing-hero:not(.ep-landing-hero--text)) > .ep-landing-breadcrumb :is(a, span) { color: rgba(255, 255, 255, .86) !important; }
.site .ep-landing:has(> .ep-landing-hero:not(.ep-landing-hero--text)) > .ep-landing-breadcrumb [aria-current] { color: #fff !important; }
.site .ep-landing:has(> .ep-landing-hero:not(.ep-landing-hero--text)) > .ep-landing-breadcrumb a:hover { color: #fff !important; text-decoration: underline; }

.ep-landing-hero:not(.ep-landing-hero--text) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	grid-template-columns: minmax(0, 46rem);
	align-items: end;
	width: 100cqw;
	max-width: none;
	min-height: clamp(34rem, calc(100svh - 73px), 60rem);
	margin-inline: calc(50% - 50cqw);
	margin-bottom: 0;
	padding: clamp(6rem, 12vw, 9rem) var(--ep-landing-edge) clamp(3rem, 6vw, 5.5rem);
	background: #171613;
	color: #fff;
}

.ep-landing-hero:not(.ep-landing-hero--text) .ep-landing-hero__image {
	position: absolute;
	z-index: -1;
	inset: 0;
}
.ep-landing-hero:not(.ep-landing-hero--text) .ep-landing-hero__image img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
	animation: ep-landing-hero-in 1.6s cubic-bezier(.16, 1, .3, 1) both;
}
/* Voile chaud : lisibilité du texte en bas à gauche et du fil d'Ariane en haut,
   le haut droit de la photo reste intact. */
.ep-landing-hero:not(.ep-landing-hero--text) .ep-landing-hero__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(23, 22, 19, .55) 0, rgba(23, 22, 19, 0) 9rem),
		linear-gradient(to top, rgba(23, 22, 19, .9) 0%, rgba(23, 22, 19, .55) 38%, rgba(23, 22, 19, 0) 72%),
		linear-gradient(to right, rgba(23, 22, 19, .6) 0%, rgba(23, 22, 19, 0) 62%);
}
@keyframes ep-landing-hero-in { from { transform: scale(1.06); } to { transform: none; } }

.ep-landing-hero:not(.ep-landing-hero--text) h1 {
	max-width: 15ch;
	margin-bottom: 1.25rem;
	color: #fff;
	font-size: clamp(2.6rem, 5.4vw, 5.6rem);
	line-height: .98;
	letter-spacing: -.04em;
}
.ep-landing .ep-landing-hero:not(.ep-landing-hero--text) .ep-landing-lead {
	max-width: 44ch;
	color: rgba(255, 255, 255, .86);
}
.site .ep-landing .ep-landing-hero:not(.ep-landing-hero--text) a:not(.ep-btn) { color: #fff !important; }
.site .ep-landing .ep-landing-hero:not(.ep-landing-hero--text) a:not(.ep-btn):hover { color: #ef7d00 !important; }
.ep-landing-hero:not(.ep-landing-hero--text) .ep-landing-project-link { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .24); }
.ep-landing-hero:not(.ep-landing-hero--text) a:focus-visible { outline-color: #ef7d00; }

/* Sommaire : posé sous la photo, il annonce le corps de page. */
.ep-landing-hero:not(.ep-landing-hero--text) + .ep-landing-toc { border-top: 0; padding-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Bande finale pleine largeur, alignée sur la colonne. */
.ep-landing-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1.5rem clamp(2rem, 6vw, 6rem);
	width: 100cqw;
	margin: clamp(3rem, 6vw, 5rem) calc(50% - 50cqw) 0;
	padding: clamp(3.5rem, 7vw, 6rem) var(--ep-landing-edge);
}
.ep-landing-cta h2 { grid-column: 1; margin: 0; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.ep-landing-cta p { grid-column: 1; margin: 0; }
.ep-landing-cta .ep-landing-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }

@media (max-width: 760px) {
	.ep-landing-hero:not(.ep-landing-hero--text) {
		grid-template-columns: minmax(0, 1fr);
		min-height: clamp(30rem, calc(100svh - 64px), 44rem);
		padding-top: 5.5rem;
		padding-bottom: 2.25rem;
	}
	.ep-landing-hero:not(.ep-landing-hero--text) .ep-landing-hero__image::after {
		background:
			linear-gradient(to bottom, rgba(23, 22, 19, .55) 0, rgba(23, 22, 19, 0) 7rem),
			linear-gradient(to top, rgba(23, 22, 19, .92) 0%, rgba(23, 22, 19, .7) 50%, rgba(23, 22, 19, .1) 85%);
	}
	.ep-landing-cta { grid-template-columns: minmax(0, 1fr); }
	.ep-landing-cta .ep-landing-actions { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.ep-landing-hero:not(.ep-landing-hero--text) .ep-landing-hero__image img { animation: none; }
}


/* Page de groupe : photo d'illustration d'un service sans réalisation. */
.ep-landing-section__illustration { margin: 1.75rem 0 0; }
.ep-landing-section__illustration img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--ep-radius-media, 12px); }
/* Page de groupe : réalisation la plus récente à côté du texte du service. */
.ep-landing-section__lead { display: flex; flex-direction: column; margin-top: 1.75rem; }
.ep-landing-section__lead:has(.ep-landing-detail__source:hover) .ep-landing-detail__media img { transform: scale(1.03); opacity: .92; }

/* ==========================================================================
   Page hub /prestations : même langage que les landings. Photo pleine
   largeur à l'ouverture, corps aligné sur la colonne de l'en-tête, bande
   sombre à la fin. Le contenu WordPress reste inchangé (CSS seulement).
   ========================================================================== */
.ep-services-page {
	--ep-hub-edge: calc(max(0px, (100cqw - 1440px) / 2) + clamp(1.25rem, 4vw, 4rem));
	overflow: visible;
	/* Le corps suit la colonne du héros (1440px moins sa gouttière) au lieu
	   d'occuper toute la largeur des grands écrans. */
	max-width: calc(1440px - 2 * clamp(1.25rem, 4vw, 4rem));
	margin-inline: auto;
}
/* Le corps s'aligne sur l'en-tête (la page porte déjà la gouttière). */
.ep-services-page :is(.ep-services-index, .ep-services-tree, .ep-services-workshop, .ep-services-advice) {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* Héros */
.ep-services-page .ep-services-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 46rem);
	align-items: end;
	gap: 0;
	width: 100cqw;
	max-width: none;
	min-height: clamp(34rem, calc(100svh - 73px), 60rem);
	margin: 0 calc(50% - 50cqw);
	padding: clamp(6rem, 12vw, 9rem) var(--ep-hub-edge) clamp(3rem, 6vw, 5.5rem);
	background: #171613;
	color: #fff;
}
.ep-services-page .ep-services-hero__media {
	position: absolute;
	z-index: -1;
	inset: 0;
	height: auto;
	border-radius: 0;
	background: #171613;
}
.ep-services-page .ep-services-hero__media img { animation: ep-landing-hero-in 1.6s cubic-bezier(.16, 1, .3, 1) both; }
.ep-services-page .ep-services-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(23, 22, 19, .9) 0%, rgba(23, 22, 19, .55) 38%, rgba(23, 22, 19, 0) 72%),
		linear-gradient(to right, rgba(23, 22, 19, .6) 0%, rgba(23, 22, 19, 0) 62%);
}
.ep-services-page .ep-services-hero h1 {
	max-width: 14ch;
	margin-bottom: 1.25rem;
	color: #fff;
	font-size: clamp(2.6rem, 5.4vw, 5.6rem);
	line-height: .98;
	letter-spacing: -.04em;
	text-transform: none;
	text-wrap: balance;
}
.ep-services-page .ep-services-hero h1 span { color: #ef7d00; }
.ep-services-page .ep-services-hero__lead { max-width: 44ch; color: rgba(255, 255, 255, .86); font-size: clamp(1.05rem, 1.3vw, 1.22rem); }
.site .ep-services-page .ep-services-hero a:not(.ep-btn) { color: #fff !important; }
.site .ep-services-page .ep-services-hero a:not(.ep-btn):hover { color: #ef7d00 !important; }
.ep-services-page .ep-services-hero a:focus-visible { outline-color: #ef7d00; }

/* Six familles */
.ep-services-page .ep-services-index { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }

/* Toutes les prestations : une rangée par famille, comme les sections des landings. */
.ep-services-page .ep-services-tree { display: block; padding-block: 0 clamp(3rem, 6vw, 5rem); }
.ep-services-page .ep-services-tree > div {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 1rem clamp(2rem, 6vw, 6rem);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
	border-top: 1px solid #d9dad4;
}
.ep-services-page .ep-services-tree > div:last-child { border-bottom: 1px solid #d9dad4; }
.ep-services-page .ep-services-tree h2 { margin: 0; padding: 0; border: 0; font-size: clamp(1.65rem, 2.8vw, 2.75rem); line-height: 1.12; }
.ep-services-page .ep-services-tree ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 2rem; align-content: start; }
.ep-services-page .ep-services-tree h3 { font-size: clamp(1.02rem, 1.3vw, 1.15rem); }

/* Atelier et conseils */
.ep-services-page .ep-services-workshop { padding-block: clamp(3rem, 6vw, 5rem); }
.ep-services-page .ep-services-advice {
	margin-block: clamp(1rem, 3vw, 2rem) 0;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	background: #f5f6f7;
	border-radius: var(--ep-radius-card, 12px);
}

/* Bande finale pleine largeur. */
.ep-services-page .ep-services-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1.5rem clamp(2rem, 6vw, 6rem);
	width: 100cqw;
	max-width: none;
	margin: clamp(3rem, 6vw, 5rem) calc(50% - 50cqw) 0;
	padding: clamp(3.5rem, 7vw, 6rem) var(--ep-hub-edge);
	border-radius: 0;
	background: #171613;
	text-align: left;
}
.ep-services-page .ep-services-cta h2 { grid-column: 1; margin: 0; color: #fff; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.ep-services-page .ep-services-cta p:not(.ep-services-cta__actions) { grid-column: 1; margin: 0; color: #deded8; }
.ep-services-page .ep-services-cta__actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.site .ep-services-page .ep-services-cta a:not(.ep-btn) { color: #fff !important; }
.ep-services-page .ep-services-cta a:focus-visible { outline-color: #ef7d00; }

@media (max-width: 760px) {
	/* Sur mobile, la page porte une gouttière de 1rem : le héros la suit. */
	.ep-services-page { --ep-hub-edge: 1rem; }
	.ep-services-page .ep-services-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: clamp(30rem, calc(100svh - 64px), 44rem);
		padding-top: 5.5rem;
		padding-bottom: 2.25rem;
	}
	.ep-services-page .ep-services-hero h1 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
	.ep-services-page .ep-services-hero__media { aspect-ratio: auto; }
	.ep-services-page .ep-services-hero__media::after {
		background: linear-gradient(to top, rgba(23, 22, 19, .92) 0%, rgba(23, 22, 19, .7) 50%, rgba(23, 22, 19, .1) 85%);
	}
	.ep-services-page .ep-services-tree > div { grid-template-columns: minmax(0, 1fr); }
	.ep-services-page .ep-services-tree ul { grid-template-columns: minmax(0, 1fr); }
	.ep-services-page .ep-services-cta { grid-template-columns: minmax(0, 1fr); }
	.ep-services-page .ep-services-cta__actions { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.ep-services-page .ep-services-hero__media img { animation: none; }
}

/* Hub : le titre de la famille reste en vue le long de sa rangée ; une photo par sous-catégorie. */
.ep-services-tree__head { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; min-width: 0; align-self: start; position: sticky; top: 7rem; }
.site .ep-services-tree a.ep-services-tree__all { padding-block: .45rem; color: #a65300 !important; font-size: .92rem; font-weight: 700; }
.ep-services-tree__all span { display: inline-block; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.ep-services-tree__all:hover span { transform: translate(2px, -2px); }
.ep-services-page .ep-services-tree ul:has(.ep-services-tree__item) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
/* Quatre sous-catégories : deux rangées pleines plutôt que 3 + 1. */
.ep-services-page .ep-services-tree ul:has(> .ep-services-tree__item:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ep-services-tree__item { display: flex; flex-direction: column; min-width: 0; }
.ep-services-tree__media { display: block; margin-bottom: .75rem; overflow: hidden; border-radius: var(--ep-radius-media, 12px); background: #f5f6f7; }
.ep-services-tree__media img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .2s ease-out; }
.ep-services-tree__item:hover .ep-services-tree__media img { transform: scale(1.03); opacity: .92; }
@media (max-width: 1100px) {
	.ep-services-page .ep-services-tree ul:has(.ep-services-tree__item) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.ep-services-page .ep-services-tree ul:has(.ep-services-tree__item) { gap: 1.25rem .9rem; }
	/* Une colonne : le titre précède simplement ses cartes. */
	.ep-services-tree__head { position: static; }
}
@media (prefers-reduced-motion: reduce) { .ep-services-tree__media img, .ep-services-tree__all span { transition: none; } }

/* ==========================================================================
   Mouvement — « la pose ». Un titre se pose comme un adhésif qu'on applique
   à la raclette : balayage de gauche à droite, une ligne orange en guise de
   raclette. Les photos reprennent ce geste, plus discrètement, en entrant à
   l'écran. État par défaut visible : sans support ou en mouvement réduit,
   rien n'est caché.
   ========================================================================== */
:is(.ep-landing-hero:not(.ep-landing-hero--text), .ep-services-page .ep-services-hero) h1 { position: relative; }

@media (prefers-reduced-motion: no-preference) {
	/* 1. Moment principal : le titre du héros, une fois la photo posée. */
	:is(.ep-landing-hero:not(.ep-landing-hero--text), .ep-services-page .ep-services-hero) h1 {
		animation: ep-pose 900ms cubic-bezier(.16, 1, .3, 1) 250ms backwards;
	}
	:is(.ep-landing-hero:not(.ep-landing-hero--text), .ep-services-page .ep-services-hero) h1::after {
		content: "";
		position: absolute;
		top: -.08em;
		bottom: -.12em;
		left: 0;
		width: 3px;
		border-radius: 2px;
		background: #ef7d00;
		opacity: 0;
		pointer-events: none;
		animation: ep-raclette 900ms cubic-bezier(.16, 1, .3, 1) 250ms;
	}
	:is(.ep-landing-hero:not(.ep-landing-hero--text), .ep-services-page .ep-services-hero)
		:is(.ep-landing-lead, .ep-services-hero__lead, .ep-landing-actions, .ep-services-hero__actions, .ep-landing-project-link) {
		animation: ep-pose-suite 600ms cubic-bezier(.16, 1, .3, 1) 750ms backwards;
	}

	/* 3. Continuité : le H2 atteint depuis le sommaire est souligné. */
	html:has(.ep-landing) { scroll-behavior: smooth; }
	.ep-landing h2:target { animation: ep-cible 700ms cubic-bezier(.16, 1, .3, 1) 200ms both; }

	/* 4. Retour : la flèche des liens vers les réalisations suit le geste. */
	.ep-landing :is(.ep-landing-more, .ep-landing-detail__count) span[aria-hidden="true"] {
		display: inline-block;
		transition: transform .2s cubic-bezier(.16, 1, .3, 1);
	}
	.ep-landing :is(.ep-landing-more, .ep-landing-detail__count):hover span[aria-hidden="true"] { transform: translate(2px, -2px); }
}

/* La cible reste marquée sans mouvement. */
.ep-landing h2:target {
	width: fit-content;
	padding-bottom: .15em;
	background: linear-gradient(#ef7d00, #ef7d00) no-repeat 0 100% / 100% 3px;
}

@keyframes ep-pose { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ep-raclette {
	0% { left: 0; opacity: 1; }
	85% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}
@keyframes ep-pose-suite { from { opacity: 0; transform: translateY(8px); } }
@keyframes ep-cible { from { background-size: 0% 3px; } }

/* 2. Photos : même geste, lié au défilement, sans JavaScript. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		:is(.ep-landing-detail__media, .ep-landing-section__illustration, .ep-landing-section__lead, .ep-services-tree__media, .ep-services-card, .ep-landing-project-grid) img {
			animation: ep-pose-photo linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 75%;
		}
		/* Le hub abandonne la montée générique de chaque section au profit de ce geste. */
		.ep-services-page .ep-reveal { animation: none; }
	}
}
@keyframes ep-pose-photo {
	from { clip-path: inset(0 100% 0 0); filter: saturate(.4); }
	to { clip-path: inset(0 0 0 0); filter: none; }
}

/* 5. Questions : la réponse se déplie au lieu d'apparaître d'un coup. */
@supports selector(::details-content) {
	@media (prefers-reduced-motion: no-preference) {
		:is(.ep-landing-faq, .ep-services-advice) details { interpolate-size: allow-keywords; }
		:is(.ep-landing-faq, .ep-services-advice) details::details-content {
			block-size: 0;
			overflow: clip;
			transition: block-size .35s cubic-bezier(.16, 1, .3, 1), content-visibility .35s allow-discrete;
		}
		:is(.ep-landing-faq, .ep-services-advice) details[open]::details-content { block-size: auto; }
	}
}