/* Outil · Test audio : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ta- */

/* À gauche (en haut au téléphone) : la pièce vue de dessus, l'auditeur au centre, les enceintes autour */
.ta .outil-fixe { align-items: center; }
.ta-cadre { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 12px; border-radius: 16px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); }
.ta-piece { position: relative; width: 100%; max-width: min(360px, 44vh); margin: 0 auto; aspect-ratio: 1; }
/* Le cercle des enceintes et l'auditeur (une tête, le nez vers l'avant) */
.ta-cercle { position: absolute; left: 50%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.ta-auditeur { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--filet);
  transition: box-shadow .3s var(--courbe); }
.ta-piece.joue .ta-auditeur { box-shadow: inset 0 0 0 1.5px var(--papier); }
/* Le trajet du son : invisible au repos ; quand l'enceinte joue, un pointillé orange qui avance vers l'auditeur */
.ta-trajets { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ta-trajets line { stroke: var(--orange); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 2 6; opacity: 0; transition: opacity .25s var(--courbe); }
.ta-trajets line.joue { opacity: .7; animation: ta-trajet .8s linear infinite; }
.ta.calme .ta-trajets line.joue { animation: none; }
@keyframes ta-trajet { to { stroke-dashoffset: -16; } }
.ta-auditeur::before { content: ""; position: absolute; left: 50%; top: -6px; translate: -50% 0;
  border: 5px solid transparent; border-top: 0; border-bottom: 6px solid var(--filet); }

/* Une enceinte : un rond (son nom court dedans), son nom en dessous ; orange quand elle joue, avec des ondes */
.ta-enceinte { position: absolute; width: 52px; height: 52px; translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--noir); color: var(--papier); box-shadow: inset 0 0 0 1px var(--filet); display: grid; place-items: center;
  transition: background .2s var(--courbe), color .2s var(--courbe), box-shadow .2s var(--courbe); }
.ta-enceinte.grave { width: 40px; height: 40px; }
.ta-enceinte span { font: var(--valeur); letter-spacing: .06em; }
.ta-enceinte small { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap; font: var(--repere); letter-spacing: .1em; color: var(--texte2); pointer-events: none; }
.ta-enceinte:hover { box-shadow: inset 0 0 0 1px var(--papier); }
.ta-enceinte:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* Mono : la seule enceinte montre un haut-parleur plutôt qu'une lettre */
.ta-enceinte[data-canal="M"]::after { content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 5px var(--noir), 0 0 0 6.5px currentColor; }
.ta-enceinte.joue { background: var(--orange); color: var(--noir); box-shadow: none; }
.ta-enceinte.joue small { color: var(--papier); }
.ta-enceinte.joue[data-canal="M"]::after { box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 5px var(--orange), 0 0 0 6.5px currentColor; }
.ta-enceinte::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--orange); opacity: 0; pointer-events: none; }
.ta-enceinte.joue::before { animation: ta-onde 1.1s var(--courbe) infinite; }
.ta.calme .ta-enceinte.joue::before { animation: none; }
@keyframes ta-onde { from { scale: 1; opacity: .7; } to { scale: 1.9; opacity: 0; } }

/* Dans le cadre, en bas : tout jouer / arrêter, bien centré, et à sa droite ce qui joue */
.ta-lecture { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.ta-lecture .rond { grid-column: 2; }
.ta-etat { grid-column: 3; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Le texte sous le cadre ne doit jamais faire bouger le cadre :
   téléphone : une hauteur fixe de 3 lignes (les réglages dessous ne sautent pas) ;
   ordinateur : posé sous le cadre, hors du calcul, pour que le cadre seul soit centré en hauteur */
.ta-bloc { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ta-info { margin: 0; max-width: 380px; text-align: center; height: 3lh; }
@media (min-width: 960px) {
  .ta-bloc { position: relative; }
  .ta-info { position: absolute; top: calc(100% + 18px); left: 0; right: 0; margin: 0 auto; height: auto; }
}