/* Mode débutant - Clef de Sol et Clef de Fa */
.cache-debutant { display: none !important; }

#InfoDebutant {
	display: none;
	margin: .5rem auto;
	padding: .4rem .8rem;
	max-width: 40rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, .85);
	color: #363636;
	font-size: .95rem;
}
#InfoDebutant .button { margin-left: .5rem; }

/* Mode débutant : 2 mesures de 4 notes (4/4), barre au milieu et en fin de portée */
.mesure-44 { display: none; }
.mode-mesure .mesure-44 { display: block; }
.mesure-44.barre {
	position: absolute; left: 88%; top: 37%; height: 20.1%;
	width: .15em; background: #555;
}
.mesure-44.barre.milieu { left: 50.5%; }
.mesure-44.signature {
	/* Chiffrage sur la portée : un 4 par demi-portée, juste après la clef */
	position: absolute; left: 13.5%; top: 37%; height: 20.1%; width: 5%;
	fill: #000; overflow: visible;
}
.mode-mesure svg.mesure-44 { display: block; }

/* Animation de passage de palier */
#PalierOverlay {
	position: fixed; inset: 0; z-index: 9998; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle, rgba(255, 221, 87, .35), rgba(0, 0, 0, 0) 70%);
	animation: palier-fond 2.3s ease-out forwards;
}
.palier-carte {
	text-align: center; padding: 1.2rem 2.5rem; border-radius: 20px;
	background: linear-gradient(135deg, #7957d5, #3298dc); color: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .4), 0 0 0 4px #ffdd57;
	animation: palier-pop 2.3s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.palier-etoile { font-size: 3rem; animation: palier-tourne 1.2s ease-out; }
.palier-titre { font-size: 2.4rem; font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.palier-sous { font-size: 1rem; opacity: .9; }
.palier-note {
	display: inline-block; margin-top: .4rem; padding: .1rem 1.2rem; border-radius: 12px;
	background: #ffdd57; color: #363636; font-size: 2.2rem; font-weight: 800;
	animation: palier-rebond .6s .3s ease-in-out 3;
}
.confetti {
	position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; opacity: 0;
	animation: confetti-chute 2s linear forwards;
}
#ClefDeSol.palier-flash, #ClefDeFa.palier-flash, #ClefDeUt.palier-flash, #ClefDeUt1.palier-flash, #ClefDeUt2.palier-flash, #ClefDeUt4.palier-flash, #ClefDeUt5.palier-flash { animation: palier-secoue .9s ease-in-out; }
@keyframes palier-fond { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes palier-pop { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 20% { transform: scale(1.1) rotate(2deg); opacity: 1; } 30% { transform: scale(1); } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.8) translateY(-40px); opacity: 0; } }
@keyframes palier-tourne { from { transform: rotate(-360deg) scale(0); } to { transform: rotate(0) scale(1); } }
@keyframes palier-rebond { 50% { transform: translateY(-10px) scale(1.1); } }
@keyframes confetti-chute { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 1; } }
@keyframes palier-secoue { 0%, 100% { transform: none; } 20% { transform: scale(1.03) rotate(-1deg); } 40% { transform: scale(1.03) rotate(1deg); } 60% { transform: scale(1.02) rotate(-.5deg); } }

/* Résultat final */
#ResultatFinal {
	position: fixed; inset: 0; z-index: 9999; overflow-y: auto;
	display: flex; align-items: center; justify-content: center; padding: 1rem;
	background: rgba(20, 20, 40, .8); animation: resultat-fond .4s ease-out;
}
.resultat-carte {
	width: 100%; max-width: 30rem; max-height: 100%; overflow-y: auto; padding: 1.5rem; text-align: center;
	background: #fff; color: #363636; border-radius: 20px; border-top: 10px solid #ffdd57;
	animation: palier-pop-simple .6s cubic-bezier(.2, 1.4, .4, 1);
}
.resultat-carte.or { border-color: #ffd700; }
.resultat-carte.argent { border-color: #48c774; }
.resultat-carte.bronze { border-color: #3298dc; }
.resultat-carte.courage { border-color: #ff9f43; }
.resultat-emoji { font-size: 3rem; animation: palier-rebond .8s ease-in-out infinite; }
.resultat-titre { font-size: 1.5rem; font-weight: 800; margin: .2rem 0; }
.resultat-etoiles { font-size: 2.5rem; line-height: 1; }
.resultat-etoile { display: inline-block; color: #ddd; transform: scale(0); animation: etoile-pop .5s forwards; }
.resultat-etoile.on { color: #ffc400; }
.resultat-pct { font-size: 3rem; font-weight: 800; }
.resultat-detail { margin-bottom: .6rem; }
.resultat-gif { min-height: 120px; margin-bottom: 1rem; }
.resultat-gif img { max-height: 250px; width: auto; max-width: 100%; border-radius: 12px; }
@keyframes resultat-fond { from { opacity: 0; } to { opacity: 1; } }
@keyframes palier-pop-simple { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes etoile-pop { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.4) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }

/* Deux clefs : barres de mesure sur les deux portées, un 4/4 par portée */
#PartitionComplete .mesure-44.barre { top: 20%; height: 50%; }
#PartitionComplete .mesure-44.signature.haute { top: 20%; height: 20%; }
#PartitionComplete .mesure-44.signature.basse { top: 50%; height: 20%; }
#PartitionComplete.palier-flash { animation: palier-secoue .9s ease-in-out; }

/* Navigation entre les jeux */
.nav-jeux { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: 0 auto 1rem; }
.nav-jeux a { padding: .35rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .25); color: #fff !important; font-weight: 600; text-decoration: none; }
.nav-jeux a:hover { background: rgba(255, 255, 255, .45); }
.nav-jeux a.actif, .hero.is-primary .nav-jeux a.actif { background: #fff; color: #363636 !important; cursor: default; }

/* Choix de la clef d'Ut */
.param-clef { position: relative; display: inline-block; }
.param-clef-menu { display: none; position: absolute; z-index: 20; top: 100%; left: 50%; transform: translateX(-50%); min-width: 11rem; padding: .4rem; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); text-align: left; }
.param-clef.ouvert .param-clef-menu { display: block; }
.param-clef-menu button { display: block; width: 100%; margin: .15rem 0; text-align: left; }
.param-clef-menu small { display: block; padding: 0 .5rem; color: #7a7a7a; }

/* Titre et consigne en tête de page */
.intro-titre { margin: 0 auto .5rem; font-size: 1.6rem; font-weight: 800; color: #fff; }
.intro-jeu { max-width: 42rem; margin: 0 auto 1.2rem; color: #fff; font-size: 1rem; line-height: 1.5; }