/* Composition propre au chapitre « Une voix fabriquee ».
   Chaque selecteur commence par .p-une-voix-fabriquee, sans exception.
   Proprietes logiques seulement : l'arabe se sert en RTL. */

/* Les deux sons : deux figures cote a cote des que la place le permet,
   empilees en dessous. Chaque figure porte sa legende en mots : la position
   seule ne dit jamais laquelle est laquelle. */
.p-une-voix-fabriquee .paire {
  display: grid;
  gap: var(--s-5);
  margin-block: var(--s-5);
}
@media (min-width: 42rem) {
  .p-une-voix-fabriquee .paire { grid-template-columns: 1fr 1fr; }
}
.p-une-voix-fabriquee .paire > figure {
  margin: 0;
  border: 1px solid var(--rule);
  min-width: 0;
}

/* Le spectrogramme et son echelle de frequences, a cote plutot que dessus :
   une echelle qui se lit au lecteur d'ecran comme au clavier n'a pas besoin
   d'etre dessinee dans l'image. */
.p-une-voix-fabriquee .spectro {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  padding: var(--s-3);
}
.p-une-voix-fabriquee .spectro__axe {
  flex: none;
  min-inline-size: 3.4em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
  text-align: end;
  padding-block: 0.1em;
}
.p-une-voix-fabriquee .spectro canvas {
  display: block;
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
}
.p-une-voix-fabriquee .paire figcaption {
  padding: var(--s-3);
  font-size: var(--t-s);
  color: var(--ink-mid);
  border-block-start: 1px solid var(--rule);
  max-width: none;
}
.p-une-voix-fabriquee .paire figcaption strong { color: var(--ink); }
.p-une-voix-fabriquee .figure-jouer {
  padding: 0 var(--s-3) var(--s-3);
  margin: 0;
}

/* Le tableau de reference, statique, et le tableau qui compare le reglage
   courant a la mesure : meme habillage pour les deux. */
.p-une-voix-fabriquee .mesures,
.p-une-voix-fabriquee .compare {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t-s);
}
.p-une-voix-fabriquee .mesures th,
.p-une-voix-fabriquee .mesures td,
.p-une-voix-fabriquee .compare th,
.p-une-voix-fabriquee .compare td {
  border-block-end: 1px solid var(--rule);
  padding: var(--s-2) var(--s-3);
  text-align: start;
}
.p-une-voix-fabriquee .mesures th,
.p-une-voix-fabriquee .compare th {
  font: 600 var(--t-xs) var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
}
.p-une-voix-fabriquee .mesures caption {
  font-size: var(--t-s);
  color: var(--ink-mid);
  text-align: start;
  margin-block-end: var(--s-2);
}
.p-une-voix-fabriquee .mesures .nombre,
.p-une-voix-fabriquee .compare .nombre {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.p-une-voix-fabriquee .bloc { margin-block-start: var(--s-6); }
.p-une-voix-fabriquee .bloc > h3 { margin-block-end: var(--s-3); }

@media print {
  .p-une-voix-fabriquee .spectro__axe { display: none; }
}