/* ============================================================
   PF2026 — Bannière de l'app officielle Elite4 (toutes les pages)
   Gabarit : inc/elite4-app.php · JS : assets/js/elite4-banner.js
   ============================================================ */

.e4-banner {
  position: relative; z-index: 210; color: #fff;
  background: linear-gradient(90deg, #0E1550, #1B2A86 60%, #0E1550);
  border-bottom: 2px solid #E8B931;
}
.e4-banner[hidden] { display: none; }
.e4-banner__inner { display: flex; align-items: center; gap: 12px; min-height: 56px; padding-top: 7px; padding-bottom: 7px; }
.e4-banner__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(232, 185, 49, .5); }
.e4-banner__text { margin: 0; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.e4-banner__text b { font-size: 14px; color: #F3CF5A; }
.e4-banner__text span { font-size: 12.5px; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e4-banner__stores { margin-left: auto; display: flex; gap: 8px; flex: none; }
.e4-store {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 9px;
  background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .35); transition: transform .15s ease, border-color .15s ease;
}
.e4-store:hover { transform: translateY(-1px); border-color: #E8B931; color: #fff; }
.e4-store span { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.e4-store small { font-size: 9.5px; font-weight: 500; letter-spacing: .02em; opacity: .85; }
.e4-banner__close { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.e4-banner__close:hover { background: rgba(255, 255, 255, .22); }

/* Un seul bouton sur mobile : celui du store de l'appareil. */
.e4-banner.is-ios .e4-store--android,
.e4-banner.is-android .e4-store--ios { display: none; }

@media (max-width: 640px) {
  .e4-banner__inner { gap: 10px; min-height: 52px; }
  .e4-banner__icon { width: 36px; height: 36px; }
  .e4-banner__text b { font-size: 13px; }
  .e4-banner__text span { font-size: 11.5px; }
  .e4-store { padding: 5px 9px; }
  .e4-store small { display: none; }
  .e4-store span { font-size: 12.5px; }
  .e4-banner.is-desktop .e4-store--android { display: none; }
}
@media (max-width: 380px) {
  .e4-banner__text span { display: none; }
}