/* Outil · Tempo : seulement ce qui lui est propre (le reste vient de app/kit.css : .rond, .seg, .curseur, .groupe, .rangee).
   Même mise en page que le Générateur. Préfixe des classes : tp- */

/* À gauche (en haut au téléphone) : le cadre avec le tempo, les temps de la mesure et la lecture ; dessous, le grand bouton Tap.
   Hauteurs fixes : rien ne bouge quand le tempo change. */
.tp .outil-fixe { align-items: center; }
.tp-bloc { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.tp-cadre { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 16px 14px; border-radius: 16px;
  background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); }

/* Le tempo, en grand, entre − et + */
.tp-tempo { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.tp-valeur { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Le chiffre est un champ : on le touche pour écrire un tempo (tout est sélectionné, le curseur est orange) ;
   pendant la saisie, « BPM » s'éclaire. Rien ne bouge autour. */
.tp-saisie { width: 3.3ch; height: 1em; padding: 0; border: 0; border-radius: 0; background: none; color: var(--papier); text-align: center; caret-color: var(--orange);
  font: 700 clamp(56px, 16vw, 84px)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; cursor: text; }
.tp-saisie:focus { outline: none; }
.tp-saisie::selection { background: rgba(255, 90, 31, .35); }
.tp-valeur span { transition: color .2s var(--courbe); }
.tp-valeur:focus-within span { color: var(--papier); }
.tp-valeur span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.tp-tempo .rond { touch-action: manipulation; user-select: none; -webkit-user-select: none; }

/* Les temps de la mesure : un point par temps ; le premier plus grand ; celui qu'on entend s'allume (le premier en orange) */
.tp-temps { display: flex; justify-content: center; align-items: center; gap: 14px; height: 18px; }
.tp-temps i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--filet); transition: background .12s var(--courbe), box-shadow .12s var(--courbe), transform .12s var(--courbe); }
.tp-temps i.premier { width: 14px; height: 14px; }
.tp-temps i.second { width: 12px; height: 12px; }                  /* 6/8 : le 4e temps, un peu marqué */
.tp-temps i.joue { background: var(--papier); box-shadow: none; transform: scale(1.15); }
.tp-temps i.premier.joue { background: var(--orange); }

/* La lecture, bien centrée, et à sa droite la mesure (comme le Générateur) */
.tp-lecture { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.tp-lecture .rond { grid-column: 2; }
.tp-etat { grid-column: 3; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Le grand bouton Tap : une large surface, qui s'éclaire à chaque frappe */
.tp-tap { width: 100%; height: clamp(110px, 18vh, 150px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 16px; background: transparent; color: var(--papier); box-shadow: inset 0 0 0 1px var(--filet); cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s var(--courbe), background .5s var(--courbe); }
.tp-tap:hover { box-shadow: inset 0 0 0 1px var(--papier); }
.tp-tap:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.tp-tap-mot { font: 700 28px/1 var(--display); letter-spacing: -.04em; }
.tp-tap-aide { font: var(--valeur); letter-spacing: .06em; color: var(--texte2); font-variant-numeric: tabular-nums; }
.tp-tap.frappe { animation: tp-frappe .35s var(--courbe); }
@keyframes tp-frappe { from { background: rgba(242, 240, 235, .14); box-shadow: inset 0 0 0 1px var(--papier); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tp-tap.frappe { animation: none; } .tp-temps i { transition: none; } }

/* Les durées : les lignes à copier, comme IOR */
.tp .rangee .val { color: var(--papier); font-variant-numeric: tabular-nums; }
.tp .rangee .note { display: grid; justify-items: end; width: 28px; }
.tp .rangee svg { width: 15px; height: 15px; fill: none; stroke: var(--texte2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp .rangee:hover svg { stroke: var(--peche); }