/* 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; } }

/* SAG Media Timeline 1.0.0 — zone tactile 44 px et piste pleine largeur. */
.sag-media-timeline{box-sizing:border-box;width:100%;min-width:0;color:#d8bd82;font:400 12px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.01em}
.sag-media-timeline[hidden],.sag-media-timeline [hidden]{display:none!important}
.sag-media-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 3px;font-size:11px;color:#c1b7a5}
.sag-media-timeline .sag-media-time{font:600 13px/1.45 system-ui,sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums;color:#f1dda3}
.sag-media-track{display:grid;grid-template-columns:55px minmax(50px,1fr) 55px;align-items:center;gap:12px}
.sag-media-timeline .sag-media-skip{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:55px;min-width:44px;min-height:44px;margin:0;padding:6px 5px;border:1px solid #75603a;border-radius:9px;background:#211e16;color:#f1dda3;font:600 12px/1.2 system-ui,sans-serif;letter-spacing:0;text-transform:none;box-shadow:none;cursor:pointer;touch-action:manipulation}
.sag-media-timeline .sag-media-skip:hover{background:#383021;border-color:#c8aa69}
.sag-media-timeline .sag-media-range{display:block;box-sizing:border-box;-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#f1dda3;box-shadow:none;cursor:pointer;touch-action:none;direction:ltr;opacity:1}
.sag-media-range::-webkit-slider-runnable-track{height:7px;border-radius:999px;background:linear-gradient(to right,#dec079 0%,#dec079 var(--sag-seek-progress,0%),#4a4335 var(--sag-seek-progress,0%),#4a4335 100%)}
.sag-media-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:20px;width:20px;margin-top:-6.5px;border:2px solid #fff0c5;border-radius:50%;background:#d9b765;box-shadow:0 1px 5px #0007}
.sag-media-range::-moz-range-track{height:7px;border-radius:999px;background:#4a4335}
.sag-media-range::-moz-range-progress{height:7px;border-radius:999px;background:#dec079}
.sag-media-range::-moz-range-thumb{box-sizing:border-box;height:20px;width:20px;border:2px solid #fff0c5;border-radius:50%;background:#d9b765;box-shadow:0 1px 5px #0007}
.sag-media-timeline .sag-media-skip:focus-visible,.sag-media-timeline .sag-media-range:focus-visible{outline:2px solid #f5e4ac;outline-offset:3px}
.sag-media-timeline .sag-media-skip:disabled,.sag-media-timeline .sag-media-range:disabled{opacity:.45;cursor:default}
.sag-media-note{display:block;font-size:10px;line-height:1.5;color:#b9ad97;text-align:center;margin:3px 0}
@media(max-width:480px){.sag-media-track{gap:9px}.sag-media-meta{font-size:10px}}
@media(forced-colors:active){.sag-media-timeline .sag-media-range{appearance:auto;forced-color-adjust:auto}.sag-media-range::-webkit-slider-runnable-track{background:CanvasText}.sag-media-range::-webkit-slider-thumb{background:Highlight}}

/* Espace réel réservé à la barre, sans masquer le bas du tableau. */
.sag-listen > .sag-media-timeline{flex:1 0 100%;max-width:760px}
.sag-listen-floating-controls > .sag-media-timeline{order:-1;flex:1 0 100%;max-width:760px}
.sag-listen-floating .sag-listen-artwork{padding-bottom:var(--sag-listen-controls-height,205px)}
.sag-listen-floating-controls{box-sizing:border-box;max-height:65dvh;overflow-y:auto}

/* Vue audio immersive 1.1.0 — le crédit IA s'efface avec les commandes. */
.sag-listen-floating .sag-listen-artwork{padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.sag-listen-floating-controls{box-sizing:border-box;padding-top:24px;background:linear-gradient(transparent,rgba(8,8,7,.92) 24px,rgba(8,8,7,.98))}
.sag-listen-floating-controls,.sag-listen-floating .sag-listen-close{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
.sag-listen-floating.sag-cinema-idle{cursor:none}
.sag-listen-floating.sag-cinema-idle .sag-listen-floating-controls,.sag-listen-floating.sag-cinema-idle .sag-listen-close{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s}
.sag-listen-floating .sag-listen-fullscreen{min-height:44px;white-space:normal}
.sag-listen-floating:focus{outline:none}
.sag-listen-floating:fullscreen{width:100%;height:100%;max-height:none;max-width:none}
.sag-listen-floating:-webkit-full-screen{width:100%;height:100%;max-height:none;max-width:none}
@media(prefers-reduced-motion:reduce){.sag-listen-floating-controls,.sag-listen-floating .sag-listen-close{transition:none}}