/* Altear — styles « web app » : carte d'installation iOS, bandeau de mise à jour, mode standalone. */

/* --- Carte d'installation (au-dessus du dock) --- */
.pwa-install {
  position: fixed; z-index: 46;
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px);
  max-width: 420px; margin-inline: auto;
  display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 12px; border-radius: 22px;
  background: rgba(14, 16, 26, .72);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .14));
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .1);
  color: var(--text, #f2f3f8);
  opacity: 0; transform: translateY(24px);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}
.pwa-install.is-in { opacity: 1; transform: none; }
.pwa-install-logo { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.pwa-install-body { flex: 1 1 auto; min-width: 0; }
.pwa-install-title { margin: 0 0 2px; font-size: .9375rem; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.pwa-install-steps { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--muted, #a1a4b8); }
.pwa-share {
  display: inline-block; width: 1.25em; height: 1.25em; margin: -.2em .1em; vertical-align: middle;
  fill: none; stroke: #a78bfa; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.pwa-install-close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted, #a1a4b8);
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.pwa-install-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pwa-install-close:active { background: rgba(255, 255, 255, .08); }
.pwa-install-close:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pwa-install, .pwa-update { background: rgba(14, 16, 26, .96); }
}

/* --- Bandeau « Nouvelle version disponible » (en haut, sous l'encoche) --- */
.pwa-update {
  position: fixed; z-index: 60; left: 50%; top: calc(env(safe-area-inset-top) + 8px);
  width: max-content; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px;
  background: rgba(14, 16, 26, .78);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .14));
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .1);
  color: var(--text, #f2f3f8); font-size: .875rem;
  opacity: 0; transform: translate(-50%, -24px);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}
.pwa-update.is-in { opacity: 1; transform: translate(-50%, 0); }
.pwa-update-btn {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 650; color: #05060a; background: linear-gradient(135deg, #a78bfa, #818cf8 55%, #22d3ee);
  -webkit-tap-highlight-color: transparent;
}
.pwa-update-btn:active { transform: scale(.97); }
.pwa-update-btn:disabled { opacity: .6; }
.pwa-update-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Page hors ligne --- */
.offline .offline-logo { border-radius: 18px; margin: 0 auto 20px; }
.offline h1 { margin: 0 0 12px; font-size: clamp(2rem, 8vw, 3rem); letter-spacing: -.04em; }
.offline .lead { max-width: 34ch; margin: 0 auto 28px; color: var(--muted, #a1a4b8); }

/* --- Mode application (écran d'accueil) --- */
html.is-standalone, html.is-standalone body { overscroll-behavior-y: none; }
html.is-standalone a, html.is-standalone button, html.is-standalone img { -webkit-touch-callout: none; }
html.is-standalone .nav, html.is-standalone .nav-links, html.is-standalone .dock, html.is-standalone .btn,
html.is-standalone button, html.is-standalone .pwa-install, html.is-standalone .pwa-update {
  -webkit-user-select: none; user-select: none;
}
html.is-standalone img { -webkit-user-drag: none; }
/* Barre d'état translucide : l'en-tête descend sous l'encoche / la Dynamic Island.
   (< 760 px, style.css le fait déjà ; on couvre ici iPad et grands écrans.) */
@media (min-width: 760px) {
  html.is-standalone .nav { height: calc(var(--nav-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  html.is-standalone .nav.is-compact { height: calc(56px + env(safe-area-inset-top)); }
}
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
  a, button { -webkit-touch-callout: none; }
  .nav, .dock, .btn, button { -webkit-user-select: none; user-select: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install, .pwa-update { transition: none; }
}
@media print { .pwa-install, .pwa-update { display: none !important; } }