/* ==========================================================================
   Styles de la page « Compose ta mélodie ». Uniquement des var(--...) issus
   de assets/css/tokens.css (aucune couleur/police/espacement en dur, R4).
   ========================================================================== */

.melodie {
  padding: 0 var(--content-pad) var(--space-2xl);
}

.melodie__scene {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--melodie-bg);
  color: var(--melodie-text);
  text-align: center;
  box-shadow: var(--shadow-block-night);
}

.melodie__intro-text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  max-width: var(--measure);          /* largeur de lecture bornée (§8) */
  margin: 0 auto var(--space-md);
}

.melodie__loading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.melodie__instrument {
  margin-top: var(--space-lg);
}

.melodie-instruments {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.melodie-instrument-btn {
  font-family: var(--font-body);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-width) solid var(--melodie-text);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--melodie-text);
  cursor: pointer;
}
.melodie-instrument-btn[aria-pressed="true"] {
  background: var(--melodie-text);
  color: var(--brand-ink);
}

.melodie-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--touch-target);   /* cible tactile 44px (§10) */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
}

/* La classe hide-letters est posée sur le conteneur de jeu `.melodie-play`
   (data-melodie-play), pas sur une `.melodie-piano` — qui n'existe pas dans le
   rendu. */
.melodie-play.hide-letters .melodie-key__letter {
  display: none;
}

.melodie-mode {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding: 0;
  border: none;
}

.melodie-mode__option {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--touch-target);   /* cible tactile 44px (§10) */
  padding: var(--space-2xs);
  cursor: pointer;
}

/* [hidden] doit rester prioritaire sur le display:flex ci-dessous, sinon
   le mode « Notes » n'arrive jamais à masquer les pads d'accords. */
.melodie-chords[hidden] {
  display: none;
}
.melodie-chords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  touch-action: none;
}

.melodie-chord {
  min-width: 96px;
  min-height: 64px;
  padding: var(--space-xs) var(--space-md);
  border: var(--border-width) solid var(--melodie-text);
  border-radius: var(--radius-md);
  background: var(--melodie-surface);
  color: var(--melodie-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  cursor: pointer;
  user-select: none;
}

.melodie-chord.is-active {
  background: var(--melodie-glow-guitare);
  color: var(--brand-ink);
  transition: none;
}
.melodie-chord:not(.is-active) {
  transition: background-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out);
}

.melodie-play {
  touch-action: none;
}

/* Défi « Rejoue la mélodie » : panneau au-dessus du transport. Réutilise les
   jetons du panneau nocturne (--melodie-text sur --melodie-surface). */
.melodie-defi {
  margin-top: var(--space-lg);
  border-top: 1px solid color-mix(in srgb, var(--melodie-text) 25%, transparent);
  padding-top: var(--space-md);
  font-family: var(--font-body);
  text-align: center;
}

.melodie-defi__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0;
}

/* Sélecteur des deux types de défi (surprise / connue). */
.melodie-defi__modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.melodie-defi__mode {
  min-height: var(--touch-target, 44px);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-width) solid var(--melodie-text);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--melodie-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
}
.melodie-defi__mode[aria-pressed="true"] {
  background: var(--melodie-text);
  color: var(--melodie-surface);
}

.melodie-defi__pane {
  margin-top: var(--space-sm);
}

/* Choix d'une mélodie connue : boutons avec titre + meilleur score. */
.melodie-defi__songs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}
.melodie-defi__song {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-height: var(--touch-target, 44px);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-width) solid var(--melodie-text);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--melodie-text);
  font-family: var(--font-body);
  cursor: pointer;
}
.melodie-defi__song-title {
  font-size: var(--text-sm);
  font-weight: 700;
}
.melodie-defi__song-best {
  font-size: var(--text-xs);
  opacity: 0.8;
}
.melodie-defi__score--known b {
  font-size: var(--text-base);
}

.melodie-defi__intro {
  margin: var(--space-2xs) auto 0;
  max-width: 42ch;
  font-size: var(--text-sm);
  opacity: 0.85;
}

.melodie-defi__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.melodie-defi__btn {
  min-height: var(--touch-target, 44px);
  padding: var(--space-2xs) var(--space-md);
  border: var(--border-width) solid var(--melodie-text);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--melodie-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
}
.melodie-defi__btn--start {
  background: var(--melodie-text);
  color: var(--melodie-surface);
}
.melodie-defi__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.melodie-defi__score {
  margin: 0;
  font-size: var(--text-sm);
}
.melodie-defi__score b {
  font-variant-numeric: tabular-nums;
}
.melodie-defi__record {
  opacity: 0.85;
}

.melodie-defi__status {
  margin: var(--space-sm) auto 0;
  min-height: 1.5em;
  font-size: var(--text-base);
  font-weight: 700;
}
/* Réussite et erreur ne reposent jamais sur la seule couleur (WCAG 1.4.1) :
   le préfixe ✓ / ✗ est ajouté en JS. La couleur ne fait que renforcer. */
.melodie-defi__status--ok    { color: var(--melodie-glow-piano); }
.melodie-defi__status--wrong { color: var(--melodie-rec); }

.melodie-defi__progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  min-height: 16px;
}
.melodie-defi__dot {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  border: 2px solid color-mix(in srgb, var(--melodie-text) 45%, transparent);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.melodie-defi__dot.is-done {
  background: var(--melodie-text);
  border-color: var(--melodie-text);
}
@media (prefers-reduced-motion: reduce) {
  .melodie-defi__dot { transition: none; }
}

/* Trompette : rangée de pistons ronds, lueur corail à l'appui. */
.trompette-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  touch-action: none;
}

.melodie-piston {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--melodie-text);
  background: var(--melodie-surface);
  cursor: pointer;
  user-select: none;
}

.melodie-piston.is-active {
  background: var(--melodie-glow-trompette);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--melodie-glow-trompette) 45%, transparent);
  transition: none;
}
.melodie-piston:not(.is-active) {
  transition: background-color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}

/* Guitare — V1 : boutons-notes sur les 6 cordes à vide (cordes grattables
   prévues en V1.1, cf. README). */
.guitare-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  touch-action: none;
}

.melodie-string {
  min-width: 64px;
  min-height: 64px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--melodie-text);
  background: var(--melodie-surface);
  color: var(--melodie-text);
  font-family: var(--font-body);
  cursor: pointer;
  user-select: none;
}

.melodie-string.is-active {
  background: var(--melodie-glow-guitare);
  color: var(--brand-ink);
  transition: none;
}
.melodie-string:not(.is-active) {
  transition: background-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out);
}

.piano-octaves {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* Zone de jeu : touch-action à none obligatoire (R6/§3.9), sinon le doigt
   fait défiler la page pendant qu'on joue au lieu de jouer une note.
   Exception assumée à la règle des 44px (§10) : le clavier montre 1,5 octave,
   donc des touches étroites en largeur (~25px en mobile) mais très hautes
   (200px), jouables au doigt. Choix retenu avec le client (statu quo) pour
   garder un vrai clavier plutôt qu'une octave réduite. */
.piano-keys {
  position: relative;
  height: 200px;
  max-width: 720px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
}

.melodie-key {
  position: absolute;
  top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-2xs);
  border: var(--border-width) solid var(--brand-ink);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
}

.melodie-key--white {
  height: 100%;
  background: var(--melodie-key-white);
  color: var(--brand-ink);
  z-index: var(--z-base);
}

.melodie-key--black {
  height: 62%;
  background: var(--melodie-key-black);
  color: var(--melodie-text);
  z-index: var(--z-decor);
  transform: translateX(-50%);
}

.melodie-key__letter {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

/* Allumage instantané (jamais d'animation à l'attaque), extinction en fondu
   uniquement à la désactivation — cf. CDC §4.2. */
.melodie-key.is-active {
  background: var(--melodie-glow-piano);
  color: var(--melodie-text);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--melodie-glow-piano) 45%, transparent);
  transition: none;
}
.melodie-key--white:not(.is-active),
.melodie-key--black:not(.is-active) {
  transition: background-color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
  box-shadow: none;
}

/* Le focus par défaut du site (outline bleu nuit, --color-focus) est
   illisible sur le panneau nocturne du jeu : outline clair ici (R6/CDC §9). */
.melodie__scene :focus-visible {
  outline-color: var(--melodie-text);
}

.melodie__ios-hint {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.melodie__credits {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  opacity: 0.8;
}

/* Sous prefers-reduced-motion : changement d'état sec, sans halo animé ni
   transition de lueur (CDC §3.9/§4.2). */
@media (prefers-reduced-motion: reduce) {
  .melodie-key--white:not(.is-active),
  .melodie-key--black:not(.is-active),
  .melodie-chord:not(.is-active),
  .melodie-piston:not(.is-active),
  .melodie-string:not(.is-active) {
    transition: none;
  }
  .melodie-key.is-active,
  .melodie-piston.is-active {
    box-shadow: none;
  }
}