/*
 * Mouvement : états de départ et habillage des effets numérotés (effets.json), joués par assets/js/mouvement.js.
 *
 * Règles : déplacements, fondus et découvertes (découpes qui s'ouvrent), de 0,2 à 0,8 s, une seule courbe, rien en
 * boucle sauf les ondes de fond (13) et la signature du pied de page (15), qu'un même bouton met en pause ; ce qui suit
 * le défilement (15, 16, 18) s'arrête avec lui. Tout reste visible sans JavaScript, quand l'appareil demande moins
 * d'animations, quand l'effet est coupé dans le labo (data-sans) et si les scripts n'arrivent pas : la classe « js »
 * est alors retirée au bout de trois secondes.
 */

@media (prefers-reduced-motion: no-preference) {
	/* 01 Contour qui se trace : la ligne en contour se découvre de gauche à droite (mot par mot quand elle est prise
	   dans le texte : mouvement.js la découpe en mots). */
	html.js:not([data-calme]):not([data-sans~="01"]) :is(.su-contour:not(.su-contour--mots), .su-contour__mot) {
		transition: clip-path 0.8s var(--su-courbe) var(--su-delai, 0s);
	}

	html.js:not([data-calme]):not([data-sans~="01"]) :is(.su-contour:not(.su-contour--mots), .su-contour__mot):not(.arrive) {
		clip-path: inset(-0.25em 100% -0.25em -0.25em);
	}

	html.js:not([data-calme]):not([data-sans~="01"]) :is(.su-contour:not(.su-contour--mots), .su-contour__mot).arrive {
		clip-path: inset(-0.25em -0.25em -0.25em -0.25em);
	}

	/* 05 Photos détourées en profondeur : mouvement.js fait monter la photo de 7 % dans son cadre ; un peu plus grande
	   que lui, elle n'en découvre jamais le bas. */
	html.js:not([data-calme]):not([data-sans~="05"]) .is-style-detoure img {
		scale: 1.08;
		transform-origin: 50% 0;
	}

	/* 06 Apparition en fondu : les transitions propres aux cartes (survol) sont reprises dans la liste. */
	html.js:not([data-calme]):not([data-sans~="06"]) :is(.su-apparait, .su-section > .wp-block-columns > .wp-block-column, .su-carte, .su-article) {
		transition:
			opacity 0.6s var(--su-courbe) var(--su-delai, 0s),
			transform 0.6s var(--su-courbe) var(--su-delai, 0s),
			translate 0.45s var(--su-courbe),
			box-shadow 0.45s var(--su-courbe),
			border-color 0.45s var(--su-courbe);
	}

	html.js:not([data-calme]):not([data-sans~="06"]) :is(.su-apparait, .su-section > .wp-block-columns > .wp-block-column, .su-carte, .su-article):not(.arrive) {
		opacity: 0;
		transform: translateY(1.5rem);
	}

	/* 15 Signature en VU-mètre : éteinte au départ, mouvement.js la fait monter quand le pied de page arrive, puis
	   jouer tant qu'elle est à l'écran. */
	html.js:not([data-calme]):not([data-sans~="15"]) .su-signature [data-l] {
		--n: 0;
	}

	/* 16 Onde dans les cartes : la carte suit le défilement sans retard (l'apparition 06 ne fait plus glisser son
	   déplacement, que l'onde remplace). */
	html.js:not([data-calme]):not([data-sans~="06"]) :is(.su-apparait, .su-section > .wp-block-columns > .wp-block-column, .su-carte, .su-article).su-onde {
		transition:
			opacity 0.6s var(--su-courbe) var(--su-delai, 0s),
			translate 0.45s var(--su-courbe),
			box-shadow 0.45s var(--su-courbe),
			border-color 0.45s var(--su-courbe);
	}

	/* 17 Photos qui sortent du silence : la photo attend en trait plat, se dresse en barres d'onde sonore (en miroir,
	   comme dans un lecteur audio), puis prend tout son cadre. */
	html.js:not([data-calme]):not([data-sans~="17"]) .su-duo__image > .wp-block-image:not(.is-style-detoure):not(.arrive) img {
		clip-path: inset(49.75% 0);
	}

	html.js:not([data-calme]):not([data-sans~="17"]) .su-duo__image > .wp-block-image:not(.is-style-detoure).arrive img {
		animation: su-silence 0.8s var(--su-courbe) var(--su-delai, 0s) backwards;
	}

	@keyframes su-silence {
		from {
			clip-path: polygon(0% 49.75%, 0.73% 49.75%, 0.73% 49.75%, 3.12% 49.75%, 3.12% 49.75%, 4.58% 49.75%, 4.58% 49.75%, 6.96% 49.75%, 6.96% 49.75%, 8.42% 49.75%, 8.42% 49.75%, 10.81% 49.75%, 10.81% 49.75%, 12.27% 49.75%, 12.27% 49.75%, 14.65% 49.75%, 14.65% 49.75%, 16.12% 49.75%, 16.12% 49.75%, 18.5% 49.75%, 18.5% 49.75%, 19.96% 49.75%, 19.96% 49.75%, 22.35% 49.75%, 22.35% 49.75%, 23.81% 49.75%, 23.81% 49.75%, 26.19% 49.75%, 26.19% 49.75%, 27.65% 49.75%, 27.65% 49.75%, 30.04% 49.75%, 30.04% 49.75%, 31.5% 49.75%, 31.5% 49.75%, 33.88% 49.75%, 33.88% 49.75%, 35.35% 49.75%, 35.35% 49.75%, 37.73% 49.75%, 37.73% 49.75%, 39.19% 49.75%, 39.19% 49.75%, 41.58% 49.75%, 41.58% 49.75%, 43.04% 49.75%, 43.04% 49.75%, 45.42% 49.75%, 45.42% 49.75%, 46.88% 49.75%, 46.88% 49.75%, 49.27% 49.75%, 49.27% 49.75%, 50.73% 49.75%, 50.73% 49.75%, 53.12% 49.75%, 53.12% 49.75%, 54.58% 49.75%, 54.58% 49.75%, 56.96% 49.75%, 56.96% 49.75%, 58.42% 49.75%, 58.42% 49.75%, 60.81% 49.75%, 60.81% 49.75%, 62.27% 49.75%, 62.27% 49.75%, 64.65% 49.75%, 64.65% 49.75%, 66.12% 49.75%, 66.12% 49.75%, 68.5% 49.75%, 68.5% 49.75%, 69.96% 49.75%, 69.96% 49.75%, 72.35% 49.75%, 72.35% 49.75%, 73.81% 49.75%, 73.81% 49.75%, 76.19% 49.75%, 76.19% 49.75%, 77.65% 49.75%, 77.65% 49.75%, 80.04% 49.75%, 80.04% 49.75%, 81.5% 49.75%, 81.5% 49.75%, 83.88% 49.75%, 83.88% 49.75%, 85.35% 49.75%, 85.35% 49.75%, 87.73% 49.75%, 87.73% 49.75%, 89.19% 49.75%, 89.19% 49.75%, 91.58% 49.75%, 91.58% 49.75%, 93.04% 49.75%, 93.04% 49.75%, 95.42% 49.75%, 95.42% 49.75%, 96.88% 49.75%, 96.88% 49.75%, 99.27% 49.75%, 99.27% 49.75%, 100% 49.75%, 100% 50.25%, 99.27% 50.25%, 99.27% 50.25%, 96.88% 50.25%, 96.88% 50.25%, 95.42% 50.25%, 95.42% 50.25%, 93.04% 50.25%, 93.04% 50.25%, 91.58% 50.25%, 91.58% 50.25%, 89.19% 50.25%, 89.19% 50.25%, 87.73% 50.25%, 87.73% 50.25%, 85.35% 50.25%, 85.35% 50.25%, 83.88% 50.25%, 83.88% 50.25%, 81.5% 50.25%, 81.5% 50.25%, 80.04% 50.25%, 80.04% 50.25%, 77.65% 50.25%, 77.65% 50.25%, 76.19% 50.25%, 76.19% 50.25%, 73.81% 50.25%, 73.81% 50.25%, 72.35% 50.25%, 72.35% 50.25%, 69.96% 50.25%, 69.96% 50.25%, 68.5% 50.25%, 68.5% 50.25%, 66.12% 50.25%, 66.12% 50.25%, 64.65% 50.25%, 64.65% 50.25%, 62.27% 50.25%, 62.27% 50.25%, 60.81% 50.25%, 60.81% 50.25%, 58.42% 50.25%, 58.42% 50.25%, 56.96% 50.25%, 56.96% 50.25%, 54.58% 50.25%, 54.58% 50.25%, 53.12% 50.25%, 53.12% 50.25%, 50.73% 50.25%, 50.73% 50.25%, 49.27% 50.25%, 49.27% 50.25%, 46.88% 50.25%, 46.88% 50.25%, 45.42% 50.25%, 45.42% 50.25%, 43.04% 50.25%, 43.04% 50.25%, 41.58% 50.25%, 41.58% 50.25%, 39.19% 50.25%, 39.19% 50.25%, 37.73% 50.25%, 37.73% 50.25%, 35.35% 50.25%, 35.35% 50.25%, 33.88% 50.25%, 33.88% 50.25%, 31.5% 50.25%, 31.5% 50.25%, 30.04% 50.25%, 30.04% 50.25%, 27.65% 50.25%, 27.65% 50.25%, 26.19% 50.25%, 26.19% 50.25%, 23.81% 50.25%, 23.81% 50.25%, 22.35% 50.25%, 22.35% 50.25%, 19.96% 50.25%, 19.96% 50.25%, 18.5% 50.25%, 18.5% 50.25%, 16.12% 50.25%, 16.12% 50.25%, 14.65% 50.25%, 14.65% 50.25%, 12.27% 50.25%, 12.27% 50.25%, 10.81% 50.25%, 10.81% 50.25%, 8.42% 50.25%, 8.42% 50.25%, 6.96% 50.25%, 6.96% 50.25%, 4.58% 50.25%, 4.58% 50.25%, 3.12% 50.25%, 3.12% 50.25%, 0.73% 50.25%, 0.73% 50.25%, 0% 50.25%);
		}

		50% {
			clip-path: polygon(0% 50%, 0.73% 50%, 0.73% 45%, 3.12% 45%, 3.12% 50%, 4.58% 50%, 4.58% 41%, 6.96% 41%, 6.96% 50%, 8.42% 50%, 8.42% 36%, 10.81% 36%, 10.81% 50%, 12.27% 50%, 12.27% 39%, 14.65% 39%, 14.65% 50%, 16.12% 50%, 16.12% 31%, 18.5% 31%, 18.5% 50%, 19.96% 50%, 19.96% 23%, 22.35% 23%, 22.35% 50%, 23.81% 50%, 23.81% 28%, 26.19% 28%, 26.19% 50%, 27.65% 50%, 27.65% 34%, 30.04% 34%, 30.04% 50%, 31.5% 50%, 31.5% 20%, 33.88% 20%, 33.88% 50%, 35.35% 50%, 35.35% 10%, 37.73% 10%, 37.73% 50%, 39.19% 50%, 39.19% 16%, 41.58% 16%, 41.58% 50%, 43.04% 50%, 43.04% 24%, 45.42% 24%, 45.42% 50%, 46.88% 50%, 46.88% 31%, 49.27% 31%, 49.27% 50%, 50.73% 50%, 50.73% 26%, 53.12% 26%, 53.12% 50%, 54.58% 50%, 54.58% 15%, 56.96% 15%, 56.96% 50%, 58.42% 50%, 58.42% 7%, 60.81% 7%, 60.81% 50%, 62.27% 50%, 62.27% 12%, 64.65% 12%, 64.65% 50%, 66.12% 50%, 66.12% 21%, 68.5% 21%, 68.5% 50%, 69.96% 50%, 69.96% 29%, 72.35% 29%, 72.35% 50%, 73.81% 50%, 73.81% 35%, 76.19% 35%, 76.19% 50%, 77.65% 50%, 77.65% 27%, 80.04% 27%, 80.04% 50%, 81.5% 50%, 81.5% 19%, 83.88% 19%, 83.88% 50%, 85.35% 50%, 85.35% 25%, 87.73% 25%, 87.73% 50%, 89.19% 50%, 89.19% 33%, 91.58% 33%, 91.58% 50%, 93.04% 50%, 93.04% 39%, 95.42% 39%, 95.42% 50%, 96.88% 50%, 96.88% 44%, 99.27% 44%, 99.27% 50%, 100% 50%, 100% 50%, 99.27% 50%, 99.27% 56%, 96.88% 56%, 96.88% 50%, 95.42% 50%, 95.42% 61%, 93.04% 61%, 93.04% 50%, 91.58% 50%, 91.58% 67%, 89.19% 67%, 89.19% 50%, 87.73% 50%, 87.73% 75%, 85.35% 75%, 85.35% 50%, 83.88% 50%, 83.88% 81%, 81.5% 81%, 81.5% 50%, 80.04% 50%, 80.04% 73%, 77.65% 73%, 77.65% 50%, 76.19% 50%, 76.19% 65%, 73.81% 65%, 73.81% 50%, 72.35% 50%, 72.35% 71%, 69.96% 71%, 69.96% 50%, 68.5% 50%, 68.5% 79%, 66.12% 79%, 66.12% 50%, 64.65% 50%, 64.65% 88%, 62.27% 88%, 62.27% 50%, 60.81% 50%, 60.81% 93%, 58.42% 93%, 58.42% 50%, 56.96% 50%, 56.96% 85%, 54.58% 85%, 54.58% 50%, 53.12% 50%, 53.12% 74%, 50.73% 74%, 50.73% 50%, 49.27% 50%, 49.27% 69%, 46.88% 69%, 46.88% 50%, 45.42% 50%, 45.42% 76%, 43.04% 76%, 43.04% 50%, 41.58% 50%, 41.58% 84%, 39.19% 84%, 39.19% 50%, 37.73% 50%, 37.73% 90%, 35.35% 90%, 35.35% 50%, 33.88% 50%, 33.88% 80%, 31.5% 80%, 31.5% 50%, 30.04% 50%, 30.04% 66%, 27.65% 66%, 27.65% 50%, 26.19% 50%, 26.19% 72%, 23.81% 72%, 23.81% 50%, 22.35% 50%, 22.35% 77%, 19.96% 77%, 19.96% 50%, 18.5% 50%, 18.5% 69%, 16.12% 69%, 16.12% 50%, 14.65% 50%, 14.65% 61%, 12.27% 61%, 12.27% 50%, 10.81% 50%, 10.81% 64%, 8.42% 64%, 8.42% 50%, 6.96% 50%, 6.96% 59%, 4.58% 59%, 4.58% 50%, 3.12% 50%, 3.12% 55%, 0.73% 55%, 0.73% 50%, 0% 50%);
		}

		to {
			clip-path: polygon(0% 0%, 0.73% 0%, 0.73% 0%, 3.12% 0%, 3.12% 0%, 4.58% 0%, 4.58% 0%, 6.96% 0%, 6.96% 0%, 8.42% 0%, 8.42% 0%, 10.81% 0%, 10.81% 0%, 12.27% 0%, 12.27% 0%, 14.65% 0%, 14.65% 0%, 16.12% 0%, 16.12% 0%, 18.5% 0%, 18.5% 0%, 19.96% 0%, 19.96% 0%, 22.35% 0%, 22.35% 0%, 23.81% 0%, 23.81% 0%, 26.19% 0%, 26.19% 0%, 27.65% 0%, 27.65% 0%, 30.04% 0%, 30.04% 0%, 31.5% 0%, 31.5% 0%, 33.88% 0%, 33.88% 0%, 35.35% 0%, 35.35% 0%, 37.73% 0%, 37.73% 0%, 39.19% 0%, 39.19% 0%, 41.58% 0%, 41.58% 0%, 43.04% 0%, 43.04% 0%, 45.42% 0%, 45.42% 0%, 46.88% 0%, 46.88% 0%, 49.27% 0%, 49.27% 0%, 50.73% 0%, 50.73% 0%, 53.12% 0%, 53.12% 0%, 54.58% 0%, 54.58% 0%, 56.96% 0%, 56.96% 0%, 58.42% 0%, 58.42% 0%, 60.81% 0%, 60.81% 0%, 62.27% 0%, 62.27% 0%, 64.65% 0%, 64.65% 0%, 66.12% 0%, 66.12% 0%, 68.5% 0%, 68.5% 0%, 69.96% 0%, 69.96% 0%, 72.35% 0%, 72.35% 0%, 73.81% 0%, 73.81% 0%, 76.19% 0%, 76.19% 0%, 77.65% 0%, 77.65% 0%, 80.04% 0%, 80.04% 0%, 81.5% 0%, 81.5% 0%, 83.88% 0%, 83.88% 0%, 85.35% 0%, 85.35% 0%, 87.73% 0%, 87.73% 0%, 89.19% 0%, 89.19% 0%, 91.58% 0%, 91.58% 0%, 93.04% 0%, 93.04% 0%, 95.42% 0%, 95.42% 0%, 96.88% 0%, 96.88% 0%, 99.27% 0%, 99.27% 0%, 100% 0%, 100% 100%, 99.27% 100%, 99.27% 100%, 96.88% 100%, 96.88% 100%, 95.42% 100%, 95.42% 100%, 93.04% 100%, 93.04% 100%, 91.58% 100%, 91.58% 100%, 89.19% 100%, 89.19% 100%, 87.73% 100%, 87.73% 100%, 85.35% 100%, 85.35% 100%, 83.88% 100%, 83.88% 100%, 81.5% 100%, 81.5% 100%, 80.04% 100%, 80.04% 100%, 77.65% 100%, 77.65% 100%, 76.19% 100%, 76.19% 100%, 73.81% 100%, 73.81% 100%, 72.35% 100%, 72.35% 100%, 69.96% 100%, 69.96% 100%, 68.5% 100%, 68.5% 100%, 66.12% 100%, 66.12% 100%, 64.65% 100%, 64.65% 100%, 62.27% 100%, 62.27% 100%, 60.81% 100%, 60.81% 100%, 58.42% 100%, 58.42% 100%, 56.96% 100%, 56.96% 100%, 54.58% 100%, 54.58% 100%, 53.12% 100%, 53.12% 100%, 50.73% 100%, 50.73% 100%, 49.27% 100%, 49.27% 100%, 46.88% 100%, 46.88% 100%, 45.42% 100%, 45.42% 100%, 43.04% 100%, 43.04% 100%, 41.58% 100%, 41.58% 100%, 39.19% 100%, 39.19% 100%, 37.73% 100%, 37.73% 100%, 35.35% 100%, 35.35% 100%, 33.88% 100%, 33.88% 100%, 31.5% 100%, 31.5% 100%, 30.04% 100%, 30.04% 100%, 27.65% 100%, 27.65% 100%, 26.19% 100%, 26.19% 100%, 23.81% 100%, 23.81% 100%, 22.35% 100%, 22.35% 100%, 19.96% 100%, 19.96% 100%, 18.5% 100%, 18.5% 100%, 16.12% 100%, 16.12% 100%, 14.65% 100%, 14.65% 100%, 12.27% 100%, 12.27% 100%, 10.81% 100%, 10.81% 100%, 8.42% 100%, 8.42% 100%, 6.96% 100%, 6.96% 100%, 4.58% 100%, 4.58% 100%, 3.12% 100%, 3.12% 100%, 0.73% 100%, 0.73% 100%, 0% 100%);
		}
	}

	/* 11 Fondu entre les pages (Chrome, Edge, Safari récents) ; l'en-tête reste en place. */
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.35s;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* 14 Ouverture de l'accueil, à l'arrivée sur le site (classe « ouverture » posée avant l'affichage) : la photo se
	   découvre, SOUND puis UP montent lettre par lettre, STUDIO s'élève comme une barre de VU-mètre, puis le titre, le
	   texte et les boutons arrivent ; deux secondes en tout. La photo est peinte dès la première image, sous un rideau
	   de la couleur du fond qui s'efface : la mesure du plus grand affichage (LCP) n'attend pas l'animation. */
	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-hero__image {
		position: relative;
		overflow: clip;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-hero__image::after {
		content: "";
		position: absolute;
		inset: 0 0 0 -6rem;
		z-index: 2; /* devant le voile de la photo (soundup.css, « Photos ») */
		background: linear-gradient(90deg, transparent, var(--fond) 6rem);
		translate: 101% 0;
		animation: su-ouverture-rideau 0.8s var(--su-courbe) both;
		pointer-events: none;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-hero__image img {
		transform-origin: 50% 100%;
		animation: su-ouverture-pose 0.8s var(--su-courbe) both;
	}

	/* Le lettrage passe devant le rideau ; chaque mot est sa propre fente, d'où ses lettres sortent. */
	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-lettrage {
		position: relative;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-lettrage__mot {
		clip-path: inset(-0.3em -0.3em 0 -0.3em);
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-lettre {
		display: inline-block;
		animation: su-ouverture-lettre 0.6s var(--su-courbe) calc(0.3s + var(--i, 0) * 0.05s) both;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-lettrage__up .su-lettre {
		animation-delay: calc(0.55s + var(--i, 0) * 0.06s);
	}

	/* Tournée d'un demi-tour, la case STUDIO a son haut en bas : la découpe s'ouvre donc du bas vers le haut. */
	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-lettrage__studio {
		animation: su-ouverture-barre 0.6s var(--su-courbe) 0.75s both;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) :is(.su-hero__titre, .su-hero__texte .su-chapo, .su-hero__texte .wp-block-buttons, .su-hero__texte .su-reseaux) {
		animation: su-ouverture-monte 0.6s var(--su-courbe) 0.9s both;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-hero__texte .su-chapo {
		animation-delay: 1s;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-hero__texte .wp-block-buttons {
		animation-delay: 1.1s;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-hero__texte .su-reseaux {
		animation-delay: 1.2s;
	}

	/* Le contour du titre se trace à son tour, une fois le titre arrivé (à la place de l'effet 01). */
	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-hero .su-contour {
		transition: none;
		animation: su-ouverture-trace 0.8s var(--su-courbe) 1.1s both;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-defiler {
		animation: su-ouverture-fondu 0.6s var(--su-courbe) 1.3s both;
	}

	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-defiler::before {
		transform-origin: 50% 0;
		animation: su-ouverture-ligne 0.6s var(--su-courbe) 1.3s both;
	}

	/* Première visite : le bandeau d'accord arrive en dernier, sans couvrir le lettrage pendant l'ouverture. */
	html.js.ouverture:not([data-calme]):not([data-sans~="14"]) .su-accord:not(.su-accord--rouvert) {
		animation: su-ouverture-monte 0.6s var(--su-courbe) 1.4s both;
	}

	@keyframes su-ouverture-rideau {
		from {
			translate: 0 0;
		}
	}

	@keyframes su-ouverture-pose {
		from {
			scale: 1.06;
		}
	}

	@keyframes su-ouverture-lettre {
		from {
			translate: 0 105%;
		}
	}

	@keyframes su-ouverture-barre {
		from {
			clip-path: inset(0 0 100% 0);
		}
	}

	@keyframes su-ouverture-monte {
		from {
			opacity: 0;
			translate: 0 1.5rem;
		}
	}

	@keyframes su-ouverture-trace {
		from {
			clip-path: inset(-0.25em 100% -0.25em -0.25em);
		}

		to {
			clip-path: inset(-0.25em);
		}
	}

	@keyframes su-ouverture-fondu {
		from {
			opacity: 0;
		}
	}

	@keyframes su-ouverture-ligne {
		from {
			scale: 1 0;
		}
	}
}

/* 01 Un mot d'un contour pris dans le texte : sa propre boîte, qui passe à la ligne d'un bloc. */
.su-contour__mot {
	display: inline-block;
}

/* Rejouer un effet dans le labo : retour instantané à l'état de départ. */
.su-sans-transition,
.su-sans-transition * {
	transition: none !important;
}

/* Interrupteur clair/sombre : un cercle part du bouton (le reste de l'écran ne fond pas). */
html.bascule-en-cours .su-entete {
	view-transition-name: none;
}

html.bascule-en-cours::view-transition-old(root),
html.bascule-en-cours::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

/* 03 Ondes qui réagissent au son : --su-niveau (0 à 1) suit le volume de l'extrait en cours ; mouvement.js passe
   aussi ce volume à l'effet 13, qui gonfle le dessin. L'opacité ne bouge pas : le contraste des textes reste celui
   mesuré. */
.su-fond:not(.est-fige) {
	translate: 0 calc(var(--su-niveau, 0) * -0.75rem);
}

/* 04 Chiffres qui montent : le chiffre réel reste lisible par les lecteurs d'écran, le défilé est décoratif. */
.su-compteur__anime {
	display: inline-block;
	text-align: end;
}

/* 08 VU-mètre de lecture : segments turquoise puis jaune, en haut de l'écran. */
.su-vumetre {
	display: none;
}

html.js:not([data-sans~="08"]) .su-vumetre {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
	display: block;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--decor) 0 60%, var(--bouton) 82%, #f28c28 100%);
	-webkit-mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 15px);
	mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 15px);
	clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
	pointer-events: none;
}

.admin-bar .su-vumetre {
	top: var(--wp-admin--admin-bar--height, 0px) !important;
}

@media (max-width: 600px) {
	.admin-bar .su-vumetre {
		top: 0 !important;
	}
}

/* 09 Lecteur audio à forme d'onde. Sans JavaScript : le lecteur du navigateur. */
.su-lecteur {
	margin: 0;
}

/* WordPress impose 300 px au lecteur du navigateur : trop large pour une colonne de téléphone. */
.su-lecteur > audio {
	display: block;
	width: 100%;
	min-width: 0;
}

.su-lecteur figcaption {
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--petit);
}

.su-lecteur--pret > audio {
	display: none;
}

.su-lecteur__corps {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1.25rem 0.75rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--titre) 12%, transparent);
	border-radius: 999px;
	background-color: var(--surface);
}

.su-lecteur__jouer {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--bouton);
	color: var(--bouton-texte);
	cursor: pointer;
	transition: box-shadow 0.3s var(--su-courbe);
}

.su-lecteur__jouer:hover {
	box-shadow: 0 0.75rem 1.75rem -0.6rem rgb(242 140 40 / 55%);
}

.su-lecteur__jouer svg {
	width: 1.1rem;
	height: 1.1rem;
}

.su-lecteur__pause,
.su-lecteur--joue .su-lecteur__lecture {
	display: none;
}

.su-lecteur--joue .su-lecteur__pause {
	display: block;
}

.su-lecteur__onde {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 2.75rem;
	border-radius: 0.4rem;
}

.su-lecteur__onde:has(input:focus-visible) {
	outline: 2px solid var(--lien);
	outline-offset: 4px;
}

.su-lecteur__barres {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 2px;
	pointer-events: none;
}

.su-lecteur__barres span {
	flex: 1;
	height: calc(var(--h, 0.3) * 100%);
	min-height: 2px;
	border-radius: 2px;
	background-color: color-mix(in srgb, var(--decor) 35%, transparent);
}

.su-lecteur__barres--joue {
	clip-path: inset(0 calc(100% - var(--progression, 0) * 100%) 0 0);
}

.su-lecteur__barres--joue span {
	background-color: var(--decor);
}

.su-lecteur__position {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.su-lecteur__temps {
	flex: none;
	min-width: 5.5rem;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	text-align: end;
	color: var(--titre);
}

@media (max-width: 480px) {
	.su-lecteur__temps {
		display: none;
	}
}

/* 10 Dates qui se dessinent : le texte reste en place (sélection, lecteurs d'écran), le tracé passe par-dessus. */
.su-date-contour time {
	white-space: nowrap;
}

html.js .su-date-contour--dessin {
	-webkit-text-stroke-color: transparent;
}

.su-date-contour__dessin {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

html:not(.js) .su-date-contour__dessin {
	display: none;
}

.su-date-contour__dessin text {
	stroke-dasharray: var(--su-trace, 240px);
	stroke-dashoffset: var(--su-trace, 240px);
	transition: stroke-dashoffset 0.8s var(--su-courbe) var(--su-delai, 0s);
}

.su-date-contour--dessin.arrive .su-date-contour__dessin text {
	stroke-dashoffset: 0;
}

/* 12 Galerie à l'horizontale : épinglée, la piste glisse au défilement (sinon, défilement au doigt). Les photos
   prennent alors la hauteur de l'écran (format 4/3) : l'arrêt montre les photos, pas un grand vide autour d'elles.
   La galerie est la fenêtre de sa piste : elle coupe elle-même les photos qui attendent hors de l'écran. */
.su-galerie--epinglee {
	overflow-x: clip;
}

.su-galerie--epinglee .su-galerie__piste {
	width: max-content;
	overflow: visible;
	scroll-snap-type: none;
}

.su-galerie--epinglee .su-galerie__piste > * {
	width: calc(min(58vh, 40rem) * 4 / 3);
}

@media print {
	.su-contour,
	.su-contour__mot,
	.su-apparait,
	.su-carte,
	.su-article,
	.su-onde,
	.wp-block-column,
	.su-duo__image img {
		clip-path: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.su-hero *,
	.su-hero *::before,
	.su-hero *::after,
	.su-duo__image img {
		animation: none !important;
	}

	.su-signature [data-l] {
		--n: var(--fin) !important;
		--c: 0 !important;
	}
}