@import url('variables.css');
/* Couche v51 ciblée : interactions performantes et commandes tactiles accessibles. */
:where(button, select, summary, [role="button"], .file-label, .audio-row, .settings-theme-option, .settings-close, .settings-done, .settings-motion-row) {
  min-block-size: var(--v51-touch-target, 48px);
}
:where(button[aria-label], [role="button"][aria-label], .settings-close) {
  min-inline-size: var(--v51-touch-target, 48px);
}
:where(button, a, [role="button"], .mode-card, .universe, .settings-theme-option) {
  transition: var(--v51-motion-transition, transform 250ms ease-out, opacity 250ms ease-out) !important;
}
:where(button, select, summary, [role="button"], .file-label, .settings-theme-option):focus-visible {
  outline: var(--v51-focus-ring, 3px solid #174e3c);
  outline-offset: 3px;
}
#offline-status:not([hidden]) {
  display: block !important;
  color: var(--ink, #183b2e);
  font-size: max(.9rem, 14px);
  line-height: 1.45;
}
#app-update-notice51 {
  position: sticky;
  z-index: 15000;
  top: max(8px, env(safe-area-inset-top));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 12px;
  padding: 12px 14px;
  border: 2px solid var(--green, #174e3c);
  border-radius: 14px;
  background: var(--paper, #fffdf4);
  color: var(--ink, #183b2e);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
#app-update-notice51[hidden] { display: none; }
#app-update-notice51 p { flex: 1 1 220px; margin: 0; font-size: 14px; line-height: 1.45; }
#app-update-notice51 button { min-block-size: var(--v51-touch-target, 48px); padding: 9px 14px; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}