/**
 * Emaintenance 0.8.0 : pages intérieures « Signal ».
 *
 * Chargée sur toutes les vues publiques sauf l'accueil, après signal-kit.css.
 * Même langage que l'accueil : premier bloc nuit avec halos, titres très gras, sections
 * qui se chevauchent en cartes arrondies, cartes à coins larges, survols en dégradé sarcelle.
 * Pages métiers (body.em-metier--{clé}) : accent dans la couleur du métier (--em-page-c).
 * Aucune mise en page ni aucun contenu supprimé : uniquement l'apparence.
 */

/* ---------- Couleur d'accent de la page ---------- */
body { --em-page-c: var(--em-soft); }
.em-metier--maintenance { --em-page-c: var(--em-c-maintenance); }
.em-metier--cvc { --em-page-c: var(--em-c-cvc); }
.em-metier--elec { --em-page-c: var(--em-c-elec); }
.em-metier--plomberie { --em-page-c: var(--em-c-plomberie); }
.em-metier--gtb { --em-page-c: var(--em-c-gtb); }
.em-metier--incendie { --em-page-c: var(--em-c-incendie); }
.em-metier--second-oeuvre { --em-page-c: var(--em-c-second-oeuvre); }
.em-metier--eau { --em-page-c: var(--em-c-eau); }

/* Sections sombres : titres et textes clairs. */
.em-surface-night, .em-surface-deep { --em-heading: #fff; }

/* ==========================================================================
   1. PREMIER BLOC DES PAGES (sections/hero.php)
   ========================================================================== */
.em-p-hero {
	min-height: auto;
	display: block;
	background: var(--em-night);
}
.em-p-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.em-p-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
	mask-image: linear-gradient(180deg, #000 60%, transparent);
}
/* Vidéo d'ambiance : très atténuée, teintée sarcelle, derrière les halos. */
.em-p-hero__ambient { z-index: -2; }
.em-p-hero__ambient .em-hero__video { opacity: 0; mix-blend-mode: luminosity; }
.em-p-hero__ambient .em-hero__video.is-playing { opacity: 0.14; }
/* Vidéo propre à la page (fontaine) : dans le cadre de verre, image fixe en attendant la lecture. */
.em-p-hero__visual--video .em-p-hero__frame { aspect-ratio: 16 / 10; background: var(--em-night-800) center / cover no-repeat; }
.em-p-hero__visual--video .em-hero__video { object-position: center; }
.em-p-hero .em-hero__shade { display: none; }

.em-p-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--em-space-l);
	align-items: center;
	padding-top: calc(var(--em-header-h) + clamp(1.5rem, 4vh, 3rem));
	padding-bottom: calc(clamp(3rem, 7vh, 5rem) + clamp(1.75rem, 3vw, 3rem));
}
@media (min-width: 1024px) {
	.em-p-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 5rem); min-height: min(78svh, 46rem); }
	.em-p-hero--solo .em-p-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
.em-p-hero__text { min-width: 0; max-width: 44rem; }
.em-p-hero .em-hero__title--page {
	margin-top: 1rem;
	font-size: clamp(2.4rem, 1.1rem + 3.6vw, 4.6rem);
	line-height: 0.96;
	letter-spacing: -0.01em;
	font-weight: 700;
	color: #fff;
}
.em-p-hero .em-hero__intro { max-width: 36rem; color: rgb(255 255 255 / 0.78); }
.em-p-hero .em-hero__eyebrow { color: var(--em-page-c, var(--em-soft)); }
.em-p-hero .em-breadcrumb { margin-bottom: var(--em-space-m); }

/* Photo de la page dans un cadre en verre */
.em-p-hero__visual { position: relative; min-width: 0; isolation: isolate; }
.em-p-hero__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 40px 80px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(159 227 216 / 0.16);
	transform: rotate(1.5deg);
}
.em-p-hero__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(160deg, rgb(93 166 166 / 0.18), transparent 45%, rgb(2 19 20 / 0.35));
	pointer-events: none;
}
.em-p-hero__frame .em-pic, .em-p-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.em-p-hero__visual::before {
	content: "";
	position: absolute;
	inset: 8% -4% -6% 10%;
	z-index: -1;
	border-radius: 2rem;
	background: var(--em-grad);
	opacity: 0.35;
	filter: blur(2px);
	transform: rotate(-3deg);
}
/* Page métier : schéma du bâtiment, métier allumé */
.em-p-hero__visual--bldg { padding: clamp(1rem, 2vw, 2rem); }
.em-p-hero__visual--bldg::before { display: none; }
.em-p-hero__visual--bldg .em-bldg { max-height: min(60svh, 520px); }
.em-bldg.is-static .em-bldg__sys { opacity: 0.22; }
.em-bldg.is-static .em-bldg__sys.is-active { opacity: 1; filter: drop-shadow(0 0 8px currentColor); }
@media (max-width: 1023px) {
	.em-p-hero__visual { max-width: 34rem; }
	.em-p-hero__frame { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.em-p-hero__visual { animation: em-f-fade 1000ms var(--em-ease-out) 300ms both; }
	.em-p-hero__frame { transition: transform 700ms var(--em-ease-out); }
	.em-p-hero__visual:hover .em-p-hero__frame { transform: rotate(0deg) scale(1.01); }
}

/* Premier bloc générique (pages juridiques, recherche, 404, articles) */
.em-page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--em-night); padding-bottom: calc(var(--em-space-2xl) + clamp(1.75rem, 3vw, 3rem)); }
.em-page-hero__inner { z-index: 1; }
.em-page-hero__title { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.4rem); font-weight: 700; letter-spacing: -0.01em; line-height: 0.98; color: #fff; }
.em-page-hero__bg::after { opacity: 0.5; }

/* Premier bloc d'article (photo plein cadre) : voile nuit sarcelle */
.em-hero--post .em-hero__shade { background: linear-gradient(90deg, rgb(2 19 20 / 0.92), rgb(2 19 20 / 0.6) 55%, rgb(2 19 20 / 0.3)), linear-gradient(180deg, transparent 50%, rgb(2 19 20 / 0.9)); }
.em-hero--post { padding-bottom: clamp(1.75rem, 3vw, 3rem); }

/* ==========================================================================
   2. SECTIONS QUI SE CHEVAUCHENT EN CARTES ARRONDIES
   ========================================================================== */
.em-main > .em-section,
.em-main > section.em-cta,
.em-main > nav.em-section {
	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.14);
}
.em-main > .em-section.em-surface-night,
.em-main > .em-section.em-surface-deep,
.em-main > section.em-cta { box-shadow: 0 -24px 60px rgb(2 19 20 / 0.32); }
.em-main > .em-section { padding-bottom: calc(var(--em-space-section) + clamp(1.75rem, 3vw, 3rem)); }
.em-main > .em-section.em-section--tight { padding-bottom: calc(var(--em-space-2xl) + clamp(1.75rem, 3vw, 3rem)); }
.em-main > section.em-cta { overflow: hidden; }

/* Titres de section */
.em-sec__title,
.em-siblings__title,
.em-list__head h2,
.em-proof__head h2 {
	font-size: clamp(2rem, 1.1rem + 2.8vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
}
.em-sec__intro, .em-split__body p { font-size: var(--em-step-1); line-height: 1.6; }
/* Titres en colonne étroite : taille réduite et jamais de coupure au milieu d'un mot. */
.em-sec__title, .em-siblings__title, .em-list__head h2, .em-proof__head h2,
.em-p-hero .em-hero__title--page, .em-page-hero__title { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.em-siblings__title, .em-list__head h2, .em-proof__head h2 { font-size: clamp(1.8rem, 1.1rem + 1.8vw, 2.8rem); }

/* ==========================================================================
   3. MISES EN PAGE
   ========================================================================== */

/* --- Texte + photo (split) --- */
.em-split__media { position: relative; isolation: isolate; }
.em-split__media .em-pic,
.em-split__media > img { border-radius: 1.75rem; overflow: hidden; box-shadow: 0 30px 60px rgb(2 19 20 / 0.16); }
.em-split__media::after {
	content: "";
	position: absolute;
	right: -1rem;
	bottom: -1rem;
	width: 40%;
	height: 40%;
	z-index: -1;
	border-radius: 1.75rem;
	background: var(--em-grad);
	opacity: 0.5;
}
.em-split { isolation: isolate; }
.em-split.is-reverse .em-split__media::after { right: auto; left: -1rem; }

/* --- Cartes (cards, duo, photocards, catalog, missions) --- */
.em-card,
.em-duo__item,
.em-pcard,
.em-catalog__card,
.em-mission {
	border-radius: 1.5rem !important;
	transition: transform 450ms var(--em-ease-out), box-shadow 450ms var(--em-ease-out), border-color 300ms;
}
.em-card:hover,
.em-duo__item:hover,
.em-pcard:hover,
.em-catalog__card:hover,
.em-mission:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgb(2 19 20 / 0.14), 0 0 0 1px var(--em-teal); }
.em-card .em-icon-circle,
.em-catalog__card .em-icon-circle { background: var(--em-grad); color: var(--em-night); }

/* Catalogue des métiers : liseré et icône dans la couleur du métier */
.em-catalog__card { position: relative; overflow: hidden; }
.em-catalog__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 2; background: var(--c, var(--em-teal)); }
.em-catalog__item[style] .em-catalog__card .em-icon-circle { background: var(--c); color: var(--em-night); }
.em-catalog__tags li { border-radius: var(--em-radius-pill); }
.em-catalog__more { color: var(--em-copper-700); font-weight: 700; }

/* --- Liste à puces illustrées (list) --- */
.em-list__item { border-radius: 1.25rem; transition: background-color 300ms, transform 400ms var(--em-ease-out); }
.em-list__item:hover { transform: translateX(6px); }
.em-list__icon { background: var(--em-grad) !important; color: var(--em-night) !important; border: 0 !important; }

/* --- Navigation vers les autres expertises (siblings) --- */
.em-siblings__link {
	border-radius: 1.25rem !important;
	transition: transform 400ms var(--em-ease-out), border-color 300ms, background-color 300ms, box-shadow 400ms;
}
.em-siblings__icon { background: color-mix(in srgb, var(--c, var(--em-teal)) 18%, transparent) !important; color: var(--em-ink) !important; }
.em-siblings__link:hover,
.em-siblings__link:focus-visible { transform: translateY(-4px); border-color: var(--c, var(--em-teal)) !important; box-shadow: 0 18px 40px rgb(2 19 20 / 0.12); }
.em-siblings__link:hover .em-siblings__icon,
.em-siblings__link:focus-visible .em-siblings__icon { background: var(--c, var(--em-teal)) !important; }

/* --- Zones d'intervention (pastilles) --- */
.em-zones__list a { border-radius: var(--em-radius-pill) !important; transition: background-color 300ms, color 300ms, border-color 300ms; }
.em-zones__list a:hover,
.em-zones__list a:focus-visible { background: var(--em-night) !important; color: #fff !important; border-color: var(--em-night) !important; }
.em-zones__list a[aria-current] { background: var(--em-grad) !important; color: var(--em-night) !important; border-color: transparent !important; }

/* --- Filtres (missions, logos) --- */
.em-chip { border-radius: var(--em-radius-pill); }
.em-chip[aria-pressed="true"], .em-chip.is-active { background: var(--em-night); color: #fff; border-color: var(--em-night); }

/* --- Logos des références --- */
.em-logos__item, .em-logo-card { border-radius: 1.25rem !important; }

/* --- Bandeau (band) et outils (tools) : aplat sarcelle --- */
.em-band.em-surface-deep,
.em-tools.em-surface-deep { background-image: var(--em-grad-deep); }
.em-tools.em-surface-night,
.em-method--page { background: var(--em-night); }

/* --- Méthode (steps) --- */
.em-method--page .em-method__card { border-radius: 1.5rem; }

/* --- Lignes alternées (rows) --- */
.em-row__media .em-pic, .em-row__media img { border-radius: 1.75rem; overflow: hidden; }

/* --- Groupe Electrom --- */
.em-group__logo { border-radius: 1.75rem; }

/* --- Contact --- */
.em-contact__info { border-radius: 1.75rem !important; background-image: var(--em-grad-deep); }
.em-contact__form, .em-contact .em-form { border-radius: 1.75rem; }
.em-field input, .em-field textarea, .em-field select { border-radius: 0.85rem; }
.em-choice label, .em-choice__label { border-radius: var(--em-radius-pill); }

/* --- Appel à l'action de fin de page (cta) : dégradé de sarcelles --- */
.em-main > section.em-cta { background: var(--em-grad-deep); }
.em-cta__media::after { background: linear-gradient(90deg, #013f3f 0%, rgb(1 63 63 / 0.55) 35%, rgb(2 89 89 / 0.2) 100%); }
.em-cta__leaves { color: rgb(159 227 216 / 0.18); }
.em-cta__title { font-weight: 700; letter-spacing: -0.01em; }

/* --- Articles --- */
.em-post-card { border-radius: 1.5rem; overflow: hidden; transition: transform 450ms var(--em-ease-out), box-shadow 450ms var(--em-ease-out); }
.em-post-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgb(2 19 20 / 0.14); }
.em-article__body .em-article-key { border-left-color: var(--em-teal); border-radius: 0 1rem 1rem 0; }
.em-article__toc { border-radius: 1.25rem; }

/* --- Pages métiers : accents dans la couleur du métier sur fond sombre --- */
.em-metier .em-surface-night .em-eyebrow,
.em-metier .em-method__num { color: var(--em-page-c); }

/* ==========================================================================
   4. MOBILE
   ========================================================================== */
@media (max-width: 767px) {
	.em-p-hero .em-hero__actions .em-btn { flex: 1 1 100%; }
	.em-split__media::after { display: none; }
}

/* =========================================================================
   Circuit du métier (section « flow ») : étapes reliées par un tracé animé.
   La forme du tracé dépend du métier de la page (em-flow--{clé}).
   ========================================================================= */
.em-flow { --c: var(--em-page-c, var(--em-soft)); position: relative; overflow: hidden; background: var(--em-night); color: #fff; }
.em-flow__glow { position: absolute; inset: auto -10% -40% -10%; height: 70%; background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%); pointer-events: none; }
.em-flow__head { display: grid; gap: var(--em-space-m); margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .em-flow__head { grid-template-columns: 1.1fr 1fr; align-items: end; } }
.em-flow__intro { color: rgb(255 255 255 / 0.72); max-width: 38rem; }
.em-flow__stage { position: relative; }
.em-flow__steps { position: relative; z-index: 1; display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.em-flow__step { position: relative; display: grid; gap: 0.45rem; align-content: start; padding-left: 4.5rem; }
.em-flow__node {
	position: absolute; left: 0; top: 0;
	display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
	background: var(--em-night); color: var(--c);
	border: 2px solid var(--c);
	box-shadow: 0 0 0 6px var(--em-night), 0 0 28px color-mix(in srgb, var(--c) 45%, transparent);
	transition: background 300ms var(--em-ease-out), color 300ms var(--em-ease-out);
}
.em-flow__node .em-icon { width: 1.5rem; height: 1.5rem; }
.em-flow__step:hover .em-flow__node { background: var(--c); color: var(--em-night); }
.em-flow__num { font-family: var(--em-font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; color: rgb(255 255 255 / 0.45); }
.em-flow__role { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.em-flow__title { margin: 0; font-family: var(--em-font-display); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.15; color: #fff; }
.em-flow__text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: rgb(255 255 255 / 0.7); }
.em-flow__return { display: inline-flex; align-items: center; gap: 0.5rem; margin: 2rem 0 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); }
.em-flow__return .em-icon { width: 1rem; height: 1rem; }

/* Tracé : vertical sur mobile (à gauche des pastilles), horizontal sur grand écran. */
.em-flow__line { position: absolute; z-index: 0; left: calc(1.75rem - 2px); top: 1.75rem; bottom: 1.75rem; width: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.em-flow__pulse { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--c), transparent) 0 0 / 100% 40% no-repeat; }
@media (min-width: 1024px) {
	.em-flow__steps { grid-template-columns: repeat(var(--em-flow-n), minmax(0, 1fr)); gap: 1.5rem; }
	.em-flow__step { padding-left: 0; padding-top: 5rem; }
	.em-flow__node { left: 0; }
	.em-flow__line { left: 1.75rem; right: calc(100% / var(--em-flow-n) - 1.75rem); top: calc(1.75rem - 2px); bottom: auto; width: auto; height: 4px; }
	.em-flow__pulse { background: linear-gradient(90deg, transparent, var(--c), transparent) 0 0 / 30% 100% no-repeat; }
	.em-flow--loop .em-flow__line { right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
	.em-flow__pulse { animation: em-flow-v 3.2s linear infinite; }
	@media (min-width: 1024px) { .em-flow__pulse { animation-name: em-flow-h; } }
	.em-flow__step[data-reveal] { transition-delay: calc(var(--i) * 110ms); }
}
@keyframes em-flow-v { from { background-position: 0 -60%; } to { background-position: 0 160%; } }
@keyframes em-flow-h { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* Air (CVC) : flux en tirets qui avancent. */
.em-flow--cvc .em-flow__line { background: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.18) 0 10px, transparent 10px 18px); }
@media (min-width: 1024px) { .em-flow--cvc .em-flow__line { background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 14px, transparent 14px 24px); } }
/* Courant (électricité) : fil fin, impulsion rapide et lumineuse. */
.em-flow--elec .em-flow__line { width: 2px; left: calc(1.75rem - 1px); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
@media (min-width: 1024px) { .em-flow--elec .em-flow__line { width: auto; height: 2px; top: calc(1.75rem - 1px); } }
.em-flow--elec .em-flow__pulse { animation-duration: 1.4s !important; }
.em-flow--elec .em-flow__node { border-radius: 0.9rem; }
/* Eau (plomberie, entretien de l'eau) : tuyau épais où circulent des gouttes. */
.em-flow--plomberie .em-flow__line,
.em-flow--eau .em-flow__line { width: 12px; left: calc(1.75rem - 6px); border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.em-flow--plomberie .em-flow__pulse,
.em-flow--eau .em-flow__pulse { background: radial-gradient(circle, var(--c) 0 3px, transparent 3.5px) 50% 0 / 12px 22px repeat-y; opacity: 0.9; }
@media (min-width: 1024px) {
	.em-flow--plomberie .em-flow__line,
	.em-flow--eau .em-flow__line { width: auto; height: 12px; top: calc(1.75rem - 6px); }
	.em-flow--plomberie .em-flow__pulse,
	.em-flow--eau .em-flow__pulse { background-size: 22px 12px; background-repeat: repeat-x; background-position: 0 50%; }
}
@media (prefers-reduced-motion: no-preference) {
	.em-flow--plomberie .em-flow__pulse,
	.em-flow--eau .em-flow__pulse { animation: em-flow-drops-v 1.2s linear infinite; }
	@media (min-width: 1024px) {
		.em-flow--plomberie .em-flow__pulse,
		.em-flow--eau .em-flow__pulse { animation-name: em-flow-drops-h; }
	}
}
@keyframes em-flow-drops-v { to { background-position: 50% 22px; } }
@keyframes em-flow-drops-h { to { background-position: 22px 50%; } }
.em-flow--eau .em-flow__node { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
/* Signal (GTB) : points de données, pastilles carrées comme des capteurs. */
.em-flow--gtb .em-flow__line { background: radial-gradient(circle, rgb(255 255 255 / 0.28) 0 1.6px, transparent 2px) 50% 0 / 4px 10px repeat-y; }
@media (min-width: 1024px) { .em-flow--gtb .em-flow__line { background-size: 10px 4px; background-repeat: repeat-x; background-position: 0 50%; } }
.em-flow--gtb .em-flow__node { border-radius: 0.6rem; }
.em-flow--gtb .em-flow__node::after { content: ""; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
/* Chaîne d'alerte (incendie) : maillons, chaque étape s'allume à tour de rôle. */
.em-flow--incendie .em-flow__line { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, transparent) 0 14px, transparent 14px 20px); }
@media (min-width: 1024px) { .em-flow--incendie .em-flow__line { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent) 0 18px, transparent 18px 26px); } }
@media (prefers-reduced-motion: no-preference) {
	.em-flow--incendie .em-flow__node { animation: em-flow-alarm calc(var(--em-flow-n) * 0.9s) steps(1) infinite; animation-delay: calc(var(--i) * 0.9s); }
}
@keyframes em-flow-alarm { 0% { background: var(--c); color: var(--em-night); } 12% { background: var(--em-night); color: var(--c); } }
/* Couches (second œuvre) : pas de tracé, chaque étape se pose sur la précédente comme une couche de finition. */
.em-flow--second-oeuvre .em-flow__line { display: none; }
.em-flow--second-oeuvre .em-flow__step { padding: 1.25rem 1.25rem 1.25rem 5.5rem; border-radius: 1.25rem; background: color-mix(in srgb, var(--c) calc(6% + var(--i) * 4%), rgb(255 255 255 / 0.03)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.em-flow--second-oeuvre .em-flow__node { left: 1.25rem; top: 1.25rem; box-shadow: none; }
@media (min-width: 1024px) {
	.em-flow--second-oeuvre .em-flow__steps { align-items: end; }
	.em-flow--second-oeuvre .em-flow__step { padding: 5.25rem 1.1rem 1.25rem; min-height: calc(12rem + var(--i) * 2.25rem); }
	.em-flow--second-oeuvre .em-flow__node { left: 1.1rem; top: 1.1rem; }
}
/* Cycle (maintenance) : la boucle se referme, flèche de retour. */
.em-flow--maintenance .em-flow__node { box-shadow: 0 0 0 6px var(--em-night), 0 0 0 7px color-mix(in srgb, var(--c) 35%, transparent); }

/* =========================================================================
   Pages de lecture (articles, mentions légales, confidentialité) : plus de relief.
   ========================================================================= */
.em-read-progress { position: fixed; z-index: 60; left: 0; right: 0; top: var(--em-header-h, 4.5rem); height: 3px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--em-grad); pointer-events: none; }
.em-article { position: relative; overflow: hidden; }
.em-article::before { content: ""; position: absolute; right: -6rem; top: -4rem; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, rgb(93 166 166 / 0.16), transparent 70%); pointer-events: none; }
.em-article--page { padding-top: clamp(3rem, 6vw, 5rem); }

/* Sommaire : carte de verre, élément actif en sarcelle avec barre de progression */
.em-article__toc { background: rgb(255 255 255 / 0.75) !important; border: 1px solid rgb(2 89 89 / 0.12) !important; box-shadow: 0 20px 50px rgb(2 19 20 / 0.08); backdrop-filter: blur(8px); }
.em-article__toc li { position: relative; padding: 0.35rem 0.5rem 0.35rem 0; border-radius: 0.6rem; transition: background-color 250ms; }
.em-article__toc a { transition: color 250ms; }
.em-article__toc a.is-active { color: var(--em-deep); font-weight: 600; }
.em-article__toc li:has(a.is-active) { background: rgb(93 166 166 / 0.12); }
.em-article__toc li:has(a.is-active)::before { color: var(--em-deep); }
.em-article__toc-help { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--em-line); font-size: 0.8rem; color: var(--em-ink-muted); }
.em-article__toc-help a { color: var(--em-copper-700); font-weight: 600; word-break: break-all; }

/* Corps du texte */
.em-prose--numbered { counter-reset: em-h2; font-size: 1.0625rem; line-height: 1.75; color: #1f3436; }
.em-prose--numbered > p:first-child { font-size: 1.25rem; line-height: 1.6; color: var(--em-ink); padding-left: 1.25rem; border-left: 4px solid; border-image: var(--em-grad) 1; }
.em-prose--numbered h2 {
	counter-increment: em-h2; position: relative; display: flex; align-items: baseline; gap: 0.85rem;
	margin-top: 2.6em; padding-top: 1.1em; border-top: 1px solid rgb(2 89 89 / 0.12);
	font-family: var(--em-font-display); font-size: clamp(1.45rem, 1.1rem + 1vw, 1.95rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--em-ink);
	scroll-margin-top: calc(var(--em-header-h, 4.5rem) + 1.5rem);
}
.em-prose--numbered h2::before {
	content: counter(em-h2, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 0.75rem;
	font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: var(--em-night); background: var(--em-grad); transform: translateY(-0.15em);
}
/* Les pages juridiques numérotent déjà leurs titres (« 1. … ») : on garde la pastille, sans doublon visuel. */
.em-prose--numbered h3 { font-family: var(--em-font-display); color: var(--em-deep); }
.em-prose--numbered ul { list-style: none; padding-left: 0; }
.em-prose--numbered ul > li { position: relative; padding-left: 1.9rem; }
.em-prose--numbered ul > li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgb(93 166 166 / 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23025959' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.em-prose--numbered ol:not([role]) { padding-left: 1.4rem; }
.em-prose--numbered ol:not([role]) > li::marker { color: var(--em-deep); font-weight: 700; }
.em-prose--numbered strong { color: var(--em-ink); background: linear-gradient(transparent 62%, rgb(159 227 216 / 0.55) 62%); }
.em-prose--numbered a { color: var(--em-copper-700); text-decoration-color: rgb(2 115 104 / 0.35); text-underline-offset: 3px; }
.em-prose--numbered blockquote { position: relative; margin: 2em 0; padding: 1.5rem 1.5rem 1.5rem 4rem; border: 0; border-radius: 1.25rem; background: var(--em-night); color: #fff; font-size: 1.15rem; }
.em-prose--numbered blockquote::before { content: "“"; position: absolute; left: 1.1rem; top: 0.2rem; font-family: var(--em-font-display); font-size: 4.5rem; line-height: 1; background: var(--em-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.em-prose--numbered table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 1rem; box-shadow: 0 0 0 1px rgb(2 89 89 / 0.15); font-size: 0.95rem; }
.em-prose--numbered th { background: var(--em-deep); color: #fff; text-align: left; padding: 0.8rem 1rem; font-weight: 600; }
.em-prose--numbered td { padding: 0.75rem 1rem; border-top: 1px solid rgb(2 89 89 / 0.1); background: #fff; }
.em-prose--numbered tr:nth-child(even) td { background: #f7faf9; }
.em-prose--numbered td:first-child { font-weight: 600; color: var(--em-deep); }
/* Encadré final des articles */
.em-article__cta { position: relative; overflow: hidden; border-radius: 1.5rem !important; }
.em-article__cta::after { content: ""; position: absolute; right: -3rem; bottom: -3rem; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle, rgb(159 227 216 / 0.35), transparent 70%); pointer-events: none; }
@media (max-width: 1023px) {
	.em-article__toc { position: static; }
}

/* =========================================================================
   Effets de défilement et de survol (pages intérieures).
   - Animations pilotées par le défilement (navigateurs récents) : sinon, rien ne bouge et tout reste visible.
   - Survol 3D et halo lumineux : souris uniquement (effects.js), jamais au doigt.
   - « Réduire les animations » : tout est désactivé.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		/* Photos : rideau qui se lève + légère profondeur */
		.em-split__media .em-pic, .em-row__media .em-pic, .em-pcard__media, .em-catalog__media {
			animation: em-fx-curtain linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
		}
		.em-split__media .em-pic img, .em-row__media .em-pic img {
			scale: 1.12; animation: em-fx-depth linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
		}
		/* Circuit : le tracé se remplit au rythme du défilement, les pastilles s'allument une à une */
		.em-flow__line::after {
			content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c); opacity: 0.55; transform-origin: 0 0;
			animation: em-fx-fill-v linear both; animation-timeline: --em-flow; animation-range: entry 40% cover 60%;
		}
		.em-flow { view-timeline: --em-flow block; }
		.em-flow__node { animation: em-fx-pop linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
		/* Titres de section : légère montée */
		.em-sec__head, .em-split__text, .em-list__head, .em-flow__head { animation: em-fx-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
	@supports (animation-timeline: view()) {
		.em-flow__line::after { animation-name: em-fx-fill-h; transform-origin: 0 50%; }
	}
}
@keyframes em-fx-curtain { from { clip-path: inset(18% 0 0 0 round var(--em-fx-r, 1.75rem)); opacity: 0.4; } to { clip-path: inset(0 0 0 0 round var(--em-fx-r, 1.75rem)); opacity: 1; } }
.em-pcard__media, .em-catalog__media { --em-fx-r: 0; }
.em-metier--cvc .em-p-hero + .em-split .em-split__media .em-pic { --em-fx-r: 2rem 0 0 2rem; }
.em-metier--elec .em-p-hero + .em-split .em-split__media .em-pic, .em-metier--gtb .em-p-hero + .em-split .em-split__media .em-pic { --em-fx-r: 0.5rem; }
.em-metier--eau .em-p-hero + .em-split .em-split__media .em-pic { --em-fx-r: 0; }
@keyframes em-fx-depth { from { translate: 0 -5%; } to { translate: 0 5%; } }
@keyframes em-fx-fill-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes em-fx-fill-h { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes em-fx-pop { from { scale: 0.6; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes em-fx-rise { from { translate: 0 2.5rem; opacity: 0.2; } to { translate: 0 0; opacity: 1; } }
/* Le hublot de la plomberie reste rond pendant le rideau */
.em-metier--plomberie .em-p-hero + .em-split .em-split__media .em-pic { animation-name: none !important; }

/* Halo qui suit la souris sur les fonds sombres (effects.js renseigne --mx / --my) */
.em-fx-spot { position: relative; }
.em-fx-spot::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--em-spot, 0); transition: opacity 400ms var(--em-ease-out);
	background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c, var(--em-soft)) 22%, transparent), transparent 70%);
}
.em-fx-spot > * { position: relative; z-index: 1; }

/* Cartes inclinées en 3D sous la souris (effects.js renseigne --rx / --ry) */
.em-fx-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)) !important; transition: transform 500ms var(--em-ease-out), box-shadow 450ms var(--em-ease-out); will-change: transform; }
.em-fx-tilt.is-tilting { transition: transform 120ms linear, box-shadow 450ms var(--em-ease-out); }

/* =========================================================================
   Questions fréquentes
   ========================================================================= */
.em-faq__grid { display: grid; gap: var(--em-space-l) var(--em-space-2xl); }
@media (min-width: 1024px) { .em-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } .em-faq__head { position: sticky; top: calc(var(--em-header-h, 4.5rem) + 2rem); } }
.em-faq__list { display: grid; gap: 0.75rem; }
.em-faq__item { border-radius: 1.25rem; background: #fff; border: 1px solid rgb(2 89 89 / 0.12); box-shadow: 0 10px 30px rgb(2 19 20 / 0.05); transition: border-color 250ms, box-shadow 300ms; }
.em-surface-white .em-faq__item { background: var(--em-ivory); }
.em-faq__item[open] { border-color: var(--em-teal); box-shadow: 0 20px 40px rgb(2 19 20 / 0.08); }
.em-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; cursor: pointer; list-style: none; font-family: var(--em-font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.3; color: var(--em-ink); }
.em-faq__q::-webkit-details-marker { display: none; }
.em-faq__icon { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--em-grad); }
.em-faq__icon::before, .em-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8rem; height: 2px; margin: -1px 0 0 -0.4rem; background: var(--em-night); border-radius: 2px; transition: transform 300ms var(--em-ease-out); }
.em-faq__icon::after { transform: rotate(90deg); }
.em-faq__item[open] .em-faq__icon::after { transform: rotate(0deg); }
.em-faq__a { padding: 0 1.35rem 1.25rem; color: var(--em-ink-muted); line-height: 1.65; }
.em-faq__q:focus-visible { outline: 2px solid var(--em-deep); outline-offset: 3px; border-radius: 1.25rem; }

/* =========================================================================
   Lignes photo / texte (secteurs) : sommaire en pastilles, numéros, icônes.
   ========================================================================= */
.em-rows__chips { position: sticky; z-index: 5; top: calc(var(--em-header-h, 4.5rem) + 0.75rem); margin: 0 0 var(--em-space-xl); }
.em-rows__chips ul { display: flex; gap: 0.5rem; margin: 0; padding: 0.5rem; list-style: none; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgb(255 255 255 / 0.82); border: 1px solid rgb(2 89 89 / 0.12); box-shadow: 0 14px 40px rgb(2 19 20 / 0.1); backdrop-filter: blur(10px); }
.em-rows__chips ul::-webkit-scrollbar { display: none; }
.em-rows__chips a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border-radius: 999px; white-space: nowrap; font-size: 0.85rem; font-weight: 600; color: var(--em-ink); text-decoration: none; transition: background-color 250ms, color 250ms; }
.em-rows__chips a .em-icon { width: 1rem; height: 1rem; color: var(--em-deep); }
.em-rows__chips a:hover, .em-rows__chips a:focus-visible, .em-rows__chips a.is-active { background: var(--em-deep); color: #fff; }
.em-rows__chips a:hover .em-icon, .em-rows__chips a:focus-visible .em-icon, .em-rows__chips a.is-active .em-icon { color: var(--em-soft-300); }
.em-row { scroll-margin-top: calc(var(--em-header-h, 4.5rem) + 5rem); }
.em-row__media { overflow: visible !important; background: transparent !important; }
.em-row__num { position: absolute; z-index: 2; left: 1rem; bottom: -1.1rem; padding: 0.35rem 0.8rem; border-radius: 0.9rem; background: var(--em-night); color: #fff; font: 700 1.6rem/1 var(--em-font-display); box-shadow: 0 12px 30px rgb(2 19 20 / 0.25); }
.em-row__num::first-letter { color: var(--em-soft); }
.em-row.is-reverse .em-row__num { left: auto; right: 1rem; }
.em-row__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--em-grad); color: var(--em-night); box-shadow: 0 12px 30px rgb(93 166 166 / 0.35); }
.em-row__icon .em-icon { width: 1.5rem; height: 1.5rem; }
@media (max-width: 1023px) { .em-row__text { padding-top: 1.25rem; } }