/* ==========================================================================
   Variante « motion » de la page Prestations (body.sumo-lab)
   Concept : le fil rouge. Le petit trait rouge de la charte devient un fil
   qui se dessine au défilement, relie les familles 01 → 04 et finit sur le
   bouton de contact. Effets complémentaires : cartes distribuées, volets
   rouges, grands numéros en profondeur, flux de données entre les outils.
   Sans « réduire les animations » (ordinateur et mobile) ; sinon page normale.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.sumo-lab .entry-content { position: relative; }

	/* --- 1. Le fil rouge --------------------------------------------------- */
	.sumo-lab .lab-fil {
		position: absolute;
		left: 0; top: 0;
		width: 100%;
		pointer-events: none;
		overflow: visible;
		z-index: 3;
	}
	.sumo-lab .lab-fil path {
		fill: none;
		stroke: var(--sumo-red);
		stroke-width: 7;            /* l'épaisseur des petits traits rouges au-dessus des titres : le fil les prolonge */
		stroke-linecap: butt;
	}
	.sumo-lab .lab-fil .lab-fil-trace { stroke: rgba(0, 0, 0, .1); stroke-width: 1.5; stroke-dasharray: 2 7; }
	.sumo-lab .lab-fil circle { fill: var(--sumo-red); }
	/* la pointe effilée qui rejoint le ruban du sumo : se déroule quand le fil arrive */
	.sumo-lab .lab-fil path.lab-effile { fill: var(--sumo-red); stroke: none; clip-path: inset(0 100% 0 0); transition: clip-path .35s cubic-bezier(.2, .8, .2, 1); }
	.sumo-lab .lab-fil path.lab-effile.is-on { clip-path: inset(0 0 0 0); }
	.sumo-lab .lab-fil .lab-aiguille { r: 7px; filter: drop-shadow(0 0 6px rgba(237, 28, 36, .55)); }
	.sumo-lab .entry-content > .wp-block-group { position: relative; z-index: 1; }
	.sumo-lab .entry-content > .wp-block-group.sumo-band { z-index: 2; }

	/* le trait rouge du titre s'allonge quand le fil l'atteint */
	.sumo-lab h2.sumo-barre::before { transition: width .5s cubic-bezier(.2, .8, .2, 1); }
	.sumo-lab .is-lit h2.sumo-barre::before { width: 72px; }

	/* --- 2. Intro : les cartes sont distribuées puis s'écartent ------------ */
	.sumo-lab .sumo-head .sumo-layer {
		animation: lab-distribue .95s cubic-bezier(.2, 1.25, .35, 1) backwards;
	}
	.sumo-lab .sumo-head .sumo-layer-web     { --dx: 18cqw;  --dy: 16cqw;  --dr: 8deg;   animation-delay: .15s; }
	.sumo-lab .sumo-head .sumo-layer-cartes  { --dx: 40cqw;  --dy: -2cqw;  --dr: -14deg; animation-delay: .3s; }
	.sumo-lab .sumo-head .sumo-layer-edition { --dx: -8cqw;  --dy: -18cqw; --dr: 11deg;  animation-delay: .45s; }
	@keyframes lab-distribue {
		from { translate: var(--dx) var(--dy); rotate: var(--dr); opacity: 0; scale: .8; }
		25%  { opacity: 1; }
	}
	.sumo-lab .sumo-head .sumo-collage::before { animation: lab-cadre .7s cubic-bezier(.65, 0, .35, 1) .9s backwards; }
	@keyframes lab-cadre { from { clip-path: inset(0 100% 100% 0); } }

	/* titre : chaque bloc remonte derrière un masque (pas de lettre à lettre) */
	.sumo-lab .sumo-head .sumo-h1 { animation: lab-titre .9s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
	@keyframes lab-titre { from { clip-path: inset(0 0 100% 0); translate: 0 .35em; } to { clip-path: inset(0 0 -10% 0); } }

	/* --- 3. Familles : volet rouge, image en profondeur, grand numéro ------ */
	.sumo-lab .sumo-projet { position: relative; overflow: visible; clip-path: inset(0); }
	.sumo-lab .sumo-projet::before {                       /* le volet (forme rectangulaire de la charte) */
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		aspect-ratio: 16 / 11;
		background: var(--sumo-red);
		z-index: 3;
		translate: -101% 0;
		pointer-events: none;
	}
	.sumo-lab .sumo-reveal .sumo-projet img { opacity: 0; }
	.sumo-lab .sumo-reveal .sumo-projet figcaption { opacity: 0; transition: opacity .4s ease .9s; }
	.sumo-lab .sumo-reveal.is-in .sumo-projet figcaption { opacity: 1; }
	.sumo-lab .sumo-reveal.is-in .sumo-projet::before { animation: lab-volet 1.1s cubic-bezier(.75, 0, .2, 1) .2s both; }
	.sumo-lab .sumo-reveal.is-in .sumo-projet img { animation: lab-apparait .01s linear .75s both; }
	@keyframes lab-volet { 0% { translate: -101% 0; } 45%, 55% { translate: 0 0; } 100% { translate: 101% 0; } }
	@keyframes lab-apparait { to { opacity: 1; } }

	/* le titre de famille remonte derrière son masque */
	.sumo-lab .sumo-reveal .sumo-famille h2.wp-block-heading,
	.sumo-lab .sumo-reveal .sumo-accomp h2.wp-block-heading { clip-path: inset(0 0 100% 0); translate: 0 .4em; transition: clip-path .8s cubic-bezier(.2, .8, .2, 1) .15s, translate .8s cubic-bezier(.2, .8, .2, 1) .15s; }
	.sumo-lab .sumo-reveal.is-in .sumo-famille h2.wp-block-heading,
	.sumo-lab .sumo-reveal.is-in .sumo-accomp h2.wp-block-heading { clip-path: inset(0 0 -15% 0); translate: 0 0; }

	/* les petits tirets rouges de la liste s'allongent l'un après l'autre */
	.sumo-lab .sumo-reveal ul.sumo-liste li::before { width: 0; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
	.sumo-lab .sumo-reveal.is-in ul.sumo-liste li::before { width: 18px; }
	.sumo-lab .sumo-reveal.is-in ul.sumo-liste li:nth-child(1)::before { transition-delay: .55s; }
	.sumo-lab .sumo-reveal.is-in ul.sumo-liste li:nth-child(2)::before { transition-delay: .7s; }
	.sumo-lab .sumo-reveal.is-in ul.sumo-liste li:nth-child(3)::before { transition-delay: .85s; }

	/* défilement natif (sans bloquer la page) : les cartes de l'intro s'écartent */
	@supports (animation-timeline: view()) {
		.sumo-lab .sumo-head .sumo-collage {
			animation: lab-ecarte linear both;
			animation-timeline: scroll(root);
			animation-range: 0 70vh;
		}
		@keyframes lab-ecarte { to { translate: 0 -4%; } }
		.sumo-lab .sumo-head .sumo-layer-edition { transition: none; }
	}

	/* --- 4. Accompagnement : flux de données entre les trois outils -------- */
	.sumo-lab .sumo-accomp-items { position: relative; }
	.sumo-lab .lab-reseau {
		position: absolute;
		inset: 0;
		width: 100%; height: 100%;
		pointer-events: none;
		overflow: visible;
		z-index: 0;
	}
	.sumo-lab .lab-reseau path {
		fill: none;
		stroke: rgba(237, 28, 36, .45);
		stroke-width: 2;
		stroke-dasharray: var(--len, 600);
		stroke-dashoffset: var(--len, 600);
		transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) .4s;
	}
	.sumo-lab .is-in .lab-reseau path { stroke-dashoffset: 0; }
	.sumo-lab .sumo-accomp-items > .wp-block-column { position: relative; z-index: 1; }
	.sumo-lab .lab-donnee {
		position: absolute;
		left: 0; top: 0;
		width: 8px; height: 8px;
		margin: -4px 0 0 -4px;
		background: var(--sumo-red);
		box-shadow: 0 0 10px 2px rgba(237, 28, 36, .6);
		offset-rotate: 0deg;
		opacity: 0;
		z-index: 2;
		pointer-events: none;
	}
	.sumo-lab .lab-flux .lab-donnee {
		animation: lab-flux 2.4s cubic-bezier(.45, 0, .55, 1) var(--d, 0s) 3;
	}
	@keyframes lab-flux {
		0%   { offset-distance: 0%;   opacity: 0; }
		10%  { opacity: 1; }
		90%  { opacity: 1; }
		100% { offset-distance: 100%; opacity: 0; }
	}
	/* les intertitres s'allument au passage des données */
	.sumo-lab .sumo-accomp-items h3::before { transition: width .4s ease, box-shadow .4s ease; }
	.sumo-lab .lab-flux .sumo-accomp-items h3::before { width: 44px; box-shadow: 0 0 12px rgba(237, 28, 36, .7); }

	/* --- 5. Bouton final « aimanté » --------------------------------------- */
	.sumo-lab .sumo-band:last-child .wp-block-button__link {
		translate: var(--mx, 0) var(--my, 0);
		transition: translate .25s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, border-color .2s ease;
	}
}

/* raccords du fil vers chaque trait rouge (motion-lab.js) */
@media (prefers-reduced-motion: no-preference) {
	.sumo-lab .lab-fil .lab-raccord {
		stroke-dashoffset: var(--rl, 40);
		transition: stroke-dashoffset .35s cubic-bezier(.2, .8, .2, 1);
	}
	.sumo-lab .lab-fil .lab-raccord.is-on { stroke-dashoffset: 0; }
}

/* Mobile : fil plus fin dans la marge ; pas de circuit (les colonnes s'empilent) */
@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {
	.sumo-lab .lab-fil path { stroke-width: 4.5; }          /* marges étroites : un peu plus fin que sur ordinateur */
	.sumo-lab .lab-fil .lab-raccord { stroke-width: 7; }   /* le raccord garde l'épaisseur du trait du titre qu'il prolonge */
	.sumo-lab .lab-fil .lab-fil-trace { stroke-width: 1; }
	.sumo-lab .lab-fil .lab-aiguille { r: 5px; }
	.sumo-lab .lab-reseau,
	.sumo-lab .lab-donnee { display: none; }
	.sumo-lab .is-lit h2.sumo-barre::before { width: 56px; }
}