@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

html, body {
  background: linear-gradient(to right, #1e3c72, #2a5298);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Raleway", sans-serif;
  text-align: center;
  padding: 20px;
}

h1 {
  color: white;
  font-size: 4vw;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.pad {
  width: 360px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Style des boutons normaux */
.key {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: white;
  background: linear-gradient(to bottom, #ff7eb3, #ff758c);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.3s ease;
  cursor: pointer;
}

/* Effet de survol */
.key:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  background: linear-gradient(to bottom, #ff5f9e, #ff6474);
}

/* Effet lorsqu'on appuie */
.key:active {
  transform: scale(0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Effet lorsqu’un son est joué */
.key.playing {
  transform: scale(1.05);
  background: #ff5252;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  animation: pulse 0.3s ease-in-out;
}

/* Animation de pulsation */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Style des noms des sons */
.sound {
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 5px;
  color: white;
}

/* --- BOUTON RECORD --- */
.bg-red {
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom, #ff4b5c, #d72638);
  font-size: 16px;
  transition: transform 0.1s ease-in-out;
}

/* Effet "Enregistrement en cours" */
.bg-red.recording {
  background: linear-gradient(to bottom, #d72638, #9e1f2b);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
  animation: recordGlow 1s infinite alternate;
  transform: scale(0.95);
}

/* Animation clignotement enregistrement */
@keyframes recordGlow {
  from { box-shadow: 0 0 10px rgba(255, 0, 0, 0.6); }
  to { box-shadow: 0 0 20px rgba(255, 0, 0, 1); }
}

/* --- BOUTON PLAY --- */
.bg-green {
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom, #2ecc71, #27ae60);
  font-size: 16px;
  transition: transform 0.1s ease-in-out;
}

/* Effet quand on appuie sur Play */
.bg-green.playing-record {
  transform: scale(0.95);
  background: #1f8443;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
  animation: playActive 0.2s ease-in-out;
}

/* Animation d’enfoncement */
@keyframes playActive {
  0% { transform: scale(1); }
  50% { transform: scale(0.92); }
  100% { transform: scale(0.95); }
}

.color-white {
  color: white;
}