/**
 * Emaintenance 0.8.0 : mise en scène propre à chaque fiche métier (body.em-metier--{clé}).
 *
 * Les fiches partagent les mêmes sections (texte + photo, cartes, liste…) ; ici chaque métier reçoit
 * sa propre construction visuelle, tirée de son univers : écran de supervision pour la GTB, hublot
 * pour la plomberie, armoire électrique, couches de matériaux, vague, registre de vérification…
 * Seul le premier bloc texte + photo (juste après l'en-tête) et quelques sections sont concernés.
 * Les contenus ne changent pas ; sans ces styles, la page reste correcte.
 */

.em-p-hero + .em-split .em-split__media { --c: var(--em-page-c, var(--em-teal)); overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
.em-p-hero + .em-split .em-split__media .em-pic { height: 100%; }

/* ---------- Maintenance : pastille tournante « préventif · correctif · travaux » ---------- */
.em-metier--maintenance .em-p-hero + .em-split .em-split__media::before {
	content: "";
	position: absolute; z-index: 2; left: -1.5rem; top: -1.5rem;
	width: 7.5rem; height: 7.5rem; border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cpath id='c' d='M60 60m-44 0a44 44 0 1 1 88 0a44 44 0 1 1 -88 0'/%3E%3C/defs%3E%3Ctext font-family='Poppins,Arial' font-size='10.5' font-weight='600' letter-spacing='2.6' fill='%23041d1f'%3E%3CtextPath href='%23c'%3EPR%C3%89VENTIF %E2%80%A2 CORRECTIF %E2%80%A2 TRAVAUX %E2%80%A2%3C/textPath%3E%3C/text%3E%3Ccircle cx='60' cy='60' r='16' fill='%23041d1f'/%3E%3Cpath d='M53 60l5 5 9-10' stroke='%236fd0c4' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
		var(--c);
	box-shadow: 0 18px 40px rgb(2 19 20 / 0.25);
}
@media (prefers-reduced-motion: no-preference) {
	.em-metier--maintenance .em-p-hero + .em-split .em-split__media::before { animation: em-m-spin 18s linear infinite; }
}
@keyframes em-m-spin { to { transform: rotate(360deg); } }
/* Liste : frise verticale reliée */
.em-metier--maintenance .em-list__items { border-top: 0; position: relative; }
.em-metier--maintenance .em-list__items::before { content: ""; position: absolute; left: 1.6rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: linear-gradient(180deg, var(--em-page-c), transparent); }
.em-metier--maintenance .em-list__item { border-bottom: 0 !important; }
.em-metier--maintenance .em-list__items:not(:has(.has-text)) { grid-template-columns: minmax(0, 1fr) !important; }

/* ---------- Génie climatique : photo qui déborde jusqu'au bord de l'écran, souffle d'air ---------- */
@media (min-width: 1024px) {
	.em-metier--cvc .em-p-hero + .em-split .em-split__media { margin-right: calc(-1 * max(var(--em-gutter), (100vw - var(--em-container)) / 2 + var(--em-gutter))); }
	.em-metier--cvc .em-p-hero + .em-split .em-split__media .em-pic { border-radius: 2rem 0 0 2rem; aspect-ratio: 5 / 4; }
	.em-metier--cvc .em-p-hero + .em-split .em-split__media::after { display: none; }
}
.em-metier--cvc .em-p-hero + .em-split .em-split__media::before {
	content: "";
	position: absolute; z-index: 2; left: -1rem; bottom: 2rem; width: 9rem; height: 3.5rem;
	background: repeating-linear-gradient(90deg, var(--c) 0 26px, transparent 26px 36px) 0 30% / 100% 3px no-repeat,
		repeating-linear-gradient(90deg, var(--c) 0 18px, transparent 18px 30px) 0 65% / 80% 3px no-repeat;
	opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
	.em-metier--cvc .em-p-hero + .em-split .em-split__media::before { animation: em-m-air 1.6s linear infinite; }
}
@keyframes em-m-air { to { background-position: 36px 30%, 30px 65%; } }
/* Cartes photo : première carte plus large, toutes les images à la même hauteur, cartes alignées */
@media (min-width: 1200px) {
	.em-metier--cvc .em-pcards__grid { grid-template-columns: 1.35fr 1fr 1fr; align-items: stretch; }
}
.em-metier--cvc .em-pcard { display: flex; flex-direction: column; }
.em-metier--cvc .em-pcard__media { aspect-ratio: auto !important; height: clamp(13rem, 18vw, 17rem); flex: none; overflow: hidden; }
.em-metier--cvc .em-pcard__media .em-pic, .em-metier--cvc .em-pcard__media img { height: 100%; }

/* ---------- Génie électrique : photo dans une armoire, repères d'angle, voyant ---------- */
.em-metier--elec .em-p-hero + .em-split .em-split__media { padding: 1rem; border-radius: 1.5rem; background: linear-gradient(180deg, #1b2b2c, #0d1c1d); box-shadow: 0 30px 60px rgb(2 19 20 / 0.25), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.em-metier--elec .em-p-hero + .em-split .em-split__media .em-pic { border-radius: 0.6rem; box-shadow: none; }
.em-metier--elec .em-p-hero + .em-split .em-split__media::after {
	right: 1.6rem; bottom: auto; top: 0.32rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; opacity: 1; z-index: 2;
	background: var(--c); box-shadow: 0 0 10px var(--c);
}
.em-metier--elec .em-p-hero + .em-split .em-split__media::before {
	content: ""; position: absolute; inset: 1.6rem; z-index: 2; pointer-events: none;
	background:
		linear-gradient(var(--c), var(--c)) 0 0 / 22px 3px, linear-gradient(var(--c), var(--c)) 0 0 / 3px 22px,
		linear-gradient(var(--c), var(--c)) 100% 100% / 22px 3px, linear-gradient(var(--c), var(--c)) 100% 100% / 3px 22px;
	background-repeat: no-repeat;
}
/* Deux blocs : grands numéros et fil qui les relie */
.em-metier--elec .em-duo__grid { counter-reset: em-duo; position: relative; }
.em-metier--elec .em-duo__item { counter-increment: em-duo; position: relative; overflow: hidden; }
.em-metier--elec .em-duo__item::before { content: "0" counter(em-duo); position: absolute; right: 1.25rem; top: 0.25rem; font-family: var(--em-font-display); font-size: 6rem; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--em-page-c) 55%, transparent); }

/* ---------- Plomberie : hublot rond, comme une section de tuyau ---------- */
@media (min-width: 768px) {
	.em-metier--plomberie .em-p-hero + .em-split .em-split__media { justify-self: center; width: min(100%, 30rem); aspect-ratio: 1; height: auto; overflow: visible; }
	.em-metier--plomberie .em-p-hero + .em-split .em-split__media .em-pic img { aspect-ratio: 1; height: auto; }
	.em-metier--plomberie .em-p-hero + .em-split .em-split__media .em-pic { aspect-ratio: 1; height: auto; border-radius: 50%; box-shadow: 0 0 0 14px color-mix(in srgb, var(--c) 22%, #fff), 0 0 0 16px var(--c), 0 30px 60px rgb(2 19 20 / 0.2); }
	.em-metier--plomberie .em-p-hero + .em-split .em-split__media::after { display: none; }
}

/* ---------- GTB : photo dans un écran de supervision ---------- */
.em-metier--gtb .em-p-hero + .em-split .em-split__media { padding: 2.4rem 0.75rem 0.75rem; border-radius: 1.25rem; background: #0c1718; box-shadow: 0 30px 60px rgb(2 19 20 / 0.25), inset 0 0 0 1px rgb(183 148 246 / 0.25); }
.em-metier--gtb .em-p-hero + .em-split .em-split__media .em-pic { border-radius: 0.5rem; box-shadow: none; }
.em-metier--gtb .em-p-hero + .em-split .em-split__media::before {
	content: "SUPERVISION  ·  EN LIGNE"; position: absolute; left: 1rem; right: 1rem; top: 0.8rem; z-index: 2;
	padding-left: 3.4rem; font: 600 0.62rem/1 var(--em-font-sans); letter-spacing: 0.18em; color: rgb(255 255 255 / 0.55);
	background:
		radial-gradient(circle, #ff5f57 0 4px, transparent 4.5px) 0 50% / 12px 12px no-repeat,
		radial-gradient(circle, #febc2e 0 4px, transparent 4.5px) 14px 50% / 12px 12px no-repeat,
		radial-gradient(circle, var(--c) 0 4px, transparent 4.5px) 28px 50% / 12px 12px no-repeat;
	height: 12px; display: flex; align-items: center;
}
.em-metier--gtb .em-p-hero + .em-split .em-split__media::after {
	inset: auto 1.75rem 1.75rem auto; width: auto; height: auto; padding: 0.55rem 0.8rem; opacity: 1; z-index: 2; border-radius: 0.6rem;
	content: "●  EN SERVICE"; font: 700 0.75rem/1 var(--em-font-sans); color: #fff; letter-spacing: 0.04em;
	background: rgb(4 29 31 / 0.82); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); backdrop-filter: blur(6px);
}

/* ---------- Protection incendie : ruban de signalisation, cartes en mosaïque numérotée, registre ---------- */
.em-metier--incendie .em-p-hero + .em-split .em-split__media { overflow: hidden; border-radius: 1.75rem; }
.em-metier--incendie .em-p-hero + .em-split .em-split__media::after {
	inset: auto auto 1.5rem -3rem; width: 16rem; height: 2.2rem; transform: rotate(-35deg); opacity: 1; z-index: 2; border-radius: 0;
	background: repeating-linear-gradient(45deg, var(--c) 0 16px, #fff 16px 32px);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.25);
}
.em-metier--incendie .em-cards__grid { counter-reset: em-fire; }
.em-metier--incendie .em-card { counter-increment: em-fire; position: relative; }
.em-metier--incendie .em-card::after { content: counter(em-fire, decimal-leading-zero); position: absolute; right: 1.25rem; top: 1rem; font-family: var(--em-font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--em-page-c) 30%, transparent); }
@media (min-width: 1200px) {
	.em-metier--incendie .em-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.em-metier--incendie .em-card:first-child { grid-column: span 2; grid-row: span 2; background: linear-gradient(180deg, rgb(4 29 31 / 0.05) 0%, rgb(4 29 31 / 0.35) 40%, rgb(4 29 31 / 0.95) 82%), image-set(url("../img/site/bento-incendie-1200.webp") type("image/webp"), url("../img/site/bento-incendie.jpg") type("image/jpeg")) center 35% / cover no-repeat, var(--em-night) !important; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; min-height: 22rem; }
	.em-metier--incendie .em-card:first-child .em-card__title { color: #fff; font-size: 1.8rem; }
	.em-metier--incendie .em-card:first-child .em-card__text { color: rgb(255 255 255 / 0.75); }
	.em-metier--incendie .em-card:first-child .em-card__eyebrow { color: var(--em-page-c); }
	.em-metier--incendie .em-card:first-child::after { color: var(--em-page-c); font-size: 5rem; }
	/* 6 cartes : la dernière devient un bandeau sur toute la largeur. */
	.em-metier--incendie .em-card:nth-child(6):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 14rem) minmax(0, 1fr); gap: 0 1.5rem; align-items: center; padding-right: 6rem; }
	.em-metier--incendie .em-card:nth-child(6):last-child .em-card__eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
	.em-metier--incendie .em-card:nth-child(6):last-child .em-card__title { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
	.em-metier--incendie .em-card:nth-child(6):last-child .em-icon-circle { grid-row: 1 / 3; }
	.em-metier--incendie .em-card:nth-child(6):last-child .em-card__text { grid-column: 3; grid-row: 1 / 3; margin: 0; }
}
.em-metier--incendie .em-list__item { border-bottom-style: dashed !important; }
.em-metier--incendie .em-list__icon { background: transparent !important; color: var(--em-page-c) !important; border: 2px solid var(--em-page-c) !important; border-radius: 0.4rem !important; }

@media (max-width: 1199px) {
	.em-metier--incendie .em-card:first-child { min-height: 22rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(180deg, rgb(4 29 31 / 0.05) 0%, rgb(4 29 31 / 0.4) 40%, rgb(4 29 31 / 0.95) 80%), image-set(url("../img/site/bento-incendie-800.webp") type("image/webp"), url("../img/site/bento-incendie.jpg") type("image/jpeg")) center 30% / cover no-repeat, var(--em-night) !important; }
	.em-metier--incendie .em-card:first-child .em-card__title { color: #fff; }
	.em-metier--incendie .em-card:first-child .em-card__text { color: rgb(255 255 255 / 0.78); }
	.em-metier--incendie .em-card:first-child .em-card__eyebrow { color: var(--em-page-c); }
}

/* ---------- Second œuvre : couches de matériaux décalées derrière la photo ---------- */
.em-metier--second-oeuvre .em-p-hero + .em-split .em-split__media::after {
	inset: 1.5rem -1.5rem -1.5rem 1.5rem; width: auto; height: auto; opacity: 1; border-radius: 1.75rem;
	background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 35%, #fff) 0 2px, transparent 2px 12px), color-mix(in srgb, var(--c) 18%, #fff);
}
.em-metier--second-oeuvre .em-p-hero + .em-split .em-split__media::before {
	content: ""; position: absolute; z-index: -2; inset: 3rem -3rem -3rem 3rem; border-radius: 1.75rem; background: var(--em-sand);
}
@media (min-width: 1200px) {
	.em-metier--second-oeuvre .em-pcards__grid { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
	.em-metier--second-oeuvre .em-pcard:first-child { grid-row: span 2; display: flex; flex-direction: column; }
	.em-metier--second-oeuvre .em-pcard:first-child .em-pcard__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 18rem; }
	.em-metier--second-oeuvre .em-pcard:first-child .em-pcard__media .em-pic,
	.em-metier--second-oeuvre .em-pcard:first-child .em-pcard__media img { position: absolute; inset: 0; height: 100%; }
}

/* Téléphone : décors de second œuvre ramenés dans la marge, rien ne dépasse de l'écran */
@media (max-width: 767px) {
	.em-metier--second-oeuvre .em-p-hero + .em-split .em-split__media::after { inset: 0.75rem -0.6rem -0.75rem 0.75rem; }
	.em-metier--second-oeuvre .em-p-hero + .em-split .em-split__media::before { inset: 1.5rem -0.9rem -1.5rem 1.5rem; }
}

/* ---------- Entretien de l'eau : photo à bord ondulé, cartes « bulles » ---------- */
.em-metier--eau .em-p-hero + .em-split .em-split__media .em-pic {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V88C88 82 76 94 63 89C50 84 39 95 25 90C14 86 6 92 0 89Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V88C88 82 76 94 63 89C50 84 39 95 25 90C14 86 6 92 0 89Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	box-shadow: none; aspect-ratio: 4 / 3.4;
}
.em-metier--eau .em-p-hero + .em-split .em-split__media::after { display: none; }
.em-metier--eau .em-card { position: relative; overflow: hidden; }
.em-metier--eau .em-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5C5 0 15 0 20 5S35 10 40 5V0H0Z' fill='%2338d3f2'/%3E%3C/svg%3E") 0 0 / 40px 10px repeat-x; }
.em-metier--eau .em-card .em-icon-circle { background: var(--em-page-c) !important; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.em-metier--eau .em-list__icon { background: var(--em-page-c) !important; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important; }