/* Les Intervalles — accent jaune (voir data-accent dans index.html).
   Base commune : ../../theme.css */

/* Un peu plus large que les exercices : le tableau a besoin de place */
#app { max-width: 560px; }

h1 { margin: 0 0 12px; }

.intro {
  margin: 0 0 24px;
  color: var(--encre-douce);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Le tableau vit dans un panneau "sticker", comme les cartes de l'accueil */
.table-wrapper {
  background-color: var(--papier);
  border: var(--bordure);
  border-radius: var(--rayon-panneau);
  box-shadow: var(--ombre);
  padding: 8px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 14px;
  text-align: left;
}

thead th {
  font-family: var(--police-titre);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  border-bottom: 3px solid var(--encre);
}

tbody tr + tr td { border-top: 1px solid rgba(27, 26, 31, 0.12); }

tbody tr:hover td { background-color: var(--accent); }

.notation, .demi-tons {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.1rem;
}

.demi-tons { text-align: right; }
thead th:last-child { text-align: right; }