/* Degrés et Fonctions Tonales — accent indigo (voir data-accent dans index.html).
   Base commune : ../../theme.css */

/* Titre plus long que les autres : on descend d'un cran */
h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); }

#tonality-name {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
}
#streak-display { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }

.question-container {
  background-color: var(--papier);
  border: var(--bordure);
  border-radius: var(--rayon-panneau);
  box-shadow: var(--ombre);
  padding: 24px 20px;
  margin-bottom: 24px;
}
#question-label { margin: 0 0 12px; font-size: 0.9rem; color: var(--encre-douce); }
#chord-name {
  font-family: var(--police-titre);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

#feedback {
  height: 24px;
  margin-bottom: 24px;
  font-family: var(--police-titre);
  font-weight: 700;
}

#degrees-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
#functions-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }

button {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 16px 10px;
  cursor: pointer;
  color: var(--encre);
  background-color: var(--papier);
  border: var(--bordure);
  border-radius: var(--rayon-bouton);
  box-shadow: var(--ombre-md);
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
}
button:hover:not(:disabled) { background-color: var(--accent); color: var(--sur-accent); }
button:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: var(--ombre-plate);
}
button:disabled { cursor: default; opacity: 0.4; }
button.right {
  background-color: var(--succes);
  color: var(--encre);
  opacity: 1;
}
button.wrong {
  background-color: var(--erreur);
  color: var(--papier);
  opacity: 1;
}

#reveal-card {
  background-color: var(--papier);
  border: var(--bordure);
  border-radius: var(--rayon-panneau);
  box-shadow: var(--ombre);
  padding: 18px 20px;
  margin-bottom: 24px;
  font-size: 0.95rem;
  line-height: 1.6;
}
#reveal-card p { margin: 5px 0; }
.highlight { color: var(--accent); font-weight: 700; }

#next-btn {
  font-size: 1.15rem;
  padding: 15px 30px;
  background-color: var(--accent);
  color: var(--sur-accent);
}
#next-btn:hover:not(:disabled) { background-color: var(--accent); color: var(--sur-accent); }