/* ---------- Ecouter ce qui est affiche ----------
   UNE seule pastille doree, sans un mot : le haut-parleur pour lancer, un carre
   pour arreter, et l'allure en jeton sombre pose a l'interieur. Les deux gestes
   restent deux boutons distincts (l'allure se clique sans arreter la lecture),
   mais ils se lisent comme un seul objet.
   Le comportement vit dans js/ecoute.js. */

.barre-ecoute {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 5px 4px 9px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-on, #1a1408);
  /* dans un conteneur en colonne, un inline-flex s'etire sur toute la largeur :
     la pastille prenait 388 px au lieu de 83 */
  align-self: flex-start; width: fit-content;
}

/* le geste : lancer, puis arreter */
.ecouter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; cursor: pointer;
  border: 0; background: none; color: inherit;
  transition: var(--transition-norm);
}
.ecouter:hover { transform: scale(1.12); }
/* 🚨 flex:0 0 auto : un <svg> sans attribut width/height a une largeur
   intrinseque nulle. Dans un bouton en flex, il se laissait reduire a ZERO et
   la pastille s ouvrait sur un vide a la place du haut-parleur. */
.ecouter svg { width: 14px; height: 14px; flex: 0 0 14px; fill: currentColor; display: block; }
/* garde de compatibilite : d'anciennes pages posent encore une onde */
.ecouter .onde {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: ecoute-pulsation 1.4s ease-in-out infinite;
}
@keyframes ecoute-pulsation { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }

/* l'allure : un jeton BLANC dans la pastille, pour dire que c'est un reglage a
   part. Blanc et pas gris : sur l'or, les gris clairs du theme ne se detachent
   pas a cette taille (essaye sur maquette, 2026-08-14). */
.vitesse {
  display: inline-flex; align-items: center; height: 19px; padding: 0 8px;
  cursor: pointer; border: 0; border-radius: var(--radius-pill);
  /* 🚨 Le fond de la pastille est BLANC en dur : son encre doit l'etre aussi.
     Elle prenait `--accent-on`, que le selecteur de theme recalcule selon
     l'accent choisi : avec un accent sombre il vaut #FFFFFF, et le chiffre de
     vitesse devenait blanc sur blanc, invisible (vu chez Alex le 2026-08-16,
     alors qu'il s'affichait correctement sur un poste sans theme personnalise). */
  background: #fff; color: #1a1408;
  font: 600 10.5px/1 var(--font); letter-spacing: 1.1px;
  transition: var(--transition-norm);
}
.vitesse:hover { background: rgba(255, 255, 255, .78); }

@media print { .barre-ecoute { display: none } }