/**
 * Emaintenance 0.8.0 : boîte à outils « Signal » partagée (accueil et pages intérieures).
 *
 * Schéma du bâtiment (template-parts/front/building.php), halos lumineux, grain des fonds
 * sombres et animations communes. Chargée sur toutes les vues publiques avant front.css
 * et pages.css. Animations continues désactivées en « réduire les animations ».
 */

/* ---------- Schéma du bâtiment ---------- */
.em-bldg { display: block; width: 100%; height: auto; max-height: min(74svh, 680px); margin-inline: auto; overflow: visible; }
.em-bldg * { vector-effect: non-scaling-stroke; }
.em-bldg__struct { color: rgb(255 255 255 / 0.45); }
.em-bldg__struct path { fill: none; stroke: currentColor; stroke-width: 2; }
.em-bldg__struct rect { fill: rgb(255 255 255 / 0.12); stroke: none; }
.em-bldg__lvl { fill: rgb(255 255 255 / 0.35); font: 700 11px/1 var(--em-font-sans); letter-spacing: 0.1em; }
.em-bldg__sys { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 450ms var(--em-ease-out), filter 450ms var(--em-ease-out); }
.em-bldg__sys rect:not(.em-bldg__fill):not(.em-bldg__fill-soft):not([fill]) { fill: color-mix(in srgb, currentColor 10%, transparent); }
.em-bldg__fill { fill: currentColor; stroke: none; }
.em-bldg__fill-soft { fill: color-mix(in srgb, currentColor 35%, transparent); }
.em-bldg__badge { fill: currentColor; stroke: none; }
.em-bldg__outline { fill: none; stroke-width: 2.5; opacity: 0; stroke-dasharray: 8 8; }
.em-bldg__flow { stroke-dasharray: 2 9; stroke-width: 2; }
.em-bldg__halo { opacity: 0.6; }
.em-bldg__jet { stroke-dasharray: 3 5; stroke-width: 1.8; }
.em-bldg__wave { transform-box: fill-box; transform-origin: center; }
.em-bldg__spin, .em-bldg__drop { transform-box: fill-box; transform-origin: center; }

/* Un métier actif : les autres s'effacent */
.em-bldg.has-active .em-bldg__sys { opacity: 0.14; }
/* La maintenance couvre toutes les installations : rien ne s'éteint, les points de contrôle ressortent. */
.em-bldg.has-active:has(.em-bldg__sys--maintenance.is-active) .em-bldg__sys { opacity: 0.6; }
.em-bldg.has-active:has(.em-bldg__sys--maintenance.is-active) .em-bldg__sys--maintenance { opacity: 1; }
.em-bldg.has-active .em-bldg__sys.is-active { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
.em-bldg__sys--maintenance.is-active .em-bldg__outline { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
	.em-bldg__spin { animation: em-f-spin 2.4s linear infinite; }
	.em-bldg__flow { animation: em-f-flow 1.4s linear infinite; }
	.em-bldg__halo { animation: em-f-glow 3s ease-in-out infinite alternate; }
	.em-bldg__blink { animation: em-f-blink 1.6s steps(2, jump-none) infinite; }
	.em-bldg__drop { animation: em-f-drop 1.8s ease-in infinite; }
	.em-bldg__jet { animation: em-f-flow 1s linear infinite; }
	.em-bldg__wave { animation: em-f-wave 3.2s ease-in-out infinite alternate; }
	.em-bldg__sys--maintenance.is-active .em-bldg__outline { animation: em-f-flow 1.2s linear infinite; }
}

/* ---------- Socle en verre du schéma ---------- */
.em-f-stage {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 2rem;
	border: 1px solid rgb(159 227 216 / 0.14);
	background:
		radial-gradient(70% 55% at 50% 45%, rgb(93 166 166 / 0.16), transparent 70%),
		linear-gradient(180deg, rgb(10 42 44 / 0.65), rgb(2 19 20 / 0.35));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 40px 80px rgb(0 0 0 / 0.35);
}
@supports (backdrop-filter: blur(1px)) {
	.em-f-stage { backdrop-filter: blur(6px); }
}
.em-f-stage::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 18%;
	height: 3rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(111 208 196 / 0.28), transparent);
	filter: blur(6px);
}


/* ---------- Halos lumineux ---------- */
.em-f-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; pointer-events: none; }
.em-f-orb--a { width: 38rem; height: 38rem; right: -8rem; top: -10rem; background: #027368; }
.em-f-orb--b { width: 30rem; height: 30rem; right: 18%; bottom: -14rem; background: #5da6a6; opacity: 0.35; }
.em-f-orb--c { width: 26rem; height: 26rem; left: -10rem; top: 30%; background: #025959; opacity: 0.45; }
.em-f-hero__bg { -webkit-mask-image: none; mask-image: none; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.em-f-orb--a { animation: em-f-orb-a 22s ease-in-out infinite alternate; }
	.em-f-orb--b { animation: em-f-orb-b 26s ease-in-out infinite alternate; }
	.em-f-orb--c { animation: em-f-orb-a 30s ease-in-out infinite alternate-reverse; }
}
@keyframes em-f-orb-a { to { transform: translate3d(-6rem, 5rem, 0) scale(1.15); } }
@keyframes em-f-orb-b { to { transform: translate3d(5rem, -6rem, 0) scale(0.9); } }

/* ---------- Grain des fonds sombres ---------- */
.em-grain::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");
}

/* ---------- Animations communes ---------- */
@keyframes em-f-rise { from { opacity: 0.01; transform: translate3d(0, 18px, 0); } }
@keyframes em-f-fade { from { opacity: 0.01; } }
@keyframes em-f-line { from { transform: translate3d(0, 105%, 0); } }
@keyframes em-f-draw { to { stroke-dashoffset: 0; } }
@keyframes em-f-spin { to { transform: rotate(360deg); } }
@keyframes em-f-flow { to { stroke-dashoffset: -22; } }
@keyframes em-f-glow { from { opacity: 0.25; } to { opacity: 0.85; } }
@keyframes em-f-blink { 50% { opacity: 0.15; } }
@keyframes em-f-drop { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes em-f-ping { 0% { box-shadow: 0 0 0 0 rgb(111 208 196 / 0.6); } 70%, 100% { box-shadow: 0 0 0 0.6rem rgb(111 208 196 / 0); } }

/* ---------- Motif chevrons de la charte (cartes de visite) ----------
   Trois chevrons superposés : #025959, #027368, #5DA6A6. Décoratif, en arrière-plan. */
.em-chevrons-bg {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300'%3E%3Cpolygon points='0,0 150,150 0,300 80,300 230,150 80,0' fill='%23025959'/%3E%3Cpolygon points='95,0 245,150 95,300 175,300 325,150 175,0' fill='%23027368'/%3E%3Cpolygon points='190,0 340,150 190,300 270,300 420,150 270,0' fill='%235DA6A6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
.em-f-cta::after,
.em-main > section.em-cta::after,
.em-footer::before {
	content: "";
	position: absolute;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300'%3E%3Cpolygon points='0,0 150,150 0,300 80,300 230,150 80,0' fill='%23025959'/%3E%3Cpolygon points='95,0 245,150 95,300 175,300 325,150 175,0' fill='%23027368'/%3E%3Cpolygon points='190,0 340,150 190,300 270,300 420,150 270,0' fill='%235DA6A6'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Appels à l'action : grands chevrons qui sortent du bord droit */
.em-f-cta::after,
.em-main > section.em-cta::after {
	right: -3rem;
	top: 50%;
	z-index: -1;
	width: clamp(16rem, 32vw, 32rem);
	aspect-ratio: 7 / 5;
	transform: translateY(-50%);
	opacity: 0.75;
	filter: drop-shadow(0 20px 40px rgb(2 19 20 / 0.35));
}
@media (prefers-reduced-motion: no-preference) {
	.em-f-cta::after,
	.em-main > section.em-cta::after { animation: em-chev-in 1200ms var(--em-ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes em-chev-in { from { transform: translate(4rem, -50%); opacity: 0; } }
/* Pied de page : petit rappel en haut à droite */
.em-footer { position: relative; overflow: hidden; }
.em-footer::before {
	right: var(--em-gutter);
	top: 2.5rem;
	width: 7rem;
	aspect-ratio: 7 / 5;
	opacity: 0.5;
}
@media (max-width: 767px) {
	.em-footer::before { display: none; }
	.em-f-cta::after, .em-main > section.em-cta::after { opacity: 0.18; right: -8rem; }
}

@keyframes em-f-wave { to { transform: translateX(-6px) scaleY(1.4); } }

/* ---------- Ambiance photo unifiée ----------
   Photos d'origines différentes (banques d'images, photos de chantier) : même traitement discret pour
   qu'elles forment une série. Couleurs légèrement retenues, contraste un peu relevé, voile sarcelle de la
   charte en lumière douce (les rouges des extincteurs restent rouges : pas de rotation de teinte). */
picture.em-pic { position: relative; }
picture.em-pic img { filter: saturate(0.84) contrast(1.06) brightness(0.98); }
picture.em-pic::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(160deg, #025959 0%, #014545 55%, #041d1f 100%);
	mix-blend-mode: soft-light;
	opacity: 0.42;
	pointer-events: none;
}

/* =========================================================================
   Carte schématique de l'Île-de-France (en-tête des zones, section « map », accueil) : chargée partout.
   ========================================================================= */
.em-idf { display: block; width: 100%; height: auto; max-height: min(64svh, 520px); margin-inline: auto; overflow: visible; color: var(--em-soft); font-family: var(--em-font-sans); }
.em-idf__halo { opacity: 0.12; }
.em-idf__dep { cursor: default; outline: none; }
a.em-idf__dep { cursor: pointer; }
.em-idf__shape { fill: rgb(255 255 255 / 0.06); stroke: rgb(159 227 216 / 0.35); stroke-width: 1.2; transition: fill 300ms var(--em-ease-out), stroke 300ms, transform 400ms var(--em-ease-out); transform-box: fill-box; transform-origin: center; }
.em-idf__dep.is-outer .em-idf__shape { fill: rgb(255 255 255 / 0.035); }
.em-idf__code { fill: #fff; font: 700 15px/1 var(--em-font-display); text-anchor: middle; pointer-events: none; }
.em-idf__name { fill: rgb(255 255 255 / 0.62); font-size: 8.6px; font-weight: 500; letter-spacing: 0.02em; text-anchor: middle; pointer-events: none; }
a.em-idf__dep:hover .em-idf__shape,
a.em-idf__dep:focus-visible .em-idf__shape { fill: rgb(111 208 196 / 0.35); stroke: var(--em-soft-300); transform: scale(1.025); }
a.em-idf__dep:focus-visible .em-idf__shape { stroke-width: 2.5; }
/* Département(s) de la page : en dégradé sarcelle, les autres en retrait */
.em-idf.has-active .em-idf__dep:not(.is-active) { opacity: 0.55; }
.em-idf__dep.is-active .em-idf__shape { fill: color-mix(in srgb, var(--em-soft) 70%, var(--em-deep)); stroke: var(--em-soft-300); filter: drop-shadow(0 0 14px rgb(111 208 196 / 0.55)); }
.em-idf.is-all .em-idf__dep.is-active .em-idf__shape { fill: rgb(111 208 196 / 0.18); filter: none; }
.em-idf__dep.is-active .em-idf__code { fill: var(--em-night); }
.em-idf__dep.is-active .em-idf__name { fill: rgb(4 29 31 / 0.85); }
.em-idf.is-all .em-idf__dep.is-active .em-idf__code { fill: #fff; }
.em-idf.is-all .em-idf__dep.is-active .em-idf__name { fill: rgb(255 255 255 / 0.7); }
/* Siège */
.em-idf__pin { fill: #fff; stroke: var(--em-soft); stroke-width: 3; }
.em-idf__wave { fill: none; stroke: var(--em-soft); stroke-width: 1.5; opacity: 0; }
.em-idf__hq-label { fill: #fff; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; paint-order: stroke; stroke: var(--em-night); stroke-width: 3px; }
@media (prefers-reduced-motion: no-preference) {
	.em-idf__wave { animation: em-idf-wave 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
	.em-idf__wave--2 { animation-delay: 1.6s; }
	.em-idf__dep { animation: em-idf-in 900ms var(--em-ease-out) both; }
	.em-idf__dep.is-outer { animation-delay: 250ms; }
}
@keyframes em-idf-wave { 0% { opacity: 0.8; transform: scale(0.6); } 100% { opacity: 0; transform: scale(7); } }
@keyframes em-idf-in { from { opacity: 0; } }
.em-p-hero__visual--map { position: relative; padding: clamp(1rem, 2vw, 2rem); }
.em-p-hero__visual--map::before { display: none; }

/* Section carte : texte + liste des départements à gauche, carte à droite */
.em-map { position: relative; overflow: hidden; background: var(--em-night); color: #fff; }
.em-map__grid { display: grid; gap: var(--em-space-xl); align-items: center; }
@media (min-width: 1024px) { .em-map__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.em-map__intro { color: rgb(255 255 255 / 0.72); }
.em-map__visual { position: relative; padding: clamp(1rem, 3vw, 2.5rem); }
.em-map__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 1.75rem 0; padding: 0; list-style: none; }
.em-map__list a, .em-map__list li > :not(a) { color: #fff; }
.em-map__list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 0.8rem; border: 1px solid rgb(255 255 255 / 0.12); text-decoration: none; font-size: 0.92rem; transition: background-color 250ms, border-color 250ms; }
.em-map__list a:hover, .em-map__list a:focus-visible { background: rgb(111 208 196 / 0.14); border-color: var(--em-soft); }
.em-map__code { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.6rem; border-radius: 0.5rem; background: var(--em-grad); color: var(--em-night); font: 700 0.8rem/1 var(--em-font-display); }

.em-idf__hq:not(.is-focus) { opacity: 0.75; }
.em-idf__focus .em-idf__wave { stroke: #fff; }
/* Liste ↔ carte : survol synchronisé (idf-map.js) */
.em-idf__dep.is-hover .em-idf__shape { fill: rgb(111 208 196 / 0.35); stroke: var(--em-soft-300); transform: scale(1.025); }
.em-map__list li.is-hover a { background: rgb(111 208 196 / 0.14); border-color: var(--em-soft); }