/*
 * « Je partage à un proche », version borne d'arcade (/je-partage-a-un-proche/borne) : la salle, la borne
 * (fronton lumineux, écran cathodique, pupitre, caisson avec monnayeur et mode d'emploi) et le panneau du
 * niveau suivant. Écran, manette et sons : assets/js/borne.js.
 *
 * Charte : les 6 couleurs seulement (nuances obtenues par transparence de ces couleurs), Digitalt et Futura.
 * La lumière reste sur la borne (fronton, écran, boutons, monnayeur) : aucun halo ni contour sur les logos ni
 * sur la typographie, qui restent imprimés à plat.
 *
 * Échelle : toute la borne est dessinée en em, 1em = --u = 1 % de sa largeur. --u est choisie pour que fronton,
 * écran et pupitre (128 unités de haut) tiennent sous l’en-tête et que le pupitre (104 unités) tienne en
 * largeur, du téléphone (375 px) au grand écran (plafond 7,6 px).
 * Mouvement : uniquement transform et opacity ; tout est immobile et à l'état final si le visiteur a demandé
 * à réduire les animations (.ez-js absent, voir _base.twig).
 */

.ez-page-borne { background: var(--ez-nuit); }

/* =====================================================================
 * Salle
 * ===================================================================== */
.salle {
	--u: max(3px, min(calc((100vw - 16px) / 104), calc((100vh - 112px) / 128), 7.6px));
	--u: max(3px, min(calc((100vw - 16px) / 104), calc((100svh - 112px) / 128), 7.6px));
	position: relative; isolation: isolate; overflow: hidden;
	padding: 94px 0 calc(var(--u) * 30);
	background: var(--ez-nuit); color: var(--ez-blanc);
}
@media (min-width: 768px) {
	.salle {
		--u: max(3px, min(calc((100vw - 64px) / 104), calc((100vh - 116px) / 128), 7.6px));
		--u: max(3px, min(calc((100vw - 64px) / 104), calc((100svh - 116px) / 128), 7.6px));
		padding-top: 98px;
	}
}
.salle__decor, .salle__scene { font-size: var(--u); }
.salle__decor { position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: hidden; }
.salle__scene { position: relative; }

/* Mur : pénombre, halo violet derrière la borne, lambris discrets */
.salle__mur {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse 78em 70em at 50% 52em, rgba(91, 62, 144, 0.62), rgba(91, 62, 144, 0) 72%),
		radial-gradient(ellipse 140em 40em at 50% 0, rgba(43, 45, 109, 0.9), rgba(43, 45, 109, 0) 75%),
		repeating-linear-gradient(90deg, rgba(43, 45, 109, 0) 0 15.8em, rgba(43, 45, 109, 0.55) 15.8em 16em),
		var(--ez-nuit);
}
/* Projecteur au plafond : cône de lumière sur la borne (fixe) */
.salle__projecteur {
	position: absolute; left: 50%; top: 0; width: 170em; height: 150em; margin-left: -85em;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0));
	clip-path: polygon(41% 0, 59% 0, 88% 100%, 12% 100%);
}
/* Poussières dans le faisceau */
.salle__poussieres span {
	position: absolute; left: calc(50% + (var(--i) * 13 - 65) * 1em); top: calc(14em + var(--i) * 11em);
	width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--ez-blanc); opacity: 0;
}
.ez-js .salle__poussieres span { animation: borne-poussiere calc(9s + var(--i) * 1.3s) linear calc(var(--i) * -2.1s) infinite; }
@keyframes borne-poussiere {
	0% { transform: translate(0, 0); opacity: 0; }
	20% { opacity: 0.35; }
	50% { transform: translate(3em, -9em); opacity: 0.18; }
	80% { opacity: 0.3; }
	100% { transform: translate(-2em, -18em); opacity: 0; }
}
/* Bornes voisines dans la pénombre (grands écrans) : vues de biais, écrans qui changent doucement de couleur */
.voisine { display: none; }
@media (min-width: 1100px) {
	.voisine {
		display: block; position: absolute; top: calc(98px + 6em); width: 80em; height: 172em; opacity: 0.62;
		background:
			linear-gradient(180deg, rgba(30, 30, 62, 0) 40%, rgba(30, 30, 62, 0.85)),
			linear-gradient(90deg, rgba(91, 62, 144, 0.5) 0 0.7em, var(--ez-encre) 0.7em 3.4em, var(--ez-nuit) 3.4em calc(100% - 3.4em), var(--ez-encre) calc(100% - 3.4em) calc(100% - 0.7em), rgba(91, 62, 144, 0.5) calc(100% - 0.7em));
		border-radius: 1em 1em 0 0;
	}
	.voisine--gauche { right: calc(50% + 64em); transform-origin: 100% 50%; transform: perspective(150em) rotateY(24deg); }
	.voisine--droite { left: calc(50% + 64em); transform-origin: 0 50%; transform: perspective(150em) rotateY(-24deg); }
	/* Brouillard de la salle : plus on s'éloigne de notre borne, plus il fait sombre */
	.voisine::after { content: ""; position: absolute; inset: -2em; background: linear-gradient(90deg, var(--ez-nuit), rgba(30, 30, 62, 0) 70%); }
	.voisine--droite::after { background: linear-gradient(270deg, var(--ez-nuit), rgba(30, 30, 62, 0) 70%); }
	.voisine__fronton { position: absolute; left: -1em; right: -1em; top: 0; height: 16em; border-radius: 1.2em; background: linear-gradient(45deg, var(--ez-encre), var(--ez-violet) 55%, var(--ez-turquoise)); box-shadow: inset 0 0 0 0.8em var(--ez-nuit); }
	.voisine--gauche .voisine__fronton { background: linear-gradient(45deg, var(--ez-nuit), var(--ez-encre) 30%, var(--ez-violet) 62%, var(--ez-corail)); }
	.voisine__ecran { position: absolute; left: 9em; right: 9em; top: 25em; height: 52em; border-radius: 5em / 5.4em; background: var(--ez-nuit); overflow: hidden; box-shadow: 0 0 0 0.6em var(--ez-encre), 0 0 7em 1em rgba(69, 213, 222, 0.22); }
	.voisine--gauche .voisine__ecran { box-shadow: 0 0 0 0.6em var(--ez-encre), 0 0 7em 1em rgba(238, 124, 111, 0.22); }
	.voisine__ecran::before, .voisine__ecran::after { content: ""; position: absolute; inset: 3%; border-radius: 3em; }
	.voisine__ecran::before { background: linear-gradient(180deg, var(--ez-encre), var(--ez-violet) 55%, var(--ez-turquoise)); opacity: 0.55; }
	.voisine__ecran::after { background: linear-gradient(0deg, var(--ez-corail), var(--ez-violet) 55%, var(--ez-encre)); opacity: 0; }
	.ez-js .voisine__ecran::after { animation: borne-voisine 7s ease-in-out infinite alternate; }
	.ez-js .voisine--droite .voisine__ecran::after { animation-duration: 9.5s; animation-delay: -4s; }
	.voisine__pupitre { position: absolute; left: -2.5em; right: -2.5em; top: 88em; height: 18em; background: linear-gradient(180deg, var(--ez-violet), var(--ez-encre) 70%, var(--ez-nuit)); clip-path: polygon(3.5% 0, 96.5% 0, 100% 72%, 100% 100%, 0 100%, 0 72%); }
	.voisine__pupitre::before { content: ""; position: absolute; left: 0; right: 0; top: 72%; height: 0.6em; background: var(--ez-corail); opacity: 0.7; }
	.voisine__pupitre::after { content: ""; position: absolute; left: 34%; top: 4em; width: 48%; height: 5em; background: radial-gradient(ellipse 1.9em 1.4em, var(--ez-turquoise) 98%, rgba(69, 213, 222, 0)) 0 0 / 25% 100% repeat-x; opacity: 0.8; }
}
@keyframes borne-voisine { 0%, 35% { opacity: 0; } 65%, 100% { opacity: 0.45; } }

/* =====================================================================
 * Borne
 * ===================================================================== */
.borne { position: relative; z-index: 1; width: 100em; margin: 0 auto; }
/* Le meuble : jonc corail sur les chants, flancs violets, face encre */
.borne::before {
	content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 16em; bottom: 0; border-radius: 0.8em 0.8em 0.4em 0.4em;
	background:
		linear-gradient(90deg, rgba(30, 30, 62, 0.4) 0 0.15em, var(--ez-corail) 0.15em 0.5em, rgba(255, 255, 255, 0.55) 0.5em 0.65em, var(--ez-corail) 0.65em 1em, rgba(255, 255, 255, 0) 1em),
		linear-gradient(270deg, rgba(30, 30, 62, 0.4) 0 0.15em, var(--ez-corail) 0.15em 0.5em, rgba(255, 255, 255, 0.4) 0.5em 0.65em, var(--ez-corail) 0.65em 1em, rgba(255, 255, 255, 0) 1em),
		linear-gradient(90deg, rgba(91, 62, 144, 0) 1em, var(--ez-violet) 1em, rgba(43, 45, 109, 1) 4em, rgba(43, 45, 109, 0) 4em),
		linear-gradient(270deg, rgba(91, 62, 144, 0) 1em, rgba(91, 62, 144, 0.75) 1em, rgba(30, 30, 62, 1) 4em, rgba(30, 30, 62, 0) 4em),
		var(--ez-encre);
	box-shadow: 0 0 0 0.2em rgba(30, 30, 62, 0.6), 0 4em 9em 1em rgba(30, 30, 62, 0.9);
}

/* ---------- Fronton lumineux ---------- */
.fronton { position: relative; z-index: 2; width: 102em; margin: 0 -1em; }
.fronton__panneau {
	position: relative; height: 17em; overflow: hidden; border-radius: 1.6em 1.6em 0.5em 0.5em;
	background: var(--ez-violet) linear-gradient(45deg, var(--ez-encre), var(--ez-violet));
	box-shadow: inset 0 0 0 0.8em var(--ez-nuit), inset 0 0 0 1.05em rgba(255, 255, 255, 0.16), 0 1em 4em -0.5em rgba(91, 62, 144, 0.9);
}
/* Néon derrière le panneau : éclairage sous l'impression, jamais autour des lettres */
.fronton__lumiere {
	position: absolute; inset: 1.05em;
	background:
		radial-gradient(ellipse 58% 95% at 50% 0, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 35%);
}
.fronton__horizon { position: absolute; left: 1.05em; right: 1.05em; bottom: 1.05em; width: calc(100% - 2.1em); height: 6.4em; }
.fronton__soleil { fill: var(--ez-corail); }
.fronton__collines { fill: var(--ez-encre); }
.fronton__village { fill: var(--ez-nuit); }
.fronton__route { fill: var(--ez-corail); }
.fronton__titre {
	position: absolute; inset: 1em 0 5.2em; display: grid; place-items: center; margin: 0;
	font-family: var(--ez-f-titre); font-weight: 400; text-transform: uppercase; text-align: center;
	font-size: 6.1em; line-height: 0.9; letter-spacing: 0.01em; color: var(--ez-blanc); white-space: nowrap;
}
.fronton__incline { display: inline-block; transform: rotate(var(--ez-inclinaison)); }
.fronton__accent { color: var(--ez-corail); }
/* Allumage du tube : il clignote puis tient (CSS seul, au chargement) */
.fronton__eteint { position: absolute; inset: 0; background: var(--ez-nuit); opacity: 0; pointer-events: none; }
.ez-js .fronton__eteint { animation: borne-neon 1.4s 0.15s both; }
@keyframes borne-neon {
	0% { opacity: 0.86; animation-timing-function: steps(1, end); }
	12% { opacity: 0.3; animation-timing-function: steps(1, end); }
	17% { opacity: 0.86; animation-timing-function: steps(1, end); }
	29% { opacity: 0.12; animation-timing-function: steps(1, end); }
	34% { opacity: 0.6; animation-timing-function: steps(1, end); }
	41% { opacity: 0; animation-timing-function: steps(1, end); }
	52% { opacity: 0.4; animation-timing-function: steps(1, end); }
	56%, 100% { opacity: 0; }
}
.fronton__haut-parleurs { display: flex; justify-content: space-between; height: 3em; margin: 0 2em; padding: 0.7em 7em; background: linear-gradient(180deg, var(--ez-nuit), rgba(30, 30, 62, 0.85)); }
.fronton__haut-parleurs span { width: 20em; border-radius: 0.6em; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0.26em, rgba(255, 255, 255, 0) 0.32em) 0 0 / 0.95em 0.95em; }

/* ---------- Écran ---------- */
.cadre { position: relative; margin: 0 4em; padding: 4.4em 5em 0; background: var(--ez-nuit); }
/* Sérigraphie du cadre : filet corail autour du tube */
.cadre::before {
	content: ""; position: absolute; left: 2.4em; right: 2.4em; top: 2em; height: 66em;
	border: 0.3em solid rgba(238, 124, 111, 0.6); border-radius: 6.4em / 6.8em; pointer-events: none;
}
/* Vitre du cadre : un reflet net en biais (fixe) */
.cadre::after {
	content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
	background: linear-gradient(112deg, rgba(255, 255, 255, 0) 0 8%, rgba(255, 255, 255, 0.05) 8% 21%, rgba(255, 255, 255, 0) 21% 24%, rgba(255, 255, 255, 0.035) 24% 27%, rgba(255, 255, 255, 0) 27%);
}
.tube {
	position: relative; aspect-ratio: 4 / 3; border-radius: 5.4em / 5.8em; overflow: hidden; background: var(--ez-nuit);
	box-shadow: 0 0 0 0.5em rgba(43, 45, 109, 0.9), 0 0 0 0.8em rgba(255, 255, 255, 0.07), 0 0 6em 0.6em rgba(238, 124, 111, 0.2);
}
/* L'image ne remplit pas tout le verre : une marge sombre tout autour, comme sur un vrai tube */
.tube__image { position: absolute; inset: 3.4%; display: block; width: 93.2%; height: 93.2%; border-radius: 3em / 3.2em; }
/* Coins assombris et léger bombé (vignette), reflet de la vitre bombée */
.tube__vignette {
	position: absolute; z-index: 2; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(ellipse 72% 70% at 50% 50%, rgba(30, 30, 62, 0) 64%, rgba(30, 30, 62, 0.5) 100%);
	box-shadow: inset 0 0 2.6em 0.8em rgba(30, 30, 62, 0.8);
}
.tube__reflet {
	position: absolute; z-index: 3; inset: 0; pointer-events: none;
	background:
		radial-gradient(ellipse 52% 30% at 28% 9%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 70%),
		linear-gradient(162deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 34%);
}
/* Mise sous tension : un trait blanc qui s'ouvre en image */
.tube__allumage { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; height: 0.6em; margin-top: -0.3em; background: var(--ez-blanc); opacity: 0; pointer-events: none; }
.ez-js .borne.est-prete .tube:not(.est-allume) .tube__image { opacity: 0; }
.tube.est-allumage .tube__image { animation: borne-tube 760ms var(--ez-courbe) both; }
.tube.est-allumage .tube__allumage { animation: borne-trait 760ms ease-out both; }
@keyframes borne-tube { 0%, 34% { opacity: 0; transform: scale(1, 0.006); } 35% { opacity: 1; transform: scale(1, 0.006); } 100% { opacity: 1; transform: none; } }
@keyframes borne-trait { 0% { opacity: 0; transform: scale(0, 1); } 18% { opacity: 1; transform: scale(1, 1); } 36% { opacity: 1; transform: scale(1, 1.5); } 100% { opacity: 0; transform: scale(1, 60); } }
/* Éclair blanc d'un partage (opacité réglée par borne.js) */
.tube__eclair { position: absolute; z-index: 1; inset: 0; background: var(--ez-blanc); opacity: 0; pointer-events: none; }

/* Sans JavaScript, ou en attendant : le message en clair sur l'écran */
.tube__repli {
	position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 10%;
	font-family: var(--ez-f-titre); text-transform: uppercase; text-align: center; font-size: 4.4em; line-height: 1.1;
	background: var(--ez-violet) linear-gradient(45deg, var(--ez-encre), var(--ez-violet)); overflow-wrap: anywhere;
}
/* Avec le script, le message en clair n'apparaît qu'en secours (script absent au bout de 3 s) */
.ez-js .tube__repli { opacity: 0; animation: borne-secours 0s 3.2s forwards; }
@keyframes borne-secours { to { opacity: 1; } }
.borne.est-prete .tube__repli { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Menu « Encore un ? » : dessiné sur l'écran par borne.js, ces deux choix sont de vrais boutons posés sur ses
   lignes (texte transparent, lu par les lecteurs d'écran ; anneau turquoise au clavier) */
.tube__menu { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.tube__menu[hidden] { display: none; }
/* Lignes 2 et 3 de la fenêtre (y 44 à 68 sur 192, x 8 à 248 sur 256), l'image étant en retrait de 3,4 % dans le verre */
.tube__choix {
	position: absolute; left: 6.3%; right: 6.3%; height: 5.8%; padding: 0; border: 0; background: none; pointer-events: auto;
	color: transparent; font: 1px/1 var(--ez-f-texte); text-decoration: none; overflow: hidden; cursor: pointer;
}
.tube__choix:first-child { top: 24.8%; }
.tube__choix:last-child { top: 30.6%; }
.tube__choix:focus-visible { outline: 2px solid var(--ez-turquoise); outline-offset: 1px; }

.cadre__bas { display: flex; align-items: center; justify-content: space-between; gap: 3em; height: 8.4em; padding: 0 1.4em; }
.cadre__slogan { width: auto; height: 6.2em; }
.cadre__joueur { font-family: var(--ez-f-texte); font-weight: 300; text-transform: uppercase; letter-spacing: 0.24em; font-size: 2.3em; color: rgba(255, 255, 255, 0.62); }

/* ---------- Pupitre ---------- */
.pupitre { position: relative; z-index: 3; width: 104em; margin: 0 -2em; }
.pupitre__dessus { position: relative; display: flex; align-items: flex-end; gap: 2.6em; padding: 1.8em 7em 1.4em; }
.pupitre__droite { flex: 1; min-width: 0; }
.pupitre__dessus::before {
	content: ""; position: absolute; z-index: -1; inset: 0; clip-path: polygon(3.4em 0, calc(100% - 3.4em) 0, 100% 100%, 0 100%);
	background:
		radial-gradient(ellipse 56% 80% at 50% 0, rgba(238, 124, 111, 0.26), rgba(238, 124, 111, 0) 70%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 0.6em),
		linear-gradient(180deg, var(--ez-violet), var(--ez-encre));
}
/* Sérigraphie : trois filets le long du bord avant */
.pupitre__dessus::after {
	content: ""; position: absolute; z-index: -1; left: 2em; right: 2em; bottom: 0.5em; height: 1.5em; pointer-events: none;
	background: linear-gradient(180deg, var(--ez-corail) 0 0.25em, rgba(238, 124, 111, 0) 0.25em 0.6em, var(--ez-turquoise) 0.6em 0.85em, rgba(69, 213, 222, 0) 0.85em 1.2em, rgba(255, 255, 255, 0.5) 1.2em 1.45em, rgba(255, 255, 255, 0) 1.45em);
	opacity: 0.55;
}
.pupitre__face {
	position: relative; height: 5.4em;
	background: linear-gradient(180deg, var(--ez-corail) 0 0.45em, rgba(255, 255, 255, 0.6) 0.45em 0.6em, var(--ez-corail) 0.6em 1.05em, var(--ez-nuit) 1.05em);
	border-radius: 0 0 0.9em 0.9em; box-shadow: 0 2.6em 3em -1em rgba(30, 30, 62, 0.95);
}
.pupitre__face::after { content: ""; position: absolute; left: 0; right: 0; top: 1.05em; bottom: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(43, 45, 109, 0.9), rgba(30, 30, 62, 0)); }

/* Boutons de départ : copier le message, son */
.pupitre__depart { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 1.6em 2.4em; margin-bottom: 0.6em; }
.depart {
	display: inline-flex; align-items: center; gap: 1.4em; min-height: 7.4em; padding: 0.6em 2.2em 0.6em 1.2em;
	border: 0; border-radius: 1.4em; background: rgba(30, 30, 62, 0.5); box-shadow: inset 0 0.15em 0 rgba(30, 30, 62, 0.6), inset 0 -0.15em 0 rgba(255, 255, 255, 0.12);
	color: var(--ez-blanc); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.depart__touche {
	position: relative; display: grid; place-items: center; width: 9em; height: 5em; border-radius: 1em;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(91, 62, 144, 0.16)), var(--ez-blanc);
	box-shadow: 0 0.75em 0 rgba(255, 255, 255, 0.45), 0 1.3em 0.9em rgba(30, 30, 62, 0.7), inset 0 -0.2em 0 rgba(91, 62, 144, 0.25);
	transform: translateY(-0.55em); transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.depart__touche svg { width: 3.4em; height: 3.4em; fill: var(--ez-violet); }
@media (hover: hover) { .depart:hover .depart__touche { transform: translateY(-0.35em); box-shadow: 0 0.55em 0 rgba(255, 255, 255, 0.45), 0 1em 0.8em rgba(30, 30, 62, 0.7), inset 0 -0.2em 0 rgba(91, 62, 144, 0.25); } }
.depart:active .depart__touche, .depart.est-enfonce .depart__touche { transform: translateY(0.15em); box-shadow: 0 0.05em 0 rgba(255, 255, 255, 0.45), 0 0.3em 0.4em rgba(30, 30, 62, 0.7), inset 0 -0.2em 0 rgba(91, 62, 144, 0.25); transition-duration: 40ms; }
.depart__libelle { font-family: var(--ez-f-texte); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: max(11px, 2.9em); line-height: 1.15; text-align: left; }
.depart:focus-visible { outline: 3px solid var(--ez-turquoise); outline-offset: 3px; }
.depart--son .depart__touche { width: 6.4em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 50%), var(--ez-encre); box-shadow: 0 0.75em 0 var(--ez-nuit), 0 1.3em 0.9em rgba(30, 30, 62, 0.7); }
@media (hover: hover) { .depart--son:hover .depart__touche { box-shadow: 0 0.55em 0 var(--ez-nuit), 0 1em 0.8em rgba(30, 30, 62, 0.7); } }
.depart--son:active .depart__touche, .depart--son.est-enfonce .depart__touche { box-shadow: 0 0.05em 0 var(--ez-nuit), 0 0.3em 0.4em rgba(30, 30, 62, 0.7); }
/* Voyant du son : éteint, ou turquoise allumé */
.depart__voyant { width: 1.8em; height: 1.8em; border-radius: 50%; background: rgba(69, 213, 222, 0.22); box-shadow: inset 0 0.2em 0.2em rgba(30, 30, 62, 0.6); transition: background-color 160ms, box-shadow 160ms; }
.depart--son[aria-pressed="true"] .depart__voyant { background: var(--ez-turquoise); box-shadow: 0 0 1.2em 0.3em rgba(69, 213, 222, 0.7), inset 0 -0.2em 0.2em rgba(30, 30, 62, 0.25); }
.depart--copier.est-copie .depart__touche { background: var(--ez-turquoise); }
/* Signalé (Messenger ou SMS pressé sur ordinateur) : la touche sautille en turquoise */
.depart--copier.est-signale .depart__touche { background: var(--ez-turquoise); }
.ez-js .depart--copier.est-signale .depart__touche { animation: borne-signal 420ms ease-in-out 6 alternate; }
@keyframes borne-signal { to { transform: translateY(-1.3em); } }
.depart--copier.est-copie .depart__touche svg { fill: var(--ez-nuit); }


/* ---------- Manette (décor qui réagit : penchée par borne.js via --ax, --ay) ---------- */
.manette { --ax: 0deg; --ay: 0; position: relative; flex: none; width: 17em; height: 23.5em; touch-action: none; cursor: grab; }
.manette.est-tenue { cursor: grabbing; }
/* Flèches sérigraphiées autour de la manette */
.manette__fleches {
	position: absolute; left: 0.5em; right: 0.5em; bottom: 2.6em; height: 7.6em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 76'%3E%3Cellipse cx='80' cy='38' rx='76' ry='34' fill='none' stroke='%23FFFFFF' stroke-opacity='.35' stroke-width='2' stroke-dasharray='5 7'/%3E%3Cg fill='%23EE7C6F'%3E%3Cpath d='M80 1l7 9H73z'/%3E%3Cpath d='M80 75l7-9H73z'/%3E%3Cpath d='M2 38l11-6v12z'/%3E%3Cpath d='M158 38l-11-6v12z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.manette__socle {
	position: absolute; left: 50%; bottom: 4.6em; width: 9em; height: 3.8em; margin-left: -4.5em; border-radius: 50%;
	background: radial-gradient(ellipse 22% 26% at 50% 46%, var(--ez-nuit) 92%, rgba(30, 30, 62, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.06) 50%, rgba(30, 30, 62, 0.4)), var(--ez-nuit);
	box-shadow: 0 0.5em 0.6em rgba(30, 30, 62, 0.7);
}
.manette__ombre {
	position: absolute; left: 50%; bottom: 3.4em; width: 7em; height: 2.6em; margin-left: -3.5em; border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(30, 30, 62, 0.75), rgba(30, 30, 62, 0) 70%);
	transform: translate(calc(var(--ax) * -0.12em / 1deg), calc(var(--ay) * 0.8em));
}
.manette__tige {
	position: absolute; left: 50%; bottom: 6.3em; width: 1.5em; height: 10.5em; margin-left: -0.75em; border-radius: 0.75em;
	background: linear-gradient(90deg, var(--ez-nuit), rgba(255, 255, 255, 0.82) 34%, rgba(255, 255, 255, 0.42) 56%, var(--ez-nuit)), var(--ez-encre);
	transform-origin: 50% 100%; transform: rotate(var(--ax)) scaleY(calc(1 - var(--ay) * 0.14));
}
.manette__boule {
	position: absolute; left: 50%; top: -5.4em; width: 7em; height: 7em; margin-left: -3.5em; border-radius: 50%;
	background:
		radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.95) 0.5em, rgba(255, 255, 255, 0) 1.7em),
		radial-gradient(circle at 40% 34%, rgba(30, 30, 62, 0) 38%, rgba(30, 30, 62, 0.55) 100%),
		var(--ez-corail);
	box-shadow: inset 0 -0.5em 0.6em rgba(91, 62, 144, 0.45), 0 0.8em 1em rgba(30, 30, 62, 0.55);
	transform: rotate(calc(var(--ax) * -1)) scaleY(calc(1 / (1 - var(--ay) * 0.14)));
}
.manette__joueur { position: absolute; left: -3em; right: -3em; bottom: 0; text-align: center; white-space: nowrap; font-family: var(--ez-f-texte); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: max(8px, 2.2em); color: rgba(255, 255, 255, 0.7); }

/* ---------- Boutons d'arcade ---------- */
.boutons { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; list-style: none; margin: 0; padding: 0; }
.boutons__case { display: flex; justify-content: center; }
.bouton {
	--c: var(--ez-corail); --g: var(--ez-encre);
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5em; padding: 0.4em 0.6em 0.8em;
	border-radius: 1.6em; color: var(--ez-blanc); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.bouton--violet { --c: var(--ez-violet); --g: var(--ez-blanc); }
.bouton--turquoise { --c: var(--ez-turquoise); --g: var(--ez-nuit); }
.bouton--blanc { --c: var(--ez-blanc); --g: var(--ez-violet); }
.bouton:focus-visible { outline: 3px solid var(--ez-turquoise); outline-offset: 2px; }
.bouton__socle { position: relative; display: block; width: 14em; height: 11.4em; }
/* Boîtier vu de trois quarts : la bague (derrière le piston) puis sa lèvre avant (devant) */
.bouton__socle::before, .bouton__socle::after {
	content: ""; position: absolute; left: 0; right: 0; top: 3.9em; height: 7.4em; border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 38%, rgba(30, 30, 62, 0.25) 60%, rgba(30, 30, 62, 0.62)), var(--c);
}
.bouton__socle::before { box-shadow: 0 1.1em 1.3em -0.3em rgba(30, 30, 62, 0.9); }
.bouton__socle::after {
	z-index: 2; pointer-events: none;
	-webkit-mask: radial-gradient(ellipse 41% 36% at 50% 46%, rgba(0, 0, 0, 0) 97%, #000 100%);
	mask: radial-gradient(ellipse 41% 36% at 50% 46%, rgba(0, 0, 0, 0) 97%, #000 100%);
	clip-path: inset(46% -1em -1em -1em);
}
/* Fond du puits du boîtier */
.bouton__lumiere { position: absolute; z-index: -1; left: -3.5em; right: -3.5em; top: 0.4em; height: 15em; border-radius: 50%; background: radial-gradient(ellipse at 50% 56%, var(--c) 0, rgba(255, 255, 255, 0) 64%); opacity: 0; transition: opacity 220ms; pointer-events: none; }
.bouton__piston { position: absolute; z-index: 1; left: 1.6em; right: 1.6em; top: 0; height: 7.6em; transition: transform 120ms var(--ez-courbe); }
/* Flanc du piston : un cylindre */
.bouton__piston::before {
	content: ""; position: absolute; left: 0; right: 0; top: 2.6em; bottom: 0; border-radius: 0 0 50% 50% / 0 0 2.5em 2.5em;
	background: linear-gradient(90deg, rgba(30, 30, 62, 0.55), rgba(30, 30, 62, 0.12) 28%, rgba(255, 255, 255, 0.3) 42%, rgba(30, 30, 62, 0.06) 60%, rgba(30, 30, 62, 0.58)), var(--c);
}
.bouton__capuchon {
	position: absolute; left: 0; right: 0; top: 0; height: 5.2em; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
	background:
		radial-gradient(ellipse 60% 54% at 50% 60%, rgba(30, 30, 62, 0.2), rgba(30, 30, 62, 0) 74%),
		linear-gradient(176deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 44%),
		var(--c);
	box-shadow: inset 0 0.28em 0.1em rgba(255, 255, 255, 0.55), inset 0 -0.35em 0.3em rgba(30, 30, 62, 0.3);
}
/* Le capuchon s'éclaire de l'intérieur (sous le pictogramme, imprimé à plat) */
.bouton__capuchon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 52% 48% at 50% 46%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 72%); opacity: 0; transition: opacity 220ms; }
.bouton__glyphe { position: relative; width: 4.6em; height: 4.6em; fill: var(--g); transform: translateY(-0.15em) scaleY(0.58); }
.bouton__nom { font-family: var(--ez-f-texte); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: max(10px, 2.5em); line-height: 1.1; text-align: center; }
.bouton__mobile { margin-top: -0.4em; font-size: max(9px, 2.2em); font-weight: 300; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.75; }
.bouton__mobile[hidden] { display: none; }
/* Allumé : survol (souris seulement : au doigt, le survol resterait collé), focus, chenillard d'attente, appui */
.bouton:focus-visible .bouton__lumiere, .bouton.est-allume .bouton__lumiere { opacity: 0.85; }
.bouton:focus-visible .bouton__capuchon::before, .bouton.est-allume .bouton__capuchon::before { opacity: 1; }
@media (hover: hover) {
	.bouton:hover .bouton__lumiere { opacity: 0.85; }
	.bouton:hover .bouton__capuchon::before { opacity: 1; }
	.bouton:hover .bouton__piston { transform: translateY(0.35em); }
}
.bouton:active .bouton__piston, .bouton.est-enfonce .bouton__piston { transform: translateY(2em); transition-duration: 45ms; }
.ez-js .boutons.est-attente .bouton:not(.est-eteint) .bouton__lumiere,
.ez-js .boutons.est-attente .bouton:not(.est-eteint) .bouton__capuchon::before { animation: borne-chenillard 2.6s linear infinite; animation-delay: calc(var(--rang, 0) * 0.32s); }
@keyframes borne-chenillard { 0% { opacity: 0; } 4%, 22% { opacity: 0.9; } 30%, 100% { opacity: 0; } }
.boutons__case:nth-child(2) .bouton { --rang: 1; }
.boutons__case:nth-child(3) .bouton { --rang: 2; }
.boutons__case:nth-child(4) .bouton { --rang: 3; }
/* Éteint (Messenger et SMS sur ordinateur) : le bouton répond, mais pas de lumière */
.bouton.est-eteint .bouton__capuchon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(30, 30, 62, 0.5); }
.bouton.est-eteint .bouton__piston::before { box-shadow: inset 0 0 0 100em rgba(30, 30, 62, 0.45); }
.bouton.est-eteint .bouton__lumiere, .bouton.est-eteint .bouton__capuchon::before { opacity: 0 !important; }
.bouton.est-eteint .bouton__nom { opacity: 0.7; }

/* ---------- Caisson : monnayeur et mode d'emploi ---------- */
.caisson { position: relative; margin: 0 4em; padding: 7.5em 5em 4em; background: linear-gradient(180deg, rgba(30, 30, 62, 0.9), rgba(30, 30, 62, 0.25) 26%, rgba(30, 30, 62, 0.45)); }
.caisson__porte { display: grid; gap: 3.4em; grid-template-columns: 27em minmax(0, 1fr); align-items: start; }
.caisson__grille { height: 4.4em; margin-top: 5em; border-radius: 0.6em; background: repeating-linear-gradient(90deg, rgba(30, 30, 62, 0.85) 0 0.7em, rgba(30, 30, 62, 0) 0.7em 1.5em); opacity: 0.85; }
/* Très petits téléphones (320 px) : libellés resserrés pour tenir sous les boutons */
@media (max-width: 359px) {
	.bouton__nom { font-size: 8.5px; letter-spacing: 0; }
	.boutons { gap: 0.4em; }
	.bouton { padding-left: 0.2em; padding-right: 0.2em; }
}
@media (max-width: 599px) {
	.pupitre__dessus { gap: 1.4em; padding-left: 3.6em; padding-right: 3.6em; }
	.manette { width: 14em; }
	.caisson { padding: 7em 4em 4em; }
	.caisson__porte { grid-template-columns: minmax(0, 1fr); gap: 6em; }
	.monnayeur { width: min(100%, 52em); margin: 0 auto; }
}

/* Monnayeur : plaque éclairée et sa fente, « Insérez un proche » */
.monnayeur {
	position: relative; padding: 2.4em 2em 2.6em; border-radius: 1em;
	background: linear-gradient(158deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05) 42%, rgba(30, 30, 62, 0.3)), var(--ez-encre);
	box-shadow: inset 0 0 0 0.3em rgba(255, 255, 255, 0.12), 0 1.2em 2em -0.8em rgba(30, 30, 62, 0.95);
}
.monnayeur__bouton {
	display: grid; justify-items: center; gap: 1.4em; width: 100%; padding: 1.2em 1em; border: 0; border-radius: 0.8em;
	background: none; color: var(--ez-blanc); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.monnayeur__bouton:focus-visible { outline: 3px solid var(--ez-turquoise); outline-offset: 2px; }
.monnayeur__plaque {
	position: relative; display: block; width: 13em; height: 17em; border-radius: 1em;
	background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 72%), var(--ez-corail);
	box-shadow: 0 0 0 0.55em rgba(30, 30, 62, 0.7), 0 0 0 0.75em rgba(255, 255, 255, 0.18), 0 0 4em 0.6em rgba(238, 124, 111, 0.45);
	transition: transform 120ms var(--ez-courbe);
}
.ez-js .monnayeur__plaque::after { content: ""; position: absolute; inset: -1.4em; border-radius: 2em; background: radial-gradient(ellipse at center, rgba(238, 124, 111, 0.55), rgba(238, 124, 111, 0) 70%); z-index: -1; animation: borne-pouls 2.4s ease-in-out infinite; }
@keyframes borne-pouls { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.monnayeur__fente { position: absolute; left: 50%; top: 3em; width: 1.7em; height: 7.6em; margin-left: -0.85em; border-radius: 0.85em; background: var(--ez-nuit); box-shadow: inset 0.35em 0 0.3em rgba(30, 30, 62, 0.9), 0 0 0 0.3em rgba(30, 30, 62, 0.25); }
/* La pièce (le proche !) qui entre dans la fente */
.monnayeur__fente::before {
	content: ""; position: absolute; left: 50%; top: -4.6em; width: 4.6em; height: 4.6em; margin-left: -2.3em; border-radius: 50%;
	background: radial-gradient(circle at 36% 30%, var(--ez-blanc) 0 0.5em, rgba(255, 255, 255, 0) 1.4em), radial-gradient(circle, rgba(255, 255, 255, 0) 52%, rgba(91, 62, 144, 0.5) 54% 60%, rgba(255, 255, 255, 0) 62%), var(--ez-turquoise);
	opacity: 0; pointer-events: none;
}
.monnayeur__bouton.est-insere .monnayeur__fente::before { animation: borne-piece 620ms cubic-bezier(0.5, 0, 0.75, 0) both; }
@keyframes borne-piece {
	0% { opacity: 0; transform: translateY(-3.5em) scaleX(1); }
	25% { opacity: 1; transform: translateY(-1.5em) scaleX(1); }
	70% { opacity: 1; transform: translateY(2.6em) scaleX(0.3); }
	100% { opacity: 0; transform: translateY(4.4em) scaleX(0.3); }
}
.monnayeur__rendu { position: absolute; left: 50%; bottom: 2.4em; width: 7em; height: 2.6em; margin-left: -3.5em; border-radius: 0.5em; background: rgba(30, 30, 62, 0.55); box-shadow: inset 0 0.3em 0.3em rgba(30, 30, 62, 0.6); }
@media (hover: hover) { .monnayeur__bouton:hover .monnayeur__plaque { transform: scale(1.04); } }
.monnayeur__bouton:active .monnayeur__plaque { transform: scale(0.97); }
.monnayeur__texte { font-family: var(--ez-f-titre); text-transform: uppercase; font-size: max(17px, 4.6em); line-height: 0.95; text-align: center; }
.monnayeur__aide { max-width: 22em; font-size: max(12px, 2.5em); line-height: 1.35; text-align: center; opacity: 0.82; }
.monnayeur__autocollant {
	position: absolute; right: -1.6em; top: 1.6em; padding: 0.55em 0.7em 0.3em; transform: rotate(9deg);
	background: var(--ez-blanc); color: var(--ez-violet); box-shadow: 0 0.4em 0.8em rgba(30, 30, 62, 0.6);
	font-family: var(--ez-f-titre); text-transform: uppercase; font-size: max(10px, 2.4em); line-height: 1; white-space: nowrap;
}

/* Mode d'emploi : carte imprimée vissée sur la porte */
.mode-emploi {
	position: relative; padding: 3.2em 3.2em 3em; border-radius: 0.5em; background: var(--ez-blanc); color: var(--ez-encre);
	box-shadow: 0 1.2em 2em -0.8em rgba(30, 30, 62, 0.95); transform: rotate(-0.7deg);
}
.mode-emploi::before {
	content: ""; position: absolute; inset: 1em; pointer-events: none;
	background:
		radial-gradient(circle, rgba(43, 45, 109, 0.45) 0.35em, rgba(43, 45, 109, 0) 0.45em) 0 0 / 1em 1em no-repeat,
		radial-gradient(circle, rgba(43, 45, 109, 0.45) 0.35em, rgba(43, 45, 109, 0) 0.45em) 100% 0 / 1em 1em no-repeat,
		radial-gradient(circle, rgba(43, 45, 109, 0.45) 0.35em, rgba(43, 45, 109, 0) 0.45em) 0 100% / 1em 1em no-repeat,
		radial-gradient(circle, rgba(43, 45, 109, 0.45) 0.35em, rgba(43, 45, 109, 0) 0.45em) 100% 100% / 1em 1em no-repeat;
}
.mode-emploi__titre { margin: 0 0 0.45em; font-family: var(--ez-f-titre); font-weight: 400; text-transform: uppercase; font-size: max(20px, 4.8em); line-height: 1; color: var(--ez-violet); }
.mode-emploi__etapes { margin: 0 0 1em; padding-left: 1.3em; font-size: max(14px, 2.9em); line-height: 1.45; }
.mode-emploi__etapes li::marker { font-family: var(--ez-f-titre); color: var(--ez-violet); }
.mode-emploi__message { margin: 0 0 1em; padding: 0.2em 0 0.2em 0.9em; border-left: 0.35em solid var(--ez-corail); font-size: max(13px, 2.45em); line-height: 1.45; font-weight: 700; overflow-wrap: break-word; }
.mode-emploi__etiquette { display: block; font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78em; color: var(--ez-violet); }
.mode-emploi__note { margin: 0; font-size: max(12px, 2.5em); line-height: 1.45; }
.mode-emploi__note[hidden] { display: none; }

.socle { position: relative; height: 7em; background: linear-gradient(180deg, var(--ez-corail) 0 0.5em, rgba(255, 255, 255, 0.5) 0.5em 0.62em, var(--ez-corail) 0.62em 0.95em, var(--ez-nuit) 0.95em); border-radius: 0 0 0.5em 0.5em; }
/* Moquette de salle d'arcade, en perspective : la borne y repose (le haut se fond dans la pénombre du mur) */
.socle::before {
	content: ""; position: absolute; z-index: -3; left: 50%; top: -12em; width: 420em; height: 150em; margin-left: -210em;
	transform-origin: 50% 0; transform: perspective(42em) rotateX(62deg);
	background:
		linear-gradient(180deg, var(--ez-nuit), rgba(30, 30, 62, 0.25) 14%, rgba(30, 30, 62, 0.55) 60%, var(--ez-nuit)),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20l9-14 9 14z' stroke='%23EE7C6F'/%3E%3Ccircle cx='66' cy='18' r='7' stroke='%2345D5DE'/%3E%3Cpath d='M40 52c4-6 8 6 12 0s8 6 12 0' stroke='%235B3E90'/%3E%3Cpath d='M10 72l8 8 8-8 8 8' stroke='%2345D5DE'/%3E%3Cpath d='M74 64h12M80 58v12' stroke='%23FFFFFF'/%3E%3Cpath d='M58 86l10-6' stroke='%23EE7C6F'/%3E%3C/g%3E%3Ccircle cx='38' cy='26' r='2.5' fill='%23FFFFFF'/%3E%3Ccircle cx='88' cy='40' r='2.5' fill='%23EE7C6F'/%3E%3Ccircle cx='28' cy='92' r='2.5' fill='%2345D5DE'/%3E%3C/svg%3E") 0 0 / 9em 9em,
		var(--ez-nuit);
	pointer-events: none;
}
.socle::after { content: ""; position: absolute; z-index: -2; left: -10em; right: -10em; bottom: -4em; height: 9em; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(30, 30, 62, 0.95), rgba(30, 30, 62, 0) 70%); }

/* =====================================================================
 * Niveau suivant
 * ===================================================================== */
.niveau {
	position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.3em 2em;
	width: min(100% - 32px, 70em); margin: 10em auto 0; padding: 2.6em 3.2em 2.4em;
	border: 0.5em solid var(--ez-corail); border-radius: 1.2em; background: var(--ez-encre); color: var(--ez-blanc); text-decoration: none;
	box-shadow: 0 2em 3em -1.5em rgba(30, 30, 62, 0.95);
	transition: background-color var(--ez-duree), color var(--ez-duree), transform var(--ez-duree) var(--ez-courbe);
}
.niveau__etat { font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; font-size: max(12px, 2.5em); }
.niveau__titre { grid-column: 1; font-family: var(--ez-f-titre); text-transform: uppercase; font-size: max(22px, 5em); line-height: 1; }
.niveau__fleche { grid-column: 2; grid-row: 1 / span 2; width: 6.4em; height: 6.4em; background: var(--ez-corail); clip-path: polygon(0 34%, 52% 34%, 52% 6%, 100% 50%, 52% 94%, 52% 66%, 0 66%); transition: transform var(--ez-duree) var(--ez-courbe); }
.niveau:hover { background: var(--ez-violet); }
.niveau:hover .niveau__fleche { transform: translateX(0.8em); }
.niveau:focus-visible { outline: 3px solid var(--ez-turquoise); outline-offset: 3px; }
/* Débloqué après un partage : le panneau s'allume */
.niveau.est-debloque { background: var(--ez-corail); color: var(--ez-encre); border-color: var(--ez-blanc); }
.niveau.est-debloque .niveau__fleche { background: var(--ez-encre); }
.niveau.est-debloque:hover { background: var(--ez-blanc); color: var(--ez-violet); }
.niveau.est-debloque:hover .niveau__fleche { background: var(--ez-violet); }
.ez-js .niveau.est-debloque .niveau__fleche { animation: borne-fleche 1.1s var(--ez-courbe) infinite; }
@keyframes borne-fleche { 0%, 100% { transform: none; } 50% { transform: translateX(0.9em); } }
@media (min-width: 1240px) {
	.niveau { position: absolute; left: calc(50% + 57em); top: 99em; width: 36em; margin: 0; grid-template-columns: minmax(0, 1fr); padding: 2.6em 2.8em; }
	.niveau__fleche { grid-column: 1; grid-row: auto; width: 5.4em; height: 5.4em; margin-top: 0.8em; }
}

/* =====================================================================
 * Mouvements réduits : tout est à l'état final, immobile
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.bouton__piston, .bouton__lumiere, .bouton__capuchon::before, .depart__touche, .monnayeur__plaque, .niveau, .niveau__fleche { transition: none; }
	.monnayeur__bouton.est-insere .monnayeur__fente::before { animation: none; }
}