/* ==========================================================================
   Page « Le dojo » : la silhouette du bandeau, vectorisée et découpée en
   tranches (comme les traits de la charte) ; la ceinture est la tranche rouge.
   Puis les estampes de l'équipe. Mouvement : ordinateur sans réduction des
   animations uniquement (dojo.js) ; ailleurs tout est fixe et complet.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.sumo-refonte .sumo-dojo-hero { padding-top: clamp(24px, 4vw, 56px); }
.sumo-refonte .sumo-dojo-hero__cols {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: end;
}
.sumo-refonte .sumo-dojo-hero__cols > .wp-block-column { margin: 0 !important; width: auto !important; flex: none !important; }
.sumo-refonte .sumo-dojo-hero__texte { padding-bottom: clamp(16px, 4vw, 72px); }

.dojo-scene { position: relative; }
.dojo-silhouette { display: block; width: 100%; height: auto; overflow: visible; }
.dojo-silhouette use { fill: #000; }
.dojo-silhouette .is-ceinture use { fill: var(--sumo-red, #ed1c24); }
.dojo-silhouette .dojo-sol { stroke: #000; stroke-width: 3; }
.dojo-silhouette .dojo-sceau rect { fill: var(--sumo-red, #ed1c24); }
.dojo-silhouette .dojo-sceau text {
	fill: #fff;
	font: 600 52px/1 "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

/* --- Estampes de l'équipe ------------------------------------------------
   Chaque estampe est posée sur un filet gris commun à la rangée (comme les
   étapes de la méthode) ; le petit trait rouge court le long du filet au survol. */
.sumo-refonte .sumo-galerie {
	list-style: none;
	margin: clamp(28px, 4vw, 48px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px);
}
.sumo-refonte .sumo-galerie li { margin: 0; }
.sumo-refonte .sumo-galerie a { display: block; color: inherit; text-decoration: none; }
.sumo-refonte .sumo-galerie__img {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.sumo-refonte .sumo-galerie img {
	display: block;
	width: auto; height: auto;
	max-width: 86%; max-height: 100%;
	transform-origin: 50% 100%;
	transition: transform .5s var(--sumo-ease, ease);
}
.sumo-refonte .sumo-galerie__nom {
	position: relative;
	display: block;
	padding-top: 16px;
	border-top: 1px solid var(--sumo-line, #e3e3e3);
	font-family: var(--font-title);
	font-size: 1.25rem;
	line-height: 1.15;
}
.sumo-refonte .sumo-galerie__nom::before {            /* le petit trait rouge, posé sur le filet */
	content: "";
	position: absolute;
	left: 0; top: -2px;
	width: 32px; height: 4px;
	background: var(--sumo-red, #ed1c24);
	transition: width .45s var(--sumo-ease, ease);
}
.sumo-refonte .sumo-galerie__role { display: block; margin-top: 4px; color: #555; font-size: .9375rem; }
.sumo-refonte .sumo-galerie a:is(:hover, :focus-visible) .sumo-galerie__nom::before { width: 100%; }
.sumo-refonte .sumo-galerie a:is(:hover, :focus-visible) img { transform: scale(1.04); }
.sumo-refonte .sumo-galerie a:focus-visible { outline: 3px solid var(--sumo-red, #ed1c24); outline-offset: 6px; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
	.sumo-refonte .sumo-dojo-hero__cols { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.sumo-refonte .sumo-dojo-hero__texte { padding-bottom: 0; }
	.sumo-refonte .sumo-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.sumo-refonte .sumo-galerie__nom { font-size: 1.0625rem; }
	.sumo-refonte .sumo-galerie__role { font-size: .8125rem; }
}

/* --- Mouvement (classes posées par dojo.js) ------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	/* Entrée : les tranches arrivent de chaque côté, du sol vers la tête ;
	   la ceinture se noue en dernier, puis le sceau est apposé. */
	.dojo-silhouette.is-anim .dojo-tranche { --s: 1; opacity: 0; translate: calc(var(--s) * 140px) 0; }
	.dojo-silhouette.is-anim .dojo-tranche:nth-of-type(odd) { --s: -1; }
	.dojo-silhouette.is-anim .is-ceinture { --s: -3; }
	.dojo-silhouette.is-anim .dojo-sol { scale: 0 1; transform-box: fill-box; transform-origin: 50% 50%; }
	.dojo-silhouette.is-anim .dojo-sceau rect,
	.dojo-silhouette.is-anim .dojo-sceau text { opacity: 0; }
	.dojo-silhouette.is-anim .dojo-sceau { scale: 1.35; transform-box: fill-box; transform-origin: 50% 50%; }

	.dojo-silhouette.is-pret .dojo-sol { scale: 1 1; transition: scale .9s cubic-bezier(.65, 0, .35, 1); }
	.dojo-silhouette.is-pret .dojo-tranche {
		opacity: 1; translate: 0 0;
		transition: opacity .5s ease, translate .9s cubic-bezier(.2, .8, .2, 1);
		transition-delay: calc(.25s + (6 - var(--i)) * 110ms);
	}
	.dojo-silhouette.is-pret .is-ceinture {
		transition: opacity .2s ease, translate .7s cubic-bezier(.3, 1.45, .5, 1);
		transition-delay: 1.35s;
	}
	.dojo-silhouette.is-pret .dojo-sceau { scale: 1; transition: scale .35s cubic-bezier(.5, 0, .6, 1.4) 2s; }
	.dojo-silhouette.is-pret .dojo-sceau rect,
	.dojo-silhouette.is-pret .dojo-sceau text { opacity: 1; transition: opacity .15s ease 2s; }

	/* Ensuite : le haut du corps suit la souris, de plus en plus vers la tête */
	.dojo-silhouette .dojo-tranche use {
		translate: calc(min(var(--d), 0) * var(--tors, 0) * -2px) 0;   /* le haut du corps seulement : les pieds restent au sol */
		transition: translate .7s cubic-bezier(.2, .8, .2, 1);
	}
}