/* Swiss Art Gallery — commandes audio discrètes, clavier et écran tactile. */
.sag-listen {
  --sag-listen-gold: #d8bd82;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 4px 0 18px;
  color: var(--sag-listen-gold);
  font: 400 13px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .015em;
}
.sag-listen[hidden], .sag-listen [hidden] { display: none !important; }
.sag-listen .sag-listen-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 7px 14px;
  border: 1px solid rgba(216, 189, 130, .32);
  border-radius: 999px;
  background: rgba(216, 189, 130, .045);
  color: var(--sag-listen-gold);
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}
.sag-listen .sag-listen-button:hover {
  background: rgba(216, 189, 130, .10);
  border-color: rgba(216, 189, 130, .7);
}
.sag-listen .sag-listen-button:focus-visible {
  outline: 2px solid var(--sag-listen-gold);
  outline-offset: 3px;
}
.sag-listen .sag-listen-button:disabled { opacity: .55; cursor: default; }
.sag-listen .sag-listen-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sag-listen .sag-listen-stop { background: transparent; border-color: transparent; }
.sag-listen .sag-listen-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sag-listen .sag-listen-status.sag-listen-error {
  position: static;
  flex-basis: 100%;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font-size: 12px;
}
.sag-listen.sag-listen-floating {
  position: fixed; inset: 0; z-index: 2147483000;
  display: block; box-sizing: border-box;
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; overflow: hidden;
  background: #080807; color: var(--sag-listen-gold);
}
.sag-listen-floating::backdrop { background: #080807; }
.sag-listen-floating .sag-listen-artwork {
  position: absolute; inset: 0; display: block; box-sizing: border-box;
  width: 100%; height: 100%; max-width: none; max-height: none;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(92px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  object-fit: contain; object-position: center; border: 0; border-radius: 0;
  background: transparent;
}
.sag-listen-floating .sag-listen-close {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 46px; height: 46px; padding: 0; font-size: 30px;
  background: rgba(8,8,7,.8);
}
.sag-listen-floating-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 10px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #080807;
}
.sag-listen-credit { font-size: 10px; color: #b2a792; letter-spacing: .04em; }
.sag-listen-floating .sag-listen-credit { flex-basis: 100%; text-align: center; }
.sag-listen-screen-status { font-size: 12px; text-align: center; }
.sag-listen-screen-status:empty { display: none; }
@media (max-width: 600px) {
  .sag-listen { gap: 6px; margin-bottom: 14px; }
  .sag-listen .sag-listen-button { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sag-listen .sag-listen-button { transition: none; }
}
@media print { .sag-listen { display: none !important; } }