/* PRO-04-C §1 — le bouton « ♪ Notre chanson » (public/chanson.js). Les valeurs sont celles de la charte (public/cockpit/tokens.css) ;
   chaque var() porte en repli la MÊME valeur recopiée de tokens.css, pour la racine du site qui ne charge pas tokens.css. */
.chanson {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
  max-width: calc(100vw - 32px); min-height: var(--hauteur-bouton, 44px); padding: 8px 16px;
  font-family: var(--police-interface, "Instrument Sans", "Segoe UI", system-ui, sans-serif);
  font-size: var(--taille-petite, 0.9375rem); font-weight: var(--graisse-appuyee, 500); line-height: var(--interligne-serre, 1.25);
  color: var(--bleu, oklch(0.40 0.088 249)); background: var(--papier-relief, #fbfaf7);
  border: 1px solid var(--bleu-filet, oklch(0.86 0.035 249)); border-radius: var(--rayon-pastille, 999px);
  box-shadow: var(--ombre-carte, 0 1px 3px rgba(27, 27, 27, 0.07), 0 6px 16px rgba(27, 27, 27, 0.05));
  cursor: pointer; text-align: right;
  transition: background-color var(--duree-courte, 150ms) var(--courbe, cubic-bezier(0.2, 0, 0.2, 1));
}
.chanson:hover, .chanson:focus-visible { background: var(--bleu-voile, oklch(0.93 0.022 249)); }
.chanson:focus-visible { outline: 2px solid var(--bleu-vif, oklch(0.52 0.110 249)); outline-offset: 2px; }
.chanson[aria-pressed="true"] { color: var(--papier-relief, #fbfaf7); background: var(--bleu, oklch(0.40 0.088 249)); border-color: var(--bleu, oklch(0.40 0.088 249)); }
.chanson[aria-pressed="true"]:hover { background: var(--bleu-sombre, oklch(0.33 0.082 249)); }
.chanson-detail { display: none; font-size: var(--taille-menue, 0.8125rem); font-weight: var(--graisse-normale, 400); }
.chanson:hover .chanson-detail, .chanson:focus-visible .chanson-detail { display: block; }
/* de la place en bas de page : le dernier bouton de la page remonte au-dessus du lecteur */
.avec-chanson body { padding-bottom: 80px; }
@media (prefers-reduced-motion: reduce) { .chanson { transition: none; } }
@media print { .chanson { display: none; } }