/* Conteneur */
.piano-container {
    width: fit-content;
    margin: 0px auto 10px;
    padding: 20px;
    background: #333333;
    border-radius: 6px;
}

.piano-title {
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    color: #0066CC;
    margin-bottom: 15px;
}

/* Piano */
.piano {
    position: relative;
    display: flex;
}

/* Piano mobile */
.pianomob {
    position: relative;
    display: none;
}

#expectedNote, #expectedNote2 {
	font-size: 16px;
	font-weight: bold;
	color: #FF0000;
}

.txtpc {
	display: block;
}

.txtmobile {
	display: none;
}

.modemploi {
	margin: 2px 10px 30px;
}

/* Touches blanches */
.white-key {
    width: 60px;
    height: 260px;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 60%, #e0e0e0 100%);
    border: 1px solid #000;
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -4px 6px rgba(0,0,0,0.2),
        0 4px 6px rgba(0,0,0,0.6);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.white-key:active {
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.4);
    background: linear-gradient(to bottom,  #e0e0e0, #cfcfcf); /* #e6e6e6, #dcdcdc */
}

/* Touches noires */
.black-key {
    position: absolute;
    width: 40px;
    height: 160px;
    background: linear-gradient(to bottom, #444, #000);
    border-radius: 0 0 4px 4px;
    border: 1px solid #111;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.2),
        0 4px 6px rgba(0,0,0,0.8);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
}

.black-key:active {
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.9);
    background: linear-gradient(to bottom, #222, #000);
}

/* Positionnement touches noires */
.k1 { left: 40px; }
.k2 { left: 100px; }
.k3 { left: 220px; }
.k4 { left: 280px; }
.k5 { left: 340px; }
.k6 { left: 460px; }
.k7 { left: 520px; }

.white-key.active {
    transform: translateY(1px);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.black-key.active {
    transform: translateY(1px);
    background: linear-gradient(#111, #000);
}

button {
    padding: 6px 12px;
    cursor: pointer;
}

#toggleLearning {
  	width: auto;
	height: auto;
	margin-bottom: 10px;
    padding: 12px 12px 14px !important;
	border-radius: 8px;
	border: 2px solid #2B7CFF;
	background: linear-gradient(#FFFFFF,#EEF6FF);
    cursor: pointer;
	font-weight: 600;
}

#nextMelody {
	width: auto;
	height: auto;
	margin-bottom: 10px;
    padding: 12px 10px !important;
	border-radius: 8px;
	border: 2px solid #2B7CFF;
	background: linear-gradient(#FFFFFF,#EEF6FF);
    cursor: pointer;
	font-weight: 500;
}

#demoMelody {
	width: auto;
	height: auto;
	margin-left: 10px;
	margin-bottom: 10px;
    padding: 12px 10px !important;
	border-radius: 8px;
	border: 2px solid #2B7CFF;
	background: linear-gradient(#FFFFFF,#EEF6FF);
    cursor: pointer;
	font-weight: 500;
}

/* mobile portrait */
@media only screen and (max-width:700px){
	#toggleLearning {
	padding: 16px 12px !important;
  }
	#nextMelody, #demoMelody {
	padding: 14px 10px !important;
  }
	.colonnemilieu {
	width: 99.9999%;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
  }
	#expectedNote, #expectedNote2 {
	font-size: 18px;
	font-weight: bold;
	color: #FF0000;
  }
   .modemploi {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	left: -7px;
  }
   .piano-container {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	left: -7px;
	padding: 10px;
  }
	.piano {
	display: none;
  }
	.pianomob {
	display: flex;
  }
    .white-key {
	width: 32px;
	height: 160px;
  }
    .black-key {
	width: 20px;
	height: 100px;
  }
    .black-key.k1 { left: 24px; }
    .black-key.k2 { left: 56px; }
    .black-key.k3 { left: 120px; }
    .black-key.k4 { left: 152px; }
    .black-key.k5 { left: 184px; }
    .black-key.k6 { left: 248px; }
    .black-key.k7 { left: 280px; }

	.txtpc {
	display: none;
  }
	.txtmobile {
	display: block;
  }
}

/* mobile paysage */
@media only screen and (min-width: 701px) and (max-width: 900px) {
	#nextMelody, #demoMelody {
	padding: 14px 10px !important;
  }
	#toggleLearning {
	padding: 16px 12px 18px !important;
  }
   .piano-container {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
  }
	.piano {
	display: none;
  }
	.pianomob {
	display: flex;
  }
	#expectedNote, #expectedNote2 {
	font-size: 18px;
	font-weight: bold;
	color: #FF0000;
  }
	.txtpc {
	display: none;
  }
	.txtmobile {
	display: block;
  }
}

/* ===== MODE APPRENTISSAGE ===== */

.learning-controls {
    text-align: center;
    margin-bottom: 15px;
}

.learning-controls button {
    padding: 6px 12px;
/*    font-size: 1rem; */
    cursor: pointer;
}

#learningInfo {
	display: none;
    margin-top: 8px;
	margin-bottom: 8px;
    font-weight: bold;
    color: #2034BD; /*#FFD700;*/
}

#learningInfomob {
	display: none;
    margin-top: 8px;
	margin-bottom: 8px;
    font-weight: bold;
    color: #2034BD; /*#FFD700;*/
}

/* feedback */
.expected {
    box-shadow: 0 0 15px 4px gold !important;
}

.correct {
    background: linear-gradient(#8BC34A, #4CAF50) !important;
}

.wrong {
    background: linear-gradient(#E53935, #B71C1C) !important;
}