/**
 * Emaintenance V8 : couche « Motion & Experience » (Porte A).
 *
 * Se superpose aux styles V7 sans les modifier : aucune règle de mise en page, de couleur
 * ou de typographie n'est changée. Uniquement transform / opacity / clip-path.
 *
 * Garde-fous :
 * - Tout état initial masqué exige .em-xp-ready (posé par experience.js) ET l'absence de
 *   « réduire les animations » : sans JS ou en mouvement réduit, tout est visible tout de suite.
 * - Le texte n'est jamais masqué par cette couche (seules les images et éléments décoratifs).
 *
 * Conventions : data-em-motion="hero | media-mask | timeline" ; classes préfixées em-xp-.
 */

/* ==========================================================================
   Premier bloc (H01 et heros intérieurs) : séquence d'entrée
   Surtitre 0-250 ms, titre ligne à ligne 250-900 ms, texte et boutons 650-1100 ms,
   repère de défilement 950-1200 ms. Fond : échelle 1,04 vers 1. Voile stable.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	[data-em-motion="hero"] .em-hero__media .em-pic img { animation: em-xp-hero-bg 2400ms var(--em-ease-out) both; }
	[data-em-motion="hero"] .em-hero__eyebrow,
	[data-em-motion="hero"] .em-hero__line,
	[data-em-motion="hero"] .em-hero__intro,
	[data-em-motion="hero"] .em-hero__actions,
	[data-em-motion="hero"] .em-hero__foot,
	[data-em-motion="hero"] .em-hero__aside {
		animation: em-xp-rise 820ms var(--em-ease-out) both;
	}
	[data-em-motion="hero"] .em-breadcrumb { animation: em-xp-fade 600ms var(--em-ease-out) both; }
	[data-em-motion="hero"] .em-hero__eyebrow { animation-delay: 40ms; }
	[data-em-motion="hero"] .em-hero__line { animation-delay: calc(250ms + (var(--i, 1) - 1) * 130ms); }
	[data-em-motion="hero"] .em-hero__intro { animation-delay: 650ms; }
	[data-em-motion="hero"] .em-hero__actions { animation-delay: 760ms; }
	[data-em-motion="hero"] .em-hero__foot { animation-delay: 950ms; animation-name: em-xp-fade; }
	[data-em-motion="hero"] .em-hero__aside { animation-delay: 1000ms; }

}
/* 390 px : intro courte, non séquencée */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
	[data-em-motion="hero"] .em-hero__eyebrow,
	[data-em-motion="hero"] .em-hero__line,
	[data-em-motion="hero"] .em-hero__intro,
	[data-em-motion="hero"] .em-hero__actions,
	[data-em-motion="hero"] .em-hero__foot {
		animation: em-xp-rise-s 520ms var(--em-ease-out) 80ms both;
	}
}
@keyframes em-xp-hero-bg { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes em-xp-rise { from { opacity: 0.01; transform: translate3d(0, 22px, 0); } }
@keyframes em-xp-rise-s { from { opacity: 0.01; transform: translate3d(0, 10px, 0); } }
@keyframes em-xp-fade { from { opacity: 0.01; } }

/* Vidéo de fond : fondu au-dessus de l'image fixe, uniquement quand elle joue réellement. */
.em-hero__video[hidden] { display: none; }
.em-hero__video-toggle[data-paused="true"] .em-hero__video-icon { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.em-hero__video-toggle:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); }
.em-hero__foot--page { margin-top: var(--em-space-m); }
.em-hero__foot--page::before { display: none; }

/* Hero générique (pages juridiques, recherche, 404) : vidéo sous un voile sombre et la trame V7. */
.em-page-hero--video .em-page-hero__bg .em-hero__video { z-index: 0; }
.em-page-hero--video .em-page-hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(2 19 20 / 0.72), rgb(2 19 20 / 0.86)); }
.em-page-hero--video .em-page-hero__bg::after { z-index: 2; }
.em-page-hero .em-hero__foot--page { margin-top: var(--em-space-l); }

/* Voile de lisibilité renforcé (réglage de page) : s'ajoute au dégradé V7, ne le remplace pas. */
.em-hero--overlay-1 .em-hero__shade::after,
.em-hero--overlay-2 .em-hero__shade::after { content: ""; position: absolute; inset: 0; background: rgb(2 19 20 / 0.2); }
.em-hero--overlay-2 .em-hero__shade::after { background: rgb(2 19 20 / 0.36); }

/* ==========================================================================
   H03 : cartes expertises
   Image révélée par un masque à l'entrée dans l'écran (le texte reste visible).
   Survol ET focus : zoom 1 vers 1,055 en 450 ms, flèche qui avance de 4 px.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.em-xp-ready [data-em-motion="media-mask"] .em-xp__media {
		clip-path: inset(100% 0 0 0);
		transition: clip-path 900ms var(--em-ease-out);
		transition-delay: calc(var(--xp-i, 0) * 90ms);
	}
	.em-xp-ready [data-em-motion="media-mask"] .em-xp__media .em-pic {
		transform: scale(1.12);
		transition: transform 1300ms var(--em-ease-out);
		transition-delay: calc(var(--xp-i, 0) * 90ms);
	}
	.em-xp-ready [data-em-motion="media-mask"].is-in .em-xp__media { clip-path: inset(0 0 0 0); }
	.em-xp-ready [data-em-motion="media-mask"].is-in .em-xp__media .em-pic { transform: none; }

	[data-em-motion="media-mask"] .em-xp__media img { transition: transform 450ms var(--em-ease-out); }
	[data-em-motion="media-mask"] .em-xp__arrow .em-icon { transition: transform 300ms var(--em-ease-out); }
}
@media (hover: hover) {
	[data-em-motion="media-mask"] .em-xp__panel:hover .em-xp__media img { transform: scale(1.055); }
	[data-em-motion="media-mask"] .em-xp__panel:hover .em-xp__arrow .em-icon { transform: translateX(4px); }
}
[data-em-motion="media-mask"] .em-xp__panel:focus-visible .em-xp__media img { transform: scale(1.055); }
[data-em-motion="media-mask"] .em-xp__panel:focus-visible .em-xp__arrow .em-icon { transform: translateX(4px); }
[data-em-motion="media-mask"] .em-xp__panel:focus-visible .em-round-arrow { background: var(--em-copper-600); border-color: var(--em-copper-600); }

/* ==========================================================================
   H05 : frise de la méthode
   >= 1200 px (4 étapes en ligne) : rail horizontal dessiné au défilement, étape active contrastée.
   < 768 px : rail vertical discret dans la marge, étape active au viewport. Jamais d'effet collant.
   768-1199 px (grille 2 x 2) : étape active seulement.
   Rail injecté par experience.js (décoratif, aria-hidden), placé dans les marges existantes :
   aucune mise en page modifiée.
   ========================================================================== */
[data-em-motion="timeline"] { position: relative; }
.em-xp-rail { position: absolute; pointer-events: none; display: none; }
.em-xp-rail__base,
.em-xp-rail__fill { position: absolute; inset: 0; border-radius: 2px; }
.em-xp-rail__base { background: rgb(255 255 255 / 0.16); }
.em-xp-rail__fill { background: linear-gradient(90deg, var(--em-copper), var(--em-soft)); transform-origin: 0 50%; transform: scaleX(var(--xp-p, 0)); }
.em-xp-rail__dot {
	position: absolute;
	top: 1px;
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	border-radius: 50%;
	border: 2px solid rgb(255 255 255 / 0.45);
	background: var(--em-night);
	transition: background-color 300ms var(--em-ease-out), border-color 300ms var(--em-ease-out), transform 300ms var(--em-ease-out);
}
.em-xp-rail__dot.is-on { background: var(--em-copper); border-color: var(--em-copper); transform: scale(1.15); }

@media (prefers-reduced-motion: no-preference) {
	.em-xp-ready [data-em-motion="timeline"] .em-method__card { transition: background-color 400ms var(--em-ease-out), border-color 400ms var(--em-ease-out), transform var(--em-dur-base) var(--em-ease-out), box-shadow 400ms var(--em-ease-out); }
	.em-xp-ready [data-em-motion="timeline"] .em-method__step.is-active .em-method__card {
		border-color: rgb(111 208 196 / 0.75);
		background: rgb(255 255 255 / 0.075);
		box-shadow: 0 0 0 1px rgb(111 208 196 / 0.25), 0 18px 40px rgb(0 0 0 / 0.18);
	}
	.em-xp-ready [data-em-motion="timeline"] .em-method__step.is-active .em-method__num { color: var(--em-soft); }

	@media (min-width: 1200px) {
		.em-xp-ready [data-em-motion="timeline"] .em-xp-rail { display: block; top: -1.6rem; height: 2px; }
	}
	@media (max-width: 767px) {
		.em-xp-ready [data-em-motion="timeline"] .em-xp-rail { display: block; left: calc(var(--em-gutter) * -0.55); width: 2px; }
		.em-xp-ready [data-em-motion="timeline"] .em-xp-rail__fill { transform-origin: 50% 0; transform: scaleY(var(--xp-p, 0)); background: linear-gradient(180deg, var(--em-copper), var(--em-soft)); }
		.em-xp-ready [data-em-motion="timeline"] .em-xp-rail__dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; left: 1px; }
	}
}

/* Vidéo en lecture : l'étiquette « Photo provisoire » de l'image fixe n'a plus d'objet. */
.em-hero__media:has(.em-hero__video.is-playing) .em-media-tag { display: none; }
/* Bouton pause : libellé sur une ligne, retour à la ligne du pied de bloc si la place manque. */
.em-hero__video-toggle { white-space: nowrap; }
.em-hero__foot { flex-wrap: wrap; row-gap: 0.75rem; }
/* L'attribut hidden doit primer sur display:inline-flex (V7) : bouton invisible tant que la vidéo ne joue pas. */
.em-hero__video-toggle[hidden] { display: none; }