/* ==========================================================================
   Le sumo vivant (tout le site). Voir inc/sumo.php et assets/js/sumo.js.
   Sans JS ou en mouvement réduit : le dessin fixe (img ou fond CSS).
   ========================================================================== */

/* Pied de page : dessin vectoriel posé sur le bandeau noir */
.site-footer .footer-top .footer-logo-top img.sumo-footer-img {
	display: block;
	width: 210px;
	height: auto;
	margin: 0 auto;
}
.site-footer .footer-top .footer-logo-top { line-height: 0; }

/* le dessin fixe (fond CSS) laisse la place au sumo animé */
.sumo-mascotte.is-live::before { display: none; }

/* --- Le sumo animé (élément ajouté par sumo.js) ------------------------- */
.sumo-sumo {
	display: block;
	width: var(--sumo-w, 180px);
	aspect-ratio: 630 / 453;
	pointer-events: none;
	transform-origin: 50% 100%;
	--tete-x: 0px;
	--tete-r: 0deg;
}
/* posé au-dessus d'un bloc noir (classe sumo-mascotte) */
.sumo-mascotte > .sumo-sumo {
	position: absolute;
	bottom: calc(100% - 1px);
	left: 58%;
	translate: -50% 0;
}
.sumo-form-panel > .sumo-sumo { left: 50%; }
/* le bas du corps se prolonge dans le noir : le contenu du bloc reste toujours au-dessus */
.sumo-mascotte > :not(.sumo-sumo) { position: relative; z-index: 1; }
/* dans le pied de page, à la place de l'image */
.footer-logo-top > .sumo-sumo { --sumo-w: 210px; margin: 0 auto; position: relative; }

.sumo-sumo__img { display: block; width: 100%; height: 100%; }
.sumo-sumo svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Les parties du dessin s'animent autour de leur propre boîte */
.sumo-sumo .sumo-corps,
.sumo-sumo .sumo-yeux,
.sumo-sumo .sumo-bouche,
.sumo-sumo .sumo-chignon,
.sumo-sumo .sumo-ruban { transform-box: fill-box; }
.sumo-sumo .sumo-corps { transform-origin: 50% 100%; }
.sumo-sumo .sumo-tete-anim,
.sumo-sumo .sumo-tete-geste { transform-box: fill-box; transform-origin: 50% 92%; }
.sumo-sumo .sumo-yeux { transform-origin: 50% 50%; }
.sumo-sumo .sumo-bouche { transform-origin: 50% 50%; }
.sumo-sumo .sumo-chignon { transform-origin: 50% 100%; }
.sumo-sumo .sumo-ruban { transform-origin: 18% 60%; }

@media (prefers-reduced-motion: no-preference) {
	/* 1. Il sort du noir, avec un petit rebond (visible seulement au-dessus du bord) */
	.sumo-sumo.is-live .sumo-sumo__img {
		translate: 0 100%;
		clip-path: inset(0 0 100% 0);
	}
	.sumo-sumo.is-up .sumo-sumo__img {
		animation: sumo-sort 1s cubic-bezier(.2, .8, .2, 1) both;
	}
	@keyframes sumo-sort {
		/* le corps se prolonge sous le bandeau (noir sur noir) : quand il monte, aucun jour ne s'ouvre */
		0%   { translate: 0 100%; clip-path: inset(0 0 100% 0);  scale: 1 1; }
		55%  { translate: 0 -7%;  clip-path: inset(0 0 -22% 0);  scale: .96 1.05; }
		75%  { translate: 0 2%;   clip-path: inset(0 0 -22% 0);  scale: 1.05 .95; }
		100% { translate: 0 0;    clip-path: inset(0 0 -22% 0);  scale: 1 1; }
	}

	/* 2. Il suit la souris : la tête se tourne et se penche (le corps reste posé) */
	.sumo-sumo .sumo-tete-anim {
		translate: var(--tete-x) 0;
		rotate: var(--tete-r);
		transition: translate .6s cubic-bezier(.3, 1.3, .5, 1), rotate .6s cubic-bezier(.3, 1.3, .5, 1);
	}
	/* les yeux et la bouche glissent vers la souris : on lit un vrai regard
	   (unités du pictogramme, ×10 : 260px ≈ 14 unités du dessin) */
	.sumo-sumo .sumo-yeux,
	.sumo-sumo .sumo-bouche {
		translate: var(--traits-x, 0px) 0;
		transition: translate .45s cubic-bezier(.3, 1.2, .5, 1);
	}

	/* 3. Petits gestes, joués par courtes séquences quand il est à l'écran */
	.sumo-sumo.fait-respire .sumo-corps { animation: sumo-respire 1.8s ease-in-out 2; }
	.sumo-sumo.fait-respire .sumo-tete-geste { animation: sumo-tete-respire 1.8s ease-in-out 2; }
	@keyframes sumo-respire      { 50% { scale: 1.025 1.035; } }
	@keyframes sumo-tete-respire { 50% { translate: 0 -6px; } }

	.sumo-sumo.fait-cligne .sumo-yeux { animation: sumo-cligne .5s ease-in-out 2; }
	@keyframes sumo-cligne { 0%, 100% { scale: 1 1; } 45%, 55% { scale: 1.1 .25; } }

	.sumo-sumo.fait-ruban .sumo-ruban { animation: sumo-ruban 1.4s ease-in-out 2; }
	@keyframes sumo-ruban { 20% { rotate: -16deg; } 50% { rotate: 10deg; } 75% { rotate: -6deg; } 90% { rotate: 3deg; } }

	.sumo-sumo.fait-regard .sumo-tete-geste { animation: sumo-regard 2.6s ease-in-out 1; }
	@keyframes sumo-regard { 25% { translate: -30px 0; rotate: -9deg; } 65% { translate: 30px 0; rotate: 9deg; } }

	/* 4. Le saut (« shiko ») : il se ramasse, saute, sourit, retombe lourdement */
	.sumo-sumo.fait-saut { animation: sumo-saut .7s cubic-bezier(.3, .7, .3, 1); }
	.sumo-sumo.fait-saut .sumo-bouche { animation: sumo-sourire .7s ease-out; }
	.sumo-sumo.fait-saut .sumo-ruban { animation: sumo-ruban .7s ease-out; }
	@keyframes sumo-saut {
		0%   { translate: var(--sumo-x, 0) 0;    scale: 1 1; }
		20%  { translate: var(--sumo-x, 0) 0;    scale: 1.06 .92; }
		50%  { translate: var(--sumo-x, 0) -9%;  scale: .95 1.06; }
		78%  { translate: var(--sumo-x, 0) 0;    scale: 1.08 .9; }
		100% { translate: var(--sumo-x, 0) 0;    scale: 1 1; }
	}
	@keyframes sumo-sourire { 40%, 70% { scale: 1.35 1.5; } }
	.sumo-mascotte > .sumo-sumo { --sumo-x: -50%; }
}

@media (max-width: 781px) {
	.sumo-mascotte > .sumo-sumo { --sumo-w: 140px; left: 72%; }
	.sumo-form-panel > .sumo-sumo { left: 50%; }
	.footer-logo-top > .sumo-sumo { --sumo-w: 170px; }
}

/* Tenu par le fil rouge (variante motion) : la tête reste droite pour que le ruban
   reste au bout du fil ; les yeux, eux, suivent toujours la souris */
.sumo-sumo.tenu .sumo-tete-anim { translate: 0 0 !important; rotate: 0deg !important; }
.sumo-sumo.tenu .sumo-tete-geste { animation: none !important; }

/* --- Le logo de l'en-tête : la tête du sumo à la place du « O » (sumo.js) ---
   Position mesurée dans le logo (784 × 218) : x 328 → 439, y 0 → 138. */
.sumo-logo { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.sumo-logo > img { display: block; }
.sumo-logo .sumo-logo__tete {
	position: absolute;
	left: 41.837%; top: 0;
	width: 14.158%; height: 63.303%;
	aspect-ratio: auto;
	pointer-events: none;
	transform-origin: 50% 100%;
}
.sumo-logo .sumo-logo__tete svg { width: 100%; height: 100%; overflow: visible; }
.sumo-logo .sumo-corps { display: none; }
/* dans le logo, le regard reste discret : la tête ne mord pas sur les lettres voisines */
.sumo-logo .sumo-sumo .sumo-tete-anim { translate: calc(var(--tete-x) * .45) 0; rotate: calc(var(--tete-r) * .7); }

/* Le salut (logo, sur mobile) : la tête s'incline vers l'avant, les yeux se ferment, puis elle se relève */
@media (prefers-reduced-motion: no-preference) {
	.sumo-sumo.fait-salut .sumo-tete-geste { animation: sumo-salut 1.7s cubic-bezier(.45, 0, .3, 1); }
	.sumo-sumo.fait-salut .sumo-yeux { animation: sumo-yeux-clos 1.7s ease-in-out; }
	@keyframes sumo-salut {
		0%, 100% { translate: 0 0; scale: 1 1; }
		35%, 60% { translate: 0 20px; scale: 1.02 .9; }      /* unités du dessin : un peu moins d'un dixième de la tête */
		78% { translate: 0 -3px; scale: 1 1.02; }
	}
	@keyframes sumo-yeux-clos { 0%, 100% { scale: 1 1; } 25%, 70% { scale: 1.1 .2; } }
}

/* Menu mobile (sumo.js pose .sumo-menu-anim à chaque ouverture) :
   le ruban rouge se déroule, les liens arrivent un par un, puis le trait
   de la page en cours se pose avec une ondulation de ruban. */
@media (max-width: 921px) {
	.site-header .main-header-menu.sumo-menu-anim { background-image: linear-gradient(#ed1c24, #ed1c24); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 0; }
}
@media (max-width: 921px) and (prefers-reduced-motion: no-preference) {
	.site-header .main-header-menu.sumo-menu-anim { animation: sumo-menu-ruban .55s cubic-bezier(.65, 0, .35, 1) both; }
	.site-header .main-header-menu.sumo-menu-anim > .menu-item { animation: sumo-menu-lien .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms + 160ms); }
	.site-header .main-header-menu.sumo-menu-anim > .current-menu-item::before { animation: sumo-menu-trait .7s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i, 0) * 50ms + 420ms); }
	@keyframes sumo-menu-ruban { from { background-size: 0% 3px; } }
	@keyframes sumo-menu-lien { from { opacity: 0; translate: -16px 0; } }
	@keyframes sumo-menu-trait {
		0% { scale: 0 1; }
		55% { scale: 1.6 1; rotate: -8deg; }
		75% { scale: .9 1; rotate: 5deg; }
		100% { scale: 1 1; rotate: 0deg; }
	}
}

/* Logo sur mobile : les yeux et la bouche suivent aussi le défilement (vers le haut ou le bas) */
.sumo-logo .sumo-sumo .sumo-yeux,
.sumo-logo .sumo-sumo .sumo-bouche { translate: var(--traits-x, 0px) var(--traits-y, 0px); }

/* Logo sur mobile : il n'est jamais tout à fait immobile, il se balance doucement comme un culbuto */
@media (prefers-reduced-motion: no-preference) {
	.sumo-logo .sumo-logo__tete.is-tactile { animation: sumo-culbuto 4.2s ease-in-out infinite; transform-origin: 50% 92%; }
	@keyframes sumo-culbuto { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
}