body{font-size: 14px;margin:0;padding:0;background-color:  #0a0a0a}
h2 {
  font-size: 1.8rem;
  margin-top: 30px;
  margin-right: 20px;
}
table{margin-left:0px;margin-top:0px;}
h3{font-size: 18px;margin-right:20px;}
legend {font-weight: bold;}
fieldset{margin-bottom: 10px;width:291px}
p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  margin: 20px 20px;
  line-height: 1.5;
}
.container {
	width: 1200px; 
	margin: 0px auto;
  overflow: hidden;
	background-color: #fff;
	opacity: 0.8;
}
/************************************* MENU ****************************************************/
.header, .footer {
	background-image: url('images/header-diato.webp');
	background-size: cover;
	background-position: center;
	height: 150px;
	position: relative;
	text-align: center;
}

.overlay {
	background: rgba(138, 87, 54, 0.4);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}


.header h1 {
	margin: 0;
	font-size: 3rem;
	margin-bottom: 10px;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
	color: #d0d088;
}

/* Menu */
.menu ul {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 60px;
}

.menu li {
	position: relative;
}

.menu a {
	text-decoration: none;
	color: #fff;
	font-size: 1.8rem;
	padding: 6px 10px;
	border-radius: 5px;
	transition: all 0.3s ease;
}

.menu a:hover {
	background: #ff5722;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.menu a.active {
	background: #ff5722;
	/* Couleur vive pour indiquer la page active */
	color: #fff;
	font-weight: bold;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
/**************************************************************************************************/
#accordeon {float: left;
	width: 640px; /* Largeur ajustée */
	height: 463px;
	position: relative;
	margin-top: 20px;
}

#examen {
	float: left;
	width: 400px; /* Largeur ajustée pour éviter chevauchement */
	height: 800px;
	margin-left: 4%; /* Espace entre les colonnes */
}
 /* Style pour le conteneur global avec la bordure */
 #config {
	padding-top: 10px;
	width: 460px;
}
#config p{font-size:16px;}
#info{display:none;color:#ff0000;font-weight: bold;}
#selectExo{display:none};
/* Style pour le titre */
#config h2 {
	margin-top: 0;
	text-align: center;
}

/* Style pour les labels */
label {
	margin-right: 0;
}
ul li {font-family: Arial, sans-serif;font-size: 100%;display : list-item;list-style-type: none;margin: 0 0 0 -40px;}
#accords-main-droite{position:absolute;left:46px;top:65px;z-index:10;width: 67px; height: auto;background-color: #bec9df;border-radius: 6px;}
#accords-main-droite ul li, #gammes ul li{margin-top:10px;}
#accords-main-droite ul {margin-left: 8px;}

#pousser_tirer{position:absolute;left:44px;top:333px;z-index:30;background-color: none;}
#pousser_tirer2{position:absolute;left:104px;top:129px;z-index:10;} 
#test1{position:relative;left:0px;top:0px;}
#rejouer{position:relative;left:252px;top:20px;}
#reponsesOK{font-size:12px;color:green;}
#reponsesNOK{font-size:12px;color:red;}
#resultats{margin-top:0px;}
#soufflet{width:405px;height:454px;background-image:url("images/soufflet.jpg");background-size:contain;background-repeat: no-repeat;padding:0;margin:0;
position:absolute;left:122px;top:0px;}
#soufflet h1{position:absolute;font-size:24px;left:186px;top:262px;color:#bec9df;letter-spacing: 2px;text-align: center;padding:4px 8px;text-shadow: 1px 1px 1px #000;
border-radius: 10px;background-color: rgb(156,98,61);background-image: linear-gradient(to top left,rgba(0, 0, 0, .2),rgba(0, 0, 0, .2) 30%,rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),inset -2px -2px 3px rgba(0, 0, 0, .6);}

#legendSoufflet {position: absolute;left:186px;top: 381px;font-size: 10px;color:#fff}
#soufflet h2 {position:absolute;top:38px;left:43px;z-index: 40;color:#fff;font-size:14px;font-weight: 500;overflow: hidden;}

#choixExo{position:absolute;left: 340px;top: 70px;font-size:16px;}
#selectNbTouches{position:absolute;left:860px;top:46px;color:red;z-index:100;}

#note_musique{position:absolute;width:216px;left:172px;top:49px;}
#pbTailleEcran, #pbTailleEcran1{display:none;}
#exterieur-main-droite{position:relative;left:14px; top:45px;}
#interieur-main-droite{position:relative;left:0px; top:56px;}
#exterieur-main-gauche{position:relative;left:20px; top:164px;height: 150px;}
#interieur-main-gauche{position:relative;left:32px; top:164px;height: 150px;}
#testSansChrono{display:none;}
.aide_affichage {width:291px;}
/******************************************* Tableau des résultats *******************/
#examen table {display:none;width:412px;}
tbody {
  background-color: #D2B48C; /* marron clair */
}
.header-row td {
  font-weight: bold;
}
.row-light {
  background-color: #f0f0f0;
}
.row-dark {
  background-color: #e0e0e0;
}
td {
	text-align: center;
}
/******************************************** Sablier *********************************/
#timer {
	position: relative;
	top: 243px; /* 150 / 2 */
	left: 50.5px; /* 17 / 2 */
	width: 59.5px; /* 119 / 2 */
	height: 115px; /* 230 / 2 */
	overflow: hidden;
	/*display: grid;*/
	display:none;
	font: 1em/1.5 sans-serif;
	place-items: center;
}
.sablier, .sablier:before, .sablier:after {
	animation-duration: var(--animation-duration, 4s); /* Par défaut à 4s */
	animation-iteration-count: 10;
}
.sablier {
	--polygonH: polygon(0% 0%, 100% 0%, 100% 5.55%, 95% 5.55%, 95% 28%, 60% 46%, 60% 54%, 95% 72%, 95% 94.45%, 100% 94.45%, 100% 100%, 0% 100%, 0% 94.45%, 5% 94.45%, 5% 72%, 40% 54%, 40% 46%, 5% 28%, 5% 5.55%, 0% 5.55%);
	animation-name: flip;
	animation-timing-function: ease-in-out;
	background-image: linear-gradient(#4c2828 0.25em, #737a8c55 0.25em 4.25em, #4c2828 4.25em);
	clip-path: var(--polygonH);
	width: 2.5em; /* 5 / 2 */
	height: 4.5em; /* 9 / 2 */
	position: relative;
	z-index: 0;
}
.sablier:before, .sablier:after {
	animation-timing-function: linear;
	content: "";
	display: block;
	position: absolute;
}
.sablier:before {
	--polygonB1: polygon(0% 0%, 100% 0%, 100% 24%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 50% 47%, 0% 24%);
	--polygonB2: polygon(0% 4%, 100% 4%, 100% 24%, 55% 45%, 55% 100%, 55% 100%, 55% 100%, 45% 100%, 45% 100%, 45% 100%, 45% 45%, 0% 24%);
	--polygonB3: polygon(0% 24%, 100% 24%, 100% 24%, 55% 45%, 55% 80%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 45% 80%, 45% 45%, 0% 24%);
	--polygonB4: polygon(45% 45%, 55% 45%, 55% 45%, 55% 45%, 55% 58%, 100% 76%, 100% 100%, 0% 100%, 0% 76%, 45% 58%, 45% 45%, 45% 45%);
	--polygonB5: polygon(50% 53%, 50% 53%, 50% 53%, 50% 53%, 50% 53%, 100% 76%, 100% 100%, 0% 100%, 0% 76%, 50% 53%, 50% 53%, 50% 53%);
	animation-name: fill;
	background-color: #d0d088;
	background-size: 100% 1.8em; /* 3.6 / 2 */
	clip-path: var(--polygonB1);
	top: 0.25em; /* 0.5 / 2 */
	left: 0.25em; /* 0.5 / 2 */
	width: 2em; /* 4 / 2 */
	height: 4em; /* 8 / 2 */
	position: absolute;
	z-index: 1;
}

.sablier:after {
	animation-name: glare;
	background:
		linear-gradient(90deg, #0000 0.25em, #0003 0.25em 0.75em, #0000 0.75em 1.75em, #fff3 1.75em 2.25em, #fff0 2.25em 3.25em, #0003 3.25em 3.75em, #0000 3.75em) 0 0 / 100% 0.25em,
		linear-gradient(90deg, #0000 0.375em, #0003 0.375em 0.625em, #0000 0.625em 1.875em, #fff3 1.875em 2.125em, #fff0 2.125em 3.375em, #0003 3.375em 3.625em, #0000 3.625em) 0 0.25em / 100% 4em,
		linear-gradient(90deg, #0000 0.25em, #0003 0.25em 0.75em, #0000 0.75em 1.75em, #fff3 1.75em 2.25em, #fff0 2.25em 3.25em, #0003 3.25em 3.75em, #0000 3.75em) 0 100% / 100% 0.25em;
	background-repeat: repeat-x;
	top: 0;
	left: 5.5em; /* 11 / 2 */
	width: 100%; /* No scaling */
	height: 100%;
	position: absolute;
	z-index: 2;
}
/* Animation */
@keyframes fill {
	from {
	clip-path: var(--polygonB1);
	-webkit-clip-path: var(--polygonB1);
	}
	10% {
	clip-path: var(--polygonB2);
	-webkit-clip-path: var(--polygonB2);
	}
	45% {
	clip-path: var(--polygonB3);
	-webkit-clip-path: var(--polygonB3);
	}
	80% {
	clip-path: var(--polygonB4);
	-webkit-clip-path: var(--polygonB4);
	}
	85%, to {
	clip-path: var(--polygonB5);
	-webkit-clip-path: var(--polygonB5);
	}
}
@keyframes glare {
	from, 90% {
	transform: translateX(0);
	}
	to {
	transform: translateX(3em);
	}
	}
	@keyframes flip {
	from, 90% {
	transform: rotate(0);
	}
	to {
	transform: rotate(180deg);
	}
}
/******************************************** Onglets explications ********************/
#explications {
	float: left;
	margin-top:-290px;
	margin-left: 20px;
	margin-right: 172px;
	width: auto; /* Toujours en dessous de l'accordeon */
  height: auto;
	font-size: 14px;
	line-height: 1.4;
	z-index: 20;
}
#explications button {
	border: 0px;
	border-radius:5px ;
	padding:10px 12px;
	font-size: 14px;
	
}
button.active {
	background-color: #ff5722;
	color:#fff;
}
.tab-content{
	margin-top: 14px;
	display:none;
}
.mTop10 {
	margin-top: 10px;;
}
#verdict {
	margin-top: 160px;
}
#imgVerdict {display:none;margin-top:0px; margin-top: 10px;
  background-repeat: no-repeat;
  height: 145px;
  width: 300px;}

#imgVerdict img{height:180px;}
#textVerdict{width:200px;padding-top: 20px;margin-top:-158px;color: red;font-weight: bold;}

/**************************************** CONTACT **************************************************/

/************************************************** /* Footer / ----------------------------*/

.footer {
  height: 100px;
}

.footer-link {
  text-decoration: none; /* Supprime le soulignement */
  color: #d0d088; /* Texte blanc */
  font-weight: bold;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #ff5722; /* Couleur vive au survol */
}
.footer ul {
	display:flex;
}
.footer ul li{
	display:list-item;
	padding: 0 30px 0 20px;
	color:#fff;
}
/************************************************** Ecran tablettes ----------------------------*/

@media (max-width: 1060px) {
	#accordeon, #examen {
		float: none; /* Annule le flottement sur petits écrans */
		width: 100%; /* Pleine largeur */
		margin: 20px 0 0 20px; /* Supprime le margin-left */
	}

#resultats {
  margin-top: -106px;
  margin-left: 286px;
}
#explications {
  margin-top: -421px;
  margin-left: 20px;
  margin-right: 537px;
}
#rejouer {
  left: 143px;
  top: -33px;
}
#verdict {
	margin-top: 54px;
}
}

.majuscule{font-size:1px;color:#fff;}/* Cette classe sert uniquement à différencier les notes a et A (a majuscule) pour le clavier main gauche */
.bouton_accord {font-size: 14px;background-image:none;background-color:#d0d088;height: 46px;width: 46px;border-radius: 50%;
background-repeat: no-repeat;background-position: center center;cursor: pointer;}
.bouton_droite_tirer, .bouton_gauche_tirer {font-size: 9px;background-image:none;background-color:#33a8ff;height: 23px;width: 23px;border-radius: 50%;
	background-repeat: no-repeat;background-position: center center;cursor: pointer;}
.bouton_droite_pousser, .bouton_gauche_pousser {font-size: 9px;background-image:none;background-color:#d0d088;height: 23px;width: 23px;border-radius: 50%;
	background-repeat: no-repeat;background-position: center center;cursor: pointer;}
.bouton_gauche_erreur, .bouton_droite_erreur {font-size: 9px;background-image:none;background-color:#ff0000;height: 23px;width: 23px;border-radius: 50%;
	background-repeat: no-repeat;background-position: center center;cursor: pointer;}
.bouton, .bouton_gauche, .bouton_droite {
      font-size: 9px;
			background-image:url("images/bouton.png");
			height: 23px;
			width: 23px;
			border-radius: 50%;
			background-repeat: no-repeat;
			background-position: center center;
			cursor: pointer;
			color: rgba(0,0,0,1);
		}

.tirer{display:block}
.pousser{display:none}
.consigne{color:red;}
.clavier-main-droite, .accordeon, .clavier-main-gauche, .main-droite, .main-gauche{display:flex;}
.accordeon{position:relative;left:0px;top:-40px;}
.clavier-main-droite, .main-droite{background-image:url("images/clavier-main-droite.jpg");background-size: contain;background-repeat:no-repeat;width:103px;height:343px;
		position:absolute;left:20px;top:20px;font-size: 10px;}
.clavier-main-gauche {background-image:url("images/clavier-main-gauche.jpg");background-repeat:no-repeat;width:165px;height:452px;
		z-index:15;position:absolute;left:525px;top:0px;background-size: contain;}
.clavier-main-gauche h2 {position: absolute; left:30px; top:98px;color:#fff;width: 55px;font-weight: 500;font-size: 14px;text-align: center;}
.main-gauche{background-image:url("images/clavier-main-gauche.jpg");background-repeat:no-repeat;width:289px;height:908px;
		z-index:0;position:absolute;left:15px;top:40px;}		
.styled_tirer {width:443px;height:150px; background-repeat: no-repeat; border: none;background-size: 100%;color:#fff;font-size:16px;font-weight: bold;
	background-position: center center;cursor: pointer; background-color:inherit;background-image: url("images/tirer.png");z-index: 20;}
.styled_tirer:hover {background-size: 101%;}
.styled_pousser {width:449px;height:150px; background-repeat: no-repeat; border: none; background-size: 100%; color:#000;font-size:16px;font-weight: bold;
	background-position: center center;cursor: pointer; background-color:inherit;background-image: url("images/pousser.png");}
.styled_pousser:hover {background-size: 101%;}
.styled2 {border: 0;line-height: 2;width:auto;padding: 5px 20px;font-size: 1rem;text-align: center;color: #fff;text-shadow: 1px 1px 1px #000;border-radius: 10px;
margin:0px 0 20px 0;background-color: rgba(138, 43, 226, 1);background-image: linear-gradient(to top left,rgba(0, 0, 0, .2),rgba(0, 0, 0, .2) 30%,rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),inset -2px -2px 3px rgba(0, 0, 0, .6);cursor: pointer;}
.styled2:hover {background-color: rgba(238, 130, 238, 1);}
.styled2:active {box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),inset 2px 2px 3px rgba(0, 0, 0, .6);}
.style_accord, .style_gamme {border: 0;line-height: 1.4;width:26px;padding: 2px;font-size: 8px;text-align: center;color: #fff;text-shadow: 1px 1px 1px #000;
border-radius: 4px;background-color: rgba(75, 26, 29, 1);background-image: linear-gradient(to top left,rgba(0, 0, 0, .2),rgba(0, 0, 0, .2) 30%rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),inset -2px -2px 3px rgba(0, 0, 0, .6);cursor: pointer;}
.style_accord:hover, style_gamme:hover {background: rgba(116, 35, 54, 1);}
.style_accord:active, style_gamme:active {box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),inset 2px 2px 3px rgba(0, 0, 0, .6);}
.style_gamme {width:54px;}