/* ═══════════════════════════════════════════════════════════════════════
   pwa.css — Bannière « Ajouter à l'écran d'accueil » + fenêtre iOS + bouton
   « Sortie audio ». Aux couleurs de SpotX. Rien ne s'affiche tant que le
   JS ne montre pas l'élément (les deux blocs sont masqués par défaut).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bannière d'installation (bas de l'écran) ─────────────────────────── */
.pwa-banner{
  position:fixed;
  left:50%;
  bottom:calc(var(--player-h, 90px) + 14px);
  transform:translate(-50%, 140%);
  z-index:6000;
  width:min(440px, calc(100vw - 24px));
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:#181818;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.55);
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s;
}
.pwa-banner.show{transform:translate(-50%,0);opacity:1}
.pwa-banner__icon{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  object-fit:cover;background:#000;
}
.pwa-banner__txt{flex:1;min-width:0}
.pwa-banner__title{font-size:.92rem;font-weight:700;color:#fff;line-height:1.2}
.pwa-banner__sub{font-size:.78rem;color:#b3b3b3;margin-top:2px;line-height:1.25}
.pwa-banner__btn{
  flex-shrink:0;
  background:#1db954;color:#000;font-weight:700;font-size:.82rem;
  padding:9px 16px;border-radius:20px;transition:background .15s, transform .1s;
}
.pwa-banner__btn:hover{background:#1ed760}
.pwa-banner__btn:active{transform:scale(.96)}
.pwa-banner__close{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  color:#b3b3b3;font-size:1.1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.pwa-banner__close:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ── Fenêtre d'instructions iPhone ────────────────────────────────────── */
.pwa-ios-overlay{
  position:fixed;inset:0;z-index:7000;
  background:rgba(0,0,0,.6);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .2s;
}
.pwa-ios-overlay.show{opacity:1}
.pwa-ios-card{
  width:min(460px,100vw);
  background:#181818;
  border-top-left-radius:18px;border-top-right-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  padding:22px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.pwa-ios-overlay.show .pwa-ios-card{transform:translateY(0)}
.pwa-ios-card h3{font-size:1.15rem;color:#fff;margin-bottom:4px;text-align:center}
.pwa-ios-card p.sub{font-size:.85rem;color:#b3b3b3;text-align:center;margin-bottom:18px}
.pwa-ios-step{
  display:flex;align-items:center;gap:14px;
  padding:12px 4px;border-top:1px solid rgba(255,255,255,.07);
}
.pwa-ios-step:first-of-type{border-top:none}
.pwa-ios-step .num{
  width:26px;height:26px;flex-shrink:0;border-radius:50%;
  background:#1db954;color:#000;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}
.pwa-ios-step .icon{width:26px;height:26px;flex-shrink:0;fill:#1db954}
.pwa-ios-step .lbl{font-size:.92rem;color:#fff;line-height:1.35}
.pwa-ios-step .lbl b{color:#fff}
.pwa-ios-close{
  margin-top:18px;width:100%;padding:12px;border-radius:22px;
  background:rgba(255,255,255,.1);color:#fff;font-weight:700;font-size:.92rem;
}
.pwa-ios-close:hover{background:rgba(255,255,255,.16)}

/* ── Fenêtre « Sortie audio » ─────────────────────────────────────────── */
.pwa-sink-list{display:flex;flex-direction:column;gap:6px;margin:6px 0 2px}
.pwa-sink-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.04);transition:background .12s;text-align:left;width:100%;
}
.pwa-sink-item:hover{background:rgba(255,255,255,.09)}
.pwa-sink-item.active{background:rgba(29,185,84,.14);border:1px solid rgba(29,185,84,.4)}
.pwa-sink-item .ico{width:22px;height:22px;flex-shrink:0;fill:#b3b3b3}
.pwa-sink-item.active .ico{fill:#1db954}
.pwa-sink-item .name{flex:1;color:#fff;font-size:.9rem}
.pwa-sink-item .check{color:#1db954;font-weight:700}
.pwa-sink-note{
  font-size:.82rem;color:#b3b3b3;line-height:1.4;
  background:rgba(255,255,255,.04);border-radius:10px;padding:12px 14px;margin-top:6px;
}