/* Police de notation (SMuFL). font-display: block : mieux vaut un blanc pendant
   le chargement que des glyphes de remplacement. */
@font-face {
  font-family: 'Bravura';
  src: url('polices/Bravura.woff2') format('woff2');
  font-display: block;
}

:root {
  --encre: #000;
  --fond: #fff;
  /* Seul le remplissage des têtes porte la couleur. Bleu tiré vers l'indigo,
     loin du turquoise, pour rester distinct du vert même pour un œil daltonien ;
     le vert est nettement plus clair que le bleu, seconde différence utile. */
  --bleu: #3b5bdb; /* ce qui a été joué */
  --vert: #37b24d; /* la bonne note */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, sans-serif;
  overscroll-behavior: none; /* pas de défilement élastique de la page */
  touch-action: manipulation; /* pas de zoom au double-tap ni de délai associé */
}

/* Portée en haut, clavier en dessous, même largeur, le tout tenant dans l'écran. */
:root {
  --barre: 40px;
}

.app {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
}

/* Barre discrète : nom du mode à gauche, menu à droite. */
.barre {
  flex: 0 0 auto;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  height: var(--barre);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 14px;
  font-size: 0.9rem;
  color: #555;
}

.barre__info {
  margin-left: auto;
  padding-right: 8px;
  font-variant-numeric: tabular-nums;
  color: #222;
}

.barre__menu {
  width: 48px;
  height: 40px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  color: #222;
  cursor: pointer;
  touch-action: manipulation;
}

.zone-portee {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 8px;
}

/* Anneau de compte à rebours : dans un coin, à l'écart de la note. */
.anneau {
  position: absolute;
  top: 6px;
  right: 16px;
  width: 32px;
  height: 32px;
}

.anneau[hidden] {
  display: none;
}

.anneau__fond {
  fill: none;
  stroke: #e2e2e2;
  stroke-width: 3;
}

.anneau__arc {
  fill: none;
  stroke: #222;
  stroke-width: 3;
  stroke-linecap: butt;
}

/* Écrans du mode examen : sous la barre, par-dessus portée et clavier. */
.ecran {
  position: absolute;
  inset: calc(var(--barre) + env(safe-area-inset-top)) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  z-index: 5;
  overflow-y: auto;
  background: var(--fond);
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
}

.ecran[hidden] {
  display: none;
}

.ecran__section {
  max-width: 420px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.ecran__section[hidden] {
  display: none;
}

.ecran__section--centre {
  text-align: center;
  padding-top: 15dvh;
}

.ecran h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.bouton {
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: #222;
  color: #fff;
  font: inherit;
  font-size: 1.15rem;
  cursor: pointer;
  touch-action: manipulation;
}

/* À propos */
.apropos {
  gap: 20px;
  line-height: 1.45;
}

.conseils {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: 12px;
}

.portee--reperes {
  max-width: 360px;
  min-height: 0;
  max-height: none;
}

.credits {
  margin: 0;
  font-size: 0.9rem;
  color: #555;
}

.credits a {
  color: inherit;
}

.score {
  margin: 0;
  font-size: 3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ratees {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 1.05rem;
}

.ratees span {
  color: #555;
}

/* La portée ne descend pas sous une taille minimale : c'est le clavier qui cède. */
.portee {
  display: block;
  width: 100%;
  height: auto;
  min-height: 135px; /* ≈ 15 px d'interligne */
  max-height: 50dvh;
  user-select: none;
  -webkit-user-select: none;
}

.portee line {
  stroke: var(--encre);
}

.portee text {
  font-family: 'Bravura';
  fill: var(--encre);
  pointer-events: none;
}

.portee text.etiquette {
  font-family: system-ui, -apple-system, sans-serif;
  fill: #444;
}

.portee .remplissage--bleu { fill: var(--bleu); }
.portee .remplissage--vert { fill: var(--vert); }

/* Écran d'accueil, menu des modes et réglages : couvre tout tant qu'il est
   ouvert ; le geste qui le ferme réveille le son. */
.accueil {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  background: var(--fond);
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  user-select: none;
  -webkit-user-select: none;
}

.accueil[hidden] {
  display: none;
}

.accueil__contenu {
  max-width: 420px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.accueil__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accueil h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  outline: none; /* reçoit le focus à l'ouverture (panneau.js), sans anneau */
}

.accueil__fermer {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.4rem;
  color: #222;
  cursor: pointer;
}

.modes {
  display: grid;
  gap: 12px;
}

.mode {
  min-height: 60px;
  padding: 0 20px;
  border: 2px solid #222;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 1.2rem;
  color: #222;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.mode--courant {
  background: #222;
  color: #fff;
}

.reglages {
  display: grid;
}

.reglage {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ddd;
  font-size: 1.05rem;
}

.reglage input[type="checkbox"] {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  accent-color: #222;
}

.reglage--choix legend {
  float: left; /* la légende sur la même ligne que les choix */
  padding: 0;
}

/* Légende au-dessus, choix pleine largeur (écran d'examen). */
.reglage--empile {
  display: block;
  border-top: 0;
}

.reglage--empile legend {
  float: none;
  margin-bottom: 8px;
}

.reglage--empile .choix {
  width: 100%;
}

.choix {
  display: flex;
  border: 2px solid #222;
  border-radius: 10px;
  overflow: hidden;
}

.choix label {
  position: relative;
  min-width: 96px;
  min-height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.choix label + label {
  border-left: 2px solid #222;
}

.choix--serre label {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 4px 0;
}

.choix small {
  display: block;
  font-size: 0.8rem;
  font-weight: normal;
  text-align: center;
}

.choix input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.choix input:checked + span {
  font-weight: 600;
}

.choix label:has(input:checked) {
  background: #222;
  color: #fff;
}

.choix input:focus-visible + span {
  outline: 3px solid #222;
  outline-offset: -6px;
}

.reglage__note {
  margin: 0;
  padding: 0 0 10px;
  font-size: 0.9rem;
  color: #555;
}

.erreur {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  padding: 12px 16px;
  background: #fff3c4;
  text-align: center;
}

/* Clavier : touches blanches pleine largeur, noires en surimpression. */
.zone-clavier {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 8px 8px;
  display: flex;
}

.clavier {
  --n: 5;
  --noire-largeur: 0.58;
  --noire-hauteur: 0.62;
  --separation: #222;
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  border: 2px solid var(--separation);
  border-radius: 0 0 8px 8px;
  background: var(--separation);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* ni zoom au double-tap, ni défilement qui volerait le contact */
}

.clavier__blanches {
  display: flex;
  height: 100%;
}

.clavier__noires {
  position: absolute;
  inset: 0;
  pointer-events: none; /* le calque ne bloque rien ; seules les noires actives réagissent */
}

.touche {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: #fff;
  touch-action: none;
  cursor: pointer;
}

.touche:focus-visible {
  outline: 3px solid #000;
  outline-offset: -5px;
}

.touche--blanche {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 14px;
  border-right: 2px solid var(--separation);
  border-radius: 0 0 6px 6px;
}

.touche--blanche:last-child {
  border-right: 0;
}

.touche--noire {
  position: absolute;
  top: 0;
  left: calc(100% / var(--n) * (var(--position) - var(--noire-largeur) / 2));
  width: calc(100% / var(--n) * var(--noire-largeur));
  height: calc(100% * var(--noire-hauteur));
  background: #111;
  border-radius: 0 0 5px 5px;
}

/* Inertes par défaut : le doigt qui les effleure atteint la blanche dessous. */
.clavier:not(.clavier--noires-actives) .touche--noire {
  pointer-events: none;
  cursor: default;
}

.clavier--noires-actives .touche--noire {
  pointer-events: auto;
}

/* Surbrillance : bleu = le doigt, vert = l'application. Changement instantané. */
.touche--bleue,
.touche--noire.touche--bleue {
  background: var(--bleu);
}

.touche--verte,
.touche--noire.touche--verte {
  background: var(--vert);
}

/* Noms sous les touches : béquille de départ, masquée par défaut. */
.touche__nom {
  display: none;
  font-size: 1.1rem;
  color: #333;
}

.clavier--noms .touche__nom {
  display: block;
}

.touche--bleue .touche__nom,
.touche--verte .touche__nom {
  color: #fff;
}

/* Orientation verticale (phase 2) : grave en bas, noires à gauche. */
.clavier--vertical .clavier__blanches {
  flex-direction: column-reverse;
}

.clavier--vertical .touche--blanche {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0 0 14px;
  border-right: 0;
  border-top: 2px solid var(--separation);
  border-radius: 0 6px 6px 0;
}

.clavier--vertical .touche--blanche:last-child {
  border-top: 0;
}

.clavier--vertical .touche--noire {
  top: auto;
  left: 0;
  bottom: calc(100% / var(--n) * (var(--position) - var(--noire-largeur) / 2));
  width: calc(100% * var(--noire-hauteur));
  height: calc(100% / var(--n) * var(--noire-largeur));
  border-radius: 0 5px 5px 0;
}