/**
 * Emaintenance 0.8.0 : accueil « Signal ».
 *
 * Chargé uniquement sur la page d'accueil (inc/enqueue.php), après signal.css.
 * Préfixe em-f-*. Couleurs des métiers : --em-c-* (tokens.css), transmises par --c.
 * Garde-fous : contenu visible sans JS ; « Réduire les animations » = tout fixe, pas d'effet figé.
 */

.home .em-main { background: var(--em-night); }

/* Sections sombres de l'accueil : titres et textes clairs (les titres héritent sinon de l'encre des fonds clairs). */
.em-f-hero, .em-f-field, .em-f-sectors, .em-f-cta {
	--em-text: #fff;
	--em-heading: #fff;
	--em-text-muted: rgb(255 255 255 / 0.78);
}

/* ---------- Éléments communs ---------- */
.em-f-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--em-soft);
}
.em-f-kicker--dark { color: var(--em-copper-700); }
.em-f-kicker--ink { color: var(--em-ink); }
.em-f-kicker__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--em-grad);
	box-shadow: 0 0 0 0 rgb(111 208 196 / 0.6);
}
.em-f-h2 {
	margin-top: 0.9rem;
	font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.4rem);
	line-height: 0.98;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.em-f-muted { color: rgb(255 255 255 / 0.45); }
.em-f-accent { font-style: normal; color: var(--em-soft); } /* dégradé : signal.css */

/* ==========================================================================
   1. PREMIER ÉCRAN
   ========================================================================== */
.em-f-hero {
	position: relative;
	isolation: isolate;
	min-height: max(680px, 100svh);
	display: flex;
	align-items: center;
	overflow: hidden;
	color: #fff;
	background: var(--em-night);
}
.em-f-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(50rem 36rem at 78% 40%, rgb(111 208 196 / 0.09), transparent 65%),
		radial-gradient(40rem 30rem at 5% 100%, rgb(76 201 240 / 0.07), transparent 60%),
		linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
	mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.em-f-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--em-space-l);
	align-items: center;
	width: 100%;
	padding-top: calc(var(--em-header-h) + clamp(1.5rem, 4vh, 3rem));
	padding-bottom: clamp(3rem, 7vh, 5rem);
}
@media (min-width: 1024px) {
	.em-f-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 3vw, 4rem); }
}
.em-f-hero__title {
	margin-top: 1.1rem;
	font-size: clamp(2.7rem, 1rem + 4.3vw, 5.4rem);
	line-height: 0.93;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}
.em-f-line { display: block; overflow: clip; padding-bottom: 0.04em; }
.em-f-line > span { display: inline-block; }
.em-f-hero__lead {
	margin-top: var(--em-space-m);
	max-width: 34rem;
	font-size: var(--em-step-1);
	line-height: 1.5;
	color: rgb(255 255 255 / 0.74);
}
.em-f-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--em-space-l); }

/* Légende des métiers (pilote le schéma) */
.em-f-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--em-space-l);
}
.em-f-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--em-hit);
	padding: 0.3rem 0.95rem 0.3rem 0.35rem;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: var(--em-radius-pill);
	color: rgb(255 255 255 / 0.88);
	font-size: 0.875rem;
	font-weight: 650;
	text-decoration: none;
	transition: border-color 250ms var(--em-ease-out), background-color 250ms var(--em-ease-out), color 250ms, transform 250ms var(--em-ease-out);
}
.em-f-legend__icon {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--c) 18%, transparent);
	color: var(--c);
	transition: background-color 250ms, color 250ms;
}
.em-f-legend__icon .em-icon { width: 1.05rem; height: 1.05rem; }
.em-f-legend__item:hover,
.em-f-legend__item:focus-visible,
.em-f-legend__item.is-active {
	border-color: var(--c);
	background: color-mix(in srgb, var(--c) 12%, transparent);
	color: #fff;
	transform: translateY(-2px);
}
.em-f-legend__item:hover .em-f-legend__icon,
.em-f-legend__item:focus-visible .em-f-legend__icon,
.em-f-legend__item.is-active .em-f-legend__icon { background: var(--c); color: var(--em-night); }

/* Schéma du bâtiment */
.em-f-hero__text, .em-f-hero__visual { min-width: 0; }
.em-f-hero__visual { position: relative; }

.em-f-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: -1.375rem;
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: 50%;
	color: #fff;
}
.em-f-hero__scroll .em-icon { width: 1.1rem; height: 1.1rem; }
@media (max-width: 1023px) {
	.em-f-hero__scroll { display: none; }
	.em-bldg { max-height: none; max-width: 34rem; }
}
@media (max-width: 599px) {
	.em-f-legend { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--em-gutter)); padding-inline: var(--em-gutter); scrollbar-width: none; }
	.em-f-legend::-webkit-scrollbar { display: none; }
	.em-f-legend__item { white-space: nowrap; }
	.em-f-hero__actions .em-btn { flex: 1 1 100%; }
}

/* Entrée (décalée de --em-f-d quand le rideau d'introduction est joué) */
@media (prefers-reduced-motion: no-preference) {
	.em-f-hero .em-f-kicker { animation: em-f-rise 700ms var(--em-ease-out) calc(var(--em-f-d, 0ms) + 80ms) both; }
	.em-f-line > span { animation: em-f-line 1000ms var(--em-ease-out) both; animation-delay: calc(var(--em-f-d, 0ms) + 180ms + var(--i, 0) * 110ms); }
	.em-f-hero__lead { animation: em-f-rise 800ms var(--em-ease-out) calc(var(--em-f-d, 0ms) + 560ms) both; }
	.em-f-legend > li { animation: em-f-rise 600ms var(--em-ease-out) both; animation-delay: calc(var(--em-f-d, 0ms) + 700ms + var(--i, 0) * 60ms); }
	.em-f-hero__actions { animation: em-f-rise 700ms var(--em-ease-out) calc(var(--em-f-d, 0ms) + 1100ms) both; }
	.em-f-hero__visual { animation: em-f-fade 1200ms var(--em-ease-out) calc(var(--em-f-d, 0ms) + 200ms) both; }
	.em-f-kicker__dot { animation: em-f-ping 2.2s var(--em-ease-out) infinite; }

	.em-bldg__draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: em-f-draw 1600ms var(--em-ease-in-out) calc(var(--em-f-d, 0ms) + 200ms) forwards; }
	.em-bldg__sys { animation: em-f-fade 800ms var(--em-ease-out) both; }
	.em-bldg__sys[data-system="second-oeuvre"] { animation-delay: calc(var(--em-f-d, 0ms) + 700ms); }
	.em-bldg__sys[data-system="eau"] { animation-delay: calc(var(--em-f-d, 0ms) + 800ms); }
	.em-bldg__sys[data-system="cvc"] { animation-delay: calc(var(--em-f-d, 0ms) + 850ms); }
	.em-bldg__sys[data-system="elec"] { animation-delay: calc(var(--em-f-d, 0ms) + 1000ms); }
	.em-bldg__sys[data-system="plomberie"] { animation-delay: calc(var(--em-f-d, 0ms) + 1150ms); }
	.em-bldg__sys[data-system="gtb"] { animation-delay: calc(var(--em-f-d, 0ms) + 1300ms); }
	.em-bldg__sys[data-system="incendie"] { animation-delay: calc(var(--em-f-d, 0ms) + 1450ms); }
	.em-bldg__sys[data-system="maintenance"] { animation-delay: calc(var(--em-f-d, 0ms) + 1600ms); }

}

/* ==========================================================================
   2. RÉFÉRENCES (bandeau trust.php) : bande blanche, logos en niveaux de gris
   (les logos fournis ont souvent un fond blanc : pas d'inversion sur fond noir).
   ========================================================================== */
.home .em-trust { background: #fff; border: 0; }
.home .em-trust .em-btn--link { color: var(--em-copper-700); }

/* ==========================================================================
   3. MÉTIERS : piste horizontale
   ========================================================================== */
.em-f-metiers { position: relative; background: var(--em-ivory); color: var(--em-ink); }
.em-f-metiers__sticky { padding-block: var(--em-space-section) var(--em-space-xl); }
.em-f-metiers__head { display: grid; gap: var(--em-space-m); align-items: end; margin-bottom: var(--em-space-l); }
.em-f-metiers__head .em-f-muted { color: var(--em-ink-muted); }
@media (min-width: 1024px) {
	.em-f-metiers__head { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.em-f-metiers__intro { color: var(--em-ink-muted); margin-bottom: 0.75rem; }
.em-f-metiers__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.em-f-metiers__viewport::-webkit-scrollbar { display: none; }
.em-f-metiers__track {
	display: flex;
	gap: 1rem;
	width: max-content;
	padding-inline: max(var(--em-gutter), calc((100vw - var(--em-container)) / 2 + var(--em-gutter)));
	outline-offset: 6px;
}
.em-f-card { flex: none; width: min(82vw, 30rem); scroll-snap-align: center; }
.em-f-card__link {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	height: clamp(30rem, 62svh, 40rem);
	overflow: hidden;
	border-radius: var(--em-radius-l);
	color: #fff;
	text-decoration: none;
	background: var(--em-night-800);
}
.em-f-card__media { position: absolute; inset: 0; z-index: -2; }
.em-f-card__media img { transition: transform 900ms var(--em-ease-out); }
.em-f-card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(2 19 20 / 0.1) 0%, rgb(2 19 20 / 0.35) 35%, rgb(2 19 20 / 0.92) 75%);
}
.em-f-card__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 5px;
	background: var(--c);
}
.em-f-card__body { display: grid; gap: 0.8rem; width: 100%; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.em-f-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; }
.em-f-card__num { font-size: 3rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: var(--c); }
.em-f-card__num small { font-size: 1rem; color: rgb(255 255 255 / 0.5); letter-spacing: 0; margin-left: 0.2rem; }
.em-f-card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c); color: var(--em-night); }
.em-f-card__icon .em-icon { width: 1.4rem; height: 1.4rem; }
.em-f-card__title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.em-f-card__ops { font-size: 0.9375rem; color: rgb(255 255 255 / 0.78); }
.em-f-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.em-f-card__tags span { padding: 0.3rem 0.65rem; border-radius: var(--em-radius-pill); background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.14); font-size: 0.75rem; font-weight: 650; }
.em-f-card__more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-weight: 700; color: var(--c); }
.em-f-card__more .em-icon { width: 1.1rem; height: 1.1rem; transition: transform 250ms var(--em-ease-out); }
.em-f-card__link:hover .em-f-card__media img,
.em-f-card__link:focus-visible .em-f-card__media img { transform: scale(1.06); }
.em-f-card__link:hover .em-f-card__more .em-icon,
.em-f-card__link:focus-visible .em-f-card__more .em-icon { transform: translateX(4px); }

.em-f-metiers__progress { position: relative; display: flex; gap: 4px; margin-top: var(--em-space-l); height: 4px; }
.em-f-metiers__progress span { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--c) 30%, transparent); }
.em-f-metiers__progress i { position: absolute; left: var(--em-gutter); right: var(--em-gutter); top: -3px; height: 10px; pointer-events: none; display: none; }

/* Piste figée (posée par front.js : grand écran, animations autorisées) */
.em-f-metiers.is-pinned .em-f-metiers__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: calc(var(--em-header-h) + 1rem) 1.5rem;
	overflow: hidden;
}
.em-f-metiers.is-pinned .em-f-metiers__viewport { overflow: visible; scroll-snap-type: none; }
.em-f-metiers.is-pinned .em-f-metiers__track { transform: translate3d(calc(var(--em-pin-x, 0) * -1px), 0, 0); will-change: transform; }
.em-f-metiers.is-pinned .em-f-card__link { height: clamp(24rem, 52svh, 36rem); }
.em-f-metiers.is-pinned .em-f-metiers__progress span { background: color-mix(in srgb, var(--c) 22%, transparent); position: relative; overflow: hidden; }
.em-f-metiers.is-pinned .em-f-metiers__progress span.is-on { background: var(--c); }
.em-f-metiers.is-pinned .em-f-metiers__head { margin-bottom: var(--em-space-m); }
.em-f-metiers.is-pinned .em-f-h2 { font-size: clamp(2rem, 1rem + 2.8vw, 3.6rem); }

/* ==========================================================================
   5. SUR LE TERRAIN (vidéo)
   ========================================================================== */
.em-f-field {
	position: relative;
	isolation: isolate;
	min-height: max(560px, 92svh);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #fff;
	background: var(--em-night);
}
.em-f-field__media { position: absolute; inset: 0; z-index: -2; }
.em-f-field__media .em-pic img,
.em-f-field__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.em-f-field__video { opacity: 0; transition: opacity 1.2s var(--em-ease-out); }
.em-f-field__video.is-playing { opacity: 1; }
.em-f-field::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgb(2 19 20 / 0.82) 0%, rgb(2 19 20 / 0.6) 45%, rgb(2 19 20 / 0.25) 100%),
		linear-gradient(180deg, rgb(2 19 20 / 0.7) 0%, rgb(2 19 20 / 0.2) 35%, rgb(2 19 20 / 0.92) 100%);
}
.em-f-field__inner { padding-block: var(--em-space-section); }
.em-f-field__title { max-width: 18ch; color: #fff; text-shadow: 0 2px 24px rgb(2 19 20 / 0.6); }
.em-f-field__text { margin-top: var(--em-space-m); max-width: 38rem; color: rgb(255 255 255 / 0.9); text-shadow: 0 1px 12px rgb(2 19 20 / 0.7); }
.em-f-field__list { display: grid; gap: 0.75rem; margin-top: var(--em-space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.em-f-field__list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.1rem;
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: var(--em-radius-m);
	background: rgb(2 19 20 / 0.45);
	font-weight: 700;
}
@supports (backdrop-filter: blur(1px)) {
	.em-f-field__list li { backdrop-filter: blur(10px); }
}
.em-f-field__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--em-grad); color: var(--em-night); }
.em-f-field__icon .em-icon { width: 1.2rem; height: 1.2rem; }
.em-f-field__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--em-hit);
	margin-top: var(--em-space-m);
	padding: 0 1rem;
	border: 1px solid rgb(255 255 255 / 0.4);
	border-radius: var(--em-radius-pill);
	background: transparent;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 650;
}
.em-f-field__toggle[hidden] { display: none; }
.em-f-field__toggle-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.em-f-field__toggle[data-paused="true"] .em-f-field__toggle-icon { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
/* Titre mot à mot (front.js) */
.em-f-w { display: inline-block; opacity: 0.4; transition: opacity 500ms var(--em-ease-out); }
.em-f-w.is-on { opacity: 1; }

/* ==========================================================================
   6. MÉTHODE
   ========================================================================== */
.em-f-method { padding-block: var(--em-space-section); background: var(--em-ivory); color: var(--em-ink); }
.em-f-method__title {
	margin-top: 1rem;
	font-size: clamp(2.6rem, 1rem + 6.6vw, 8.5rem);
	line-height: 0.92;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.em-f-method__title span { display: block; transition: color 500ms var(--em-ease-out); }
.em-f-ready .em-f-method__title[data-em-scrub] span { color: rgb(4 29 31 / 0.14); }
.em-f-ready .em-f-method__title[data-em-scrub] span.is-on { color: var(--em-ink); }
.em-f-ready .em-f-method__title[data-em-scrub] span.is-on:last-child { color: var(--em-copper-700); }
@media (prefers-reduced-motion: reduce) {
	.em-f-ready .em-f-method__title[data-em-scrub] span { color: var(--em-ink); }
}
.em-f-method__grid { display: grid; gap: var(--em-space-l); margin-top: var(--em-space-xl); }
@media (min-width: 1024px) {
	.em-f-method__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); }
}
.em-f-method__intro { display: grid; gap: var(--em-space-s); align-content: start; color: var(--em-ink-muted); }
.em-f-method__steps { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); background: var(--em-sand); border: 1px solid var(--em-sand); border-radius: var(--em-radius-m); overflow: hidden; }
.em-f-method__steps li { position: relative; display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem; background: var(--em-ivory); transition: background-color 300ms; }
.em-f-method__steps li:hover { background: #fff; }
.em-f-method__num { font-size: 0.8125rem; font-weight: 700; color: var(--em-copper-700); }
.em-f-method__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--em-night); color: var(--em-soft); }
.em-f-method__icon .em-icon { width: 1.3rem; height: 1.3rem; }
.em-f-method__step { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.em-f-method__steps p { color: var(--em-ink-muted); font-size: 0.9375rem; }

/* ==========================================================================
   7. SECTEURS
   ========================================================================== */
.em-f-sectors { position: relative; padding-block: var(--em-space-section); background: var(--em-night); color: #fff; overflow: hidden; }
.em-f-sectors__head { max-width: 48rem; margin-bottom: var(--em-space-l); }
.em-f-sectors__intro { margin-top: var(--em-space-m); color: rgb(255 255 255 / 0.7); }
.em-f-sectors__list { border-top: 1px solid rgb(255 255 255 / 0.14); margin-bottom: var(--em-space-l); }
.em-f-sectors__list > li { border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.em-f-sectors__row {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1rem;
	padding-block: clamp(0.9rem, 0.5rem + 1.2vw, 1.6rem);
	color: #fff;
	text-decoration: none;
}
.em-f-sectors__num { font-size: 0.8125rem; font-weight: 700; color: rgb(255 255 255 / 0.45); }
.em-f-sectors__name {
	font-size: clamp(2rem, 1rem + 4vw, 5.2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	transition: color 300ms var(--em-ease-out), transform 400ms var(--em-ease-out);
}
.em-f-sectors__thumb { display: none; width: 4.5rem; height: 3.2rem; border-radius: var(--em-radius-s); overflow: hidden; }
.em-f-sectors__arrow { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 50%; transition: background-color 300ms, color 300ms, border-color 300ms, transform 300ms var(--em-ease-out); }
.em-f-sectors__arrow .em-icon { width: 1.1rem; height: 1.1rem; }
a.em-f-sectors__row:hover .em-f-sectors__name,
a.em-f-sectors__row:focus-visible .em-f-sectors__name { color: var(--em-soft); transform: translateX(0.75rem); }
a.em-f-sectors__row:hover .em-f-sectors__arrow,
a.em-f-sectors__row:focus-visible .em-f-sectors__arrow { background: var(--em-soft); border-color: var(--em-soft); color: var(--em-night); transform: rotate(-45deg); }
@media (hover: none), (max-width: 767px) {
	.em-f-sectors__thumb { display: block; }
	.em-f-sectors__row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
	.em-f-sectors__arrow { display: none; }
}
.em-f-sectors__float {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: clamp(14rem, 22vw, 22rem);
	aspect-ratio: 4 / 3;
	border-radius: var(--em-radius-m);
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) scale(0.85) rotate(-4deg);
	transition: opacity 300ms var(--em-ease-out), transform 300ms var(--em-ease-out);
	box-shadow: 0 30px 60px rgb(0 0 0 / 0.45);
}
.em-f-sectors__float.is-on { opacity: 1; transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) scale(1) rotate(-3deg); }
.em-f-sectors__img { position: absolute; inset: 0; opacity: 0; transition: opacity 250ms; }
.em-f-sectors__img.is-on { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
	.em-f-sectors__float { display: none; }
}

/* ==========================================================================
   8. RÉALISATIONS
   ========================================================================== */
.em-f-proj { padding-block: var(--em-space-section); background: var(--em-ivory); color: var(--em-ink); }
.em-f-proj__head { display: grid; gap: var(--em-space-m); align-items: end; margin-bottom: var(--em-space-l); }
@media (min-width: 1024px) {
	.em-f-proj__head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.em-f-proj__intro { color: var(--em-ink-muted); margin-bottom: 0.75rem; }
.em-f-proj__list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.em-f-proj__card {
	position: relative;
	display: grid;
	gap: 0.6rem;
	align-content: start;
	padding: 1.75rem;
	border-radius: var(--em-radius-l);
	background: #fff;
	border: 1px solid var(--em-sand);
	transition: transform 400ms var(--em-ease-out), box-shadow 400ms var(--em-ease-out), border-color 300ms;
}
.em-f-proj__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgb(4 29 31 / 0.12); border-color: transparent; }
.em-f-proj__logo { display: flex; align-items: center; height: 4rem; margin-bottom: 0.75rem; }
.em-f-proj__logo img { width: auto; max-width: 10rem; max-height: 3.5rem; object-fit: contain; }
.em-f-proj__name { font-size: 1.4rem; font-weight: 700; }
.em-f-proj__sector { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--em-copper-700); }
.em-f-proj__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.em-f-proj__site { color: var(--em-ink-muted); font-size: 0.9375rem; }
.em-f-proj__works { display: grid; gap: 0.4rem; margin-top: 0.5rem; padding-right: 3rem; }
.em-f-proj__works li { position: relative; padding-left: 1.1rem; font-size: 0.9375rem; }
.em-f-proj__works li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--em-copper-700); }
.em-f-proj__link { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1.5rem; border-radius: inherit; color: var(--em-ink); }
.em-f-proj__link span[aria-hidden] { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--em-night); color: var(--em-soft); transition: transform 300ms var(--em-ease-out); }
.em-f-proj__link .em-icon { width: 1.1rem; height: 1.1rem; }
.em-f-proj__link:hover span[aria-hidden],
.em-f-proj__link:focus-visible span[aria-hidden] { transform: rotate(-45deg); }

/* ==========================================================================
   9. APPEL À L'ACTION FINAL : grand aplat en dégradé de sarcelles (charte)
   ========================================================================== */
.em-f-cta { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--em-space-section); background: var(--em-grad-deep); color: #fff; }
.em-f-cta::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: -1;
	background: radial-gradient(40% 50% at 85% 20%, rgb(159 227 216 / 0.28), transparent 65%), radial-gradient(35% 45% at 10% 90%, rgb(93 166 166 / 0.3), transparent 60%);
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.em-f-cta::before { animation: em-imm-aurora 16s var(--em-ease-in-out) infinite alternate; }
}
.em-f-cta .em-f-kicker--ink { color: #f2ebdc; }
.em-f-cta__title {
	margin-top: 1rem;
	max-width: 16ch;
	font-size: clamp(2.6rem, 1rem + 5.6vw, 7.5rem);
	line-height: 0.92;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}
.em-f-cta__row { display: grid; gap: var(--em-space-l); align-items: end; margin-top: var(--em-space-l); }
@media (min-width: 1024px) {
	.em-f-cta__row { grid-template-columns: minmax(0, 1fr) auto; }
}
.em-f-cta__text { max-width: 36rem; font-size: var(--em-step-1); color: rgb(255 255 255 / 0.88); }
.em-f-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.em-f-cta__phone { display: inline-flex; align-items: center; gap: 0.6rem; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.01em; color: #fff; text-decoration: none; }
.em-f-cta__phone .em-icon { width: 1.6rem; height: 1.6rem; color: var(--em-soft-300); }
.em-f-cta__phone:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.em-f-cta__marquee {
	display: flex;
	margin-top: var(--em-space-xl);
	white-space: nowrap;
	font-size: clamp(4rem, 2rem + 10vw, 13rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 0.85;
	color: rgb(159 227 216 / 0.16);
	user-select: none;
}
.em-f-cta__marquee span { flex: none; padding-right: 0.3em; }
@media (prefers-reduced-motion: no-preference) {
	.em-f-cta__marquee span { animation: em-f-marquee 60s linear infinite; }
}

/* Bouton clair sur l'aplat sarcelle (variante « ink » conservée pour les gabarits) */
.em-btn--ink { --btn-bg: #fff; --btn-fg: var(--em-night); --btn-border: #fff; }
.em-btn--ink:hover { --btn-bg: var(--em-soft-300); --btn-border: var(--em-soft-300); }
.em-btn--ink .em-btn__icon { color: var(--em-deep); }

/* ==========================================================================
   10. FINITIONS « PREMIUM »
   Lumière et profondeur du premier écran, socle du schéma et fiche métier,
   sections qui se chevauchent en cartes arrondies, texture, survols, rideau d'intro.
   ========================================================================== */

/* --- Halos lumineux du premier écran --- */

/* --- Texture fine (grain) sur les fonds sombres --- */
.em-f-hero::after,
.em-f-sectors::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.07;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.em-f-hero__grid, .em-f-hero__scroll, .em-f-sectors > .em-container { position: relative; z-index: 1; }

/* --- Socle du schéma : panneau de verre, reflet au sol --- */
.em-f-hero__visual { isolation: isolate; padding: clamp(1rem, 2vw, 2rem) clamp(0.75rem, 2vw, 2rem) clamp(1rem, 1.5vw, 1.5rem); }
/* --- Fiche du métier actif, sous le schéma --- */
.em-f-info {
	--c: var(--em-soft);
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	max-width: 34rem;
	margin: 0.75rem auto 0;
	padding: 0.95rem 1.15rem;
	border-radius: 1rem;
	border: 1px solid rgb(255 255 255 / 0.1);
	background: rgb(2 19 20 / 0.55);
	color: #fff;
	min-height: 4.6rem;
}
.em-f-info__dot { flex: none; width: 0.75rem; height: 0.75rem; margin-top: 0.35rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent), 0 0 18px var(--c); transition: background-color 300ms, box-shadow 300ms; }
.em-f-info__body { display: grid; gap: 0.2rem; }
.em-f-info__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.em-f-info__ops { font-size: 0.875rem; color: rgb(255 255 255 / 0.72); }
.em-f-info.is-on .em-f-info__title { color: var(--c); }
@media (prefers-reduced-motion: no-preference) {
	.em-f-info.is-swap .em-f-info__body { animation: em-f-rise 450ms var(--em-ease-out) both; }
}

/* --- Sections qui se chevauchent en cartes arrondies --- */
.em-f-metiers,
.em-f-field,
.em-f-method,
.em-f-sectors,
.em-f-proj,
.em-f-cta {
	position: relative;
	z-index: 1;
	border-radius: clamp(1.75rem, 3vw, 3rem) clamp(1.75rem, 3vw, 3rem) 0 0;
	margin-top: calc(-1 * clamp(1.75rem, 3vw, 3rem));
	box-shadow: 0 -24px 60px rgb(2 19 20 / 0.18);
}
.em-f-field, .em-f-sectors, .em-f-cta { box-shadow: 0 -24px 60px rgb(2 19 20 / 0.35); }
.em-f-metiers.is-pinned .em-f-metiers__sticky { border-radius: inherit; }

/* --- Bandeau des références : logos sur pastilles blanches, fond nuit --- */
.home .em-trust { background: var(--em-night); padding-bottom: calc(clamp(1.4rem, 1rem + 1.6vw, 2.4rem) + clamp(1.75rem, 3vw, 3rem)); }
.home .em-trust__title { color: rgb(255 255 255 / 0.6); }
.home .em-trust .em-btn--link { color: var(--em-soft); }
.home .em-trust__item { height: 4.25rem; padding: 0.6rem 1.4rem; border-radius: 1rem; background: #fff; }
.home .em-trust__track { gap: 0.75rem; padding-right: 0.75rem; }
.home .em-trust__item img { filter: grayscale(1); opacity: 0.75; }
.home .em-trust__item:hover img { filter: none; opacity: 1; }

/* --- Cartes métiers : soulèvement et liseré lumineux --- */
.em-f-card__link { transition: transform 500ms var(--em-ease-out), box-shadow 500ms var(--em-ease-out); }
.em-f-card__link:hover,
.em-f-card__link:focus-visible { transform: translateY(-8px); box-shadow: 0 30px 60px rgb(2 19 20 / 0.35), 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); }

/* --- Méthode : liseré dégradé et icône au survol --- */
.em-f-method__steps li::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--em-grad);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 500ms var(--em-ease-out);
}
.em-f-method__steps li:hover::before { transform: scaleX(1); }
.em-f-method__icon { transition: background 300ms, color 300ms, transform 400ms var(--em-ease-out); }
.em-f-method__steps li:hover .em-f-method__icon { background: var(--em-grad); color: var(--em-night); transform: rotate(-8deg) scale(1.08); }

/* --- Secteurs : balayage lumineux de la ligne survolée --- */
.em-f-sectors__row::before {
	content: "";
	position: absolute;
	inset: 0 calc(-1 * var(--em-gutter));
	z-index: -1;
	background: linear-gradient(90deg, rgb(93 166 166 / 0.14), rgb(159 227 216 / 0.04) 70%, transparent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 500ms var(--em-ease-out);
}
a.em-f-sectors__row:hover::before,
a.em-f-sectors__row:focus-visible::before { transform: scaleX(1); }
a.em-f-sectors__row:hover .em-f-sectors__name,
a.em-f-sectors__row:focus-visible .em-f-sectors__name { color: transparent; background: var(--em-grad); -webkit-background-clip: text; background-clip: text; }

/* --- Réalisations : liseré sarcelle au survol --- */
.em-f-proj__card:hover { border-color: var(--em-teal); box-shadow: 0 30px 60px rgb(4 29 31 / 0.14), 0 0 0 1px var(--em-teal); }
.em-f-proj__link span[aria-hidden] { background: var(--em-grad); color: var(--em-night); }

/* --- Rideau d'introduction (une fois par visite) --- */
.em-f-intro { display: none; }
.em-intro { --em-f-d: 1100ms; }
.em-intro .em-f-intro {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1.25rem;
	background: var(--em-grad-deep);
	animation: em-f-intro-out 900ms var(--em-ease-in-out) 1000ms forwards;
	pointer-events: none;
}
.em-f-intro__logo img { width: clamp(12rem, 10rem + 8vw, 18rem); height: auto; animation: em-f-rise 700ms var(--em-ease-out) 100ms both; }
.em-f-intro__line { width: 8rem; height: 2px; border-radius: 2px; background: var(--em-grad); transform-origin: 0 50%; animation: em-f-intro-line 800ms var(--em-ease-in-out) 150ms both; }
@keyframes em-f-intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes em-f-intro-line { from { transform: scaleX(0); } }


/* --- Zones d'intervention : carte interactive de l'Île-de-France --- */
.em-f-zones {
	--em-text: #fff; --em-heading: #fff; --em-text-muted: rgb(255 255 255 / 0.78);
	position: relative; z-index: 1; overflow: hidden; padding-block: var(--em-space-section) calc(var(--em-space-section) + clamp(1.75rem, 3vw, 3rem));
	margin-top: calc(-1 * clamp(1.75rem, 3vw, 3rem)); border-radius: clamp(1.75rem, 3vw, 3rem) clamp(1.75rem, 3vw, 3rem) 0 0;
	background: radial-gradient(60% 70% at 85% 40%, rgb(93 166 166 / 0.22), transparent 70%), var(--em-night-900); color: #fff;
	box-shadow: 0 -24px 60px rgb(2 19 20 / 0.35);
}
.em-f-zones__grid { display: grid; gap: var(--em-space-xl); align-items: center; }
@media (min-width: 1024px) { .em-f-zones__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.em-f-zones__intro { margin-top: 1rem; color: rgb(255 255 255 / 0.75); font-size: var(--em-step-1); line-height: 1.6; max-width: 34rem; }
.em-f-zones__visual { position: relative; padding: clamp(1rem, 3vw, 2.5rem); }
.em-f-zones .em-idf { max-height: min(70svh, 560px); }